Css структура таблицы стилей

Структура CSS

Для написания таблиц стилей CSS используется свой синтаксис. Общий вид задания свойств элементу выглядит так:

Для удобства чтения и редактирования каждое свойство принято указывать отдельной строкой.

Селектор определяет элемент (или элементы), для которого применяются свойства.

Свойства — это параметры, которые можно изменить у элемента страницы. Для каждого тега доступны различные свойства.

В качестве значений можно использовать ключевые слова (специально определённые в CSS), числа с использованием единиц измерения или функции с параметрами. Пример:

В результате для всех заголовков в документе будет установлен размер шрифта 20 пикселей и цвет шрифта красный.

Чтобы выделить комментарий, необходимо использовать сочетание символов /* и */ . Например:

Как подключить стили к документу?

Таблицы стилей CSS могут располагаться в самом документе или в отдельном файле с расширением .css. Всего существует 4 способа подключения стилей к документу.

Подключение внешнего файла стилей к документу

Описание стилей в начале документа

Описание стилей непосредственно в документе выполняется с помощью тега в заголовке .

Импорт свойств из внешнего файла

Импорт свойств из внешнего файла выполняется с помощью директивы @import в теге .

Описание стилей отдельно в каждом элементе

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

  • Панель навигации
  • Размер шрифта
    1. Автоматически
    2. Самый мелкий
    3. Мелкий
    4. Средний
    5. Крупный
    6. Самый крупный
  • Цветовая схема
    1. Тёмная
    2. Светлая

© 2014-2023 WebGentleman | WG
При использовании материалов сайта ссылка на исходную статью обязательна

О сайте: Основная цель: Предоставить полезную и актуальную информацию по всем этапам создания сайтов. Целевая аудитория: Начинающие пользователи, кто хочет самостоятельно создавать сайты, и опытные веб-разработчики.

Источник

Читайте также:  Css box shadow blur radius
Оцените статью