Основа работы с каскадными таблицами стилей — CSS



Стили CSS

CSS (Cascading Style Sheets) каскадные таблицы стилей — язык описания внешнего вида документа, написанного с использованием языка разметки. Чтобы было понятнее — таблицы стилей нужны для создания личного раздела, для редактирования дизайна HTML-страниц собственного сайта.

В процессе создания сайта, мы сразу же сталкиваемся с тем, что необходимо осваивать HTML и CSS хотя бы на начальном уровне. В этом разделе начнём осваивать стили CSS и попробуем написать свои, так как только CSS поможет сделать ваш сайт уникальным.

Таблицы стилей бывают двух типов — внутренние и внешние, в зависимости от того, где расположены стили, непосредственно на самой странице (внутренние), или во внешнем файле, связанном с веб-страницей определённым адресом.

Внутренняя таблица это набор стилей, которые являются частью HTML кода веб-страницы и всегда должны находиться меду элементами <style> и </style> в теле тега <head>, пример:

<head>

<style>

hr { color: sienna; }

p { margin-left: 20px; }

h1 { margin: 30px auto 0px center; }

body { background-image: url(«img/back40.gif»); }

</style>

</head>

Теги <style> и </style> сообщают вашему браузеру, что данные, расположенные между ними, являются CSS кодом. Такие таблицы стилей являются не самым лучшим способом для проектирования дизайна сайта, состоящего из большого количества страниц.

Во-первых, такой код придётся копировать и вставлять в каждую страницу, а ещё труднее будет потом всё это редактировать при новых изменениях. Во-вторых, каждый такой вставленный код во много раз увеличивает размер HTML кода на странице в целом, в следствии чего, страница будет дольше загружаться. Можно писать стили даже отдельно для каждого тега, пример для тега «DIV» — <div style=»border: 1px solid red; background-color: yellow;»>Элемент DIV</div>. Минус от такого типа стилей заключается в больших неудобствах, смешивается структура HTML документа и стилизация CSS, поиск и правка таких стилей занимает достаточно много. времени.

Встроенный стиль можно использовать в тех случаях, когда необходимо определить стиль только для одного элемента, и нет более удобного способа это сделать. Тем не менее, почти всегда можно избежать применение встроенного стиля, добавив к нужному элементу уникальный идентификатор или класс.



Блочная вёрстка

Внешняя таблица стилей, это обычный текстовый файл, содержащий в себе весь CSS-код. В его содержимое не должны входить никакие „HTML-теги”, поэтому тег <style> в нём указывать не надо, при сохранении текстового файла со стилями надо установить имя файла (которое может быть любым), но обычно это „style” и с расширением „.css”.

Для подключения внешней таблицы стилей, вам нужно прикрепить её к HTML-документу с помощью тега <link>, который должен располагаться внутри тега <head>.

<head>

<link href=»styles.css» rel=»stylesheet» type=»text/css» >

</head>

Тег <link> должен содержать три атрибута:

1.href=»styles.css» — определяет название и расширение внешнего CSS-файла, который может отличаться в зависимости от того, где вы его храните, к примеру в папке CSS — «css/styles.css»

2.rel=»stylesheet» — указывает тип ссылки; в данном случае это ссылка на таблицу стилей-.css

3.type=»text/css» — указывает тип файла, на который ссылается тег

К страницам можно присоединять множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых будет указывать на свой файл с таблицей стилей — основной и для мобильной версии и т.д.

Плюс от использования внешних таблиц стилей заключается в том, что если потребуется внести изменения в CSS-код при большом количестве страниц на сайте, то отредактировать CSS-код придётся только в одном файле, а не во всех HTML-документах.

Это самые необходимые понятия и основные правила, которые могут пригодиться для начальной работы с таблицами стилей CSS, желаю всем дальнейшей удачи в освоении материала.

2020-09-22

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *