Каскадные таблицы стилей CSS

CSS (Cascading Style Sheets - Каскадные таблицы стилей) – это технология описания внешнего вида документа, написанного языком разметки. Основная идея CSS состоит в том, чтобы отделить описание логической структуры документа (HTML) от его внешнего вида(CSS). Чтобы поменять отображение сайта, достаточно изменить описание стиля. Один и тот же документ с помощью CSS можно отобразить различными способами, например: на экран, печать, голосом, шрифтом Брайля.

Таблицы стилей CSS позволяют уменьшить размер HTML кода, улучшить его читаемость, сократить объем работ разработчиков веб-страниц, менять внешний вид документа без изменения HTML кода. Одна таблица стилей может применяться и к нескольким документам.

CSS используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML.

Способы включения каскадных таблиц стилей

CSS можно включить в HTML-документ четырьмя способами:

Встраивание стиля (inline styles) с помощью атрибута style. Стиль встраивается непосредственно в один из тегов HTML – документа в свойстве style этого тега. Например:

<p style="font-size: 21px; color: green;">текст</p>

<span style="color:red; background-color:yellow;

font-variant:small-caps">Красный текст на желтом фоне,

маленькими заглавными буквами.</span>

Кроме приведенных в примере тегов, стили часто встраиваются в теги h, body.

Считается, что способ встраивания стиля нарушает идеологию CSS.

Внедрение таблицы стилей в заголовок HTML документа (embedded style sheet) с помощью тега style. При этом CSS-стили располагаются между открывающим и закрывающим тегами style. Тег <style> размещается в заголовке HTML-документа между тегами <head> и </head> и содержит определения стилей для всего HTML-документа:

<head>

<!—описание стиля-->

</style>

</head>

Связывание с внешней таблицей стилей. Если предполагается использовать один стиль для нескольких страниц документа или нескольких документов, можно описать стиль в отдельном файле с расширением.CSS, например style.css. Для подключения стилевого файла используется тег <link>, расположенный внутри тега <head>.

<head>

</head>

Первые два свойства указывают браузеру, что на странице используется CSS. Значение последнего свойства - имя файла, в котором прописан стиль страницы.

Импортирование - добавление внешней таблицы стилей при помощи правила @import. В отличие от HTML-тега <link> правило @import является языковой конструкцией CSS и добавляется в элемент style:

<head>

@import "style.css";

</style>

</head>

Свойство @import таблицы стилей следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL файла, содержащего таблицы стилей. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Таблицы стилей не чувствительны к регистру. Текстовые комментарии в таблицах стилей оформляются так же, как и в языке Си:

h1{ color: red } /* color is red */

Стили

Стиль – это правило, описывающее форматирование фрагмента документа. Каждое правило состоит из селектора и определения. Селектор определяет, на какую часть документа распространяется правило, а определение задает значения его свойств в фигурных скобках.

Selector{ Property1: value1 value2; Property2: value3 value4; Property3: value5 value6;}Селекторы правил CSS могут быть селекторами элементов (тегов HTML), селекторами классов, селекторами псевдоклассов, селекторами идентификаторов, селекторами потомков и др.

В фигурных скобках после селектора задаются значения свойств. Если у свойства несколько значений, то значения отделяются друг от друга пробелами. Описания свойств отделяются друг от друга точкой с запятой.

Селектором может быть любой элемент HTML, например

html {color: black;}

p {color: red;}

h2 {font-size: 110 %;}

Рассмотрим пример использования таблицы стилей, определяющей стиль заголовков первого уровня h1:

<html>

<head>

h1 {font-weight:bold; color:red;}

</style>

</head>

<body>

<h1>Жирный заголовок красного цвета </h1>

</body>

<html>

Ниже приводится пример более сложного кода CSS, встраиваемого в теги HTML, в том числе в теги body и html.

<html>

<head>

<title>Пример css, встраиваемого в HTML страницу</title>

html {color: black; }

p {color: red;}

h1{font-family: arial; font-weight: bold; font-size: 14pt; color:green;}

h2{font-family: arial; font-size: 110 %; color:black;}

</style>

Текст из раздела Head

</head>

<body>

<h1>Примеры CSS - это заголовок H1</h1>

<p>

пример кода CSS, встраиваемого в HTML страницу. <br>

Этот код должен располагаться внутри элемента head. Селектором является тег body

</p>

<h2>Примеры CSS - это заголовок H2</h2>

Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, <br>жирный шрифт Comic Sans MS размером 14 пикселей и выровненный по обоим краям с <br> отступами со всех сторон 10 пикселей.

</body>

</html>

По традиции для совместимости со старыми браузерами, не понимающими CSS содержимое элемента <style> могут заключать в комментарий . Новые браузеры поймут, что в комментариях заключена таблица стилей и подключат ее. В старых браузерах содержимое не будет отображено в окне браузера. В таблицу стилей можно ставить любое количество пробелов и переносов строк, браузер оставит столько, сколько нужно.

Значения свойств, являющихся адресами устанавливается следующим образом: url(адрес).

Группирование. Если двум селекторам присваивается одинаковое определение, то их можно записывать через запятую:

h1, h2 {

font-family: arial

}

Если селектор имеет несколько определений:

h1{font-weight:bold} h1 {font-size: 14pt}

то они записываются через точку с запятой:

h1 {font-weight: bold; font-size: 14pt;}

Наследование. При определении стиля элемента, вложенные элементы наследуют свойства головного элемента. Например, если в параграфе <p> задается красный цвет шрифта, то выделенный с помощью <b> текст также будет красным:

<p style=”color: red;”>Внутри параграфа с красным цветом текста, <b>выделенный текст</b> наследует цвет головного тега.</p>

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого достаточно описать стиль тега <body>, порождающего остальные элементы документа.

