Главная | Обратная связь | Поможем написать вашу работу!

InstaCSS: удобный поиск по справочнику CSS

Ariser

Еще чуть-чуть о круглых аватарках на CSS3 и маленькой тайне Оперы ^{из песочницы}

Хочу поделиться крошечным «тайным знанием» вдогонку к недавнему хабратопику о скруглении картинок средствами CSS3.

Все знают, что в Операх ниже свежей версии 11.60 (pepelsbey, спасибо за уточнение!) border-radius не работал для тега img. Даже обертка с overflow:hidden не спасала — углы предательски торчали из нее наружу. Чего только не придумано для борьбы с этим багом. Например, перекрыть эти выступающие углы border-ом псевдоэлемента:before обертки. Наш хабраколлега еще больше приблизился к идеалу, показав, что обертка не нужна (заодно еще раз раскрыв мощь CSS3). Но у таких решений есть существенное ограничение: картинки должны быть на однотонном фоне, иначе «покрышка» сразу выдаст себя.

Но есть у Оперы одна малоизвестная особенность, которая поможет нам решить эту проблему. Предлагаю вашему вниманию пример (сразу с кодом — его очень мало — и результатом): jsfiddle.net/XVtMh/147/.

В чем же секрет?

· CSS3

·, круглые углы

·, opera

·, webkit

·, generated content

·, маленькие хитрости

+108

6 декабря 2011, 06:01

SelenIT2

Круглые аватарки средствами CSS 3

Сегодня у меня возникла очередная задача — необходимо было сделать «круглые аватарки».

Наверняка, многие опытные разработчики имеют в запасе пару-тройку способов, с помощью которых можно было бы реализовать подобный функционал. Я же хочу поделиться с вами своей реализацией.

Помню, когда я только начинал увлекаться программированием и изучением основ HTML верстки, мне всегда очень помогали статьи — примеры различных реализаций того или иного функционала. Сейчас я твердо убежден — самый быстрый и понятный способ обучения — это примеры.

Именно поэтому я решился написать эту статью.

Вероятно она покажется скучной для профессиональных верстальщиков. Однако я надеюсь, что среди посетителей Хабрахабра найдутся люди, которые только начинают свой путь web-разработчика и заинтересуются предложенной технологией.

Если вам интересно, добро пожаловать под хаброкат...

· html

·, html5

·, css

·, css3

·, css 3

·, верстка

·, аватарки

·, дизайн

·, примеры

+52

2 декабря 2011, 01:49

Kulakowka

Свойство «text-size-adjust» становится более кроссбраузерным

Читателям справочника «Safari CSS Reference» уж конечно попадалось в нём свойство«-webkit-text-size-adjust», которое, согласно справочнику, управляет отображением текста на мобильнике (iOS) и может принимать одно из трёх следующих значений:

→ «auto» (текст на мобильнике подстраивается автоматически);

→ «none» (размер текста на мобильнике не изменяется);

→ «60%» (или другой процент) означает желаемый относительный размер текста на мобильнике.

Роджер Йоханссон в своём блоге «456 Berea Street» предостерегал от употребления этого свойства и призывал отказаться от него напрочь, потому что однажды столкнулся с сайтом, на котором это свойство имело значение «none» и привело к тому, что размер шрифта нельзя было увеличить не только в мобильнике, но и в обыкновенном компьютере (нажатием «Command-Plus») ни в одном из браузеров на основе WebKit: ни в Safari, ни в Chrome, ни в OmniWeb, ни в iCab…

Несмотря на это, WebKit — не единственная основа мобильных браузеров; как мы знаем, существует ещё и мобильный Firefox. Разработчики Firefox объявили в вики MDN, что Firefox 11 и более новых версий также станет поддерживать свойство «text-size-adjust», которое, таким образом, становится ещё более кроссбраузерным. (Как XaocCPS мне подсказывает, это свойство под именем «-ms-text-size-adjust»поддерживается также и в Windows Phone 7.)

Читать дальше →

· vendor prefixes

·, кроссбраузерность

·, WebKit

·, Mozilla Firefox

·, размер шрифта

27 ноября 2011, 16:51

