закрыть ВНИМАНИЕ! 13 ФЕВРАЛЯ СОСТОИТСЯ НАБОР НА КУРСЫ МЕДИТАЦИИ МЕДИТАЦИЯ - основное средство развития психики и самопознания. Познать метод, дающий внутреннюю гармонию и раскрывающий внутренние глубины предлагают данные курсы.

Подробности на странице: http://untaware.blogspot.ru/p/0021_30.html

Свойства CSS

Свойства Background

Свойство Описание Значения Версия
CSS
background позволяет задать стиль фона, определив в одной строке сразу несколько атрибутов: цвет фона, фоновую картинку, её положение 1
background-attachment Управляет способом прикрепления фонового изображения к окну браузера. По умолчанию, при прокрутке (скроллинге) содержимого веб-страницы фон перемещается вместе с текстом. Cвойство background-attachment позволяет зафиксировать фоновое изображение относительно окна браузера, сделать его неподвижным. scroll
Фоновое изображение подвижно (прокручивается вместе с содержимым страницы).
fixed
Фиксирует фоновое изображение.
inherit
Заимствует значение свойства у родительского элемента.
1
background-color Устанавливает цвет фона элемента. Цвет применяется ко всему фону содержимого элемента, и распространяется на его внутренние отступы (paddings). Внешние поля (margins) остаются прозрачными. цвет
Можно напрямую указать цвет фона одним из стандартных способов.
transparent
Устанавливает прозрачный фон.
inherit
Заимствует значение свойства у родительского элемента.
1
background-image устанавливает фоновое изображение для элемента url('...файл...')
Ссылка на картинку - адрес (URL) изображения
none
Фоновое изображение не требуется.
inherit
Заимствует значение свойства у родительского элемента.
1
background-position Устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений. процент% процент%
Первое значение определяет положение по горизонтали, второе - по вертикали. Например, 0% 0% - верхний левый угол. 100% 100% - правый нижний.

процент%
Горизонтальное положение картинки в процентах от 0% до 100%. Вертикальное значение будет равным 50% (=посередине).

расстояние расстояние
Указывает местоположение (по горизонтали и вертикали соответственно) с использованием принятых в CSS способов задания размеров.

расстояние
Горизонтальное положение картинки, указанное одним из принятых в CSS способов задания размеров. Вертикальное значение будет равным 50% (=посередине).

left top
Верхний левый угол - то же самое, что 0% 0% или top left.

top
Посередине, наверху. То же самое, что и 50% 0%, top center, center top.

right top
Верхний правый угол. То же самое, что и 100% 0%, top right.

left
Слева, посередине. То же самое, что и 0% 50%, left center, center left.

center
В центре. То же самое, что и 50% 50%, center center

right
Справа, посередине. То же, что и 100% 50%, right center, center right.

left bottom
Левый нижний угол. То же самое, что и 0% 100%, bottom left.

bottom
Посередине, внизу. То же, что и 50% 100%, center bottom, bottom center.

right bottom
Правый нижний угол. То же самое, что и 100% 100%, bottom right.

inherit
Заимствует значение свойства у родительского элемента.
1
background-repeat управляет способом "размножения" - циклического повторения фонового изображения.

repeat-x
Размножает изображение только по вертикали.

repeat-y
Размножает изображение только по горизонтали.

repeat
Размножает изображение в обоих направлениях - и по горизонтали и по вертикали.

no-repeat
Не размножает изображение.

inherit
Заимствует значение свойства у родительского элемента.

1

Свойства Border и Outline

Свойство Описание Значения Версия
CSS
border сокращённое свойство, управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину. Значения свойств border-width, border-style и border-color разделенные пробелом, могут располагаться в любом порядке. 1
border-bottom Управляет внешним видом нижней стороны рамки вокруг элемента. Предлагает сокращенный вариант записи для свойств border-bottom-width, border-bottom-style и border-bottom-color - цвет, стиль и ширину можно определить в одной строке.

Значения свойств border-bottom-width, border-bottom-style и border-bottom-color разделенные пробелом; могут располагаться в любом порядке.

