2. Единицы измерения CSS
Абсолютные:
| Пиксел (px)
| Точка устройства отображения (обычно монитора). Иногда его относят к абсолютным, иногда к относительным единицам.
5 px:
|
| Пункт (pt)
| Равняется 1/72 дюйма, то есть приблизительно 0,35 мм
5 pt:
|
| Миллиметр (mm)
| 5 mm:
|
| Пика (pc)
| Равняется 12 пунктам или 1/6 дюйма, т.е. приблизительно 4,2 мм. Используется в типографском деле.
5 pc:
|
| Сантиметр (cm)
| 5 cm:
|
| Дюйм (in)
| Равняется 2,54 см.
5 in:
|
Относительные:
| Размер шрифта текущего элемента (em)
| 5 em:
MMMMM
5 em:
MMMMM
|
| Высота буквы "x" (ex)
| 5 ex:
ххххх
5 ex:
ххххх
|
| Процент (%)
| Доля от ширины/высоты родительского контейнера.
5 % :
|
В большинстве случаев можно использовать и дробные значения, такие как 1.4cm или .8em.
Примеры:
<hr align=left style="width:.5in"> -
<hr align=left style="width:1in"> -
<hr align=left style="width:1.5in"> -
Для значения 0 можно и не указывать единицы измерения.
Примечание:
1em = 100% размера текущего шрифта.
Примеры:
Образец_0 <span style="font-size:50%">Образец_1</span> Образец_0 <span style="font-size:.5em">Образец_2</span> Образец_0
Образец_0 <span style="font-size:200%">Образец_1</span> Образец_0 <span style="font-size:2em">Образец_2</span> Образец_0
2. Способы установки цвета
Ниже перечислены способы, через которые в CSS можно определить цвет того или иного элемента. Разъяснения заменены примерами.
1. Словесное предопределённое название цвета
<span style="color: aqua">Тра-ля-ля</span> - Тра-ля-ля
2. Шестнадцатеричное значение RGB-кода цвета
<span style="color: #00FFFF">Тра-ля-ля</span> - Тра-ля-ля
3. Сокращённое шестнадцатеричное значение RGB-кода цвета. Чтобы преобразовать сокращённое значение в полное, каждый символ следует удвоить. Т.е. выражение #09A является эквивалентом #0099AA.
<span style="color: #0FF">Тра-ля-ля</span> - Тра-ля-ля
4. Десятичное значение RGB-кода цвета
<span style="color: rgb(0,255,255)">Тра-ля-ля</span> - Тра-ля-ля
5. Процентные значения насыщенности цветов
<span style="color: rgb(0%,100%,100%)">Тра-ля-ля</span> - Тра-ля-ля
(Значения процентов могут быть и дробными, к примеру "32.6%". Рассчитываются относительно других значений в документе. Иногда проценты вычисляются относительно текущего элемента, в других случаях на основе свойств родительского элемента. В этом свойстве копаться я не стала.)
6. Система HSL. Не воспринимается Internet Explorer-ом.
Hue - оттенок
Saturate - насыщенность
Lightness - светлота
<span style="color: hsl(180,100%,50%)">Тра-ля-ля</span> - Тра-ля-ля
7. Система RGBA. Аналогична RGB, но дополнительно включает альфа-канал, задающий прозрачность. Не воспринимается Internet Explorer-ом.
<span style="color: rgba(0,255,255,.4)">Тра-ля-ля</span> - Тра-ля-ля
8. Система HSLA. Аналогична HSL, но дополнительно включает альфа-канал, задающий прозрачность. Не воспринимается Internet Explorer-ом.
<span style="color: hsla(180,100%,50%,.4)">Тра-ля-ля</span> - Тра-ля-ля
