КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS

Posted by key under php, Веб-аналитика, Статьи

Каскадные таблицы стилей или 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> Это синий текст</P>

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

P { color: blue }

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

.bluetext{ color: blue }

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

<H1> Это синий цвет</H1>
<CENTER> Это синий цвет</CENTER>
Это <B> жирный синий</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=»http://programmersclub.ru/{Адрес файла таблицы стилей}»>

Назад к оглавлению

Programming articles
Создание сайтов на шаблонах
Множество вариантов работы с графикой на канве
Шифруем файл с помощью другого файла
Перехват API функций — Основы
Как сделать действительно хороший сайт
Создание почтового клиента в Delphi 7
Применение паскаля для
решения геометрических задач
Управление windows с помощью Delphi
Создание wap сайта
Операционная система unix, термины и понятия
SQL враг или друг
Возникновение и первая редакция ОС UNIX
Оптимизация проекта в Delphi
Ресурсы, зачем нужны ресурсы
Термины программистов 20 века
Советы по созданию собственного сайта с нуля
Шифруем файл с помощью пароля
Фракталы — геометрия природы
Crypt — Delphi программа для шифрования
Рассылка, зачем она нужна и как ее организовать?
Учебник по C++ для начинающих программистов
Уроки для изучения ассемблера
Загадочный тип PCHAR
Средства по созданию сайтов
Операторы преобразования
классов is и as
Borland Developer studio 2006. Всё в одном
Создание базы данных в Delphi, без сторонних БД
Software engineering articles

Случайные статьи

• Как в Excel сделать так, чтобы при нажатии на ячейку менялось цифровое значение?
• Как получить все цвета пикселей в Timage?
• Пример работы с компонентами TTcpClient, TTcpServer
• Как узнать сколько занимает памяти программа?
• Программа приложение для skype
• Заполнить динамический массив
• Определить часто встречающийся символ в строке
• Получить все имена свойств объекта
• Пример парсинга xml с помощью NativeXML
• Общение между запущенными копиями своих программ