Последние записи






25th
Авг

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ 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

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