Mithgol

НЛО прилетело и опубликовало эту надпись здесь.

Реалистичные тени при помощи CSS3 без использования изображений

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

Читать дальше →

· css

·, css3

·, тени

·, оформление текста

·, топик-ссылка

+243

23 ноября 2011, 16:35

Hautamaki

InstaCSS: удобный поиск по справочнику CSS

Для изучающих CSS есть несколько хороших сайтов с документацией и примерами использования, в том числе W3schools и MDN (Mozilla Developer Network). Разработчик Рафаэль Гарсиа сделал InstaCSS — очень удобный поиск по CSS-справочнику MDN. Это полнотекстовый поиск в стиле Google, с подсветкой кода и другими фичами, результаты обновляются по мере набора символов. Вся информация по запросу — на одной странице, так что не надо искать её по разделам документации.

Автор сделал проект за 24 часа, так что осталось ещё много багов. Он говорит, что на бэкенде используется MongoDB, откуда backbone.js вытягивает по JSON данные для клиентской стороны.

Код на github: github.com/rgarcia/instacss

· InstaCSS

·, MDN

+25

15 ноября 2011, 14:26

Alizar

Тултипы на CSS3 и HTML5 ^{из песочницы}

В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

Читать дальше →

· html5

·, css3

·, transitions

·, tooltips

·, I love CSS3

+105

9 ноября 2011, 19:01

Nico_izo

Создаем анимированные кнопки при помощи CSS3

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

Читать дальше →

· css3

·, animation

·, buttons

+199

9 ноября 2011, 00:05

Mary Lou

Webmasters_by

Создаем оригинальные hover-эффекты при помощи CSS3

Мощь CSS3 огромна и в этом уроке вы сможете увидеть, как использовать его креативно. Мы собираемся создать несколько эффектов при наведении курсора мыши с помощью CSS3 transitions. При наведении курсора на эскиз будет показываться описание миниатюр, с использованием различных стилей в каждом примере.

CSS - Урок 3. Правила и селекторы CSS

CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:

Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:

Давайте попробуем на практике. Откройте html-страницу и css-страницу, созданные в прошлом уроке. Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег <body>, значит идем на страницу style.css и пишем следующий код:

body{ background: blue;}

Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:

body{ background: blue; color: white;}

Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):

body{ background: blue; color: white;}h1{ color:red;}h2{ color:yellow;}

Снова обновите страницу в браузере и убедитесь, что все так, как и задумывалось.

Думаю, принцип уже понятен: мы указываем селектор, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки, пока же мы рассматриваем общий принцип составления таблицы стилей.

Селекторы CSS

Селекторы по идентификатору

В нашем примере в качестве селекторов использовались элементы страницы: body, h1, h2. Но что делать, если в нашей html-странице есть несколько одинаковых элементов (например, параграфов), и мы хотим, чтобы текст всех параграфов был черным, а одного из них - розовым цветом. Тогда нам понадобится указать уникальный идентификатор для этого параграфа и создать для него стиль.

В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя. Например:

Текст параграфа с идентификатором (id).

Имена можно давать любые, кроме зарезервированных слов (к ним относятся имена тегов и параметров элементов HTML и CSS), например, нельзя идентификатору дать имя body. Давайте добавим в нашу html-страницу пару параграфов и одному из них присвоим идентификатор:

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Простой абзац

Абзац с идентификатором (id)

Если посмотреть сейчас на нашу страницу в браузере, то наши абзацы оба белого цвета. Добавим в таблицу стилей (style.css) стили для наших абзацев:

body{ background: blue; color: white;}h1{ color:red;}h2{ color:yellow;}p{ color:black;}p#pink{ color:pink;}

