4. CSS – Подключение встроенных и внешних стилей, правила приоритета, комментарии
Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы – это встроенные CSS и внешние CSS.
Встроенный CSS в HTML – элемент
Вы можете встроить CSS-стили в HTML-документ, используя элемент . Этот тег помещается внутри тегов
. . Правила стиля, определенные с использованием этого синтаксиса, будут применяться ко всем элементам, имеющимся в документе. Вот общий синтаксис:Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:
body < background-color: LightGreen; >h1 Заголовок
Абзац.
Получим следующий результат:
Атрибуты
| Атрибут | Значение | Описание |
| type | text/css | Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут. |
| media | screen tty tv projection handheld braille aural all |
Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут. |
Встроенный CSS – атрибут стиля
Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:
Атрибуты
| Атрибут | Значение | Описание |
| style | Правила стиля | Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;). |
Пример
Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:
Встроенный CSS
Получим следующий результат:
Внешний CSS стили – элемент
Элемент может использоваться для подключения внешних CSS файлов в ваш HTML-документ.
Внешняя таблица стилей CSS представляет собой отдельный текстовый файл с расширением .css. Вы определяете все правила стиля в этом текстовом файле, а затем можете подключить CSS файл в любой HTML-документ с помощью элемента .
Вот общий синтаксис подключения внешнего файла CSS:
Атрибуты
Атрибуты ассоциируются с элементами :
| Атрибут | Значение | Описание |
| type | text/css | Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут. |
| href | URL | Указывает файл таблицы стилей с правилами стиля. Обязательный атрибут. |
| media | screen tty tv projection handheld braille aural all |
Указывает устройство, на котором будет отображаться документ. Значение по умолчанию – all. Необязательный атрибут. |
Пример
Рассмотрим простой файл таблицы стилей с именем style.css, имеющий следующие правила:
h1, h2, h3
Теперь Вы можете подключить CSS-файл style.css в любой HTML-документ следующим образом:
Импорт CSS – правило @import
@import – используется для импорта внешней таблицы стилей способом, аналогичным элементу . Ниже приведен общий синтаксис правила @import в CSS:
@import "URL"; Где URL – это url-адрес файла таблицы стилей с правилами стиля. Вы также можете использовать другой синтаксис:
@import url("URL"); Пример
Ниже приведен пример, показывающий Вам, как сделать импорт CSS-файла в HTML-документ:
@import "style.css"; CSS правила приоритета стиля
Мы изучили четыре способа подключения CSS правил в HTML-документ. Вот правило, чтобы переопределить любое правило таблицы стилей:
- Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, она переопределит любое правило, определенное в тегах
или правилах, определенных в любом внешнем файле таблицы стилей.
- Любое правило, определенное в тегах
, переопределяет правила, определенные в любом внешнем CSS-файле.
- Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.
Обработка старыми браузерами
Существует множество старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании встроенного CSS в нашем HTML-документе. Следующий фрагмент кода показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров:
Комментарии в CSS
Вам может потребоваться добавить дополнительные комментарии в свои блоки страниц стилей. Таким образом, оформление комментариев в CSS происходит очень легко. Вы можете просто оставить свои комментарии внутри /*. это комментарий в CSS-файле. */.
Также Вы можете использовать /*. */ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.
Пример
Привет ProgLang!
Получим следующий результат:
Оглавление
- 1. CSS – Самоучитель для начинающих
- 2. CSS – Введение
- 3. CSS – Селекторы
- 4. CSS – Подключение
- 5. CSS – Единицы измерения
- 6. CSS – Цвета