ОСНОВЫ CSS3
При разработке сайтов необходимо не только выстроить структуру, но и оформить согласно разработанному макету. В этом нам помогает специальная технология CSS(Cascading Style Sheets) - каскадная таблица стилей.
Что такое CSS?
Каскадная таблица стилей CSS - код, который используется для стилизации веб-страницы. Обычно CSS-стили используются для документов формата HTML и XHTML, но так же могут применяться и для любого вида XML-документа.
Каскадные таблицы описывают правила форматирования элементов посредством свойств и их значений. На каждый элемент используются свои правила стилей, остальные не будут применяться и оказывать никакого влияния.
Проще говоря, если вы хотите сделать текст жирным или покрасить его в красный цвет или разместить элемент на странице по своему, то вам поможет CSS.
Давайте рассмотрим на примере.
Для каждого абзаца заданы свои стили для шрифтов. В первом мы установили жирный шрифт, во втором стандартная жирность шрифта, а в третьем мы установили цвет шрифта.
Разберем подробнее одно из стилевых правил:
p - селектор
font-weight - свойство
bold - значение
color - свойство
brown - значение
Согласно принятому синтаксису каждое стилевое правило нужно заключать в фигурные скобки, после указанного селектора.
Виды таблиц стилей
Существует несколько вариантов использования таблиц стилей, так мы рассмотрим Внешнюю таблицу стилей, Внутренние стили, Встроенные стили и правило @import.
Внешняя таблица стилей.
Это отдельный текстовый файл с расширением .css в котором содержится набор стилей элементов. Содержимое файла состоит только из стилевых правил и подключается к файлу html посредством тега <link>. Тег располагается внутри раздела <head></head>. Также необходимо указать и тип ссылки rel=”stylesheet”.
Пример: <link rel="stylesheet" href="css/style.css">
Внутренние стили.
Данный вид оформления используется не как ссылка на файл, а напрямую в разделе <head></head>. Для указания стилей используется специальный тег <style></style>. Приоритет стилей в данном случае будет выше у внутренних стилей над внешними, однако у встроенных приоритет над предыдущими выше.
Давайте рассмотрим на примере:
Встроенные стили
Встроенные стили прописываются напрямую в теге элемента с помощью атрибута style.
Рассмотрим пример встроенных стилей:
Правило @import
Позволит загрузить внешнюю(ие) таблицу(ы) стилей. Правило необходимо указать либо в отдельном css файле, либо в разделе <head></head> перед всеми остальными правилами.
Пример:
Резюмируем
В этом обзоре мы рассмотрели что такое CSS(каскадная таблица стилей), как выглядят стилевые правила и как их можно подключить к нашему html документу. В следующей части мы разберем какие бывают селекторы и подробнее рассмотрим несколько популярных стилевых правил.