Форматирование текста
Свойства шрифта
| Свойство | Возможные значения | Описание | Пример |
| font-family | Список названий гарнитуры шрифта | Задает гарнитуру шрифта в виде списка предпочтений | p {font-family: Arial, serif} |
| font-style | normal italic oblique | Нормальный шрифт Курсив Наклонный шрифт | p {font-style: italic} |
| font-variant | normal small-caps | Нормальный шрифт Капитель | p {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100-900 | Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный | p {font-weight: bold} |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
Свойства текста
| Свойство | Возможные значения | Описание | Пример |
| line-height | normal множитель точно % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration | none underline overline line-through blink | Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные | text-transform: capitalize |
| text-align | left right center justify | Выравнивание текста | text-align: justify выравнивание по ширине |
| text-indent | точно % | Отступ первой строки | text-indent:15px; |
| color | white #ffffff RGB(255,255,255) RGB(100%,100%,100%) | Цвет шрифта элемента | color:#ffffff; |
Фон
| Свойство | Значение | Описание | Пример |
| background-color | Цвет transparent | Цвет фона | BODY { background-color: #6699FF } |
| background-image | URL none | Фоновый рисунок | BODY { background-image: url (bg.gif) } |
| background-repeat | repeat repeat-x repeat-y no-repeat | Повторяемость фонового рисунка | BODY { background-image: url (bg.gif) background-repeat: repeat-y } |
| background-attachment | scroll fixed | Прокручиваемость фона вместе с документом | BODY { background-image: url (bg.gif) background-attachment: fixed } |
| background-position | Проценты Пикселы top center bottom left right | Начальное положение фонового рисунка | BODY { background-position: left top } |
Установка цвета
В 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 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Курсоры
| Вид | Свойство 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 | disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none | Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. | LI {list-style: circle} LI {list-style: upper-alpha} |
| list-style-image | none URL | Устанавливает символом маркера любую картинку. | LI {list-style-image: url(check.gif)} |
| list-style position | outside inside | Выбор положения маркера относительно блока строк текста. | LI {list-style-position: inside;} |
Значения свойства list-style:
| Код HTML | Пример |
| <li style="list-style: disc"> |
|
| <li style="list-style: circle"> |
|
| <li style="list-style: square"> |
|
| <li style="list-style: decimal"> |
|
| <li style="list-style: lower-roman"> |
|
| <li style="list-style: upper-roman"> |
|
| <li style="list-style: lower-alpha"> |
|
| <li style="list-style: upper-alpha"> |
|
Границы и рамки
| Свойство | Значение | Описание | Пример |
| padding-top padding-right padding-bottom padding-left padding | значение % | Отступ от границы элемента до его содержимого | table {padding: 15px 15px} |
| border-top-width border-right-width border-bottom-width border-left-width border-width | thin medium thick значение | Толщина рамки | P {border-top-width: 4px} |
| border-color | цвет | Цвет рамки | P {border-color: red} |
| border-top-style border-right-style border-bottom-style border-left-style border-style | none dotted dashed solid double groove ridge inset outset | Стиль рамки | table {border-style: double} |
| border-top border-right border-bottom border-left | border-width border-style цвет | Определяет толщину, стиль и цвет каждой границы | table {border-top: solid 4px red; border-left: solid 4px blue} |
| border | см. выше | Задает толщину, стиль и цвет рамки | table {border: solid 4px red} |
Для управления видом рамки предоставляется восемь значений параметра border-style:
Единицы измерения
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.
Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.
Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.
Относительные единицы
| Единица | Описание |
| em | Высота шрифта элемента |
| ex | Высота символа x |
| px | Пиксел |
| % | Процент |
Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом. Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта. Хотя мы привыкли измерять все в миллиметрах и подобных единицах, пункт, пожалуй, единственная величина из неметрической системы измерения, которая используется у нас повсеместно благодаря текстовым редакторам и издательским системам.
Абсолютные единицы
| Единица | Описание |
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Миллиметр |
| pt | Пункт (1 пункт равен 1/72 дюйма) |
| pc | Пика (1 пика равна 12 пунктам) |
Позиционирование элементов
Позиционирование элементов позволяет определять их положение на странице, а также управлять формой и определять, что делать с элементом, если его размер слишком большой, чтобы соответствовать указанной области.
Свойства CSS имеющие отношения к позиционированию приведены в таблице.
| Свойство | Значение | W3C | Описание | Пример |
| bottom | auto % значение | CSS2 | Задает положение нижнего края элемента относительно его родителя. | P { bottom: 20% } |
| clip | auto форма | CSS2 | Определяет область вырезки элемента. | P { clip: rect(10px 110px 80px 20px) } |
| left | auto % значение | CSS2 | Определяет положение левого края элемента относительно его родителя. | P { left: -100px } |
| overflow | visible hidden scroll auto | CSS2 | Отображение полос прокрутки, если содержание не помещается в заданную область. | DIV {overflow: scroll } |
| right | auto % значение | CSS2 | Задает положение нижнего края элемента относительно его родителя. | P { right: 20px } |
| top | auto % значение | CSS2 | Определяет положение верхнего края элемента относительно его родителя. | P { top: 50% } |
| vertical-align | baseline sub super top text-top middle bottom text-bottom % значение | CSS1 | Вертикальное выравнивание элемента относительно базовой линии. | SPAN.sup {vertical-align: super } |
| z-index | auto номер | CSS2 | Порядок элемента при наложении нескольких элементов друг на друга. | .top { z-index: 10 } |
Положение элемента
Положение координат элемента зависит от свойства 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 — полосы прокрутки добавляются только при необходимости.
