Основы CSS. Особенности CSS 3

Интернет значительно упрощает поиск нужной информации, обратной стороной, правда, является то, что большинство Интернет - источников попросту пересказывают друг друга, если не дублируют полностью. К примеру, набрав в поисковике CSS, можно очень быстро узнать, что это:

Несколько сложнее узнать, как именно соотносится CSS с HTML, и еще сложнее – почему для оформления HTML документа нельзя обойтись собственными возможностями HTML, тем более, что соответствующие атрибуты присутствуют в большинстве тегов. В качестве введения к данной лекции, мы постараемся внести некоторую ясность в эти вопросы.

Возникновение CSS

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

Первый стандарт HTML не содержал структур, позволяющих отображать текст каким-либо особенным образом, то есть не было никаких средств управления внешним видом информации. Первоначальной задачей было обеспечение доступности информации для любых устройств.

С дальнейшим распространением HTML такие компании, как Microsoft и Netscape стали внедрять свои собственные теги или "улучшать" имеющиеся именно с целью управления оформлением html - документов. Часть внесенных изменений прижилась и "ушла" в массы.

После случилось логически неизбежное, а именно, HTML стал представлять собой набор несовместимых между собой тегов и расширений. Результатом исправления ситуации стал стандарт HTML 3.2, "узаконивший" ряд изменений и устранивший проблемы совместимости.

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

Стандарт HTML 3.2 лишь исправил ряд наиболее серьезных недостатков предыдущих версий. Настоящим же решением проблемы явился стандарт HTML 4.0, в рамках которого было предложено отделить описание структуры html документа от его оформления.

Таким образом, возникновение каскадных таблиц стилей является закономерным результатом эволюционного развития стандартов HTML.

Суть и преимущества CSS

CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида документа, созданного при помощи языка разметки.

Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим в то время на консорциум W3C.

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

К преимуществам использования CSS относятся:

Стандарт HTML 4.0 помимо CSS утвердил и объектную модель браузера (Browser Object Model – BOM), о которой следует сказать отдельно.

Объектная модель браузера описывает содержимое веб - документа, т.е. сама модель является набором объектов, описывающих указанное содержимое. Поскольку BOM уникальна для каждого браузера, возникали проблемы с межплатформенными приложениями. В конечном итоге, на место объектной модели браузера пришла объектная модель документа (Document Object Model – DOM), описывающая стандарт представления веб - страниц в виде набора объектов.

Краткая история CSS

Описание возникновения CSS будет неполным, без краткой истории версий каскадных таблиц стилей.

В настоящее время стандарт CSS3 только разрабатывается. В связи с этим нами перечислен только ряд его новшеств. Подробнее с ними, на данном этапе, предлагается ознакомиться самостоятельно.

Отношения между множественными вложенными элементами

В html - документе элементы (теги) могут находиться в рамках других элементов. Отношения между вложенными элементами могут быть родительскими, дочерними и братскими (в ряде литературы также встречается название сестринские). Поясним эти и иные термины, относящиеся к структуре html - документа:

Дерево документа – воображаемая древовидная структура элементов в html - документе, синоним понятия объектная модель документа (DOM).

Родительский элемент – элемент, содержащий в себе рассматриваемый элемент. В записи вида <p> <strong> ... </strong> </p>, элемент <p> является родительским по отношению к <strong>.

Предок – элемент на несколько уровней выше и содержащий в себе рассматриваемый элемент. Т.е. в записи вида <body>... <p> <strong> ... </strong> </p>... </body>, <body> является предком strong.

Дочерний элемент – элемент, находящийся внутри рассматриваемого документа. В записи вида <p> <strong> ... </strong> </p>, элемент <strong> является дочерним по отношению к <p>.

Потомок – элемент, находящийся внутри рассматриваемого элемента и находящийся на несколько уровней ниже. В записи вида <body>... <p> <strong> ... </strong> </p>... </body>, <strong> является потомком <body>.

