- •Каскадные таблицы стилей
- •Встраивание таблицы стилей css в html документ
- •1. Вставка непосредственно html документ. Контейнерный тег style
- •2. Вставка непосредственно в элемент. Переопределение стиля
- •3. Связывание с таблицей стилей в отдельном файле.
- •4. Импорт описания стилей
- •Типы носителей
- •Правила форматирования таблиц стилей
- •Селектор – имя тега
- •Селектор - имя класса
- •Селектор – имя идентификатора
- •Правила применения стилей
- •Форма записи
- •Чем ниже, тем главнее
- •Значения
- •Комментарии
- •Стилевые свойства Шрифт
- •Список семейств шрифтов (font-family)
- •Размер шрифта или кегль(font-size)
- •Начертание
- •Свойства текстовых фрагментов Межбуквенные расстояния
- •Выравнивание
- •Преобразование шрифта
- •Первая строка параграфа
- •Межстрочное расстояние
- •Управление цветом в css
- •Цвет текста
- •Цвет фона текста
- •Форма "пулек"
- •"Пульки"-картинки
- •Свойства полоса прокрутки
- •Единицы измерения css
- •Относительные единицы
- •Абсолютные единицы
- • Попробуем сами
Встраивание таблицы стилей css в html документ
Для применения каскадной таблицы стилей к гипертекстовому документу необходимо ее связать с ним или встроить в него. Сделать это возможно одним из 4 способов.
1. Вставка непосредственно html документ. Контейнерный тег style
Применение элемента STYLE - это способ внедрения каскадных таблиц стилей в ткань HTML-документа. Элемент STYLE позволяет определить стиль отображения для:
стандартных элементов HTML-разметки
произвольных классов (селектор class)
HTML-объектов (селектор id)
Стандартные элементы разметки описываются в элементе STYLE следующим способом:
<head> <style> p {color:darkred;text-align:justify;font-size:8pt;} </style> </head> <body> ... <p> Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки. </p> ... </body>
Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопределен каким-либо способом. В STYLE можно определить стиль любого элемента разметки.
2. Вставка непосредственно в элемент. Переопределение стиля
Переопределением стиля в элементе разметки называют применение атрибута STYLE у данного элемента разметки: <h1 style="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок первого уровня </h1>
Заголовок первого уровня
Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr (горизонтальное отчеркивание): <hr style="width:100px;">
Следует помнить, что данный вид встраивания рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.
3. Связывание с таблицей стилей в отдельном файле.
Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять из себя файл, содержание которого - описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.
Ниже приведен пример ссылки на внешнее описание стилей: <link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">
Важными здесь являются значения атрибутов rel и type.
Rel обязан иметь значение "stylesheet".
Type принимает значения: "text/css".
Атрибут href задает адрес внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.
Использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
4. Импорт описания стилей
Еще один способ добавления стиля - импорт описателей стилей. Это в некотором смысле конкурент описанному выше указанию на внешний описатель стиля. Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей: <style> @import:url(http://kuku.ru/style.css) a {color:cyan;text-decoration:underline;} </style>
Этот метод допускается использовать совместно со связанными или контейнерными стилями, но никак не со встроенными стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него.
@import "/style/palm.css";
BODY {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 90%;
background: white;
color: black;
}
В данном примере показано содержимое файла mysite.css, который затем добавляется к нужным документам с помощью тега <link>.
Совет. Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем стиль на странице и в последнюю очередь связанный стиль.