Каскадные таблицы стилей

Разделы

Допустим, вам необходимо создать документ с 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}
В этом случае все виды ссылок (неиспользаванные, использованные, выделенные) будут выведены соответственно белым цветом и без подчеркивания.

МЕСТО ДЛЯ РЕКЛАМЫ
Главная страница
 

Статьи про заработок

Русские спонсоры
Зарубежные спонсоры
Собери бонусы
Биржа Форекс
Статьи темы
 

Начинающему Web - мастеру

Создать свой первый сайт
Как раскрутить свой сайт
Как заработать на сайте
Что такое ТИЦ и PR
Статьи темы
 

Виды обмана в интернет

Халява бред
 

Остальное

Новости сайта
Друзья сайта
След для истории
 
 
   
 
назад | содержание | вперед