Специально для ленивых!!! (Если хотите знать, в Японии,
лень считается двигателем прогресса, т.к. только ленивый, по их мнению, может
придумать устройство которое будет выполнять его работу) Допустим, вам
необходимо создать документ с 30 заголовками голубого цвета, вам пришлось бы
30 раз(в каждом заголовке) давать команду изменения цвета шрифта: <font
color="blue"> и столько же раз закрывать данный тег командой:
</font>. Но мы пойдем иным путем, внедрив в страницу КАСКАДНУЮ
ТАБЛИЦУ СТИЛЕЙ. Не пугайтесь названия- все намного проще... Внедренная таблица
каскадных стилей представляет из себя небольшую команду вставленную в ГОЛОВУ
документа(между тегами </title> и </head>). В ней описаны элементы
страницы имеющие одинаковый вид, т.е. к которым будут применены определенные
стилевые решения. В нашем случае с заголовками Н3 это выглядит так:
<style type="text/css"><!--
h3 {color: blue}
--> </style>
расшифровка: все содержимое тегов H3 в данном документе должно быть выведено
голубым цветом.
Разумеется стили можно применять сразу для нескольких элементов страницы. Команды
зеленого цвета в моем примере должны оставаться нетронутыми. Все что выведено
синим цветом- может принимать следующий вид. Перечисление элементов производится
либо построчно:
H4 {color: red}
LI {color: green}
EM {color: blue}
либо через запятую (если их свойства одинаковы):
h1, samp, acronym {color: tomato}
Перечисление свойств так же можно задавать в группе:
h1 {color: red;
font-weight: bold;
font-size: 18 pt;
font-famity: Times New Roman}
Размер шрифта можно указывать также в процентах к текущему размеру.*
Стили подчиняются следующему правилу:
p {color: blue}
em {color: red}
В данном примере все абзацы пишутся голубым, все выделенные участки соответственно
красным цветом.
p em {color: yellow}
В данном случае только выделенный участок внутри абзаца будет выведен желтым,
а выделения не попадающие под действие тега <p>
останутся прежними. Также возможен следующий синтаксис команд:
li {color: #ff6600}
ol li {color: rgb(128,45,255) }
strong {color: rgb(25%,4%,89%) }
* В случае когда вы просто хотите назначить для всего документа
нестандартный размер шрифта, рациональней, все же будет использовать старый,
добрый тег: <basefont size="2"> (По
умолчанию размер шрифта равен 3) расположенный в голове документа, вместо таблицы
стилей.
И еще одна полезная область применения стилей- оформление ссылок.
В некоторых случаях бывает необходимо скрыть ссылку (не
выделять ее подчеркиванием и раскраской). В этом случае применяется код следующего
вида:
a:active { color: white; text-decoration: none}
a:hover { color: white; text-decoration: none}
a:link { color: white; text-decoration: none}
a:visited { color: white; text-decoration: none}
В этом случае все виды ссылок (неиспользаванные, использованные, выделенные)
будут выведены соответственно белым цветом и без подчеркивания.
Назад | Содержание | Вперед