1
border-bottom-color Устанавливает цвет нижней стороны рамки вокруг элемента

цвет
Цвет указывается одним из стандартных способов.

transparent
Прозрачный цвет рамки.

inherit
Заимствует значение свойства у родительского элемента.

2
border-bottom-style Управляет стилем нижней стороны рамки вокруг элемента
solid
    Обычная сплошная рамка.
none
    Рамка отсутствует, её ширина равна нулю.
hidden
    Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
    Рамка в виде последовательности точек (мелкий пунктир).
dashed
    Пунктирная рамка.
double
    Двойная линия.
groove
    "Вдавленная" рамка, с эффектом объёма.
ridge
    "Выпуклая" рамка, с эффектом объёма.
inset
    Вариант "вдавленной" рамки, с эффектом объёма.
outset
    Вариант "выпуклой" рамки, с эффектом объёма.
inherit
    Заимствует значение свойства у родительского элемента. 
    
2
border-bottom-width Управляет толщиной нижней стороны рамки вокруг элемента
ширина
    Точное указание ширины рамки одним 
    из принятых в CSS способов задания размеров. 
    Единственный нюанс - толщина 
    не может иметь отрицательное значение.
thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
1
border-color Устанавливает цвет рамки вокруг элемента, оказывая влияние на все четыре её стороны.
transparent
    Устанавливает прозрачный цвет. 
inherit
    Наследует значение родителя.

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

Число значений Результат
1 Цвет границы будет установлен для всех сторон элемента.
2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3 Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.


1
border-left Управляет внешним видом левой стороны рамки вокруг элемента. По сути, border-left предлагает сокращенный вариант записи для свойств border-left-width, border-left-style и border-left-color - цвет, стиль и ширину можно определить в одной строке.

Значения свойств border-left-width, border-left-style и border-left-color разделенные пробелом; могут располагаться в любом порядке.

inherit
Заимствует значение свойства у родительского элемента.

1
border-left-color Устанавливает цвет рамки слева от элемента.
цвет
    Цвет указывается одним из стандартных способов.
transparent
    Прозрачный цвет рамки.
inherit
    Заимствует значение свойства у родительского элемента.
2
border-left-style Управляет стилем рамки слева от элемента.
solid
    Обычная сплошная рамка.
none
    Рамка отсутствует, её ширина равна нулю.
hidden
    Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
    Рамка в виде последовательности точек (мелкий пунктир).
dashed
    Пунктирная рамка.
double
    Двойная линия.
groove
    "Вдавленная" рамка, с эффектом объёма.
ridge
    "Выпуклая" рамка, с эффектом объёма.
inset
    Вариант "вдавленной" рамки, с эффектом объёма.
outset
    Вариант "выпуклой" рамки, с эффектом объёма.
inherit
    Заимствует значение свойства у родительского элемента. 
    
2
border-left-width Управляет толщиной рамки слева от элемента.
ширина
    Точное указание ширины рамки одним 
    из принятых в CSS способов задания размеров. 
    Единственный нюанс - толщина 
    не может иметь отрицательное значение.
thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
1
border-right Управляет внешним видом правой стороны рамки вокруг элемента. По сути, border-right предлагает сокращенный вариант записи для свойств border-right-width, border-right-style и border-right-color - цвет, стиль и ширину можно определить в одной строке. Значения свойств border-right-width, border-right-style и border-right-color разделенные пробелом; могут располагаться в любом порядке.
inherit
    Заимствует значение свойства у родительского элемента.
1
border-right-color Устанавливает цвет рамки справа от элемента.
цвет
    Цвет указывается одним из стандартных способов.
transparent
    Прозрачный цвет рамки.
inherit
    Заимствует значение свойства у родительского элемента.
2
border-right-style Управляет стилем рамки справа от элемента.
solid
    Обычная сплошная рамка.
none
    Рамка отсутствует, её ширина равна нулю.
hidden
    Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
    Рамка в виде последовательности точек (мелкий пунктир).
dashed
    Пунктирная рамка.
double
    Двойная линия.
groove
    "Вдавленная" рамка, с эффектом объёма.
