Каскадные таблицы стилей
Специально для ленивых!!! (Если хотите знать, в Японии, лень считается двигателем прогресса, т.к. только ленивый, по их мнению, может придумать устройство которое будет выполнять его работу) Допустим, вам необходимо создать документ с 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}
В этом случае все виды ссылок (неиспользаванные, использованные, выделенные) будут выведены соответственно белым цветом и без подчеркивания.
Рекомендуем почитать
