24 Декабрь, 2020

ОСНОВЫ 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 документу. В следующей части мы разберем какие бывают селекторы и подробнее рассмотрим несколько популярных стилевых правил.



Блог