№9 Синтаксис стилей.

Таблицы стилей CSS нечувствительны к регистру, за исключением (возможно) входящих в них элементов, которые не являются объектами CSS.

Комментарии в таблицах стилей заключаются в символы /* и */

/* это комментарий */

Правило стиля представляет собой конструкцию

селектор { блок объявлений }

Селектор указывает, к каким объектам применяется правило стиля. Некоторые виды селекторов описаны в следующем разделе.

Блок объявлений может быть пуст, либо содержит одно объявление, либо представляет собой последовательность объявлений, разделенных символом "точка с запятой"

Объявление представляет собой конструкцию

свойство стиля: список значений

Список значений может представлять собой одно значение, либо (для стенографических свойств ) список значений, разделенных пробелами

color: red;

font-size: 12px;

стенографические свойства (shorthand properties ) позволяют одновременно задать несколько свойств; значения свойств в списке разделяются пробелами. Например, следующее описание задает тонкую пунктирную рамку черного цвета:

border: thin dotted black;

№10 Теги div и span.

Тег DIV — в сайтостроении применяется как удобный контейнер для различных блоков html кода веб-страницы, которым просто манипулировать динамически – перемещать,определять отступы,другими словами — изменять вид содержимого.

Обычно, вид блока управляется при помощи стилей. Содержимое тега <DIV>, как правило начинают с новой строки. Закрывающий тег обязателен! Элемент DIV: <div>...</div>.

<DIV> - контейнер блочного типа, подобно <P>, <TABLE>, <UL>, <DL> и другим. Помещается в потоке подобно блоку, может находиться внутри контейнеров блочного, но не строчного типов.

SPAN — применяется для выделения части информации и присвоения этой части различных стилей. Закрывающий тег обязателен!

Без стилей — сам по себе, элемент SPAN никакого смысла не имеет.

SPAN - контейнер строчного типа, подобно <I>, <STRONG>, <BIG>, <FONT>, <SUB>, <TT> и другим. Помещается в потоке подобно элементу строки, может находиться внутри контейнеров блочного и строчного типов.

№11 Стилевые классы.

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

Назначение стилевого класса HTML элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.

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

Регулярные классы

<style type="text/css">

<!--

p.abstract {font-style: italic;

margin-left: 0.5cm;

margin-right: 0.5cm}

p.equation {font-family: Symbol;

text-align: center}

h1, p.centered {text-align: center;

margin-left: 0.5cm;

margin-right: 0.5cm}

-->

</style>

Приведенный пример показывает: определение стилевого правила для класса состоит в том, что в селекторе к имени тега через точку приписано имя класса. Имя класса может быть любой последовательностью букв, цифр и дефисов, но всегда должно начинаться с буквы, регистр в этом случае имеет значение. Классы входят в селекторные списки наряду с обычными селекторами, отделяясь от других классов и селекторов запятыми. Единственное ограничение, вводимое для классов, состоит в том, что они немогут вкладываться друг в друга, так что конструкция p.equation.centered, например, не является допустимой.

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

<p class=abstract>

This is the abstract paragraph. See how the margins are indented?

</p>

<h3>The equation paragraph follows</h3>

<p class=equation>

a = b + 1

</p>

<p class=centered>

This paragraph's text should be centered.

</p>

Для каждого абзаца значение атрибута class – это имя того стилевого класса, который должен быть применен к данному тегу. Родовые классы Вы можете также создавать классы, не ассоциируя их ни с одним тегом в отдельности, и применять по своему выбору к разнообразным тегам. К примеру:

.italic {font-style: italic}

создает родовой класс по имени italic. Чтобы применить его, просто включите это имя в качестве значения атрибута class в тег.

. ID-классы

Почти все HTML-теги допускают атрибут id, присваивающий элементу уникальный в документе идентификатор.

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

<style>

<!--

#yellow {color : yellow}

h1#blue {color : blue}

-->

</style>

Теперь в документе можно написать <h1 id=blue>, чтобы создать синий заголовок, или вставить id=yellow практически в любой тег, чтобы окрасить его содержимое в желтый цвет. Сочетание атрибутов class и id позволяет в некоторых ограничениях применять к одному элементу два независимых стилевых правила.

Псевдоклассы гиперссылок

Различаются три специальных состояния гиперссылок, созданных при помощи тега (a): неиспользованная, используемая и использованная. Броузер способен изменять внешний вид содержимого тега, обозначая его состояние подчеркиванием, например, или цветом. При помощи псевдоклассов можно управлять тем, как эти состояния отображаются, определяя стили для a: link (неиспользованная), a: active (используемая) и a: visited (использованная).

Псевдокласс :link управляет внешним видом ссылок, которые не выбраны пользователем и не посещались прежде. Псевдокласс :active определяет внешний вид гиперссылок, которые в настоящий момент выбраны и обрабатываются броузером. Псевдокласс :visited устанавливает облик ссылок, которые ранее уже были использованы. Чтобы полностью определить все три состояния тега (a), можно написать:

a:link {color: blue}

a:active {color: red; font-weight: bold}

a:visited {color: green}

Интерактивные псевдоклассы

Стандарт CSS2 определяет два новых псевдокласса, которые вместе с :active реагируют на поступки пользователя и советуют интерактивному агенту, скажем броузеру, как отображать элемент, подвергнувшийся внешнему воздействию. Другими словами, эти два псевдокласса являются динамическими: hover и focus. Например, броузер может изменить вид указателя мыши, когда вы проводите ею над гиперссылкой в документе. Подобный эффект нависания, скорее всего, связан со стилем отображения, который возникает только при условии, что мышь попала в область, принадлежащую элементу. В частности, если вы добавите псевдокласс :hover к списку стилевых правил для гиперссылки из нашего примера:

a:hover {color: yellow}

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

Подобным образом псевдокласс :focus позволяет изменить стиль элемента, который стал объектом внимания. Элемент может попасть в сферу обзора, если вы дошли до него, нажимая клавишу «Tab», щелкнули на нем мышью или – в зависимости от броузера – подвели к нему курсор. Независимо от способа, каким ему уделено внимание, стилевое правило, ассоциированное с псевдоклассом :focus, будет применяться к этому элементу, пока вы не утратите к нему интереса.

Составные классы

Можно соединять псевдоклассы с регулярными классами, приписывая имя псевдокласса к имени класса в селекторе. Вот несколько способов, определяющих простые, нормальные и затейливые якоря:

a.plain:link, a.plain:active, a.plain:visited {color: blue}

a:link {color: blue}

a:visited {color: green}

a:active {color: red}

a.fancy:link {font-style: italic}

a.fancy:visited {font-style: normal}

a.fancy:active {font-weight: bold; font-size: 150%}