ridge
    "Выпуклая" рамка, с эффектом объёма.
inset
    Вариант "вдавленной" рамки, с эффектом объёма.
outset
    Вариант "выпуклой" рамки, с эффектом объёма.
inherit
    Заимствует значение свойства у родительского элемента. 
    
2
border-right-width Управляет толщиной рамки справа от элемента.
ширина
    Точное указание ширины рамки одним 
    из принятых в CSS способов задания размеров. 
    Единственный нюанс - толщина 
    не может иметь отрицательное значение.
thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
1
border-style Свойство border-style управляет стилем рамки вокруг элемента, оказывая влияние на все четыре её стороны.
solid
    Обычная сплошная рамка.
none
    Рамка отсутствует, её ширина равна нулю.
hidden
    Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
    Рамка в виде последовательности точек (мелкий пунктир).
dashed
    Пунктирная рамка.
double
    Двойная линия.
groove
    "Вдавленная" рамка, с эффектом объёма.
ridge
    "Выпуклая" рамка, с эффектом объёма.
inset
    Вариант "вдавленной" рамки, с эффектом объёма.
outset
    Вариант "выпуклой" рамки, с эффектом объёма.
inherit
    Заимствует значение свойства у родительского элемента. 
    

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

Число значений Результат
1 Стиль границы будет задан для всех сторон элемента.
2 Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
3 Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

 

1
border-top Управляет внешним видом верхней стороны рамки вокруг элемента. По сути, border-top предлагает сокращенный вариант записи для свойств border-top-width, border-top-style и border-top-color - цвет, стиль и ширину можно определить в одной строке. Значения свойств border-top-width, border-top-style и border-top-color разделенные пробелом; могут располагаться в любом порядке.
      
inherit
Заимствует значение свойства у родительского элемента.
1
border-top-color Устанавливает цвет верхней стороны рамки над элементом.
цвет
    Цвет указывается одним из стандартных способов.
transparent
    Прозрачный цвет рамки.
inherit
    Заимствует значение свойства у родительского элемента.
2
border-top-style Управляет стилем верхней стороны рамки вокруг элемента.
solid
    Обычная сплошная рамка.
none
    Рамка отсутствует, её ширина равна нулю.
hidden
    Результат тот же, что и при border-bottom-style: none - рамка не отображается.
dotted
    Рамка в виде последовательности точек (мелкий пунктир).
dashed
    Пунктирная рамка.
double
    Двойная линия.
groove
    "Вдавленная" рамка, с эффектом объёма.
ridge
    "Выпуклая" рамка, с эффектом объёма.
inset
    Вариант "вдавленной" рамки, с эффектом объёма.
outset
    Вариант "выпуклой" рамки, с эффектом объёма.
inherit
    Заимствует значение свойства у родительского элемента. 
    
2
border-top-width Управляет толщиной верхней рамки над элементом.
ширина
    Точное указание ширины рамки одним 
    из принятых в CSS способов задания размеров. 
    Единственный нюанс - толщина 
    не может иметь отрицательное значение.
thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
1
border-width управляет толщиной рамки вокруг элемента, оказывая влияние на все четыре её стороны.
ширина
    Точное указание ширины рамки одним 
    из принятых в CSS способов задания размеров. 
    Единственный нюанс - толщина 
    не может иметь отрицательное значение.

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

Число значений Результат
1 Толщина границы будет установлена для всех сторон элемента.
2 Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
3 Первое значение задает толщину верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

 

thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
1
outline Свойство outline это быстрый способ задать следующие параметры: outline-width , outline-style и/или outline-color . В отличие от свойства border , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента. Можно задать как один параметр, так и два или три одновременно.
Значения свойств outline-width, outline-style  и outline-color.

inherit
Заимствует значение свойства у родительского элемента.
2
outline-color определяет цвет контура вокруг элемента. В отличие от свойства border-color , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента
цвет
    Цвет контура задается одним из стандартных способов.
invert
    Цвет контура задается браузером автоматически так, 
    чтобы он был максимально контрастным относительно фона.
inherit
    Заимствует значение свойства у родительского элемента.
