- •Каскадные Таблицы Стилей
- •Изменение ширины элемента с «шагом» в несколько пикселей из песочницы
- •В чем суть?
- •Как это работает?
- •Еще чуть-чуть о круглых аватарках на css3 и маленькой тайне Оперы из песочницы
- •6 Декабря 2011, 06:01
- •Круглые аватарки средствами css 3
- •2 Декабря 2011, 01:49
- •Свойство «text-size-adjust» становится более кроссбраузерным
- •Реалистичные тени при помощи css3 без использования изображений
- •InstaCss: удобный поиск по справочнику css
- •Тултипы на css3 и html5 из песочницы
- •Создаем анимированные кнопки при помощи css3
- •Создаем оригинальные hover-эффекты при помощи css3
- •Селекторы css
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Внешние таблицы стилей
- •Пример кода
- •Пример кода
- •Встроенные стили
- •Образец кода
- •Каскадные таблицы стилей: язык css
- •Глава 2.1. Введение в таблицы стилей
- •2.1.1. Что такое css?
- •Моя домашняя страница
- •2.1.2. Включение таблиц стилей в html-документ
- •2.1.2.1. Внешние таблицы стилей
- •2.1.2.2. Внутренние таблицы стилей
- •2.1.2.3. Таблицы стилей элементов
- •2.1.3. Синтаксис css
- •2.1.3.1. Кодировка символов
- •2.1.3.2. Директива @charset
- •2.1.3.3. Операторы, директивы и правила
- •2.1.4. Типы данных css
- •Целые и действительные числа
- •Размеры
- •Процентные значения
- •Счетчики
- •Угловые величины
- •Времена
- •Частоты
- •2.1.5. Типы устройств отображения
- •2.1.6. Директива @media
2.1.4. Типы данных css
Значения свойств CSS могут быть следующих типов.
Целые и действительные числа
Некоторые свойства могут иметь целые (далее обозначаются как <целое>) или действительные (далее обозначаются как <число>) значения. Эти значения могут записываться только в десятичной нотации. Целое число состоит из одной или более десятичных цифр 0-9. Действительное число либо является целым, либо состоит из нуля или более десятичных цифр, за которыми следует точка (.) и одна или более десятичных цифр. И перед целыми, и перед действительными числами может стоять знак: плюс (+) или минус (-). Примеры:
Целые числа |
Действительные числа |
101 |
101 |
-21 |
1.234567 |
1234567 |
-.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 }