Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 146
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день.
После выхода предыдущей рассылке меня крепко поправили, сказав, что моя книга «Ускорение работы сайта» продается уже не только в Москве и Питере, но и на Украине. Вот и ответ тем, кто интересовался, будет ли книга доступна на Украине. Не только будет, уже.
На сайте в разделе Книги добавлен новый файл в формате chm JavaScript: работа с формами. Объем в архиве всего 81 Кб. Короче говоря, всем срочно качать!
Скачать JavaScript: работа с формами
Файл разрешается использовать в личных целях, давать друзьям, копировать, выкладывать его в сеть и распространять другими способами.
На сайте обновилось множество статей, особенно изменения коснулись стилей. Сегодня приводятся некоторые интересные выдержки со ссылкой на полный вариант статьи.
Селекторы тегов
Адрес статьи — www.htmlbook.ru/content/50.html
Селектором может быть любой тег HTML. Для него определяются правила форматирования, такие как цвет, фон, размер и др. Правила задаются в следующем виде:
Вначале указывается имя тега, оформление которого будет переопределено, заглавными или прописными символами не имеет значения. После чего внутри фигурных скобок пишется параметр CSS, а после двоеточия — его значение. Набор параметров разделяется между собой точкой с запятой и может располагаться как в одну строку, так и несколько (пример 1).
Пример 1. Изменение тега параграфа<head>
<style type="text/css">
P { text-align: justify; color: green }
</style>
</head>
<body>
<p>При работе на вычислительной технике необходимо сесть
так, чтобы руки с предплечьями образовывали прямой угол, глаза
поставить на расстояние 30-40 см от рабочей поверхности монитора.
Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми
ударами.</p>
</html>
Точку с запятой в конце последнего параметра ставить не обязательно.
При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
После того, как стиль тега переопределен, можно использовать данный тег как обычно. Но при этом его назначенные свойства будут уже другими. Так, в примере, к тегу параграфа P применяется выравнивание по ширине и зеленый цвет символов.
Селекторы Class
Адрес статьи — www.htmlbook.ru/content/51.html
Классы применяются, когда необходимо определить стиль для элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса" (пример 1).
Пример 1. Использование классов c тегами<head>
<style type="text/css">
P { /* Обычный параграф */
text-align: justify /* Выравнивание текста по ширине */
}
P.cite { /* Параграф с классом cite */
text-align: justify; /* Выравнивание текста по ширине */
color: navy; /* Синий цвет текста */
font-style: italic /* Курсивное начертание */
}
</style>
</head>
<body>
<p>При работе на вычислительной технике необходимо
сесть так, чтобы руки с предплечьями образовывали прямой
угол, глаза поставить на расстояние 30-40 см от рабочей
поверхности монитора. Набирать на клавиатуре следует
подушечками пальцев короткими отрывистыми ударами.</p>
<p class=cite>Предельно
допустимая длина ногтей для женщин составляет 12-15
мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы
регламентируемые ГОСТом, во избежании риска поцарапать
поверхность дорогостоящей техники, оператор допускается
к работе на компьютере только в верхонках.</p>
</body>
</html>
Результат примера показан ниже.
При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.
Первый абзац выровнен по ширине с текстом черного цвета, а следущий, к которому применен класс cite — написан курсивом синего цвета.
Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет.
При такой записи, класс можно применять к любому тегу (пример 2).
Пример 2. Использование классов c тегами<head>
<style type="text/css">
.cite {
color: navy;
font-style: italic
}
</style>
</head>
<body>
<p>Следует тщательно позаботиться о своем рабочем месте. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку или сзади оператора. Во избежании медицинских осложнений <b class=cite>стул рекомендуется выбирать с мягким сидением</b>.</p>
</body>
</html>
Результат применения селектора с именем cite к тегу B показан ниже.
Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы употребляются теги SPAN и DIV.
Селекторы ID
Адрес статьи — www.htmlbook.ru/content/53.html
Параметр ID задает уникальное имя элемента, которое используется для изменения его стиля и обращения к нему скриптов. Это позволяет управлять стилем элемента динамически.
Синтаксис ID селектора следующий.
Обращение к селектору происходит аналогично классам, но в качестве ключевого
слова у тега используется параметр id, значением
которого выступает имя идентификатора (пример 1). Символ решетки при
этом уже не указывается.
<head>
<style type="text/css">
#help {
position: absolute; /* Абсолютное позиционирование */
left: 160px; /* Положение от левого края */
top: 120px; /* Положение от верхнего края */
width: 225px; /* Ширина */
height: 180px; /* Высота */
z-index: 10 /* Выше всех других элементов */
}
</style>
</head>
<body>
<div id=help>
Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.</td>
</div>
</body>
</html>
В примере определяется стиль тега DIV, для которого указан селектор help через параметр id.
Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.
Вначале указывается имя тега, затем без пробелов символ решетки и название селектора. В примере 2 показано использование идентификатора применительно к тегу P.
Пример 2. Применение идентификатора совместно с тегом<head>
<style type="text/css">
P {
color: green; /* Зеленый цвет текста */
font-style: italic /* Курсивное начертание текста */
}
P#opa {
color: red; /* Краснвй цвет текста */
border: 1px solid #666; /* Параметры рамки вокруг
*/
background: #eee; /* Цвет фона */
padding: 5px /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>Обычный параграф</p>
<p id=opa>Параграф необычный</p>
<div id=opa>Содержимое слоя</div>
</html>
Результат примера показан ниже.
Обычный параграф
Параграф необычный
В примере вначале вводится стиль для тега P и для такого же тега, но с указанием идентификатора opa. Обратите внимание, что применение селектора opa к другим тегам не дает никакого эффекта, поскольку он жестко закреплен за тегом P. Так, добавление id=opa к тегу DIV в примере никак не отображается на его стиле.
Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 3).
Пример 3. Изменение видимости слоя<head>
<script language="JavaScript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>
<body>
<table width=90% border=1 cellspacing=0 cellpadding=4 bordercolor=#666666
align=center>
<tr>
<td width=20% align=center><a href=# onMouseOver="showLayer()"
onMouseOut="hiddenLayer()"><img src="button.gif"
width=98 height=33 border=0></a></td>
<td>
<div id=descr style=""xposition:" relative;
visibility: hidden">Данная
эксклюзия является подмножеством астрациональных супремативных
монотенных федоний кадонарного экстрафазория.</div>
</td></tr></table>
</body>
</html>
В примере показано обращение к идентификатору descr и модификация его параметров.
Контекстные селекторы
Адрес статьи — www.htmlbook.ru/content/54.html
При создании веб-страницы часто приходится вкладывать одни теги в другие. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, можно определить стиль для жирного текста, только когда он еще и курсивный.
Обычное использование селекторов.
I { font-style: italic; }
Контекстный селектор состоит из простых селекторов разделенных пробелом.
В примере жирный курсивный шрифт Arial синего цвета будет применен к тегу I, когда он находится внутри тега B.
Пример. Контекстные селекторы<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial; font-weight: bold; color: navy; font-style: italic; }
</style>
</head>
<body>
<b>Жирный шрифт</b><br>
<i>Курсивный текст</i><br>
<b><i>Жирный курсивный текст</i></b><br>
<i><b>Курсивный и жирный текст</b></i>
</body>
</html>
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
Можно одновременно использовать сгруппированные и контекстные селекторы.
В примере синий цвет будет применен:
Псевдоклассы
Адрес статьи — www.htmlbook.ru/content/57.html
Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий.
.class:псевдокласс { Параметр: Значение; }
#id:псевдокласс { Параметр: Значение; }
Вначале указывается тег, класс или идентификатор, а затем через двоеточие имя псевдокласса, после чего, как обычно в фигурных скобках пишутся атрибуты CSS с требуемыми значениями.
В таблице 1 приведены основные псевдоклассы, которые нашли свое применение на сайтах.
| Псевдокласс | Описание | Браузеры |
|---|---|---|
| active | Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши. | IE4 Netcape 6 Opera 5 |
| link | Непосещенная ссылка. | IE4 Netcape 4 Opera 3.5 |
| hover | Ссылка при наведенном курсоре мыши. | IE4 Netcape 6 Opera 4 |
| visited | Посещенная ссылка. | IE4 Netcape 4 Opera 3.5 |
| first-letter | Определяет стиль для первого символа текстового блока. | IE5.5 Netcape 6 Opera 3.5 |
| first-line | Устанавливает стиль для первой строки текстового блока. | IE5.5 Netcape 6 Opera 3.5 |
В примере 1 показано использование псевдоклассов для управления цветами ссылок.
Пример 1. Использование псевдоклассов для ссылок<head>
<style type="text/css">
A:link { color: #003366 }
A:visited { color: #660066 }
A:hover { color: #800000 }
A:active { color: #FF0000 }
</style>
</head>
<body>
| <a href=#>Ссылка 1</a> | <a href=#>Ссылка 2</a>
| <a href=#>Ссылка 3</a> |
</body>
</html>
При одновременном использовании псевдоклассов visited и hover имеет значение их порядок. Последним в списке стилей должен идти hover, иначе посещенные ссылки не будут изменять свой цвет при наведении на них курсора.
Псевдоклассы сочетаются с селекторами, что позволяет создавать ссылки с разными параметрами форматирования (пример 2).
Пример 2. Ссылки разных цветов<head>
<style type="text/css">
A.link1 { font-size: 12px; color: green }
A.link1:hover { color: red }
A.link2 {font-size: 14px; color: blue }
A.link2:hover { color: red }
</style>
<body link=#0000ff>
| <a href=link1.html>Ссылка 1</a> | <a href=link2.html class=link1>Ссылка 2</a> | <a href=link3.html class=link2>Ссылка 3</a> |
</body>
</html>
В примере используется три вида ссылок. Первый тип используется на данном сайте по умолчанию, вторая ссылка — зеленая, а третья — синяя. Все три ссылки изменяют свой цвет при наведении курсора мыши.
Данный прием позволяет создавать ссылки любых цветов и размеров для использования в разных частях документа.
Псевдокласс first-letter позволяет изменять вид первой буквы текстового абзаца, тем самым, устанавливая буквицу или выступающий инициал, как показано в примере 3.
Пример 3. Создание выступающего инициала<head>
<style type="text/css">
P:first-letter {
color: olive; /* Цвет первого символа */
font-size: 200%; /* Размер шрифта */
font-weight: bold /* Жирное начертание */
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>
Псевдокласс first-line применяется достаточно редко, поскольку особой необходимости в нем не возникает.
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