При сложении стилей приоритет имеют атрибуты, определенные в более конкретном стиле. Стили в порядке убывания конкретности: <body>, остальные теги html, CSS – классы, комбинированные стили, встроенные стили.

CSS- Классы

Чтобы иметь возможность отображать одни и те же элементы в разных случаях по-разному, необходимо использовать классы. Это позволяет для каждого тега использовать несколько стилей. Свойства класса присваиваются данному тегу с помощью атрибута class: class="classname". Имя класса и его свойства должны быть определены в виде селектора класса:

.classname{свойства}

Это можно продемонстрировать на следующем примере:

<html>

<head>

<title>Использование классов</title>

html{color:green;}

.font1 {

color: yellow;

background: red;

}

.font2 {

color: blue;

background: yellow;

}

</style>

</head>

<body>

<span class="font1">Желтый текст на красном фоне</span>

<span class="font2">Синий текст на желтом фоне</span>

А здесь цвет фона и текста заданы тегом HTML

<tr>

<td>Это ячейка1 </td>

<td>это ячейка2</td>

</tr>

</table>

</body>

</html>

В примере определены два класса «font1» и «font2» задающие цвет фона и изображения. Эти классы были затем применены к тегу <span>. Свойства класса, могут быть присвоены любому тегу, который обладает свойствами, описанными в классе. Например, класс font2 может быть применен к таблице:

Если необходимо поменять стиль выделения текста с помощью класса

.select{color:red;}

во всем документе с красного, на другой цвет, то достаточно поменять значение цвета в определении этого класса. Изменения вступят в силу сразу же во всем документе. Если на всех страницах сайта подключается один и тот же стилевой файл, то изменение свойств класса в этом файле приведет и к изменению стиля соответствующий тегов на всех страницах сайта.

.select{ font-size: 9pt; color:green }

Начинающийся с точки класс определяет универсальный класс, который может быть применен к любому тегу при помощи конструкции:

<p class=select>Накладываем стиль на этот текст</p>

Если необходимо определить класс не для любого, а только для конкретного тега, то используется конструкция:

имя_тега.имя_класса {свойства}

Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован. Это так называемые теговые классы:

p.small { font-size: 9pt; }

<p class=small>Этот текст будет выведен стилем small</p>

Рассмотрим, например, случай когда нам нужно часть текста выделить красным. Определим класс select для тега <span>:

<html>

<head>

<title>Использование классов</title>

span.select {color: red;}

</style>

</head>

<body>

Здесь мы выделили <span class="select">часть текста красным.</span>

</body>

</html>

Значением class может быть множественный класс-список слов, разделенный пробелами. Например:

<p class=”urgent warning”>Опасность! Предупреждение!</p>

Чтобы выделить курсивом все элементы, атрибут class которых имел значение ”urgent warning”, нужно описать множественный класс следующим образом:

.warning.urgent {font-style: italic;}

Объединяя 2 селектора класса, можно выбрать только те элементы, которые имеют оба имени класса, стоящие в любом порядке.

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

Тег <div> подобен <span>, но только с тем отличием, что делает до и после себя отбивку (так же, как и <p>). Стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега <p>, а не определением отдельного класса.

Можно определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля перечислим их через запятую:

p, td { font-size: 9pt; color:green;}

Селекторы идентификаторов (ID-селекторы)

ID-селекторы используются для определения уникальных частей веб-страницы. При объявлении стиля перед ID-селектором ставится #:

#green {color: green;}

Затем HTML элементу, подлежащему форматированию, присваивается соответствующее значение атрибута id:

<p id=”green”>Text</p>.

Символы “#” и ”.” используются только при описании стилей в таблицах. При вставке имени идентификатора или класса в HTML-теги их указывать не нужно!

Что использовать – классы или идентификаторы? Для стиля, используемого неоднократно, применяются классы. Идентификаторы используются, когда необходимо определить разделы страницы, которые встречаются один раз.

Теги div, span и link

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id. Элемент <span> ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста. Пример

<p>Если ты умный, почему не здоровый и не богатый </p>

<p> Если ты умный, то <span class="benefit">здоровый</span>,

и<span class="benefit">богатый</span> </p>

span.benefit {

color:red;

}

Пример. Использование тега <span>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

BODY {

font-family: Arial, sans-serif; /* Рубленый шрифт */

}

.letter {

color: red; /* Красный цвет символов */

font-size: 200%; /* Размер шрифта в процентах */

font-family: serif; /* Шрифт с засечками */

position: relative; /* Относительное позиционирование */

top: 5px; /* Сдвиг сверху */

}

</style>

</head>

<body>

<p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру.

Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p>

<p>Бернард Шоу</p>

</body>

</html>

В то время как <span> используется в элементах уровня блока, <div> применяется для группирования блок-элементов. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:

#democrats {

background:blue;

}

#republicans {

background:red;

}

<ul>

<li>Франклин Д. Рузвелт</li>

<li>Джон Ф. Кеннеди</li>

<li>Билл Клинтон</li>

</ul>

</div>

<ul>

<li>Роналд Рейган</li>

<li>Джордж Буш</li>

<li>Джордж У. Буш</li>

</ul>

</div>

Тег link довольно активно используется разработчиками сайтов для установки связи между HTML документом и CSS файлом:

С помощью тега link можно задавать другие типы ссылок, особенно хорошо подходящие для контент-сайтов, электронных книг и т. п. Кроме того, взаимосвязи, устанавливаемые в head тегом link, позволяют поисковым машинам легче пробираться через дебри сайта. Давайте рассмотрим реальный пример

<head>

…

</head>

Свойства шрифтов (фонтов).