White cat - Справочник по CSS
Обзор книги White cat - Справочник по CSS
Справочник по CSS
О этом справочнике
Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.
Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.
В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download
Дата выхода данной версии справочника: 09:00, 26 марта 2007.
Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.
Что такое 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="{Адрес файла таблицы стилей}">
Свойства шрифта
font
Задает параметры шрифта элемента страницы.
Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];
Значение по умолчанию - normal normal normal medium normal "Times New Roman".
Альтернативный формат:
font: caption|icon|menu|message-box|small-caption|status-bar;
В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:
Поддерживается IE начиная с 4.0
font-family
Указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.
font-family: {Имя шрифта}|serif|san-serif|cursive|fantasy|monospace;
В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.
font-family: "Times New Roman",sans-serif;
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-weight
Задает "жирность" шрифта, используемого в элементе страницы.
font-weight: normal|bold|bolder|lighter|100..900;
"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.
Значение по умолчанию normal.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых. При этом IE 4.0 и более старые версии распознавали только значения normal и bold этого атрибута.
Поддерживается NN начиная с 4.0
font-size
Задает размер шрифта, используемого в элементе страницы.
font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{Абсолютный размер}|{Относительный размер}%;
Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя. Также доступны девять определенных значений.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-style
Задает начертание шрифта.
font-style: normal|italic|oblique;
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-variant
Задает вид малых букв шрифта, используемого в элементе страницы.
font-variant: normal|small-caps;
Поддерживается IE начиная с 4.0
Цветовая гамма
color
Определяет цвет элемента.
color: {Цвет};
Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
background
Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
Значения этих свойств могут располагаться в любом порядке.
Значение по умолчанию transparent none repeat scroll 0% 0%.
Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0
background-color
Задает фоновый цвет Web-страницы или ее элемента.
background-color: {Цвет}|transparent;
Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
background-image
Задает фоновый рисунок Web-страницы или ее элемента.
background-image: url({Интернет-адрес файла рисунка})|none;
Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
background-attachment
Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background-attachment: scroll|fixed;
Применяется только для тега <BODY>.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
background-repeat
Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
