С помощью каскадных листов стилей CSS вы можете делать свои HTML-документы, более привлекательными и индивидуальными. Вы можете создать лист стилей в отдельном файле и использовать его в других страницах или внедрить его в документ HTML. В любом из этих случаях необходимо сообщить броузеру, какой язык листов стилей вы используете - CSS1 или другой. Это делается с помощью тега<META>:
Если не использовать выше указанный код, то по умолчанию будет установлен CSS1. Однако рекомендуется явно определять язык стилей, который вы используете.
Создание листов стилей в отдельном файле предпочтительней по следующим причинам:
Создать лист стилей можно с помощью блокнота и запомнить его с расширением CSS. Написание языка вручную мне кажется занятием утомительным, гораздо проще, без ошибок и красиво это можно сделать с помощьTopStely Pro v2. Что бы связать созданный лист стилей с HTML-документом необходимо использовать тег<LINK>:
Внедрить лист стилей в HTML-документ можно тегом<STYLE>:
<HTML> <HEAD> <TITLE>TopStyle. CSS (Cascading Style Sheets)</TITLE> </HEAD> <STYLE TYPE="text/css"> H1 { color: Blue; font-family: Arial; font-size: large; font-weight: bold; font-style: italic; text-align: center; } </STYLE> <BODY> <H1>Каскадные листы стилей CSS</H1> </BODY> </HTML>
Если вы решили не создавать файл стилей и не внедрять стиль в документ, но вам потребовалось определить стиль к одному тегу, можно воспользоваться вставкой оперативного стиля (inline). Добавьте атрибут STYLE к тегу, стиль которого вы хотите изменить и укажите описания стиля.
Вы можете использовать встроенные оперативные стили с тегом <DIV>, чтобы установить стиль для всего блока HTML внутри вашего документа.
<DIV STYLE="color:Red;"> <H1>Заголовок</H1> <P>Текст будет красным цветом</P> </DIV>
Таким же образом, вы также можете использовать тег<SPAN>для изменения стиля только у одного или нескольких слов.
Пример будет выглядеть так:
В HomeSite4.5.2 TopStyle2
Написание стилей подчиняется одному правилу. Правило должно состоять из двух частей - селектора (selector), он же тег (H1), и описания стиля применяемого к нему ({ color:red }).
H1 { color:red }
Описание стиля так же состоит из двух частей: имя свойства (color) и значения (red), которое вы устанавливаете к нему, разделяя двоеточием (:). Через точку с запятой можно установить сразу несколько свойств к правилу:
H1 { color:red; font-size: 14 pt }
Возможно и к нескольким селекторам (тегам) задать одно правило. Разделяя селектора запятой.
P, OL, LI { font-size: 12 pt }
Пропуск запятой в выше указанном примере не будет синтаксической ошибкой, хотя ее отсутствие приведет к другому результату. Без нее будет точно указываться последовательность тегов для которых будет задаваться стиль. Например, один стиль к<LI>будет применяться, когда он сочетается с<OL>, а другой стиль с<UL>:
OL LI { list-style-type: decimal } UL LI { list-style-type: square }
С помощью атрибута Class возможно представлять один и тот же тег, используемый в одном документе несколько раз, разными стилями. Для применения Class поставьте точку после тега и введите произвольное название Class:
H1.red { color: red } H1.blue { color: blue }
При внедрении Class в документ укажите имя Class следующим образом:
<H1 CLASS="red">Заголовок красного цвета<H1>
В программеTopStely Pro v2, которую я рекомендую, есть несколько файлов в качестве примеров, по которым вы самостоятельно можете разобраться с каскадными листами стилей CSS.
Home