Позиционирование элементов

Форматирование текста

Свойства шрифта

Свойства текста

Фон

Установка цвета

В CSS цвет можно задавать тремя способами.

1. Браузеры поддерживают некоторые цвета по их названию.

P { color: navy; background-color: yellow }

2. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML.

P { color: #F9E71A; background-color: #98560F }

3. Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

P { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%) }

Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В таблице 1 приведены допустимые псевдоклассы и их описания.

Курсоры

Вид	Свойство CSS
	cursor:default
	cursor:crosshair
	cursor:hand
	cursor:move
	cursor:text
	cursor:wait
	cursor:help
	cursor:n-resize
	cursor:ne-resize
	cursor:e-resize
	cursor:se-resize
	cursor:s-resize
	cursor:sw-resize
	cursor:w-resize
	cursor:nw-resize

Списки

Значения свойства list-style:

Границы и рамки

Для управления видом рамки предоставляется восемь значений параметра border-style:

Единицы измерения

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

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

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

Относительные единицы

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

Абсолютные единицы

Позиционирование элементов

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

Свойства CSS имеющие отношения к позиционированию приведены в таблице.

Положение элемента

Положение координат элемента зависит от свойства position, которому обычно присваивают значение absolute (абсолютное) или relative (относительное).

При абсолютном позиционировании элемент размещается относительно левого верхнего угла окна документа с помощью параметров left и top (рис. 1). В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя (рис. 2).

Рис. 1. Положение слоя относительно окна браузера

Параметр position: relative используется для смещения слоя относительно родительского элемента (рис. 2). Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.

Рис. 2. Положение слоя относительно родительского элемента

Последние версии браузеров стали поддерживать еще один способ размещения элементов на веб-странице — через свойства bottom и right, определяющих положение правого нижнего угла элемента. Пока, однако, такое задание координат не так распространено и ограничено тем, что не все браузеры его поддерживают. Поэтому более традиционным вариантом можно считать определение положения элемента с помощью параметров left и top (пример 2).

Значения координат могут принимать и отрицательные значения, тогда дочерний элемент будет накладываться на предыдущий элемент, как показано на рис. 3.

Рис. 3. Результат наложения элементов

Полосы прокрутки.

Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Параметр overflow принимает одно из четырех значений.
visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden — отображается только область внутри элемента, остальное будет обрезано.
scroll — всегда добавляются полосы прокрутки.
auto — полосы прокрутки добавляются только при необходимости.