КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
CSS
Назначение каскадных таблиц стилей
CSS (Cascading StyleCSSSheets) – совокупность правил форматирования элементов Web-страницы
Стиль CSS связывается с соответствующим HTML- элементом и указывает браузеру, как воспроизводить этот объект на экране
CSS служат для раздельного хранения содержания
иформы представления Web-документа
CSS сохраняют логическую (содержательную) структуру Web-страницы, но позволяют произвольно форматировать и изменять положение HTML-элементов на странице
CSS стили загружаются в память браузера один раз
ииспользуются для всех страниц сайта без повторной загрузки (принцип кэширования)
Основные возможности стилей CSS
Устанавливать точный размер символов
Задавать отступы при размещении текста
Устанавливать поля Web-страницы и элементов блочного уровня
Устанавливать интервалы между буквами, словами, строками и абзацами текста
Задавать точное расположение элементов на странице
Изменять форму отображения элементов
Воспринимать команды программ для динамического управления представлением содержания Web-страницы
Типы каскадных таблиц стилей CSS
1.Стиль браузера (правила стиля не объявлены)
2.Стиль пользователя (задаются для браузера пользователем)
3.Встроенный стиль (для HTML-элемента)
4.Внедренный стиль (для Web-страницы)
5.Связанный стиль (во внешнем css-файле)
6.Импортированный стиль(во внешнем css- файле)
Каскад – это иерархия применения стилей: 1 – 2 – 3 – 4 – 5,6
Правила стиля CSS
Таблицы стилей CSS состоят из списков правил стиля для HTML-элементов и именованных селекторов
Правило стиля состоит из двух компонент:
селектор – элемент, который подвергается форматированию
объявление – описание, как должен отображаться элемент в браузере Например:
h1 {color: red; font-size: 12px}
Правила стилей для именованных селекторов:
h1.имя {объявление} – имя селектора для заголовка h1
.имя {объявление} – имя селектора для любых элементов
#имя {объявление} – имя селектора для одного элемента
Включение CSS-стилей
Подключение CSS-стилей происходит:
в HTML-элементах страницы
в заголовке страницы
ссылкой на внешний текстовый файл
Для включения CSS-стиля используются
4 HTML-дескриптора (тега) для модификации всего документа, его части или отдельного HTML-элемента:
<span>, <div>, <style>, <link>
и 3 атрибута для модификации HTML- элемента, включающего этот атрибут: style, class, id
Использование
дескрипторов
<span> - для стилизации текста в составе
абзаца
<div> - для стилизации фрагментов
блокового уровня (абзац, несколько абзацев)
Для этих дескрипторов необходимо либо непо-средственно задавать стиль через атрибут style:
<span style=“CSS-правила”>…</span>
либо делать ссылку через атрибуты class или id на стили, определенные в дескрипторах <style> или <link>:
<div class=“имя”>…</div>
Использование
дескрипторов
Дескриптор <style> в заголовке страницы <head> определяет стили отдельных HTML- элементов, а также имена стилей для атрибутов id и class:
<style>
body {font-size: 24px} #rd {color: #ff0000}
.gr {color: #00ff00} </style>
Дескриптор <link> |
ссылается на |
внешний текстовый файл с расширением *.css
<link href=“st1.css” rel=“stylesheet” type=“text/css” />
Основные принципы использования CSS-
Группировка: стилей
<style>
h1, h2, h3 {font-famaly: helvetica} </style>
<p style=“font-size:12pt; font-famaly: courier; color: green”>
Наследование – дочерние дескрипторы наследуют CSS-стили, определенные для родительских дескрипторов (например, <body> родитель для <p> и т.п.)
Очередность применения CSS-стилей в Web-
документе
CSS-выражения сортируются по «весу»,
наибольший вес имеет CSS-выражение, помеченное как !important
Более частные CSS-выражения приоритетнее более общих
Если CSS-выражения имеют одинаковый вес, то выполняется то, которое было задано последним
Если стиль для дочернего элемента не задан, то выполняется стиль родительского элемента
Стиль, импортированный через <link>, имеет самый низкий приоритет