Мы сначала указали сделать текст всех параграфов черным, а текст параграфа с id "pink" сделать розовым. Наш селектор состоит в данном случае из элемента (p), разделителя (#) и имени идентификатора (pink).

Важно запомнить, что на странице может быть только один идентификатор (id). Т.е. для нашего примера нельзя создать два параграфа с id "pink", параграф с таким id может быть только один. Но каждый параграф может иметь свой идентификатор, например, можно создать параграф с id="green" и задать стиль для этого параграфа в таблице стилей.

Селекторы по классу

В примере выше мы создали параграф с розовым цветом текста и указали, что такой id может быть только один. Но, что делать, если мы хотим, чтобы розовый цвет текста был у двух или трех параграфов. Для этого в HTML существует параметр class, в качестве значения которого указывается его имя.

Давайте добавим в нашу html-страницу еще пару параграфов и присвоим им class="pink":

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Простой абзац

Абзац с идентификатором

Абзац с классом (class) pink

Для того, чтобы указать стиль для этого класса, в таблице стилей напишем правило, где в качестве селектора снова будет использоваться элемент p и имя pink, но в данном случае это имя класса, поэтому в качестве разделителя будет использоваться точка (.):

body{ background: blue; color: white;}h1{ color:red;}h2{ color:yellow;}p{ color:black;}p#pink{ color:pink;}p.pink{ color:pink;}

Абзацев с таким классом может быть сколько угодно.

Давайте подведем промежуточный итог:

если все подобные элементы (например, все заголовки h1) должны иметь один стиль, то селектор состоит только из этого элемента (например, p{color:black;})

если элемент (любой: абзац, заголовок...) должен отличаться от всех остальных, то ему присваивается идентификатор (id) и разделителем в таблице стилей является знак решетки (#), например, p#pink{color:pink;}.

если же на странице будет несколько элементов с одинаковым стилем, то им присваивается класс (class) и разделителем в таблице стилей является знак точки (.), например, p.pink{color:pink;}.

идентификатор имеет более высокий приоритет, чем класс. Поэтому, если для какого-либо элемента будет указан и класс, и идентификатор (что не противоречит принципам CSS), то применен будет стиль идентификатора.

Как уже упоминалось идентификаторы и классы можно задавать любым элементам html. Но часто бывает так, что мы хотим несколько разных элементов выделить одним стилем, например, зеленым цветом. В таком случае можно воспользоваться унифицированным селектором. В таких селекторах имя элемента не указывается, указываются точка или решетка, как признак класса или идентификатора и имя. Например:

.red{ color:red;}#yellow{ color:yellow;}

Таким образом, какому бы элементу мы не задали class="red" (заголовку, параграфу или ссылке), цвет текста у него станет красным. Одному элементу на странице (любому) мы можем задать id="yellow" и цвет текста этого элемента станет желтым.

Контекстный селектор

Пусть у нас есть html-страница вот с таким кодом:

Этот текст находится в параграфе

Это просто текст. Этот текст выделен курсивом

Этот текст находится в параграфе, но эта часть выделена курсивом

Мы хотим, чтобы курсив был выделен еще и зеленым цветом. Тогда в таблицу стилей мы запишем селектор по элементу, т.е.

i{ color:green;}

Сейчас наша страница в браузере выглядит так:

Но что, если мы захотим, чтобы не весь курсивный текст выделялся зеленым, а лишь тот, который находится в параграфах. Для этого мы внесем изменения в таблицу стилей:

p i{ color:green;}

Так мы указали, применять данный стиль к элементам i, которые находятся в элементах p. Названия элементов при этом отделяются пробелом. Такие селекторы называют контекстными. Теперь наша страница в браузере выглядит так:

Группировка селекторов

Если блоки объявления стилей для нескольких селекторов совпадают (например, мы хотим, чтобы заголовки первых трех уровней были зеленого цвета), то их можно сгруппировать. Для этого селекторы, к которым будет применяться один стиль, нужно перечислить через запятую. Пример:

h1, h2, h3{ color:green;}

Предположим, что кроме цвета, мы хотим задать нашим заголовкам размер. Тогда мы можем просто дописать в нашу таблицу стилей:

h1, h2, h3{ color:green;}h1{ font-size:18px;}h2{ font-size:16px;}h3{ font-size:14px;}

У наших заголовков будет указанный размер, но все они будут зеленого цвета.

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

Другие считают, что таким образом, ухудшается логичность кода. Так как, найдя селектор для заголовка h3, не сразу понятно, почему текст в нем зеленого цвета. Сторонники логики рекомендуют группировать только элементы, у которых блоки описаний полностью совпадают.

В общем, группировать или нет, дело вашего вкуса. Но вы должны помнить о разных подходах, когда будете читать чужой код, например, в шаблонах.

На этом урок, посвященный селекторам, закончен. В следующем уроке познакомимся с такими понятиями, как псевдоэлементы и псевдоклассы.

Внешние таблицы стилей

Переклад українською: Зовнішні таблиці стилів

Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил. Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример внешней таблицы стилей.

Пример кода

	.warning {color:#ff0000}
	h1.warning {text-decoration:underline}

p.warning {font-weight:bold}

Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.

Пример кода

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>External Style Sheet</title>
	<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

	</head>
	<body>

	<h1 class="warning">WARNING</h1>
	<p class="warning">Don't go there!</p>

	</body>
	</html>
Атрибуты	Описание
href	указывает на местонахождение внешней каскадной таблицы стилей
rel	атрибут должен устанавливать значение “stylesheet” для ссылки на таблицу стилей
type	должно быть установлено “text/css” для ссылки на таблицу стилей
Атрибуты <link>

Количество внешних каскадных таблиц стилей, которые может использовать страница HTML, неограниченно. Более, того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.

Встроенные стили

Мы создаем встроенные стили, добавляя тегам атрибуты стиля. Так же как и в случае с классом или атрибутами идентификатора (id), большинство элементов могут иметь стилевые атрибуты. Значения атрибута стиля разделяются точкой с запятой. Образец кода ниже демонстрирует применение встроенного стиля:

Образец кода

view source

print?

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Inline Styles</title>
	</head>

	<body>
	<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p>

	<ul style="margin-top:-20px; font-size:10pt">
	<li style="list-style-type:square">Hello</li>

	<li style="list-style-type:circle">Hi</li>
	<li style="list-style-type:disc">Howdy</li>

	</ul>
	</body>

</html>

Каскадные таблицы стилей: язык CSS

"Le style c'est l'homme meme."
"Стиль — это сам человек."

Ж. Бюффон, "Рассуждение о стиле"

Глава 2.1. Введение в таблицы стилей

2.1.1. Что такое CSS?

В декабре 1996 г. W3C стандартизовал первый уровень каскадных таблиц стилей (CSS1), который определил правила описания стилей визуального отображения элементов HTML-документов. В мае 1998 г. им была принят стандарт второго уровня таблиц стилей (CSS2), который существенно расширил возможности таблиц стилей. Основными особенностями CSS2 являются следующие:

· CSS2 — это язык, который позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML-документы и XML-приложения.

· CSS2 распространил понятие стиля отображения на печатающие устройства, синтезаторы речи и другие устройства отображения документов.

В основу данной части нашего справочника положен именно стандарт CSS2.

Цель создания каскадных таблиц стилей состояла в том, чтобы отделить структуру документа (описанную на языке HTML или подмножестве XML) от правил его отображения на различных устройствах (задаваемых таблицами CSS). Чтобы пояснить это утверждение, рассмотрим следующий пример HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD><TITLE>Моя домашняя страница</TITLE> <STYLE type="text/css"></STYLE> </HEAD><BODY><H1>Моя домашняя страница</H1><P>Добро пожаловать!</P></BODY></HTML>

Этот документ содержит элемент STYLE, содержащий два правила CSS: первое из них определяет, что цвет отображения элемента BODY должен быть красным, а второе — что цвет отображения элемента H1 должен быть синим. Поскольку стиль отображения элемента P не задан, он унаследует стиль своего родительского элемента, в данном случае элемента BODY. В результате данный HTML-документ будет отображаться так:

Моя домашняя страница

Добро пожаловать!

Теперь для изменения стиля отображения этого документа нам достаточно менять только содержимое элемента STYLE, не внося никаких модификаций в остальной HTML-документ. Для большей гибкости мы можем создать текстовый файл STYLE.CSS и перенести в него описание стилей:

BODY { color: blue }H1 { color: red }

HTML-документ после этого следует изменить следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD><TITLE>Моя домашняя страница</TITLE> <LINK rel="stylesheet" href="style.css" type="text/css"> </HEAD><BODY><H1>Моя домашняя страница</H1><P>Добро пожаловать!</P></BODY></HTML>

В дальнейшем для изменения стилей мы будем изменять только файл STYLE.CSS, не касаясь головного HTML-документа.

Теперь представим этот документ в виде дерева и введем соответствующую терминологию, которая будет нам необходима в дальнейшем изложении:

Корнем этого дерева является элемент HTML, который имеет двух сыновей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P (два последних элемента называются братьями, причем H1 является старшим братом, а P — младшим). Все элементы дерева являются потомками корня, а тот является их предком. Таким образом можно представить в виде дерева любой документ, к которому применимы правила языка CSS.

2.1.2. Включение таблиц стилей в HTML-документ

Имеется три способа задания стилей в HTML-документе. Перечислим их в порядке предпочтения.

2.1.2.1. Внешние таблицы стилей

Для подключения к документу внешней таблицы стилей (т. е. таблицы стилей, хранящейся в отдельном файле) следует поместить в заголовок документа элемент LINK, как показано выше, например:

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

Внешние таблицы стилей следует использовать в том случае, когда несколько HTML-документов пользуются единой таблицей стилей.

2.1.2.2. Внутренние таблицы стилей

Для включения в документ внутренней таблицы стилей следует поместить в заголовок документа элемент STYLE. Пример:

<HEAD> <STYLE type="text/css">  </STYLE> </HEAD><BODY> <H1>Этот заголовок имеет указанный выше стиль</H1></BODY>

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

2.1.2.3. Таблицы стилей элементов

Последним способом задания стилей является определения таблицы стилей отдельного элемента путем задания его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:

<H1 style="border-width: 1; border: solid; text-align: center" > Этот заголовок имеет указанный стиль</H1>

Вообще говоря, подобной практики следует избегать; она приемлема только в том случае, когда ваш документ содержит единственный элемент с данным набором стилей.

2.1.3. Синтаксис CSS

2.1.3.1. Кодировка символов

Таблица стилей CSS — это последовательность символов Unicode. Эти символы могут храниться в любой допустимой кодировке, при соблюдении следующих правил. Внутренние таблицы стилей должны иметь ту же кодировку символов, что и документ в целом. Кодировка внешних таблиц стилей определяется обозревателем в следующем порядке:

· сначала анализируется charset в поле Content-Type метаописателя HTML-документа;

· если его нет, то директива @charset;

· если ее нет, то ссылка на таблицу стилей в документе (например, атрибут charset элемента LINK).

Для включения в таблицу стилей символов, отсутствующих в данной кодировке. следует использовать формат "\xxxx", где xxxx — шестнадцатеричный код символа в Unicode. Например, код "\410" задает прописную русскую букву А.

2.1.3.2. Директива @charset

Директива @charset задает кодировку символов таблицы стилей, например:

@charset "ISO-8859-1";

Данная директива должна быть первой в таблице стилей, причем таблица должна содержать не более одной директивы @charset. Список допустимых кодировок символов приведен в Приложении 7, но обозреватель не обязан поддерживать все перечисленные там кодировки.

Поддержка:

Соответствует стандарту (5.0+)

Не поддерживается

2.1.3.3. Операторы, директивы и правила

Таблица стилей состоит из набора операторов. При этом каждый оператор является либо директивой, либо правилом. Операторы могут разделяться пробелами. В CSS пробелами считаются только следующие символы Unicode: пробел (код 32), табуляция (код 9), перевод строки (код 10), возврат каретки (код 13) и перевод формата (код 12).

Директива (at-rule) начинается с символа at (@) и соответствующего ключевого слова. CSS2 содержит следующие директивы:

Таблица 2.1. Директивы языка CSS
@charset	Задает кодировку символов.
@font-face	Задает описания шрифтов.
@import	Включает другую таблицу стилей в текущую.
@media	Задает имена устройств отображения.
@page	Задает свойства страницы для печати.

Примеры директив:

@import "subs.css";@media print { BODY { font-size: 10pt }}

Правило (rule) состоит из селектора и блока деклараций, заключенного в фигурные скобки, например:

H1 { font-weight: bold; font-size: 12pt; font-family: Helvetica; font-variant: normal; font-style: normal}

Здесь H1 — это селектор, за которым следует блок деклараций. Каждая декларация, как видно из данного примера, состоит из названия свойства (например, font-weight), символа двоеточия (:) и значения свойства (например, bold). Декларации должны разделяться точкой с запятой (;).

Отметим, что согласно определению CSS все его элементы не зависят от регистра. Таким образом мы можем писать h1 вместо H1, Font-Weight вместо font-weight и т.д. Тем не менее в целях единообразия в данном справочнике мы пишем имена селекторов прописными буквами, а названия свойств — строчными. Значения свойств, которые в документе могут зависеть от регистра, определяются языком документа. Так, названия тегов HTML не зависят от регистра, а названия тегов XML — зависят.

Таблицы стилей могут содержать комментарии. Комментарий начинается с символов /* и заканчивается символами */. Вложенные комментарии не допускаются. Пример:

H1 { font-weight: bold; /* жирность шрифта */ font-size: 12pt; /* размер шрифта */ font-family: Helvetica; /* название шрифта */ font-variant: normal; /* вариант шрифта */ font-style: normal /* стиль шрифта */}

2.1.4. Типы данных CSS

Значения свойств CSS могут быть следующих типов.

Целые и действительные числа

Некоторые свойства могут иметь целые (далее обозначаются как <целое>) или действительные (далее обозначаются как <число>) значения. Эти значения могут записываться только в десятичной нотации. Целое число состоит из одной или более десятичных цифр 0-9. Действительное число либо является целым, либо состоит из нуля или более десятичных цифр, за которыми следует точка (.) и одна или более десятичных цифр. И перед целыми, и перед действительными числами может стоять знак: плюс (+) или минус (-). Примеры:

Целые числа	Действительные числа

-21	1.234567
	-.999

Размеры

Размеры (далее обозначаются как <размер>) указывают на вертикальный или горизонтальный размеры чего-либо. Размер задается как <число>, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.

Единицы измерения подразделяются на абсолютные и относительные. Абсолютные единицы измерения задают точный физический размер, а относительные — указывают размер относительно другого размера. Их описания сведены в следующие таблицы:

Таблица 2.2. Абсолютные единицы измерения
in	дюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик)
cm	сантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки)
mm	миллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки)
pt	точки (1 точка = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм)
pc	пики (1 пика = 12 точек = 1/6 дюйма = 0.423 см = 4.23 мм)

