Основа работы с каскадными таблицами стилей — 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, желаю всем дальнейшей удачи в освоении материала.