Урок 10: Классы

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Классы
До сих пор мы рассматривали стили для применения их только в одном теге (при помощи style=). На практике это бывает нужно только для создания одного элемента особого вида, который невозможно создать при помощи HTML. Но есть и другое немаловажное применение CSS: задание определенного стиля большому колличеству объектов. Кажется, я уже говорил об этом во втором уроке. Теперь разберемся в этом в конкретных примерах.

Представим такой случай: мы ужасно не любим синие гиперссылки и хотим сделать их зелеными, да еще и не подчеркнутыми. Причем наш сайт очень большой - 100 страничек, поэтому писать в теге каждой гиперссылки что-то вроде:

<a href=page.htm style=color:green;text-decoration:none>
хоть и правильно, но не рационально (по народному - "тупо"). Когда дело касается большого колличества тегов то лучше записать стиль в отдельном файле. Назовем его style.css и напишем в нем:
a{color:green;text-decoration:none}
теперь в нужных файлах htm в разделе HEAD (между <head> и </head>) пишем следующую строку:
<link rel=stylesheet type=text/css href=style.css>

Теперь попробуем создать простую гиперссылку. Никаких (почти) усилий и она стала желанной зеленой и не подчеркнутой.

По-умному выражаясь, мы внесли изменения в класс гиперссылок. В CSS класс это тип объектов используемых на страницах.

Те, кто хоть как-то знаком с программироавнием могут сказать: "а че тут нет ползовательских классов?". А они есть:-) Правда собственное имя тега нам создать не дают. Придется писать в тегах class=имя_класса.

Лучше рассмотрим живой пример: на сайте используется два вида гиперссылок - красные и зеленые (таков замысел:-). Как это реализовать наиболее просто? Создадим файл style.css и запишем в него такие строки:

a.zeleny{color:green;text-decoration:none}
a.krasny{color:red;text-decoration:none}
Только что мы создали два класса и теперь можем использовать их на наших страницах. Чтоб создать красную ссылку мы напишем в ее теге class=krasny, для зеленой соответственно - class=zeleny. Разумеется, классы можно использовать и для других тегов, записав их в css-файле, используя изученные нами параметры.

Обратите внимание на гиперссылки на этом сайте: они изменяют внешний вид при подведении курсора. Это тоже обеспечивается при помощи CSS. Дело в том что класс гиперссылок имеет подклассы для различных состояний:

Как всегда на примере: нам нужны ссылки которые обычно зеленые, при подведении курсора краснеют, при нажатии синеют, а после посещения становятся желтыми. В css-файл пишем:
a:link{color:green}
a:hover{color:red}
a:active{color:blue}
a:visited{color:yellow}
Пробуйте - получите удовольствие. Кстати, на подклассах тоже можно создавать собственные классы.

Предыдущий урок | Следующий урок