Справочник
WEB - языков

www.spravkaweb.ru Rambler's Top100
 Вы находитесь: Главная/CSS/Что такое CSS и как применить.Распечатать 
Разделы
Новости
Сразу все
HTML
JavaScript
VBScript
CSS
Flash
Perl
PHP
MySQL
SSI
VRML
Дополнительно
Советы
Форум
Гостевая
Ссылки
Написать мне
Поиск:
Рассылки
Subscribe.Ru:

CSS

Вернуться к списку,Дальше-->
Что такое CSS и как применить
Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Елси до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

<P><FONT color="blue">Это синий текст</FONT></P>

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

<P class="bluetext">Это синий текст</P>

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

<H1 class="bluetext">Это синий цвет</H1>
<CENTER class="bluetext">Это синий цвет</CENTER>
Это <B class="bluetext">жирный синий</B> текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

<H7><B>Этот</B> текст будет синим</H7>
<P>А <B>этот</B> - не будет!</P>

Более того, вы можете встроить определение стиля прямо в тег:

<P style="color: blue">Это синий текст</P>

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.
И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

<H1 id="headerofdocument">Это заголовок документа</H1>

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:

<Style [type="text/css"]>
. . .
</STYLE>

Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.

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

<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">
Наверх / К оглавлению
[1], 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 >>>
По материалам книги Владимира Дронова "JavaScript в Web-дизайне"
www.bhv.ru, www.bhv.kiev.ua
Что нового:
01.03.2004
Если Вы не знали, как отправить письмо с сайта без почтовой программы, или как сделать, чтобы получивший это письмо пользователь прочел его без дополнительной перекодировки, или как отправить письмо в HTML-виде, тогда читайте про все это сдесь.
Голосование:
Ваше мнение о сайте:
Просто супер!
Нормальный.
Так себе.
Мне все равно.
Плохой.
Хуже не видел!
Счетчики:
Rambler's Top100
Сделать страницу стартовой Сделать страницу стартовой
Добавить страницу в избранное Добавить сайт в избранное
Сообщить об найденной ошибке Сообщить об ошибке