Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

la_serg

Стильные таблицы

продолжение: начало #52

Сегодня мы поговорим подробнее о синтаксисе CSS.

Селекторы

Как Вы помните, поле CSS представляет собой запись вида:
Селектор {свойство1;свойство2;...;свойствоN}

Селектор - это выражение, определяющее к какому элементу (или классу элементов) относятся последующие свойства. Селекторы бывают элементарные:
P {font-size:14px;color:navy}

Как не сложно догадаться, элементарный селектор выбирает все элементы одного типа, т.е. весь текст внутри любого параграфа (<p></p>) в документе будет размером 15 пикселей и цвета navy (оттенок синего). Если надо выбрать не все элементы <p></p>, а лишь какое-то подмножество, то используются классовые селекторы:
p.class1 {font-size:12px;color:red}
для активации данного стиля необходимо воспользоваться параметром html тега - class:
<p>Это обычный текст</p>
<p class="class1">А это красный текст размером 12 пикселей</p>

В данном случае класс class1 будет применим только для элементов <p></p>. А что делать, если мы хотим описать одинаковый стиль для разнородных элементов (параграфы, ссылки и т.д.)? Описывать класс для каждого элемента отдельно? Вовсе нет! Класс вида
.class2 {font-size:17px;color:green}
будет применим к любому элементу данного документа. Вот эти примеры выглядят одинаково (за исключением текста;)))
<h1 class="class2">Это заголовок h1</h1>
<h2 class="class2">А это заголовок h2, хотя выглядит как предыдущий</h2>

Третий вид селекторов - индивидуальные селекторы. Индивидуальные селекторы используются для придания малому количеству элементов (1-2 элементов) индивидуального стиля. Пример: #id1 {properties}

Для того, чтобы какой либо элемент (например, ссылка <a></a>) получил свойства properties, необходимо использовать параметр id="".
<a href="about:blank" id="id1">текст ссылки</a>

Если написать так:
<a href="about:blank" class="class1" id="id1">вторая ссылка</a>
то ссылка сначала получит стиль, определяемый классом class1, а затем будет добавлен стиль указанный в id1. Если эти два стиля пересекаются в описании каких-либо свойств (например, каждый стиль указывает разный размер шрифта), то результирующий стиль будет иметь свойство указанное в стиле id1. При морфинге (слияние с другими стилями) индивидуальные стили имеют наивысший приоритет, элементарные - низший.

Помимо этих трех основных видов селекторов, существуют так называемые составные селекторы. Составные селекторы выглядят примерно так:
p a {properties}
все теги <a></a> которые находятся внутри тега <p></p> приобретут указанные свойства (properties). Составные селекторы составляются из любых простых (элементарные, классовые и индивидуальные). По стандарту важен порядок, в котором Вы указываете простые селекторы - он определяет порядок вложенности.

Селектор может быть списком: набором простых селекторов через запятую. В этом случае все элементы, перечисленные слева, приобретает свойства указанные справа. Пример:
a, p, h5, strong {color:green}

Все указанные элементы (ссылка, параграф, заголовок 5 и жирный) поменяют свой цвет на зеленый.

Псевдоклассы и псевдоэлемент

Псевдокласс состоит из элементов одного типа, отвечающему определенному критерию. Псевдоклассы и псевдоэлементы при определении отделяются знаком ":". Существует три псевдокласса, вот они:

First Line Pseudo-element (first-line). Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов. Пример:
p:first-line {font-size:110%}
Размер шрифта первой строчки параграфа будет на 10% больше всего остального.
First Letter Pseudo-element (first-letter). То же самое что и first-line, только влияет не на всю строку, а только на первый символ. С помощью этого псевдокласса можно сделать буквицу (это когда первая буква выделяется цветом и размером. Пример:
p:first-letter {color:red;font-size:130%}

Первая буква любого параграфа будет красного цвета и на 30% больше стандартного размера.

Третий класс - Anchor Pseudo Classes - Эти псевдоклассы <a></a>, обозначающего ссылки. Псевдоклассы этого элемента -- link (линк), active (активная ссылка), visited (посещенный ранее URL), hover (при поднесении курсора).

Подробнее о псевдоклассе anchor и о многом другом в следующем номере...

#12(53)/17.04.2001