Братский элемент – элемент, имеющий общий родительский элемент с рассматриваемым. Т.е. в записи <p> <strong> ... </strong> ... <img ...></p>, элементы <img> и <strong> являются братскими.

Создание каскадных таблиц стилей

Нами было достаточно сказано о причинах возникновения CSS и его возможностях. Рассмотрим формат каскадных таблиц стилей, правила их создания и способах установления связей с html - документом.

В общем виде CSS задается следующим образом:

<селектор> {
 <атрибут стиля №1>: <значение атрибута>;
 <атрибут стиля №2>: <значение атрибута>;
...
 <атрибут стиля №N>: <значение атрибута>;
 }

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

Атрибутом_стиля называется один из параметров элемента веб - страницы (в частных случаях схожи с атрибутами тегов, но следует помнить, что это разные вещи).

CSS стили отделяются друг от друга пробелами, либо символами переноса строк. Не должно быть символов ';' между различными стилями!

В описании селекторов и имен стилей не должно быть пробелов или переводов строк.

Рассмотрим возможные виды селекторов, способы их описания и представление в html - документе.

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

p, .classname, td strong { color: red }

В приведенном примере создается три одинаковых стиля: переопределение тега <p>, стилевой класс classname и комбинированный стиль для тега <strong>, находящегося в рамках тега <td>.

Связь CSS и HTML

Как уже упоминалось, CSS файл является внешним, по отношению к html - документу. Существует несколько способов "привязки" определенного файла стилей к конкретному документу.

Посредством тега <link>, находящимся в рамках парного тега <head>:

<head>
...........
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Атрибут rel указывает на тип подключаемого файла, type – указывает MIME тип файла, href – указывает путь до файла стилей.

Посредством директивы @import, находящейся в рамках парного тега <style>:

<head>
.............
<style type = "text/css">
@import url(style.css)
</style>
</head>

Указанные способы позволяют подключить внешнюю таблицу стилей. Несмотря на наличие явной рекомендации по размещению в отдельных файлах, имеется возможность использования таблиц стилей в рамках самого html - документа:

Таблица стилей располагается в рамках парного тега <style>:

<head>
.............
<style type = "text/css">
p { color: red}
..............
</style>
</head>

Таблица стилей располагается в теле отдельного тега:

<p style="color: red"> ........ </p>

В этих случаях таблица стилей называется внутренней.

Внутренние таблицы полезнее тем, что являются неотъемлемой частью самого html - документа, т.е. веб - страница будет выглядеть, как должна, вне зависимости от доступности внешней таблицы стилей. У данного подхода есть и недостатки:

Правила и каскадность CSS

Итак, существует несколько способов задания связи между CSS и html - документом. Кроме того, к одному и тому же элементу веб - страницы могут быть назначены несколько стилей (к примеру, в рамках самого элемента и во внешней таблице стилей). При этом фактическое отображение элемента регулируется правилами каскадности:

Ключевые термины и определения

CSS – каскадная таблица стилей, язык описания внешнего вида html - документа.

Объектная модель браузера – уникальная для каждого браузера модель представления содержимого веб - документа.

Объектная модель документа – стандарт, регламентирующий представление содержимого веб - документа.

CSS - селектор – описание элемента или их группы, к которым должны быть применены правила стилей.

Внешняя таблица стилей – таблица стилей, располагающаяся во внешнем файле по отношению к html - документу.

Внутренняя таблица стилей – таблица стилей, являющаяся частью html - документа.

Краткие итоги

Основной вывод, который нужно вынести из данной лекции, заключается в следующем: html - разметка документа отвечает за структуру информации (блоки, абзацы, цитаты и т.д.), за управление внешним видом документа отвечает CSS файл (цвет, параметры шрифта, рамки, фон, обтекание и т.д.).

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

Список материалов для самостоятельного изучения