2
outline-style Свойство outline-style определяет вид контура вокруг элемента. В отличие от свойства border-style , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента
     
none
    Значение по умолчанию. Контур не отображается.
hidden
    Контур не отображается.
dotted
    Контур отображается в виде точек.   
    
dashed
    Контур отображается в виде коротких черточек.   
    
solid
    Контур отображается в виде линии.   
    
double
    Контур отображается в виде двух линий.   
    
groove
    Контур отображается в виде вдавленной рамки.   
    
ridge
    Данное значение отображает эффект, противоположный groove. 
    Контур отображается в виде условно выступающей рамки.   
    
inset
    Применение этого значение создает рамку с имитацией 3D эффекта, 
    при котором осветляется нижний правый угол рамки.   
outset
    Применение этого значение создает рамку с имитацией 3D эффекта, 
    при котором осветляется верхний левый угол рамки.   
inherit
    Заимствует значение свойства у родительского элемента.       
      
2
outline-width Свойство outline-width определяет ширину контура вокруг элемента. В отличие от свойства border-width , применение данного параметра не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента
      
ширина
    Точное указание ширины рамки одним из принятых в CSS способов задания размеров.
thin
    Тонкая рамка (обычно 2 пиксела).
medium
    Рамка средней ширины (обычно 4 пиксела).
thick
    Толстая рамка (обычно 6 пикселов).
inherit
    Заимствует значение свойства у родительского элемента.
    
    
2

Свойства размеров

Свойство Описание Значения Версия
CSS
height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Высота не включает толщину границ вокруг элемента, значение отступов и полей. значение | проценты | auto | inherit 1
max-height Устанавливает максимальную высоту элемента. значение | проценты | inherit 2
max-width Устанавливает максимальную ширину элемента. значение | проценты | inherit 2
min-height Задает минимальную высоту элемента. значение | проценты | inherit 2
min-width Устанавливает минимальную ширину элемента. значение | проценты | inherit 2
width Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей. значение | проценты | auto | inherit 1

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

Свойство Описание Значения Версия
CSS
font универсальное сокращённое свойство, позволяет буквально "в одной строке" одновременно задать несколько свойств шрифта: font-style ; font-variant ; font-weight ; font-size (обязательное) ; line-height ; font-family (обязательное) 1
font-family Позволяет выбрать шрифт для отображения текста. 1
font-size Позволяет задать размер шрифта. относительный размер; larger или smaller; именованный размер - один из возможных размеров: xx-small, x-small, small, medium, large, x-large или xx-large; точный размер 1
font-style Управляет наклоном шрифта normal - Обычный прямой шрифт, без наклона.
italic - Курсивный шрифт - наклонный шрифт, имитирующий рукописный.
oblique - Наклонный шрифт. В большинстве браузеров отображается курсивом.
inherit - Заимствует значение свойства у родительского элемента.
1
font-variant Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.

normal
Оставляет регистр символов исходным, заданным по умолчанию.
small-caps
Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1.
inherit
Наследует значение родителя

1
font-weight Устанавливает насыщенность шрифта bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 1

Generated Content Properties

Свойство Описание Значения Версия
CSS
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
quotes Sets the type of quotation marks for embedded quotations 2

Свойства Списков

Свойство Описание Значения Версия
CSS
list-style Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, list-style-position и list-style-image отдельно 1
list-style-image Устанавливает адрес изображения, которое служит в качестве маркера списка

none
Отменяет изображение в качестве маркера для родительского элемента.
url
Относительный или абсолютный путь к графическому файлу.
inherit
Наследует значение родителя.

1
list-style-position Определяет, как будет размещаться маркер относительно текста. outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом 1
list-style-type Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка и нумерованного .

Маркированный список

circle
Маркер в виде кружка.
disc
Маркер в виде точки.
square
Маркер в виде квадрата.

Нумерованный список