Таблица 2.3. Относительные единицы измерения
em	размер (font-size) соответствующего шрифта
ex	высота строчных букв (x-height) соответствующего шрифта
px	пиксели (размер зависит от устройства отображения)

Абсолютные единицы измерения применимы только тогда, когда нам известны точные физические размеры устройства отображения (например, экрана дисплея или страницы принтера). Поэтому в большинстве случаев используются относительные единицы, назначение которых стоит пояснить подробнее.

Единицы em и ex основываются на размере шрифта того элемента, к которому относится данная декларация. При этом em задает размер шрифта, т. е. размер его наибольшей буквы (обычно это буква 'M', отсюда аббревиатура em), а ex — высоту строчных букв шрифта (обычно это высота буквы 'x', отсюда английское название x-height и аббревиатура ex). С другой стороны, единица px основана на размере пикселя устройства отображения (обычно это дисплей). Пиксель — это точка дисплея и ее размер зависит как от физических размеров экрана, так и от его разрешения: пиксель на экране с разрешением 640x480 будет больше, чем на экране с разрешением 1280x1024. Примеры задания размеров:

H1 { margin: 0.5em }H1 { text-indent: 1ex }H3 { font-size: 12px }H1 { margin: 0.5in }H2 { line-height: 3cm }H3 { word-spacing: 4mm }H4 { font-size: 12pt }H4 { font-size: 1pc }

