НОУ ИНТУИТ | HTML5. Основы клиентской разработки. Лекция 7: Основы CSS. Особенности CSS 3

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Томский политехнический университет

Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 20713 / 2353 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00

Темы: Интернет-технологии, Программирование

Специальности: Программист, Разработчик интернет-проектов

|

Вам нравится? Нравится 505 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица 6.2.
Селектор	Оформление в CSS	Оформление элемента, к которому применяется стиль в HTML	Пояснения
Селектор элементов (переопределение тега)	P {color: red }	<p>...</p>	Стиль будет применен ко всем абзацам документа. Т.е. весь текст, находящийся в рамках парного тега <p> будет выделен красным цветом.
Селектор классов (стилевой класс)	.classname {color: red}	<p class="classname">...</p>	Стиль может быть применен к любому тегу, содержащему атрибут class, значение которого совпадает с наименованием селектора класса.
Селектор идентификаторов (именованный стиль)	#clrRed { color: red }	<p id="clrRed">...</p>	Стиль будет применен к любому тегу, содержащему атрибут id, значение которого совпадает с наименованием селектора стиля. В рамках одной веб страницы значение атрибута id должно быть уникальным. Т.е., фактически, данный стиль может быть применен единовременно только к одному элементу веб - страницы.
Селектор дочерних элементов	#clrRed>strong { color: red}	<p id="clrRed"> <strong>...</strong> </p>	Стиль будет применен ко всем элементам <strong>, находящимся в дочерних отношениях с <p id="clrRed"> и только к ним.
Контекстный селектор (комбинированный стиль)	p strong {color : red}	<p><strong>...</strong></p>	Стиль будет применен к тексту, в рамках тега <strong> следующего за тегом <p>. Фактически стиль привязывается к тегу <strong>.
	p.classname {color: red}	<p class="classname">...</p>	Стиль будет применен ко всем тегам <p>, содержащим атрибут class, значение которого равно classname.
	p.classname <strong> { color: red}	<p class = "classname"> <strong>...</strong></p>	Стиль будет применен к содержимому тега <strong>, находящемуся внутри тега <p>. Атрибут class тега <p>, при этом, должен принимать значение classname.

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

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

В приведенном примере создается три одинаковых стиля: переопределение тега , стилевой класс classname и комбинированный стиль для тега , находящегося в рамках тега <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 - документом. Кроме того, к одному и тому же элементу веб - страницы могут быть назначены несколько стилей (к примеру, в рамках самого элемента и во внешней таблице стилей). При этом фактическое отображение элемента регулируется правилами каскадности:

Внешняя таблица стилей, ссылка на которую встречается в html - документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.
Внутренние таблицы стилей приоритетнее внешних.
Таблицы стилей, располагающиеся в рамках самого элемента (), имеют приоритет, по отношению ко всем остальным стилям.
Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого.
В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.
Атрибуты стиля, объявленные как !important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red !important} сделает весь текст в рамках тегов красным вне зависимости от любых других переопределений стиля для .

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

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

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

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

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

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

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

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

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

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

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

Дальше >>

Авторизоваться

HTML5. Основы клиентской разработки

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