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

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

Селекторами называются имена стилей, в которых указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, классы и идентификаторы (ID).

Селекторы тегов

Селектором может быть любой тег HTML. Для него определяются правила форматирования, такие как цвет, фон, размер и др. Правила задаются в виде:

Тег { Параметр: Значение; }

В качестве параметров используются свойства стиля.

Пример 1. Изменение тега параграфа

<html>

<head>

<style type="text/css">

P { text-align: justify }

</style>

</head>

<body>

<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>

<p>Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.</p>

</body>

</html>

При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.

После того, как стиль тега переопределен, можно использовать данный тег как обычно. Но при этом его назначенные свойства будут уже другими. Так, в примере, к тегу параграфа P применяется выравнивание по ширине.

Селекторы Class

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

Тег.Имя класса { Параметр: Значение; }

Чтобы указать, что тег используется с определенным стилем, к нему добавляется параметр class="Имя класса".

Пример 2. Использование классов c тегами

<html>

     <head>

     <style type="text/css">
P { text-align: justify;}// обычный параграф
P.cite { text-align: justify; color:navy; font-style: italic; }// параграф с классом cite

     </style>

     </head>
<body>

<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>
<p class=cite>Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.</p>

</body>

</html>

При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.

Первый абзац выровнен по ширине с текстом черного цвета, а следущий, к которому применен класс cite - написан курсивом синего цвета.

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

.Имя класса { Параметр: Значение; }

При такой записи, класс можно применять к любому тегу.

Пример 3. Использование классов c тегами

<html>

     <head>

     <style type="text/css">
.cite { color: navy; font-style:
     italic; }

     </style>

     </head>
     <body>

       <p class=cite>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>
<p><b class=cite>Предельно допустимая длина</b> ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.</p>


       </body>

       </html>

При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.

Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.

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

Теги Span и Div

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

Пример 1. Использование тега SPAN

<html>
<head>
<style type="text/css">
.capital { font-size: 150%; color: red; }
</style>
</head>

<body>
<span class=capital>Б</span>уквицаявляется художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой строки основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей.

</body>
</html>

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

Тег SPAN удобен для создания выделений в тексте, буквиц, цитат и др. DIV используется преимущественно для создания слоев.

Пример 2. Использование тега DIV

<div ID=layer1>
<table border="1" bgcolor="#c0c0c0">
<tr><td>Подсказка</td></tr>
</table>
</div>

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

Селекторы ID

Параметр ID задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически.

Синтаксис ID селектора следующий.

#ID селектор { Параметр: Значение; }

Пример 3. Использование идентификатора ID

<div ID=help>
<table width="100%" border="0" cellspacing="0" cellpadding="4" height="100%">
<tr>
<td bgcolor="#FFFFCC">Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.</td>
</tr>
</table>
</table>
</div>

В примере таблица помещена в слой с именем help. Использование идентификатора дает возможность изменять некоторые параметры таблицы, например, делать ее невидимой или видимой по желанию.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...