3.9. Единицы измерения, используемые в каскадных таблицах стилей
При указании длины принимайте во внимание следующее:
• Не ставьте пробел между числом и двухбуквенным сокращением.
Значения могут содержать дробную часть, например 14 . 5cm.
В некоторых свойствах, например в полях, допустимы отрицательные значения: margin: -500px. Ниже перечислены возможные единицы измерений.
in – дюйм = 2, 54 см
cm – сантиметры
mm – миллиметры
px – пиксели
pt – пункты = 1/72 дюйма ~ 0,375 мм
pc = пика = 12 pt
% – процент
еm – относительная единица измерения, которая обычно равна ширине заглавной буквы «М» в текущем шрифте. В CSS эта единица равна размеру шрифта в пунктах (т. е. ширина em в шрифте 24pt равна 24 пунктам) и используется для указания размера как по горизонтали, так и по вертикали
ex – Относительная единица измерения, равная высоте буквы «х» в нижнем регистре для текущего шрифта (приблизительно половина em)
3.10. Свойства css для управления цветом
Цвет можно задать:
названием; (red, blue, ...)
кодом: #RRGGBB
кодом #RGB
В данном методе используется трехзначный синтаксис, который преобразуется в шестизначную форму путем повторения каждой цифры (следовательно, #00F аналогично #0000FF).
с помощью функции: rgb (R, G, B), например color:rgb (0, 255, 0);
rgb (R%; G%; B%)
color:rgb(0%; 0%; 100%)
Практика Задание 1
Скопировать в свою область файл Исходный вариант.html
Изменить цвет шрифта, размер шрифта и цвет фона, сославшись на отдельный файл .css. (например, цвет шрифта – зеленый, размер – 30px, фон – розовый).
Используя заголовочные стили, залить фон вначале тегов параграфа текстурой bfon1.jpg (или другой), затем тега body. Сделайте вывод о том, какой стиль приоритетнее (внешний, заголовочный?)
Измените цвет шрифта только 1-го куплета на красный.
В первом куплете фон слова зеленый сделайте зеленым. (С помощью стилей).
Каждый второй куплет (параграф) сделайте с отступом от левого края на 100px.
С помощью псевдоселекторов поменяйте цвета по умолчанию у ссылки.
Задание 2
В задании 1 переделать форматирование текста с помощью внешней таблицы стилей. При форматировании используйте задание стилей для элементов логического форматирования.
Сделать несколько вариантов фонового изображения:
Одиночный по центру справа или в центре или слева;
С вертикальным повторением слева или справа, начинающийся не с самого верха;
С горизонтальным повторением;
Не прокручивающийся вместе с текстом.
Задание 3
Создайте несколько фрагментов текста и, применив к ним классы CSS, получите, например, такой результат:
3.11. Оформление таблиц с помощью css
По соображениям обратной совместимости технологий в CSS действует построчная модель структуры таблиц, являющаяся отправной точкой для построения прочих аналогичных моделей и свойств для управления внешним видом.
Заголовки таблиц
Элемент caption для представления заголовков таблиц впервые появился в составе HTML 4.O. В CSS 2.1 с ним связано специальное поведение и собственное свойство для размещения заголовка выше или ниже таблицы под названием caption-side
caption-side
Значения: top \ bottom | inherit
Начальное значение: top
Применимо: К заголовкам таблиц (элементам HTML caption).
Наследуется: Да.
Связь заголовка с телом таблицы показывает рис.:
Рис 3. 1. Таблица и заголовок
Как и все блочные элементы, таблица и заголовок могут иметь свой набор свойств, например отступов, например:
table caption {font:1.5em Georgia, "Times New Roman", Times, serif;
padding:1em;}
При этом они трактуются и как потомки от table, а стало быть, наследуют и свойства самой таблицы. Поэтому если таблица была объявлена синей, то, несмотря на существование у заголовка своего блока и своих отступов, синим станет и он.
Существует неявный прямоугольник, в который заключены прямоугольники таблицы и заголовка. Именно он используется при позиционировании НТМL элемента table.