Home

CSS (Cascading Style Sheets)- каскадные листы стилей.

С помощью каскадных листов стилей CSS вы можете делать свои HTML-документы, более привлекательными и индивидуальными. Вы можете создать лист стилей в отдельном файле и использовать его в других страницах или внедрить его в документ HTML. В любом из этих случаях необходимо сообщить броузеру, какой язык листов стилей вы используете - CSS1 или другой. Это делается с помощью тега<META>:

Если не использовать выше указанный код, то по умолчанию будет установлен CSS1. Однако рекомендуется явно определять язык стилей, который вы используете.

Создание листов стилей в отдельном файле предпочтительней по следующим причинам:

Не загромождают код HTML-документа тем самым его легче воспринимать и работать с ним.
Возможность создания листов стилей для разных типов представлений. Например, для вывода документа на экран один вид, а на печать другой.
Импорт листов стилей в другие создаваемые проекты.

Создать лист стилей можно с помощью блокнота и запомнить его с расширением 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>для изменения стиля только у одного или нескольких слов.

В HomeSite <SPAN style="color:blue; font-weight : bold;">4.5.2</SPAN> TopStyle<SPAN style="color:red; font-weight : bold;">2</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

Хостинг от uCoz