armenian
Традиционная армянская нумерация.
decimal
Арабские числа (1, 2, 3, 4,...).
decimal-leading-zero
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian
Традиционная грузинская нумерация.
lower-alpha
Строчные латинские буквы (a, b, c, d,...).
lower-greek
Строчные греческие буквы
lower-latin
Это значение аналогично lower-alpha.
lower-roman
Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha
Заглавные латинские буквы (A, B, C, D,...).
upper-latin
Это значение аналогично upper-alpha.
upper-roman
Римские числа в верхнем регистре (I, II, III, IV, V,...).
none
Отменяет маркеры для списка.
inherit
Наследует значение родителя.
1

Свойства Margin

Свойство Описание Значения Версия
CSS
margin Свойство margin сокращённое свойство, позволяющее быстро задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left. Margin - это пространство между внешней стороной рамки элемента на расстояние, заданное для этого свойства

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1
margin-bottom Устанавливает величину отступа от внешней стороны нижней рамки элемента.

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1
margin-left Устанавливает величину отступа от внешней стороны левой рамки элемента.

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1
margin-right Устанавливает величину отступа от внешней стороны правой рамки элемента.

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1
margin-top Устанавливает величину отступа от внешней стороны верхней рамки элемента.

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1

Свойства Padding

Свойство Описание Значения Версия
CSS
padding

Устанавливает значение полей вокруг содержимого элемента.

Полем называется расстояние от внутреннего края рамки элемента до его содержимого.

Позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

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

 

Число значений Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

 

 

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. 1
padding-bottom Устанавливает значение поля от нижнего края содержимого элемента Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. 1
padding-left Устанавливает значение поля от левого края содержимого элемента. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. 1
padding-right Устанавливает значение поля от правого края содержимого элемента. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. 1
padding-top Устанавливает значение поля от верхнего края содержимого элемента. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. 1

Свойства позиционирования

Свойство Описание Значения Версия
CSS
bottom

Используется совместно со свойством position. В зависимости от конкретного значения position свойство bottom может сдвигать элемент вверх относительно нижнего края:

  • своей исходной позиции (position:relative)
  • позиции родительского элемента (position:absolute)
  • окна браузера (position:fixed)

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.

расстояние
расстояние, заданное одним из стандартных способов.
процент%
процент от высоты родительского элемента.
auto
зависит от высоты.
inherit
Заимствует значение свойства у родительского элемента.
2
clear Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
none
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
both
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right
Отменяет обтекание с правой стороны элемента.
inherit
Устанавливает значение родителя.
1
clip

Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов.

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto | inherit

В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис.

2
cursor Определяет вид курсора при наведении мышки на некий элемент.

Значения

url
Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI.
auto
Вид курсора по умолчанию для текущего элемента.
inherit
Наследует значение родителя.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Значение Тест Пример
default ТЕСТ P {cursor:default}
crosshair ТЕСТ P {cursor:crosshair}
help ТЕСТ P {cursor:help}
move ТЕСТ P {cursor:move}
pointer ТЕСТ P {cursor:pointer}
progress ТЕСТ P {cursor:progress}
text ТЕСТ P {cursor:text}
wait ТЕСТ P {cursor:wait}
n-resize ТЕСТ P {cursor:n-resize}
ne-resize ТЕСТ P {cursor:ne-resize}
e-resize ТЕСТ P {cursor:e-resize}
se-resize ТЕСТ P {cursor:se-resize}
s-resize ТЕСТ P {cursor:s-resize}
sw-resize ТЕСТ P {cursor:sw-resize}
w-resize ТЕСТ P {cursor:w-resize}
nw-resize ТЕСТ P {cursor:nw-resize}

В зависимости от операционной системы и ее настроек вид курсора может отличаться