Процентные значения

Процентные значения (далее обозначаются как <процент>) указывают на величину чего-либо в процентах от другой величины. Они задаются как <число>, за которым следует символ процента (%), например:

H1 { font-size: 120% }

Всюду, где CSS допускает использование процентных значений, в описании соответствующего свойства четко указывается, какая именно величина является основой для вычисления значения свойства в процентах.

URI

Этот тип значений (далее обозначаемый как <uri>) задает ссылку на унифицированные идентификаторы ресурсов. URI задается в форме url( URI ), например:

BODY { background: url(http://mysite.com/bg.gif) }

Текст внутри url() можно заключить в апострофы или кавычки — это ничего не изменит, например:

BODY { background: url("http://mysite.com/bg.gif") }

Цвета

Цветовые значения (далее обозначаются как <цвет>) могут задаваться либо шестнадцатеричным числом с префиксом "#" вида "#rrggbb", задающим RGB-код цвета, либо одним из 16-ти символических имен, приведенных в Таблице П9.1. CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторением цифр, а не добавлением нулей. Иными словами, код #FA1 соответствует полному коду #FFAA11. Кроме того, RGB-код цвета может быть задан конструкцией rgb( r, g, b ), например, следующие декларации задают один и тот же красный цвет:

EM { color: red } /* название цвета */EM { color: #f00 } /* #rgb */EM { color: #ff0000 } /* #rrggbb */EM { color: rgb(255,0,0) } /* целые в диапазоне 0 до 255 */EM { color: rgb(100%,0%,0%) } /* действительные в диапазоне от 0.0% до 100.0% */

Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в Таблице П9.2, но мы рекомендуем использовать вместо них соответствующие шестнадцатеричные значения.

Помимо стандартных имен цветов CSS поддерживает названия системных цветов, предназначенных для использования в соответствии с графическим пользовательским интерфейсом операционных систем клиентов. Эти названия и их назначение приведены в следующей таблице (значения этих цветов, принятые по умолчанию в системе Windows, указаны в Таблице П9.3).

Таблица 2.4. Системные цвета CSS
activeborder	Цвет рамки активного окна	inactivecaptiontext	Цвет текста заголовка неактивного окна
activecaption	Цвет фона заголовка активного окна	infobackground	Цвет фона подсказок (tooltips)
appworkspace	Цвет фона многооконной программы	infotext	Цвет текста подсказок (tooltips)
background	Цвет фона системной подложки (desktop)	menu	Цвет фона меню
buttonface	Цвет трехмерных кнопок	menutext	Цвет текста меню
buttonhighlight	Цвет выделенных трехмерных кнопок	scrollbar	Цвет фона полос прокрутки
buttonshadow	Цвет тени трехмерных кнопок	threeddarkshadow	Темная тень трехмерных элементов
buttontext	Цвет текста трехмерных кнопок	threedface	Цвет трехмерных элементов
captiontext	Цвет текста заголовков	threedhighlight	Цвет выделенных трехмерных элементов
graytext	Серый цвет (для запрещенных элементов)	threedlightshadow	Светлая тень трехмерных элементов
highlight	Цвет фона выделенных элементов	threedshadow	Тень трехмерных элементов
highlighttext	Цвет текста выделенных элементов	window	Цвет фона окон
inactiveborder	Цвет рамки неактивного окна	windowframe	Цвет фрейма окон
inactivecaption	Цвет фона заголовка неактивного окна	windowtext	Цвет текста в окнах

Строки

Текстовые строки (далее обозначаются как <строка>) могут быть заключены либо в кавычки, либо в апострофы. При этом если строка заключена в кавычки, для включения в нее символа кавычки нужно использовать форму \" или \22. Аналогично, если строка заключена в апострофы, для включения в нее символа апострофа нужно использовать форму \' или \27. Для включения в строку символа новой строки используется форма \A (код перевода строки в Unicode). Примеры текстовых строк:

"это 'строка'"'это \'строка\'''это "строка"'"это \"строка\"""это строка,\A состоящая из двух строк"

Счетчики

Счетчики (далее обозначаются как <счетчик>) обозначаются идентификаторами. Для извлечения значения счетчика используются обозначения counter( идентификатор ) или counter( идентификатор, стиль ). По умолчанию стиль равен decimal. Для доступа ко всем счетчикам с данным именем ис

Воспользуйтесь поиском по сайту: