Классы
До сих пор мы рассматривали стили для применения их только в одном теге (при помощи 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. Дело в том что класс гиперссылок имеет подклассы для различных состояний:
a:link{color:green} a:hover{color:red} a:active{color:blue} a:visited{color:yellow}Пробуйте - получите удовольствие. Кстати, на подклассах тоже можно создавать собственные классы.