2
display Определяет тип блока элемента

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение Описание IE6 IE7 IE8 Cr2 Cr3 Op9.2 Op10 Sa3.1 Sa4 Ff2 Ff3
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. Да Да Да Да Да Да Да Да Да Да Да
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. Да Да Да Да Да Да Да Да Да Да Да
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. Да Да Да Да Да Да Да Да Да Нет Да
inline-table Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. Нет Нет Да Да Да Да Да Да Да Нет Да
list-item Элемент выводится как блочный и добавляется маркер списка. Да Да Да Да Да Да Да Да Да Да Да
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. Да Да Да Да Да Да Да Да Да Да Да
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста. Нет Нет Да Ошибки Да Да Да Ошибки Ошибки Нет Нет
table Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>. Нет Нет Да Да Да Да Да Да Да Да Да
table-caption Задает заголовок таблицы подобно применению тега <CAPTION>. Нет Нет Да Да Да Да Да Да Да Да Да
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>). Нет Нет Да Да Да Да Да Частично Да Да Да
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <COL>. Нет Нет Да Да Да Частично Да Да Да Частично Да
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>. Нет Нет Да Да Да Частично Да Да Да Частично Да
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>. Нет Нет Да Да Да Да Да Да Да Да Да
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>. Нет Нет Да Да Да Да Да Да Да Да Да
table-row Элемент отображается как строка таблицы (тег <TR>). Нет Нет Да Да Да Да Да Да Да Да Да
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>. Нет Нет Да Да Да Да Да Да Да Да Да
1
float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

 

 

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задается.
inherit
Наследует значение родителя.
1
left

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, left отсчитывается от левого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя.

Рис. 1. Значение параметра left

Рис. 1. Значение свойства left

расстояние
расстояние, заданное одним из стандартных способов.
процент%
процент от ширины родительского элемента.
auto
зависит от ширины.
inherit
Заимствует значение свойства у родительского элемента.
2
overflow

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

 

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.
inherit
Наследует значение родителя.
2
position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

 

 

static
Элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе
relative
Позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left).
absolute
Позиция элемента смещается относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left), а так же нарушается порядок отображения элементов. Элементы, следующие за ним располагаются так, словно его нет на странице.
fixed
Расположение элемента нарушает обычный порядок так же, как при значении absolute, но его позиция зафиксирована относительно границы окна браузера и поэтому элемент не прокручивается вместе с остальным контентом страницы. Позиция элемента смещается вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left)
inherit
Заимствует значение у родительского элемента.
 
2
right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя.

Рис. 1. Значение параметра right

Рис. 1. Значение свойства right

Синтаксис

right: значение | проценты | auto | inherit

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.
2
top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя.

Рис. 1. Значение параметра top

Рис. 1. Значение свойства top

Синтаксис

top: значение | проценты | auto | inherit

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.
2
visibility

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

 

 

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
inherit
Наследует значение родителя.
2
z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Синтаксис

z-index: число | auto | inherit

 

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.

2

Свойства таблиц

Свойство Описание Значения Версия
CSS
border-collapse Устанавливает способ отображения рамки вокруг ячейки таблицы. Оно определяет, должна ли ячейка иметь общую рамку с соседними ячейками, или свою собственную.
collapse
Линия между ячейками отображается только одна.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
inherit
Наследует значение родителя.
2
border-spacing Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное. 2
caption-side Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.
top
Располагает заголовок по верхнему краю таблицы.
bottom
Заголовок располагается под таблицей.
right
Заголовок размещается справа от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
left
Заголовок размещается слева от таблицы. Корректно для CSS 3. Это значение работает только в браузерах Firefox.
2
empty-cells

Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет непустой.

show
Отображает границу вокруг ячейки и фон в ней.
hide
Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
2
table-layout Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.
auto
Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <COL>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
inherit
Наследует значение родителя.
2

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

Свойство Описание Значения Версия
CSS
color Устанавливает цвет текста элемента
цвет
Можно напрямую указать цвет фонаодним из стандартных способов.
inherit
Заимствует значение свойства у родительского элемента.

Возможные формы записи:

