Таблицы стилей или CSS
Таблицы стилей (style sheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Термин "таблицы стилей"прочно вошел в русскую речь, хотя в некоторых книгах вы можете встретить и более точный перевод - "листы стилей".
Сводная таблица стилей.
По методам добавления стилей в документ различают три вида стилей.
Внутренние стили
Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного Html. Внешний вид документа трудно изменить.
Пример
<!-- каждому параграфу – свой цвет -->
<html>
<head>
<meta HTTP-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P style="color:blue">LET US TALK</P>
<P style="color:red">LET US READ</P>
</html>
Глобальные стили
Определяются тэгом STYLE с атрибутом TYPE="text/css" в контейнере <HEAD>...</HEAD>, являются универсальным средством, позволяющим не только оперативно изменять внешний вид страницы, но и и бороться с перегруженностью документа оформительскими тэгами.
Пример
<!-- все параграфы лилового цвета -->
<html>
<head>
<style type="text/css">
<!--
P {color:#FF00FF}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P>LET US READ AND LEARN</P>
<P>LET US READ AND LEARN</P>
</html>
Обратите внимание на то, что описание стиля заключено в тэги комментариев. Это сделано для того, чтобы броузеры, не понимающие, о чем идет речь, не вываливали описание стилей на страницу, как обычный текст.
Связанные стили
Определяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг <LINK> с атрибутом REL="stylesheet".
Другие атрибуты
- TITLE. Задает заголовок страницы, на которой с помощью тэга <STYLE>, определена таблица стилей.
- HREF. Ссылка на страницу с таблицей стилей или имя файла.
- TYPE. Тип файла, с которым нужно установить связь.
Пример
<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css">
Каскадные таблицы стилей (CSS)
Каскадные таблицы стили CSS (Cascading Style Sheets) - первый стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних.
CSS - это язык, содержащий набор свойств для определения внешнего вида документа. C++пецицификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Здесь можно найти самые разнообразные свойства стилей. Однако, пока еще броузеры не поддерживают все возможности CSS. Можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.
Наиболее популярные свойства стилей
- Background. Фон элемента. Задается одним или двумя цветами (т.е. их смесью) или именем графического файла. Возможные значения: red, black/white, fill2. GIF ( ).
- BORDER. Рамка вокруг элемента. Возможные значения: solid 0.5mm (есть рамка шириной 0.5 миллиметра), none (нет рамки).
- BORDER-COLOR. Цвет рамки. Возможные значения: blue, #993300.
- COLOR. Цвет элемента.
- CURSOR. Тип курсора. Возможные значения (их можно видеть, перемещая курсор по первому столбцу):
auto |
Броузер определяет какой курсор показывать в зависимости от контекста |
default |
Курсор зависит от платформы. Обычно стрелка |
crosshair |
Обычно простой крестик |
hand |
Рука IE |
pointer |
Рука NS6/ IE6 |
move |
Четырехсторонняя стрелка. Обычно используется при указании на перемещаемый объект |
text |
Изменяемый текст. Обычно I-вида |
help |
Стрелка с вопросом. Используется при указании на подсказку |
wait |
Курсор показывает, что программа busy и следует подождать. Обычно песочные часы |
progress |
Курсор показывает, что идет процесс обработки. Только IE6 |
not-allowed |
Курсор показывает, что объект или действие недоступно. Только IE6 |
n-resize |
Стрелка, указывающая в заданном направлении (north, north-west, west, south-west, ...) |
nw-resize |
w-resize |
sw-resize |
s-resize |
se-resize |
e-resize |
ne-resize |
Точный вид курсора зависит от того, какие курсоры установлены на машине пользователя.
Примеры использования Style Cursor
Пример 1:
<style type="text/css">
body{
cursor: URL(mycursor.cur)
}
</style>
В этом примере для всей WEB страницы задан курсор из файла с именем mycursor.cur.
Пример 2:
<div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a>
В этом примере внутри DIV форма курсова "move", а на ссылке форма курсора "help".
Пример 3:
<TD onmouseover="this.style.cursor='wait'">se-resize</TD>
В этом примере при наведении на ячейку таблицы изменяется стиль курсора на "wait".
Пример 4:
<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">
Пример запрета выделения на странице. Если вы начнете выделять, то Курсор изменится на запрещающий и выделения не будет производиться
Изменение стиля шрифта с помощью Style Font
- FONT-FAMILY. Тип шрифта. Возможные значения: Arial (без засечек), CourierNew (моноширинный), Times New Roman (с засечками).
- FONT-SIZE. Размер шрифта. Возможные значения: 14pt, 120%. Единицами измерения для этого и других размерных свойств могут быть: pt (пункты), px (пикселы), mm (миллиметры), cm (сантиметры), in (дюймы), % (проценты).
- FONT-WEIGHT. Толщина шрифта. Возможные значения: light (легкий), medium (средний), bold (жирный).
- FONT-STYLE. Стиль шрифта. Возможные значения: Italic (наклонный), normal (обычный).
- FONT. Полная характеристика шрифта. Сочетание четырех предыдущих свойств.
LIST-STYLE-IMAGE. Символ маркера в маркированном списке. Задается как gif-файл. Может определяться как для всего списка, так и для его отдельных элементов.
Пример
<html>
<head>
<style type="text/css">
<!--
ul {list-style-image:URL(fill1.gif)}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<ul>DRINK
<li>milk</li>
<li>tea</li>
<li>juice</li>
<li>coffee</li>
</ul>
</html>
- LETTER-SPACING. Межбуквенный интервал. Возможные значения: 2px (интервал в 2 пиксела), -.4pt (интервал, уменьшенный на 0.4 пункта).
- LINE-HEIGHT. Межстрочный интервал. Возможные значения: 14pt, 50%.
- MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT, MARGIN-TOP. Отступы соответственно снизу, слева, справа, сверху элемента. На многие элементы не действуют. Действуют на DIV. Возможные значения: 150pt, 0.5in.
- MARGIN. Отступы вокруг элемента.
- PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT, PADDING-TOP. Отступы от рамки соответственно снизу, слева, справа, сверху.
- PADDING. Все отступы от рамки до элемента.
- TEXT-ALIGN. Выравнивание текста по горизонтали. Возможные значения: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине).
- TEXT-DECORATION. Оформление текста. Возможные значения: underline (подчеркивание), line through (перечеркивание), none (без оформления).
- TEXT-INDENT. Oтступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. Возможные значения: 50pt, 1cm.
- WIDTH. Ширина поля, предоставленного элементу. Возможные значения: 100pt, 5cm.
Использование атрибутов CLASS и ID
Стиль в CSS может быть задан для определенного элемента, класса или идентификатора.
Пример
<html>
<head>
<style type="text/css">
<!--
H1 {color:red;text-align:center}
.myclass {font-style:italic}
#myid {background:yellow}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2 class="myclass">Lesson Seventy-Nine</H2>
<EM id="myid">LET US LEARN</EM>
<P class="myclass">Learn to pronounce and use the new words.</P>
</html>
H1, .myclass, #myid называются простыми селекторами.
Кроме того можно использовать и контекстуальные селекторы, определяющие иерархию контейнеров, с которыми должен быть связан стиль.
Примеры
<!-- все элементы EM внутри элемента P будут на желтом фоне -->
P EM {background:yellow}
<!-- все элементы класса pilot внутри элемента LI класса man,
которые находятся внутри элемента UL будут голубого цвета -->
UL LI.man .pilot {color:blue}
Если несколько элементов будут иметь общий стиль, то соответствующий им селекторы можно перечислить в таблице стилей через запятую.
Пример
<html>
<head>
<style type="text/css">
<!--
H1,H2,H3,H4 {color:red;text-align:center}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2>Lesson Seventy-Nine</H2>
<H3>LET US LEARN</H3>
<H4>1. Learn to pronounce and use the new words.</H4>
</html>
Оформление ссылок (Псевдоклассы)
Псевдоклассами называются элементы одного типа, удовлетворяющие определенному критерию. Например, посещенные элементы A (ссылки) составляют псевдокласс visited. В настоящее время поддерживаются только псевдоклассы ссылок. Но и это уже кое-что. С помощью таблицы стилей, где псевдокласс следует отделять двоеточием ( : ), можно изменить оформление активной (active), посещенной (visited), непосещенной (link) ссылки, а также ссылки, на которую наведена мышь (hover).
Пример
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:underline}
Использование тэгов <SPAN> и <DIV>
Стиль можно установить почти для всех элементов HTML, но два тэга <SPAN> и <DIV> особенно удобны тем, что они не накладывают на стиль никакого собственного типа представления. При использовании атрибутов CLASS и ID эти тэги вместе с CSS практически неограничено расширяют HTML. <SPAN>...</SPAN> и <DIV>...</DIV> являются простыми контейнерами для HTML-элементов. Они позволяют применять атрибуты форматирования к конкретным частям документа. Друг от друга они отличаются лишь тем, что броузеры обычно помещают символ перевода строки до и после HTML-элементов, заключенных в контейнер <DIV>...</DIV>.
Пример
<html>
<head>
<style type="text/css">
<!--
.ital {font-size:120%;font-style:italic;color:blue}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<pre>
<span class=ital>Правильные</span> глаголы образуют прошедшее время
путем добавления окончания <span class=bold>-ed</span> или
<span class=bold>-d</span>,
которое читается как:
[t](help<span class=end>ed</span>), [d](open<span class=end>ed</span>),
[id](want<span class=end>ed</span>).
</html>
В контейнер <DIV>...</DIV> можно включать другие тэги, исключая <HEAD>, <BODY> и тэги, связанные с фреймами (кроме <IFRAME>). Используя тэг <DIV>, Web-страницу можно разделить на части и каждой из них присвоить отдельный стиль.
Пример
<html>
<head>
<style type="text/css">
<!--
.title {text-align:center;font-size:150%;font-weight:bold;color:red}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<div class=title>
Наречие<br>(The Abverb)
</div>
<p> Наречия часто образуются от прилагательных добавлением окончания
<span class=bold>-ly</span>:
slow - slow<span class=end>ly</span>,
quick - quick<span class=end>ly</span>.
<html>
|