em {color: lime}
em {color: rgb(0,255,0)}
em {color: #0f0}
em {color: #00ff00}
em {color: rgb(0%, 100%, 0%)}

1
direction Предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.
ltr
Устанавливает направление слева направо.
rtl
Задает направление справа налево.
inherit
Наследует значение родителя.
2
letter-spacing Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

normal
Задает интервал между символами как обычно.
inherit
Наследует значение родителя.
1
line-height Определяет длину интервала между буквами. По умолчанию браузеры отображают это расстояние автоматически, в зависимости от размера, вида шрифта. С помощью свойства letter-spacing эти настройки можно менять.
расстояние
Интервал между буквами задается одним из принятых в CSS способов задания размеров.
normal
Интервал определяется автоматически в зависимости от вида шрифта и настроек браузера.
inherit
Заимствует значение свойства у родительского элемента.
1
text-align Свойство text-align выравнивает содержимое блочного элемента (текст или изображение) относительно границ блока, а так же содержимое ячеек таблицы по горизонтали.
left
Выравнивание текста или изображения по левой границе.
right
Выравнивание текста или изображения по правой границе.
center
Выравнивание текста или изображения по центру.
justify
Выравнивание текста по правой и левой границам.
inherit
Заимствует значение свойства у родительского элемента.
1
text-decoration Определяет, какой оформительский прием нужно применить к тексту. Это может быть: черта над, под или в середине текста, или мигание текста. Так же можно отменить оформелние, используемое браузером по умолчанию - большинство Веб-браузеров оформляют гиперсссылки нижним подчеркиванием. С помощью свойства text-decoration этот оформительский прием можно отменить. Значения свойства можно применять как по одному, так и одновременно, разделяя их пробелом.
none
Отменяет все оформительские приемы (включая, отображаемые браузером по умолчанию).
underline
Текст будет отображаться с нижним подчеркиванием.
overline
Текст будет отображаться с верхним подчеркиванием.
line-through
Текст будет отображаться зачеркнутым.
blink
Текст будет мигать на экране с частотой примерно 1 раз в секунду.
inherit
Заимствует значение свойства у родительского элемента.
1
text-indent Определяет размер отступа первой строки в тексте. На отступ других строк это свойство не влияет.
расстояние
Величина отступа задается одним из стандартных способов. При указании отрицательного значения, первая строка будет выступать над остальными строками. В этом случае нужно проверить, чтобы она не выходила за границы окна браузера.
процент%
Процент от ширины всего блока, внутри которого находится строка.
inherit
Заимствует значение свойства у родительского элемента.
1
text-transform Управляет написанием прописных или строчных букв в тексте.
capitalize
Каждое слово в предложении будет начинаться с прописной буквы.
uppercase
Все буквы в каждом слове будут прописными.
lowercase
Все буквы в каждом слове будут строчными.
none
Отменяет вышеуказанные значения. Текст отображается как обычно.
inherit
Заимствует значение свойства у родительского элемента.
1
vertical-align Определяет высоту содержимого внутри inline-элемента или внутри ячейки таблицы.
baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit
Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.
1
white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.
normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <BR> переносит текст на новую строку.
pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
pre-line
В тексте пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
pre-wrap
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
inherit
Наследует значение родителя.

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <TEXTAREA> значения normal, nowrap, и pre воспринимаются как pre-wrap.

Opera до версии 9.23 включительно не поддерживает значение pre-line. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

 

1
word-spacing

Устанавливает интервал между словами.

Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то свойство word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal
Устанавливает интервал между словами как обычно.
inherit
Наследует значение родителя.
1

Псевдоклассы

Свойство Описание Значения Версия
CSS
:link Псевдокласс :link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.

Синтаксис:

a:link {color:#FF0000} /* не посещенная ссылка*/
a:visited {color:#00FF00} /* посещенная ссылка */
a:hover {color:#FF00FF} /* с наведенным курсрром */
a:active {color:#0000FF} /* нажатая ссылка */

порядок важен!

1
:visited Псевдокласс :visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление. 1
:hover Псевдокласс :hover определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата. 1
:active Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. 1
:after Добавляет содержание после элемента 2
:before Добавляет содержание перед элементом 2
:first-child Определяет стиль элементу, который является первым потомком другого элемента 2
:first-letter Определяет буквицу - первую букву текста 1
:first-line Определяет красную строку 1
:focus Определяет стиль элемента, в котором находится курсор 2
:lang

Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через параметр charset тега <META>. В XML для этой цели применяется xml:lang.

С помощью псевдокласса :lang можно задавать определенные настройки, характерные для разных языков, например, вид кавычек в цитатах.

Синтаксис

элемент:lang(<язык>) { ... }

Значения

В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий; fr — французский; it — итальянский и др.

2