|
.- !important (Востребовано)
- Параметр !important повышает приоритет применения стиля
body, p, td { /* из пользовательской таблицы стилей */
font-size:15pt !important;
}
p { /* из таблицы стилей разработчика сайта */
font-size:10pt;
}
- % (Востребовано)
- процент от текущего размера
/* Указывает на использование величины в процентах */
div {
background-size: 50% 60px;
-moz-background-size: 50% 60px;
-webkit-background-size: 50% 60px;
}
- :active (Востребовано)
- В CSS3 псевдокласс :active определяет стиль для активного элемента (имеется в виду нажатие и удерживание кнопки мыши).
a:active { /* задает стиль активной ссылки */
color: green;
}
- :after (Востребовано)
- Псевдоэлемент :after определяет текст для добавления после содержимого элемента.
p:after {
content: "Конец, а кто слушал, молодец!!";
}
- :before (Востребовано)
- Псевдоэлемент :before определяет текст для добавления перед содержимым элемента.
body:before {
content: "Начало документа";
}
- :checked (Востребовано)
- В CSS3 псевдокласс :checked указывает стиль для помеченых чекбоксов и радио кнопок
:checked { /* применяется к элементам интерфейса,когда они находятся в положение «включено» */
color: red;
}
- :default (Востребовано)
- В CSS3 псевдокласс :default указывает стиль для кнопки формы по умолчанию
:default { /* изменит цвет для кнопки, которая выделена по умолчанию */
background-color: lime;
}
- :disabled (Востребовано)
- В CSS3 псевдокласс :disabled указывает стиль для неактивных элементов ввода
:disabled{
border-style: dashed;
}
- :empty (Востребовано)
- В CSS3 псевдокласс :empty определяет стиль для пустых элементов
.class:empty { /* описывает элемент, если он пустой */
display:none;
}
- :enabled (Востребовано)
- В CSS3 псевдокласс :enabled указывает стиль для активных элементов ввода
:enabled {
border-color: red;
}
- :first-child (Востребовано)
- В CSS3 псевдокласс :first-child указывает стиль первого из дочерних элементов
li:first-child{ /* задает стиль для первого потомка элемента */
list-style:none;
}
- :first-letter (Востребовано)
- CSS3 псевдокласс :first-letter указывает отображение первого символа элемента
p:first-letter{
font-size:200%;
}
- :first-line (Востребовано)
- CSS3 псевдокласс :first-line указывает отображение первой строки элемента
p:first-line{
font-weight:bold;
}
- :first-of-type (Востребовано)
- В CSS3 псевдокласс :first-of-type представляет первый элемент из списка элементов данного типа
td { /* указываем стиль для всех ячеек */
border: 1px solid #6A3E14;
padding: 4px;
}
td:first-of-type { /* устанавливает стиль для всех первых ячеек */
background: #CFD6D3;
}
- :focus (Востребовано)
- В CSS3 псевдокласс :focus указывает стиль для элемента при его фокусировке
input:focus { /* задает оформление элемента при получении ним фокуса ввода */
border-color: red;
}
- :hover (Востребовано)
- В CSS3 псевдокласс :hover указывает стиль элемента при наведении курсора мыши
div:hover { /* задает оформление элемента при наведении на него */
background: red;
}
- :in-range (Востребовано)
- В CSS3 псевдокласс :in-range указывает стиль для элементов, когда значение элемента управления находиться в заданных границах (type="range", задан min и max). ! для HTML 5
input:in-range{
background:green;
}
/* Описывает поле формы в случае, когда введенное значение поля находится */
/* в диапазоне возможных значений для этого поля*/
- :indeterminate (Востребовано)
- В CSS3 псевдокласс :indeterminate указывает стиль радио кнопок, у которых не сделан выбор
:indeterminate, :indeterminate + span { /* текст в элементе span станет зеленым, если чекбокс находится в неопределенном состоянии */
background: limegreen;
}
input, span {
background: red;
}
- :invalid (Востребовано)
- В CSS3 псевдокласс :invalid указывает стиль для не валидного элемента
input:invalid { /* описывает поле формы в случае, когда оно заполнено некорректно */
background:red;
}
- :lang (Востребовано)
- В CSS3 псевдокласс :lang указывает стиль для элемента с атррибутом lang
p:lang(fr) { /* позволяет определить специальные правила для различных языков */
color: red;
}
- :last-child (Востребовано)
- В CSS3 псевдокласс :last-child указывает стиль для последнего из дочерних элементов
li:last-child { /* задает стиль для последнего потомка элемента */
padding-right:0;
}
- :last-of-type (Востребовано)
- В CSS3 псевдокласс :last-of-type представляет последний элемент из списка элементов данного типа
table tr:last-of-type { /* задает стиль для последнего элемента заданного типа */
font-weight:bold;
}
- :link (Востребовано)
- В CSS3 псевдокласс :link указывает стиль не посещенной ссылки
a:link { /* задает стиль для непосещенной ссылки */
color: blue;
}
- :not (Востребовано)
- Псевдокласс :not указывает на элементы не содержащие указанный селектор
span:not(.class) { /* задает стиль для элементов, который не описываются заданным селектором */
padding-right:0;
}
- :nth-child (Востребовано)
- В CSS3 псевдокласс :nth-child позволяет указать стиль для элемента по его номеру
li:nth-child(even) {
padding-right:0;
}
/* Описывает элемент, если он является определенным дочерним элементом своего родителя.*/
/* Аргумент записывается в форме an+b, где a и b — целые числа, а n — переменная.*/
/* Также в качестве аргумента можно использовать ключевые слова "odd" (нечетные) и */
/* "even"(четные). Запись "odd" эквивалентна записи 2n+1, а запись "even" эквивалентна записи 2n.*/
- :nth-last-child (Востребовано)
- В CSS3 псевдокласс :nth-last-child позволяет указать стиль для элемента по его номеру, отсчет с последнего элемента
li:nth-last-child(-n+2) {
padding-left:20px;
}
/* Описывает элемент, если он является определенным, отсчитывающимся с конца, */
/* дочерним элементом своего родителя */
- :nth-last-of-type (Востребовано)
- В CSS3 псевдокласс :nth-last-of-type позволяет указать стиль для элемента указанного типа по его номеру, отсчет с последнего
li:nth-last-of-type(3n-1) {
padding-right:0;
}
/* Описывает элемент, если он является определенным с конца дочерним элементом */
/* заданного типа для своего родителя */
- :nth-of-type (Востребовано)
- В CSS3 псевдокласс :nth-of-type позволяет указать стиль для элемента указанного типа по его номеру
p:nth-of-type(3n-2) {
padding-right:0;
}
/* Описывает элемент, если он является определенным дочерним элементом */
/* заданного типа для своего родителя */
- :only-child (Востребовано)
- В CSS3 псевдокласс :only-child указывает на элемент, если он один у родителя
p:only-child {
margin:none;
}
/* описывает элемент, если он является единственным дочерним элементом для своего родителя */
- :only-of-type (Востребовано)
- В CSS3 псевдокласс :only-of-type указывает на элемент, если у родитея только один элемент такого типа
li:only-of-type {
padding-right:0;
}
/* Описывает элемент, если он является единственным дочерним элементом */
/* заданного типа для своего родителя */
- :optional (Востребовано)
- В CSS3 псевдокласс :optional указывает стиль для элементов не требуемых заполенния
input:optional { /* описывает поле ввода, если оно необязательное для заполнения */
background:blue;
}
- :out-of-range (Востребовано)
- В CSS3 псевдокласс :out-of-range указывает стиль для элементов управления input, чьи значения не входят в указанные границы (аттрибуты min и max)
input:out-of-range {
border-color: red;
}
- :read-only (Востребовано)
- В CSS3 псевдокласс :read-only указывает стиль для элементов, которые доступны только для чтения
input:read-only { /* описывает поле ввода, если оно только для чтения */
background:grey;
}
- :read-write (Востребовано)
- В CSS3 псевдокласс :read-write указывает стиль для элементов для элементов, которые используются для чтения и записи
input:read-write{ /* описывает поле ввода, если оно для чтения и записи */
background:grey;
}
- :required (Востребовано)
- В CSS3 псевдокласс :required указывает стиль для элементов требуемых заполенния
input:required { /* описывает поле ввода, если оно обязательно для заполнения */
background:blue;
}
- :root (Востребовано)
- В CSS3 псевдокласс :root указывает на корневой элемент
:root { /* Описывает корневой элемент XML документа */
background-color:green;
}
- :target (Востребовано)
- В CSS3 псевдокласс :target указывает стиль 'целевого элемента'
span:target { /* задает стиль для элемента-якоря, на который был осуществлен переход */
color: red;
}
- :valid (Востребовано)
- В CSS3 псевдокласс :valid указывает стиль для валидного элемента
input:valid { /* описывает поле формы в случае, когда оно заполнено корректно */
background:green;
}
- :visited (Востребовано)
- В CSS3 псевдокласс :visited указывает стиль для посещенной ссылки.
a:visited { /* задает стиль для посещенной ссылки */
color: green;
}
- @charset (Востребовано)
- Параметр @charset указывает кодировку
/* синтаксис
@charset "название кодировки"; */
@charset "iso-8859-1";
- @font-face (Востребовано)
- Параметр @font-face назначает шрифт
/* синтаксис
@font-face { свойства шрифта } */
@font-face { /*позволяет импортировать внешний файл шрифтов в документ */
font-family:"Segoe UI";
src: url(http://site/fonts/SegoeUI.ttf);
}
- @import (Востребовано)
- Параметр @import указывает на подключение фалй стилей
/* синтаксис
@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей]; */
@import url("css/print.css") print;
- @media (Востребовано)
- Параметр @media указывает тип носителя на котором должен быть применим данный стиль
/* синтаксис
@media тип1 [, тип2] {
Описание стиля
} */
@media print { /* при печати меняем оформление текста */
p {
font-size: 12px;
margin-bottom: 15px;
}
}
- @page (Востребовано)
- Параметр @page позваляет задать значения полей на устройствах print
/* синтаксис
@page [ { :left | :right | :first } ] { Значения отступов } */
@page :first { /* Отступы для первой страницы */
margin: 1cm;
}
@page :left { /* Отступы для всех левых страниц */
margin: 1cm 3cm 1cm 1.5cm;
}
@page :right { /* Отступы для всех правых страниц */
margin: 1cm 3cm 1cm 1.5cm;
}
A- azimuth (Востребовано)
-
/* синтаксис
azimuth: <угол> | left-side | far-left | left | center-left | center | center-right |
right | far-right | right-side | leftwards | rightwards | inherit */
.div1 { /* определяет расположение источника звука */
azimuth: 30deg;
}
.div2 { /* угол 60deg */
azimuth: far-right;
}
.div3 { /* угол 120deg */
azimuth: behind far-right;
}
B- background (Востребовано)
- Свойство background устанавливает параметры фона.
/* синтаксис
background: [background-attachment || background-color || background-image
|| background-position || background-repeat] | inherit */
p.sample1{ /* заменить фон на однородный цвет */
background: #fc0;
}
p.sample2{ /* прозрачный фон */
background: transparent;
}
p.sample3{ /* заменить фон на изображение и однородный цвет */
background: #fc0 url('images/hand.png') left top no-repeat;
}
- background-attachment (Востребовано)
- Свойство background-attachment устанавливает параметры фона.
/* синтаксис
background-attachment: fixed | scroll | inherit */
div.sample1{
background-attachment: fixed; /* Фиксируем фон */
}
div.sample2{
background-attachment: scroll; /* фон смещается при прокрутки страницы */
}
div.sample3{
background-attachment: inherit; /* использовать свойство родительского элемента */
}
- background-break (Востребовано)
- background-clip (Востребовано)
/* синтаксис
background-clip: [padding-box | border-box | content-box]
[, [padding-box | border-box | content-box]] */
.block1 {/* цвет фона ограничивается началом границы элемента */
background-color: #0f0;
background-clip: padding-box;
}
.block2 {/* цвет фона будет продолжаться до внешнего края границы элемента */
background-color: #0f0;
background-clip: border-box;
}
.block3 {/* фон отображается только внутри контента. */
background-color: #0f0;
background-clip: content-box;
}
- background-color (Востребовано)
- Свойство background-color устанавливает цвет фона.
/* синтаксис
background-color: цвет | transparent | inherit */
body { /* Цвет фона веб-страницы */
background-color: #3366CC;
}
p { /* Прозрачный цвет фона */
background-color: transparent;
}
div { /* Цвет фона наследуется от родителя */
background-color: inherit;
}
- background-image (Востребовано)
- Свойство background-image устанавливает изображение фона.
/* синтаксис
background-image: url(путь к файлу) | none | inherit */
.block1 { /* задает фоновое изображение элементу */
background-image: url(images/bg.png);
}
.block2 { /* явно указывает на отсутствие фонового изображения */
background-image:none;
}
.block3 { /* наследует значение от родителя */
background-image: inherit;
}
- background-origin (Востребовано)
/* синтаксис
background-origin: [padding-box | border-box | content-box]
[, [padding-box | border-box | content-box]] */
.block1 { /* фоновое изображение начинается только в зоне контента */
background-image: url(images/bg.png);
background-origin: content-box;
}
.block2 { /* фоновое изображение начинается от внешнего края границы элемента */
background-origin: border-box;
}
.block3 { /* фоновое изображение начинается от внутреннего края границы элемента */
background-origin: padding-box;
}
- background-position (Востребовано)
- Свойство background-position устанавливает позифию фоновой картинки.
/* синтаксис
background-position: [left | center | right | проценты | значение] ||
[top | center | bottom | проценты | значение] | inherit */
.block1 { /* задает позицию фонового изображения относительно элемента, для которого указан */
background-image: url(images/bg.png);
background-position: left top; /* в левом верхнем углу */
}
.blok2 {
background-image: url(images/bg.png);
background-position: 0% 50%; /* по левому краю и по центру */
}
.blok3 {
background-image: url(images/bg.png);
background-position: 50px 100px;
}
- background-position-x (Востребовано)
/* синтаксис
background-position-x: left | center | right | <проценты> | <значение> */
body {
background: #66806E url(images/clover.png) repeat-y;
background-position-x: 95%; /* Положение фона в процентах от ширины элемента */
}
body { /* Выравнивает фон по левому краю */
background-position-x: left;
}
body { /* Задает положение фона в любых доступных для CSS единицах относительно левого края элемента */
background-position-x: 100;
}
- background-position-y (Востребовано)
/* синтаксис
background-position-y: top | center | bottom | проценты | значение */
body {
background: url(images/mybg.png) no-repeat; /* Параметры фона */
background-position-y: bottom; /* Выравнивает фон по нижнему краю */
}
div { /* Задает положение фона в процентах от высоты элемента */
background-position-y: 50%;
}
div { /* Задает положение фона в любых доступных для CSS единицах относительно верхнего края элемента. */
background-position-y: 20;
}
- background-quantity (Востребовано)
/* синтаксис
background-quantity: <число> */
p { /* фон повторяется бесконечно */
background-quantity:infinite;
}
p { /* повторить трижды слева направо и дважды сверху вниз */
background-quantity:3 2;
}
- background-repeat (Востребовано)
- Свойство background-repeat устанавливает тип заливки фона.
/* синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit */
.block1 { /* Фоновое изображение не будет повторяться */
background-image: url(images/bg.png);
background-repeat: no-repeat;
}
.block2 { /* Повторяем фон по горизонтали */
background-image: url('images/bg_grey.png');
background-repeat: repeat-x;
}
.block3 { /* Повторяем фон по горизонтали и вертикали */
background-image: url('images/bg_grey.png');
background-repeat: repeat;
}
- background-size (Востребовано)
- Свойство background-size масштабирует фоновое изображение.
/* синтаксис
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain */
.block1 {
background: url('images/mybg.png') 100% 100% no-repeat; /* Добавляем фон */
background-size: cover; /* Масштабируем фон так, чтобы его ширина или высота равнялась ширине или высоте блока */
}
.block2 {
background-image: url(images/bg.png); /* Добавляем фон */
background-size: 50% 60px; /* Задаем ширину и высоту фоновой картинки */
}
.block3 {
background-image: url(images/bg.png); /* Добавляем фон */
background-size: contain; /* Масштабируем изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока */
}
- background-spacing (Востребовано)
/* синтаксис
background-spacing: <число> */
p { /* зазор между повторениями фона десять пикселей */
background-spacing:10;
}
p { /* зазор пять пикселей по горизонтали и сантиметр по вертикали */
background-spacing:5 1cm;
}
- border (Востребовано)
- Свойство border указывает размеры, цвет и вид границы.
/* синтаксис
border: [border-width || border-style || border-color] | inherit */
.block1 {
border: 4px double black;
}
.block2 { /* наследует значение от родителя */
border: inherit;
}
- border-bottom (Востребовано)
- Свойство border-bottom указывает размеры, цвет и вид границы снизу.
/* синтаксис
border-bottom: [border-width || border-style || border-color] | inherit */
p { /* параметры линии внизу */
border-bottom: 2px solid white;
}
div { /* наследует значение от родителя */
border-bottom: inherit;
}
- border-bottom-color (Востребовано)
- Свойство border-bottom-color указывает цвет границы снизу.
/* синтаксис
border-bottom-color: цвет | transparent | inherit */
.block1 { /* цвет линии внизу */
border-bottom-color: white;
}
.block2 { /* наследует значение от родителя */
border-bottom-color: inherit;
}
.block3 { /* прозрачный цвет линии внизу */
border-bottom-color: transparent;
}
- border-bottom-image (Востребовано)
- border-bottom-left-image (Востребовано)
- border-bottom-left-radius (Востребовано)
- Свойство border-bottom-left-radius указывает радиус скругления нижнего-левого угла
/* синтаксис
border-bottom-left-radius: [значение | проценты] [значение | проценты] */
.block {
width:100px;
height:50px;
border-bottom-left-radius: 10px 20px;
border: 1px solid #000;
}
- border-bottom-right-image (Востребовано)
- border-bottom-right-radius (Востребовано)
- Свойство border-bottom-right-radius указывает радиус скругления нижнего-правого угла
/* синтаксис
border-bottom-right-radius: [значение | проценты] [значение | проценты] */
.block {
width:100px;
height:50px;
border-bottom-right-radius: 10px 20px;
border: 1px solid #000;
}
- border-bottom-style (Востребовано)
- Свойство border-bottom-style указывает стиль границы снизу.
/* синтаксис
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge
|inset|outset|inherit */
.block1 { /* сплошная линия */
border-bottom-style: solid;
}
.block2 { /* нет границы, равносильно, что и ширина границы равно нулю*/
border-bottom-style: none;
}
.block3 { /* выглядит как будто содержимое — это нажатая кнопка */
border-bottom-style: inset ;
}
- border-bottom-width (Востребовано)
- Свойство border-bottom-width указывает ширину границы снизу.
/* синтаксис
border-bottom-width: значение | thin | medium | thick | inherit */
.block1 { /* толстая линия */
border-bottom-width: thick;
}
.block2 {
border-bottom-width: 2px;
}
.block3 { /* наследует значение от родителя */
border-bottom-width: inherit;
}
- border-break (Востребовано)
- border-collapse (Востребовано)
- Устанавливает, как отображать границы вокруг ячеек таблицы.
/* синтаксис
border-collapse: collapse | separate | inherit */
.table1 {
width: 100%; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Линия между соседними границами будет общая (одна линия) */
}
.table2 {
border-collapse: separate; /* Каждая ячейка имеет свою границу (при соприкосновении границ, общая граница будет иметь двойную толщину) */
}
.table3 {
border-collapse: inherit; /* Наследует значение от родителя */
}
- border-color (Востребовано)
- Свойство border-width указывает цвет границы.
/* синтаксис
border-color: [цвет | transparent] {1,4} | inherit */
/* Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных */
H1 {
border-color: red white;
}
H2 { /* прозрачный цвет границы */
border-color: transparent;
}
H3 { /* наследует значение от родителя */
border-color: inherit;
}
- border-corner-image (Востребовано)
- border-image (Востребовано)
/* синтаксис
border-image: [border-image-source] || [border-image-slice] ||
[border-image-width] || [border-image-outset] || [border-image-repeat] */
.block { /* Позволяет одновременно задать фоновое изображение границы элемента,
разбить его на фрагменты, указать размер контура и его способность выходить
за пределы границы элемента, а также указать способ отображения боковых
фрагментов и центра фонового изображения */
border-image: url('logo.jpg') 13 1 9 13 / 10px 1px 6px 10px / 3px 0 3px 3px stretch round;
}
- border-left (Востребовано)
- Свойство border-left указывает размеры, цвет и вид границы слева.
/* синтаксис
border-left: [border-width || border-style || border-color] | inherit */
div.line {
border-left: 2px dotted green;
}
p { /* наследуется от родителя */
border-left:inherit;
}
- border-left-color (Востребовано)
- Свойство border-left-color указывает цвет границы слева.
/* синтаксис
border-left-color: цвет | transparent | inherit */
DIV.line { /* Задает цвет левой границы */
border-left-color: #fc0;
}
p { /* Прозрачный цвет */
border-left-color: transparent;
}
div { /* Цвет наследуется от родителя */
border-left-color: inherit;
}
- border-left-image (Востребовано)
- border-left-style (Востребовано)
- Свойство border-left-style указывает стиль границы слева.
/* синтаксис
border-left-style: none|hidden|dotted|dashed|solid|double|groove
|ridge|inset|outset|inherit */
.block1 { /* двойная сплошная линия */
border-left-style: double;
}
.block2 { /* нет границы, равносильно, что и ширина границы равно нулю*/
border-left-style: none;
}
.block3 { /* выглядит как будто содержимое — это не нажатая кнопка */
border-left-style: outset ;
}
- border-left-width (Востребовано)
- Свойство border-left-width указывает ширину границы слева.
/* синтаксис
border-left-width: значение | thin | medium | thick | inherit */
.block1 { /* толcтая линия */
border-left-width: thick;
}
.block2 {
border-left-width: 3px;
}
.block2 { /* наследует значение от родителя */
border-left-width: inherit;
}
- border-radius (Востребовано)
- Радиус скругления углов
#ramechNetBox1 {
border-radius: 10px;
}
#ramechNetBox2 {
border-radius: 10px;
border-top-left-radius: 20px 10px;
}
#ramechNetBox3 {
-khtml-border-radius: 10px; /* для KHTML */
-moz-border-radius: 10px; /* для Firefox */
-webkit-border-radius: 10px; /* для Safari, Chrome */
}
- border-right (Востребовано)
- Свойство border-right указывает размеры, цвет и вид границы справа.
/* синтаксис
border-right: [border-width || border-style || border-color] | inherit */
p {
border-right: 1px solid red;
}
div { /* наследует значение от родителя */
border-right: inherit;
}
- border-right-color (Востребовано)
- Свойство border-right-color указывает цвет границы справа.
/* синтаксис
border-right-color: цвет | transparent | inherit */
.block1 { /* цвет линии справа */
border-right-color: navy;
}
.block2 { /* наследует значение от родителя */
border-right-color: inherit;
}
.block3 { /* прозрачный цвет линии справа */
border-right-color: transparent;
}
- border-right-image (Востребовано)
- border-right-style (Востребовано)
- Свойство border-right-style указывает стиль границы справа.
/* синтаксис
border-right-style: none|hidden|dotted|dashed|solid|double|groove
|ridge|inset|outset|inherit */
.block1 { /* тип линии правой границы - серия точек */
border-right-style: dotted;
}
.block2 { /* нет границы, равносильно, что и ширина границы равно нулю*/
border-right-style: none;
}
.block3 { /* наследует значение от родителя */
border-right-style: inherit ;
}
- border-right-width (Востребовано)
- Свойство border-right-width указывает ширину границы справа.
/* синтаксис
border-right-width: значение | thin | medium | thick | inherit */
.block1 { /* средняя по толщине линия правой границы */
border-right-width: medium;
}
.block2 {
border-right-width: 2px;
}
.block2 { /* наследует значение от родителя */
border-right-width: inherit;
}
- border-spacing (Востребовано)
- Свойство border-spacing указывает ширину между ячейками таблицы.
/* синтаксис
border-spacing: значение1 [значение2] */
table { /* Расстояние между ячейками */
border-spacing: 7px 11px;
}
- border-style (Востребовано)
- Свойство border-style указывает стиль границы.
/* синтаксис
border-style: [none | hidden | dotted | dashed | solid | double
| groove | ridge | inset | outset] {1,4} | inherit */
.block1 { /* тип линии границ элемента - двойная сплошная линия */
border-style: double;
}
.block2 { /* нет границы, равносильно, что и ширина границы равно нулю*/
border-style: none;
}
.block3 { /* выглядит как будто содержимое — это нажатая кнопка */
border-style: inset ;
}
- border-top (Востребовано)
- Свойство border-top указывает размеры, цвет и вид границы сверху.
/* синтаксис
border-top: [border-width || border-style || border-color] | inherit */
p { /* параметры линии вверху */
border-top: 1px solid red;
}
div { /* наследует значение от родителя */
border-top: inherit;
}
- border-top-color (Востребовано)
- Свойство border-top-color указывает цвет границы сверху.
/* синтаксис
border-top-color: цвет | transparent | inherit */
.block1 { /* цвет линии вверху */
border-top-color: #ccc;
}
.block2 { /* наследует значение от родителя */
border-top-color: inherit;
}
.block3 { /* прозрачный цвет линии вверху */
border-top-color: transparent;
}
- border-top-image (Востребовано)
- border-top-left-image (Востребовано)
- border-top-left-radius (Востребовано)
- Радиус скругления угла
/* синтаксис
border-top-left-radius: [значение | проценты] [значение | проценты] */
p {
border-top-left-radius: 10px;
}
- border-top-right-image (Востребовано)
- border-top-right-radius (Востребовано)
- Радиус скругления угла
/* синтаксис
border-top-right-radius: [значение | проценты] [значение | проценты] */
- border-top-style (Востребовано)
- Свойство border-top-style указывает стиль границы сверху.
/* синтаксис
border-top-style: none|hidden|dotted|dashed|solid|double|groove
|ridge|inset|outset|inherit */
.block1 { /* тип линии верхней границы - двойная сплошная линия */
border-top-style: double;
}
.block2 { /* нет границы, равносильно, что и ширина границы равно нулю*/
border-top-style: none;
}
.block3 { /* наследует значение от родителя */
border-top-style: inherit ;
}
- border-top-width (Востребовано)
- Свойство border-top-width указывает ширину границы сверху.
/* синтаксис
border-top-width: значение | thin | medium | thick | inherit */
.block1 {
border-top-width: 7px;
}
.block2 { /* толстая линия */
border-top-width: thick;
}
.block3 { /* наследует значение от родителя */
border-top-width: inherit;
}
- border-width (Востребовано)
- Свойство border-width указывает ширину границы.
/* синтаксис
border-width: [значение | thin | medium | thick] {1,4} | inherit */
.block1 {
border-width: 3px 7px 7px 4px;
}
.block2 { /* толстая линия */
border-width: thick;
}
.block3 { /* наследует значение от родителя */
border-width: inherit;
}
- bottom (Востребовано)
- Свойство bottom указывает позиционирование элемента снизу.
/* синтаксис
bottom: значение | проценты | auto | inherit */
div { /* устанавливает позицию нижней границы элемента относительно
нижней границы родителя */
bottom: 20px;
}
p { /* позиция зависит от высоты элемента */
bottom: auto;
}
div { /* наследует значение от родителя */
bottom: inherit;
}
- box-shadow (Востребовано)
- Свойство box-shadow указывает вид тени для элемента.
/* синтаксис
box-shadow: none | <тень> [,<тень>]*
где <тень>:
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет> */
.shadow {
box-shadow: 0 0 5px black; /* Параметры тени */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
padding: 10px;
}
- box-sizing (Востребовано)
- Свойство box-sizing указывает метод расчета ширины и высоты
/* синтаксис
box-sizing: content-box | border-box | inherit */
.box1 {
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
border: 2px solid #000; /* Параметры рамки */
box-sizing: border-box; /* Свойства width и height включают в себя значения полей и границ, но не отступов (margin) */
}
.box2 {
width: 300px; /* Ширина блока */
padding: 10px; /* Поля */
margin-top: 10px; /* Отступ сверху */
box-sizing: content-box; /* Свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ */
}
.box3 {
box-sizing: inherit; /* Наследует значение родителя */
}
C- caption-side (Востребовано)
- CSS3 свойство caption-side указывает место отображения заголовка таблицы
/* синтаксис
caption-side: top | bottom */
caption {
caption-side: bottom; /* Заголовок под таблицей */
}
- clear (Востребовано)
- CSS3 свойство clear указывает на запрет обтекания
/* синтаксис
clear: none | left | right | both | inherit */
.block1 { /* Отменяет обтекание с левого края элемента */
clear: both;
}
.block2 { /* Отменяет обтекание элемента одновременно с правого и левого края */
clear: both;
}
.block2 { /* Устанавливает значение родителя */
clear: inherit;
}
- clear-after (Востребовано)
- clip (Востребовано)
- CSS3 свойство указывает область элемента для отображения на странице
/* синтаксис
clip: rect(Y1, X1, Y2, X2) | auto | inherit */
#layer1 {
position: absolute; /* Абсолютное позиционирование */
clip: rect(40px, auto, auto, 40px); /* Область элемента, которая будет видна */
}
#layer2 {
position: absolute; /* Абсолютное позиционирование */
clip: auto; /* Элемент будет виден полностью */
}
#layer3 {
position: absolute; /* Абсолютное позиционирование */
clip: inherit; /* Наследует значение от родителя */
}
- cm (Востребовано)
- сантиметр
/* Указывает на использование величины в сантиметрах */
div {
background-size: 30cm 19cm;
-moz-background-size: 30cm 19cm;
-webkit-background-size: 30cm 19cm;
}
- color (Востребовано)
- Свойство color указывает цвет текста элемента
/* синтаксис
color: цвет | inherit */
div {
color: black; /* по имени цвета */
}
div {
color: #000000; /* по шестнадцатиричному коду цвета */
}
div {
color: rgb(0%, 0%, 0%); /* с помощью RGB */
}
div {
color: inherit; /* цвет наследуется от родителя */
}
- column-break-after (Востребовано)
- column-break-before (Востребовано)
- column-count (Востребовано)
/* синтаксис
column-count: <число> | auto */
div {
column-count: 2;
}
- column-gap (Востребовано)
/* синтаксис
column-gap: <значение> | normal */
div {
column-count: 3;
column-width: 200px;
column-gap: 2em; /* промежуток между колонками 2em */
}
body {
column-width:10em;
column-gap:normal; /* промежуток между колонками стандартный (он равен 1em) */
}
- column-rule (Востребовано)
/* синтаксис
column-rule: || || <цвет> */
div {
column-count: 3; /* Число колонок */
column-width: 200px; /* Ширина колонок */
column-rule: 1px solid #ccc; /* Задает линию между колонками */
}
- column-rule-color (Востребовано)
/* синтаксис
column-rule-color: <цвет> | inherit */
div { /* Цвет границы колонки */
column-rule-color:#0f0;
}
div { /* Цвет наследуется от родителя */
column-rule-color:inherit;
}
- column-rule-style (Востребовано)
/* синтаксис
column-rule-style: none | hidden | dotted | dashed | solid | double
| groove | ridge | inset | outset | inherit */
div { /* Тип линии границы колонки - пунктирная линия */
column-rule-style:dashed;
}
p { /* Нет границы */
column-rule-style: none;
}
p { /* Наследует значение от родителя */
column-rule-style: inherit ;
}
- column-rule-width (Востребовано)
/* синтаксис
column-rule-width: <значение> | thin | medium | thick | inherit */
body { /* Определяет ширину границы колонки */
column-rule-width:5px;
}
div { /* Граница колонки - средняя по толщине линия */
column-rule-width:medium;
}
p { /* Наследует значение от родителя */
column-rule-width:inherit;
}
- column-span (Востребовано)
/* синтаксис
column-span: 1 | all */
span { /* Элемент охватывает все колонки */
column-span:all;
}
span { /* Элемент охватывает одну колонку */
column-span:1;
}
- column-width (Востребовано)
/* синтаксис
column-width: <значение> | auto */
body { /* Определяет ширину колонок */
column-width:10em;
}
div { /* Ширина колонок определяется браузером */
column-width:auto;
}
- columns (Востребовано)
/* синтаксис
columns: [column-width] || [column-count] */
div { /* Три колонки ширины 12em каждая */
columns: 3 12em;
}
p { /* Ширина колонок 200 пикселов, количество задается браузером */
columns: 200px auto;
}
- content (Востребовано)
- CSS3 свойство content указывает текст вставляемый до или после элемента
/* синтаксис
content: строка | attr(параметр) | open-quote | close-quote
| no-open-quote | no-close-quote | url | counter | normal | none | inherit */
div:after { /* Текст, который добавляется после блока */
content: "Строка после блока";
}
div:before { /* Добавляем перед текстом блока открывающую кавычку */
content: open-quote;
}
div:before { /* Наследует значение родителя */
content: inherit;
}
- counter-increment (Востребовано)
- CSS3 свойство counter-increment указывает приращение счетчика
/* синтаксис
counter-increment: none | inherit | идентификатор | целое число */
h2:before { /* Добавляет перед заголовком № главы */
content: "Глава:" counter(chapter);
counter-increment: chapter 1;
}
li:before { /* Запрещает увеличение счетчика для текущего селектора */
counter-increment: none;
}
li:before { /* Наследует значение родителя */
counter-increment: inherit;
}
- counter-reset (Востребовано)
- CSS3 свойство counter-reset устанавлвает счетчик
/* синтаксис
counter-reset: none | inherit | идентификатор | целое число */
OL { /* Инициируем счетчик */
counter-reset: list1;
}
OL { /* Запрещает инициацию счетчика для текущего селектора */
counter-reset: none;
}
OL { /* Наследует значение родителя */
counter-reset: inherit;
}
- cue (Востребовано)
/* синтаксис
cue: <cue-before> || <cue-after> | inherit */
h1 { /* Указываем url звуковых файлов для обозначения начала и окончания элемента */
cue: url('ding.mp3) url('dong.mp3');
}
h2 { /* Звуковой сигнал будет одинаков для обозначения начала и окончания элемента */
cue: url('pop.au');
}
h3 { /* Наследует значение от родителя */
cue:inherit ;
}
- cue-after (Востребовано)
/* синтаксис
cue-after: url(...) | none | inherit */
h2 { /* Указываем путь к звуковому файлу */
cue-after: url('ding.mp3');
}
h1 { /* Звук не задан */
cue-after:none;
}
h3 { /* Наследует значение от родителя */
cue-after:inherit;
}
- cue-before (Востребовано)
/* синтаксис
cue-before: url(...) | none | inherit */
h1 { /* Указываем путь к звуковому файлу */
cue-before: url('ding.mp3');
}
h2 { /* Звук не задан */
cue-before:none;
}
h3 { /* Наследует значение от родителя */
cue-before:inherit;
}
- cursor (Востребовано)
- Свойство cursor указывает вид курсора
/* синтаксис
cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize
| help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize
| se-resize | sw-resize | text | w-resize | wait | inherit ] */
.block { /* На этом тексте курсор мыши примет вид перекрестья */
cursor: crosshair;
}
a { /* Путь к курсору, ключевое слово */
cursor: url(images/sniper.cur), pointer;
}
p { /* Вид курсора по умолчанию для текущего элемента */
cursor: auto;
}
D- deg (Востребовано)
- градус (угловой)
p.rotate{
-webkit-transform:rotate(0.2deg);
-moz-transform:rotate(0.2deg);
transform:rotate(0.2deg);
}
- direction (Востребовано)
- Свойство direction указывает как отображать направление текста.
/* синтаксис
direction: ltr | rtl | inherit */
div { /* Направление справа налево */
direction: rtl;
}
div { /* Направление слева направо */
direction: ltr;
}
div { /* Наследует значение родителя */
direction: inherit;
}
- display (Востребовано)
- CSS3 свойство display указывает тип блока для элемента
/* синтаксис
display: block | inline | inline-block | inline-table | list-item | none
| run-in | table | table-caption | table-cell | table-column-group
| table-column | table-footer-group | table-header-group | table-row
| table-row-group */
div { /* элемент ведет себя как строчный */
display: inline;
}
div { /* скрывает элемент вместе с содержимым */
display: none;
}
p { /* ведет себя как элемент списка — становится блочным элементом с маркером */
display: list-item;
}
E- elevation (Востребовано)
/* синтаксис
elevation: <угол> | below | level | above | higher | lower | inherit */
span { /* задает направление источника звука по вертикали */
elevation: 20deg;
}
div{ /* угол -90deg */
elevation: below;
}
p{ /* наследует значение от родителя */
elevation: inherit;
}
- em (Востребовано)
- ширина буквы m
- empty-cells (Востребовано)
- CSS3 свойство empty-cells указывает поведение для пустой ячейки
/* синтаксис
empty-cells: show | hide | inherit */
td { /* отображать границы и фон */
empty-cells: show;
}
td { /* не отображать границы и фон */
empty-cells: hide;
}
td { /* наследует значение от родителя */
empty-cells: inherit;
}
- ex (Востребовано)
- высота буквы x
F- filter (Востребовано)
- filter используется в браузере IE для использования различных эффектов. Не входит в CSS3.
- float (Востребовано)
- CSS3 свойство float указывает обтекание элемента
/* синтаксис
float: left | right | none | inherit */
img { /* выравнивает элемент по левому краю, остальные элементы обтекают справа */
float: left;
}
div { /* обтекание элемента не задается */
float: none;
}
div { /* наследует значение родителя */
float: inherit;
}
- float-displace (Востребовано)
/* синтаксис
float-displace: line | indent | block | block-within-page */
OL, UL, LI { /* фиксированный отступ между текстом и плавающим блоком */
float-displace: indent;
}
TABLE { /* наложение текста на плавающий блок */
float-displace: block;
}
p { /* избегать наложения текста на плавающий элемент */
float-displace: line;
}
- font (Востребовано)
- CSS3 свойство font указывает параметры шрифта
/* синтаксис
font: [font-style||font-variant||font-weight] font-size [/line-height]
font-family | inherit */
p { /* обязательные параметры */
font: 12pt/10pt sans-serif;
}
span { /* все параметры */
font: italic normal bold 100%/1.2em Tahoma, Arial, sans-serif;
}
div { /* наследует значение родителя */
font: inherit;
}
- font-family (Востребовано)
- CSS3 свойство font-family указывает семейство шрифтов
/* синтаксис
font-family: имя шрифта [, имя шрифта[, ...]] | inherit */
p {
font-family: Tahoma, Arial, sans-serif;
}
div { /* наследует значение от родителя */
font-family: inherit;
}
- font-size (Востребовано)
- CSS3 свойство font-size указывает размер шрифта
/* синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты |
inherit */
p { /* размер относительно размера шрифта родителя в CSS-единацах измерения */
font-size: 100%;
}
span { /* точный размер шрифта в CSS-единацах измерения */
font-size: 14px;
}
div { /* эквивалентно font size="2" (относительно настроек браузера) */
font-size: small;
}
- font-size-adjust (Востребовано)
- font-stretch (Востребовано)
/* синтаксис
font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed |
condensed | semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded | inherit */
p { /* ширина символов в шрифте шире, чем у родительского элемента */
font-stretch:wider;
}
p { /* обычная ширина символов в шрифте */
font-stretch:normal ;
}
p { /* ширина символов в шрифте такая же как у родительского элемента */
font-stretch:inherit;
}
- font-style (Востребовано)
- CSS3 свойство font-style указывает стиль шрифта
/* синтаксис
font-style: normal | italic | oblique | inherit */
span { /* курсивное начертание */
font-style: italic;
}
p { /* косой (наклонный) шрифт */
font-style: oblique;
}
div { /* наследует значение от родителя */
font-style: inherit;
}
- font-variant (Востребовано)
- CSS3 свойство font-variant указывает вид написания строчных букв
/* синтаксис
font-variant: normal | small-caps | inherit */
p { /* малые заглавные буквы — шрифт отображается капителью */
font-variant: small-caps;
}
div { /* шрифт отображается стандартно */
font-variant: normal;
}
h1 { /* наследует значение от родителя */
font-variant: inherit;
}
- font-weight (Востребовано)
- CSS3 свойство font-weight указывает жирность текста
/* синтаксис
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900|inherit */
div { /* стандартный полужирный шрифт (значение = 700) */
font-weight: bold;
}
p { /* задает насыщенность шрифту элемента на 100 меньше, чем насыщенность у родителя */
font-weight: lighter;
}
p { /* наследует значение от родителя */
font-weight: inherit;
}
H- height (Востребовано)
- CSS3 свойство height указывает высоту элемента
/* синтаксис
height: значение | проценты | auto | inherit */
div { /* точное значение высоты */
height: 100px;
}
div { /* высота зависит от содержимого элемента */
height: auto;
}
div { /* наследует значение от родителя */
height: inherit;
}
- hz (Востребовано)
- герц
/* Указывает на использование величины в Герцах */
p {
pitch: 10Hz;
}
L- left (Востребовано)
- Свойство left указывает позиционирование элемента слева.
/* синтаксис
left: значение | проценты | auto | inherit */
span { /* точное значение расстояние от левого края родителя */
left: 10px;
}
div { /* не изменяет положение элемента */
left: auto;
}
div { /* наследует значение от родителя */
left: inherit;
}
- letter-spacing (Востребовано)
- CSS3 свойство letter-spacing указывает длину интервала между буквами
/* синтаксис
letter-spacing: значение | normal | inherit */
span { /* точное значение расстояния между символами */
letter-spacing: 1px;
}
span { /* обычное растояние для текущего шрифта */
letter-spacing: normal;
}
span { /* наследует значение от родителя */
letter-spacing: inherit;
}
- line-height (Востребовано)
- CSS3 свойство line-height указывает высоту строки
/* синтаксис
line-height: множитель | значение | проценты | normal | inherit */
p { /* точное значение межстрочного интервала текста */
line-height: 20px;
}
p { /* % от высоты шрифта */
line-height: 60%;
}
p { /* наследует значение от родителя */
line-height: inherit;
}
- list-style (Востребовано)
- CSS3 свойство list-style указывает стиль списка
/* синтаксис
list-style: list-style-type || list-style-position || list-style-image | inherit */
ul { /* квадратные маркеры за пределами текстового блока */
list-style: square outside;
}
ul { /* круглые маркеры внутри текстового блока */
list-style: disc inside none;
}
ul { /* наследует значение родителя */
list-style: inherit;
}
- list-style-image (Востребовано)
- CSS3 свойство list-style-image указывает изображение для списка
/* синтаксис
list-style-image: none | url('путь к файлу') | inherit */
ul { /* путь к графическому файлу */
list-style-image: url(images/book.gif);
}
ul { /* изображение не установлено */
list-style-image: none;
}
ul { /* наследует значение от родителя */
list-style-image: inherit;
}
- list-style-position (Востребовано)
- CSS3 свойство list-style-position указывает позиционирование списка
/* синтаксис
list-style-position: inside | outside */
ul { /* маркеры обтекаются текстом */
list-style-position: inside;
}
ul { /* маркеры размещаются за пределами текстового блока */
list-style-position: outside;
}
- list-style-type (Востребовано)
- CSS3 свойство list-style-type указывает тип списка
/* синтаксис
list-style-type: circle | disc | square | armenian | decimal |
decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin |
lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit */
ul { /* греческий алфавит строчный (α, β, γ, ...) */
list-style-type: lower-greek;
}
ul { /* отобразить без маркера */
list-style-type: none;
}
ul { /* наследует значение от родителя */
list-style-type: inherit;
}
M- margin (Востребовано)
- CSS3 свойство margin указывает внешний отсутп
/* синтаксис
margin: [значение | проценты | auto] {1,4} | inherit */
p { /* точное значение внешних отступов: сверху, справа, снизу, слева */
margin: 10px 20px 15px 5px;
}
div { /* указывает, что размер отступов будет автоматически рассчитан браузером */
margin: auto;
}
div { /* наследует значение от родителя */
margin: inherit;
}
- margin-bottom (Востребовано)
- CSS3 свойство margin указывает внешний отсутп
/* синтаксис
margin-bottom: значение | auto | inherit */
p { /* точное значение нижнего отступа */
margin-bottom: 20px;
}
p { /* браузер сам определяет значение отступа */
margin-bottom: auto;
}
p { /* наследует значение от родителя */
margin-bottom: inherit;
}
- margin-left (Востребовано)
- CSS3 свойство margin-left указывает внешний отсутп слева
/* синтаксис
margin-left: значение | auto | inherit */
p { /* точное значение левого отступа */
margin-left: 10px;
}
p { /* браузер сам определяет значение отступа */
margin-left: auto;
}
p { /* наследует значение от родителя */
margin-left: inherit;
}
- margin-right (Востребовано)
- CSS3 свойство margin-right указывает внешний отсутп справа
/* синтаксис
margin-right: значение | auto | inherit */
p { /* точное значение правого отступа */
margin-right: 5px;
}
p { /* браузер сам определяет значение отступа */
margin-right: auto;
}
p { /* наследует значение от родителя */
margin-right: inherit;
}
- margin-top (Востребовано)
- CSS3 свойство margin-top указывает внешний отсутп сверху
/* синтаксис
margin-top: значение | auto | inherit */
p { /* точное значение верхнего отступа */
margin-top: 15px;
}
p { /* браузер сам определяет значение отступа */
margin-top: auto;
}
p { /* наследует значение от родителя */
margin-top: inherit;
}
- marks (Востребовано)
/* синтаксис
marks: [crop || cross] | none | inherit */
@page { /* Печатать оба типа пометок */
marks: crop cross
}
@page { /* Не печатать пометки */
marks: none
}
@page { /* Наследует значение родителя */
marks: inherit
}
- max-height (Востребовано)
- CSS3 свойство max-height указывает максимальную высоту
/* синтаксис
max-height: значение | проценты | none | inherit */
p { /* точное значение максимальной высоты элемента */
max-height: 20px;
}
p { /* нет ограничений */
max-height: none;
}
p { /* наследует значение от родителя */
max-height: inherit;
}
- max-width (Востребовано)
- CSS3 свойство max-width указывает максимальную ширину
/* синтаксис
max-width: значение | проценты | none | inherit */
p { /* точное значение максимальной ширины элемента */
max-width: 200px;
}
p { /* нет ограничений */
max-width: none;
}
p { /* наследует значение от родителя */
max-width: inherit;
}
- min-height (Востребовано)
- CSS3 свойство min-width указывает максимальную высоту
/* синтаксис
min-height: значение | проценты | none | inherit */
p { /* точное значение минимальной высоты элемента */
min-height: 30px;
}
p { /* нет ограничений */
min-height: none;
}
p { /* наследует значение от родителя */
min-height: inherit;
}
- min-width (Востребовано)
- CSS3 свойство min-width указывает максимальную ширину
/* синтаксис
min-width: значение | проценты | none | inherit */
p { /* точное значение минимальной ширины элемента */
min-width: 100px;
}
p { /* нет ограничений */
min-width: none;
}
p { /* наследует значение от родителя */
min-width: inherit;
}
- mm (Востребовано)
- миллиметр
/* Указывает на использование величины в миллиметрах */
div {
column-gap: 5mm;
-webkit-column-gap: 5mm;
-moz-column-gap: 5mm;
}
- ms (Востребовано)
- миллисекунда
/* Указывает на использование величины в миллисекундах */
div{
transition-duration: 30ms;
-moz-transition-duration: 30ms;
-webkit-transition-duration: 30ms;
}
O- opacity (Востребовано)
- Свойство opacity указывает прозрачность элемента
/* синтаксис
opacity: <значение> | inherit */
div { /* полупрозрачный элемент */
opacity: 0.5;
}
div { /* наследует значение от родителя */
opacity: inherit;
}
- orphans (Востребовано)
- CSS3 свойство orphans указывает минимальное количество строк, которое должно оставаться на предыдущей странице
/* синтаксис
orphans: число | inherit */
p { /* число строк в абзаце, который будет последним на странице при печати */
orphans: 4;
}
p { /* наследует значение от родителя */
orphans: inherit;
}
- outline (Востребовано)
- CSS3 свойство outline указывает внутреннюю границу элемента
/* синтаксис
outline: outline-color || outline-style || outline-width | inherit */
img { /* Параметры рамки */
outline: 1px solid #666;
}
img { /* Наследует значение родителя */
outline: inherit;
}
- outline-color (Востребовано)
- CSS3 свойство outline указывает внутреннюю границу элемента
/* синтаксис
outline-color: invert | цвет | inherit */
div{ /* цвет границы */
outline-color: blue;
}
div{ /* цвет границы автоматически определяется браузером, исходя из фона под ней для достижения максимального контраста */
outline-color: invert;
}
div{ /* цвет фона наследуется от родителя */
outline-color: inherit;
}
- outline-offset (Востребовано)
/* синтаксис
outline-offset: <значение> | inherit */
div { /* определяет размер выступа обводки над границей элемента */
outline-offset: 2px ;
}
div { /* наследует значение от родителя */
outline-offset: inherit ;
}
- outline-style (Востребовано)
- CSS3 свойство outline-style указывает стль внутренней границы элемента
/* синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge |
inset | outset | inherit */
div { /* стиль внешней границы элемента - сплошная линия */
outline-style: solid;
}
div { /* нет внешней границы */
outline-style: none;
}
div { /* наследует значение от родителя */
outline-style: inherit;
}
- outline-width (Востребовано)
- CSS3 свойство outline-width указывает ширину внутренней границы элемента
/* синтаксис
outline-width: thin | medium | thick | значение | inherit */
div { /* Толщина внешней границы */
outline-width: 3px;
}
div { /* Тонкая линия внешней границы */
outline-width: thin;
}
div { /* Наследует значение родителя */
outline-width: inherit;
}
- overflow (Востребовано)
- Свойство overflow указывает метод отображения содержимого элемента при выходи за границу
/* синтаксис
overflow: auto | hidden | scroll | visible | inherit */
div { /* вышедшее за пределы указанных границ содержимое не отображается */
overflow: hidden;
}
div { /* всегда добавляются полосы прокрутки */
overflow: scroll;
}
div { /* наследует значение от родителя */
overflow: inherit;
}
- overflow-x (Востребовано)
- Свойство overflow-x указывает метод отображения содержимого элемента при выходи за границу
/* синтаксис
overflow-x: auto | hidden | scroll | visible | inherit */
div { /* вышедшее за пределы указанных границ по оси х содержимое не отображается */
overflow-x: hidden;
}
div { /* отображается все содержимое элемента */
overflow-x: visible;
}
div { /* наследует значение от родителя */
overflow-x: inherit;
}
- overflow-y (Востребовано)
- Свойство overflow-y указывает метод отображения содержимого элемента при выходи за границу
/* синтаксис
overflow-y: auto | hidden | scroll | visible | inherit */
div { /* вышедшее за пределы указанных границ по оси y содержимое не отображается */
overflow-y: hidden;
}
div { /* зависит от браузера */
overflow-y: auto;
}
div { /* наследует значение от родителя */
overflow-y: inherit;
}
P- padding (Востребовано)
- Свойство padding указывает внутренний отступ в элемента
/* синтаксис
padding: [значение | проценты] {1, 4} | inherit */
p { /* задает одновременно внутренние отступы сверху, справа, снизу, слева */
padding: 10px 20px 15px 5px;
}
p { /* наследует значение от родителя */
padding: inherit;
}
- padding-bottom (Востребовано)
- Свойство padding-bottom указывает внутренний отступ в элемента снизу
/* синтаксис
padding-bottom: значение | проценты | inherit */
p { /* точное значение внутреннего нижнего отступа */
padding-bottom: 10px;
}
p { /* процент от размера элемента-родителя */
padding-bottom: 5%;
}
p { /* наследует значение от родителя */
padding-bottom: inherit;
}
- padding-left (Востребовано)
- Свойство padding-left указывает внутренний отступ в элемента слева
/* синтаксис
padding-left: значение | проценты | inherit */
p { /* точное значение внутреннего левого отступа */
padding-left: 20px;
}
p { /* процент от размера элемента-родителя */
padding-left: 10%;
}
p { /* наследует значение от родителя */
padding-left: inherit;
}
- padding-right (Востребовано)
- Свойство padding-right указывает внутренний отступ в элемента справа
/* синтаксис
padding-right: значение | проценты | inherit */
p { /* точное значение внутреннего правого отступа */
padding-right: 15px;
}
p { /* процент от размера элемента-родителя */
padding-right: 10%;
}
p { /* наследует значение от родителя */
padding-right: inherit;
}
- padding-top (Востребовано)
- Свойство padding-top указывает внутренний отступ в элемента сверху
/* синтаксис
padding-top: значение | проценты | inherit */
p { /* точное значение внутреннего верхнего отступа */
padding-top: 15px;
}
p { /* процент от размера элемента-родителя */
padding-top: 5%;
}
p { /* наследует значение от родителя */
padding-top: inherit;
}
- page-break-after (Востребовано)
- Свойство page-break-after указывает размер разрыва после элемента при печати
/* синтаксис
page-break-after: always | auto | avoid | left | right | inherit */
hr { /* после элемента ставится разрыв страницы */
page-break-after: always;
}
hr { /* избегаем разрыва страницы после элемента */
page-break-after: avoid;
}
hr { /* наследует значение от родителя */
page-break-after: inherit;
}
- page-break-before (Востребовано)
- Свойство page-break-before указывает размер разрыва перед элементом при печати
/* синтаксис
page-break-before: always | auto | avoid | left | right | inherit */
hr { /* перед элементм ставится разрыв страницы */
page-break-before: always;
}
hr { /* запрещает разрыв страницы перед элементом */
page-break-before: avoid;
}
hr { /* наследует значение от родителя */
page-break-before: inherit;
}
- page-break-inside (Востребовано)
- Свойство page-break-inside указывает размер разрыва внутри элемента при печати
/* синтаксис
page-break-inside: auto | avoid | inherit */
div { /* запрещает разрыв страницы внутри элемента */
page-break-inside: avoid;
}
div { /* вставляет разрыв страницы внутри элемента при необходимости */
page-break-inside: auto;
}
div { /* наследует значение от родителя */
page-break-inside: inherit;
}
- page-size (Востребовано)
/* синтаксис
page-size: <размер>{1,2} | auto | portait | landscape | inherit */
@page { /* определяет ширину страницы и высоту */
page-size: 8.5in 11in;
}
@page { /* ориентация книжная */
page-size: portrait;
}
@page { /* ориентация альбомная */
page-size: landscape;
}
- pause-after (Востребовано)
/* синтаксис
pause-after: <время> | <проценты> | inherit */
p { /* продолжительность паузы после произношения содержимого элемента в миллисекундах */
pause-after: 100ms;
}
p { /* продолжительность паузы после произношения содержимого элемента в %*/
pause-after: 50%;
}
p { /* наследует значение от родителя*/
pause-after: inherit;
}
- pause-before (Востребовано)
/* синтаксис
pause-before: <время> | <проценты> | inherit */
p { /* продолжительность паузы до произношения содержимого элемента в миллисекундах */
pause-before : 200ms;
}
p { /* продолжительность паузы до произношения содержимого элемента в %*/
pause-before : 20%;
}
p { /* наследует значение от родителя*/
pause-before : inherit;
}
- pc (Востребовано)
- пика, 12 пунктов
- pitch (Востребовано)
/* синтаксис
pitch: <частота> | x-low | low | medium | high | x-high | inherit */
p { /* частота звука произношения содержимого элемента в герцах */
pitch: 100Hz;
}
p { /* частота ниже значения medium, зависит от звукового оборудования */
pitch: low;
}
p { /* наследует значение от родителя */
pitch: inherit;
}
- pitch-range (Востребовано)
/* синтаксис
pitch-range: <число> | inherit */
P { /* задает вариацию средней частоты звука */
pitch-range: 30;
}
P { /* наследует значение от родителя */
pitch-range: inherit;
}
- play-during (Востребовано)
/* синтаксис
play-during: [mix || repeat] | auto | none | inherit */
p { /* путь к звуковому файлу, мелодия будет повторяться */
play-during: url("sound.wav") repeat;
}
p { /* на элементе не будет фоновой мелодии */
play-during: none;
}
p { /* наследует значение от родителя */
play-during: inherit;
}
- position (Востребовано)
- Свойство position указывает вид позиционирования элемента
/* синтаксис
position: absolute | fixed | relative | static | inherit */
div { /* абсолютное позиционирование элемента */
position: absolute;
}
div { /* положение элемента устанавливается относительно его исходного места */
position: relative;
}
div { /* наследует значение от родителя */
position: inherit;
}
- pt (Востребовано)
- типографский пункт (1/72 дюйма)
/* Указывает на использование величины в пунктах */
div {
column-gap: 10pt;
-webkit-column-gap: 10pt;
-moz-column-gap: 10pt;
}
- px (Востребовано)
- пиксель (1/96 дюйма)
/* Указывает на использование величины в пикселах */
div {
column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
}
Q- quotes (Востребовано)
- Свойство quotes указывает вид кавычек
/* синтаксис
quotes: "левая кавычка" "правая кавычка" | none | inherit */
q { /* задаем вид кавычек */
quotes: "«" "»";
}
q { /* кавычки не отображаются */
quotes: none;
}
q { /* наследует значение от родителя */
quotes: inherit;
}
R- resize (Востребовано)
/* синтаксис
resize: none | both | horizontal | vertical | inherit */
textarea { /* изменять размеры элемента нельзя */
resize: none;
}
textarea { /* изменять размеры элемента можно по горизонтали */
resize: horizontal;
}
textarea { /* наследует значение от родителя */
resize: inherit;
}
- richness (Востребовано)
/* синтаксис
richness: <число> | inherit */
p { /* устанавливает мягкость голоса */
richness: 20;
}
p { /* наследует значение от родителя */
richness: inherit;
}
- right (Востребовано)
- Свойство right указывает позиционирование элемента справа.
/* синтаксис
right: значение | проценты | auto | inherit */
div { /* задает позицию правого края элемента */
right: 100px;
}
div { /* не изменяет положение элемента */
right: auto;
}
div { /* наследует значение родителя */
right: inherit;
}
S- s (Востребовано)
- секунда
/* Указывает на использование величины в секундах */
div{
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
- scrollbar (Востребовано)
- scrollbar позволяет изменять цвета для полос прокрутки в IE. Не входит в IE.
- speach-rate (Востребовано)
- speak (Востребовано)
/* синтаксис
speak: none | normal | spell-out | inherit */
abbr { /* произношение по буквам */
speak: spell-out;
}
abbr { /* запрещает озвучивание элемента */
speak: none;
}
abbr { /* наследует значение от родителя */
speak: inherit;
}
- speak-date (Востребовано)
/* синтаксис
speak-date: myd | dmy | ymd */
div { /* последовательность озвучивания даты: месяц, день, год */
speak-date: myd;
}
div { /* день, месяц, год */
speak-date: dmy;
}
div { /* год, месяц, день */
speak-date: ymd;
}
- speak-header (Востребовано)
/* синтаксис
speak-header: once | always | inherit */
th { /* повторяется перед каждой ячейкой (заголовок 1, ячейка 1, заголовок 1, ячейка 2...) */
speak-header: always;
}
th { /* единожды для группы ячеек (заголовок 1, ячейка 1, ячейка 2...) */
speak-header: once;
}
th { /* наследует значение от родителя */
speak-header: inherit;
}
- speak-numeral (Востребовано)
/* синтаксис
speak-numeral: digit | continuous | inherit */
td { /* озвучивать каждую цифру отдельно (123 — один, два, три) */
speak-numeral: digit;
}
td { /* озвучивать как одно число (123 — сто двадцать три) */
speak-numeral: continuous;
}
td { /* наследует значение от родителя */
speak-numeral: inherit;
}
- speak-punctuation (Востребовано)
/* синтаксис
speak-punctuation: code | none | inherit */
p { /* произносится название знака препинания (точка, запятая и т.д.) */
speak-punctuation: code;
}
p { /* используются паузы (как при разговоре) */
speak-punctuation: none;
}
p { /* наследует значение от родителя */
speak-punctuation: inherit;
}
- speak-time (Востребовано)
/* синтаксис
speak-time: 24 | 12 | none */
div { /* произносить время по двадцатичетырёхчасовой шкале */
speak-time: 24;
}
div { /* как на обычных часах, с уточнением до/после полудня */
speak-time: 12;
}
div { /* не озвучивать */
speak-time: none;
}
- stress (Востребовано)
/* синтаксис
stress: <число> | inherit */
p { /* задает высоту пиков в интонации голоса */
stress: 70;
}
p { /* наследует значение от родителя */
stress: inherit;
}
T- tab-index (Востребовано)
- table-layout (Востребовано)
- Свойство table-layout указывает ширину столбцов в таблице
/* синтаксис
table-layout: auto | fixed | inherit */
table { /* размеры элементов таблицы жестко зафиксированы */
table-layout: fixed;
}
table { /* используется автоматическое определение размеров элементов таблицы на основании содержимого */
table-layout: auto;
}
table { /* наследует значение от родителя */
table-layout: inherit;
}
- text-align (Востребовано)
- Свойство text-align указывает горизонтальное позиционирование элемента
/* синтаксис
text-align: center | justify | left | right | inherit */
p { /* выравнивание по ширине */
text-align: justify;
}
p { /* выравнивание влево */
text-align: left;
}
p { /* наследует значение от родителя */
text-align: inherit;
}
- text-align-last (Востребовано)
/* синтаксис
text-align-last: start | end | left | right | center | justify */
div { /* последняя строка выравнивается по ширине */
text-align-last: justify;
}
div { /* последняя строка выравнивается по начальному краю блока */
text-align-last: start;
}
div { /* последняя строка выравнивается по левому краю */
text-align-last: left;
}
- text-autospace (Востребовано)
/* синтаксис
text-autospace: none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|
ideograph-space */
p { /* добавляет дополнительное пространство между иероглифическими и неиероглифическими фрагментами текста */
text-autospace: ideograph-alpha;
}
p { /* добавляет дополнительное пространство между иероглифическим текстом и цифрами */
text-autospace: ideograph-numeric;
}
p { /* увеличивает ширину пробелов, граничащих с иероглифическим текстом */
text-autospace: ideograph-space;
}
- text-decoration (Востребовано)
- Свойство text-decoration указывает вид оформления для элемента
/* синтаксис
text-decoration: [ blink | line-through | overline | underline ] | none | inherit */
div { /* подчеркнутый текст */
text-decoration: underline;
}
div { /* мигающий текст */
text-decoration: blink;
}
div { /* наследует значение от родителя */
text-decoration: inherit;
}
- text-indent (Востребовано)
- Свойство text-indent указывает отступ первой строки
/* синтаксис
text-indent: значение | проценты | inherit */
p { /* устанавливает величину отступа первой строки блока текста */
text-indent: 10px;
}
p { /* отступ первой строки вычисляется в зависимости от ширины блока */
text-indent: 10%;
}
p { /* наследует значение родителя */
text-indent: inherit;
}
- text-justify (Востребовано)
/* синтаксис
text-justify: auto|newspaper|distribute|distribute-all-lines|distribute-center-last|
inter-word|inter-ideograph|inter-cluster|kashida */
div{ /* выравнивает строки, изменяя только расстояние между словами */
text-align: justify;
text-justify: inter-word;
}
div{ /* выравнивает строки, изменяя расстояние между словами и между символами */
text-align: justify;
text-justify: newspaper;
}
div{ /* выравнивает строки текста на арабском языке, изменяя ширину самих символов */
text-align: justify;
text-justify: kashida;
}
- text-justify-trim (Востребовано)
/* синтаксис
text-justify-trim: punctuation | punct-and-kana | none */
p { /* выравнивание по ширине за счет сжатия широких символов и знаков пунктуации */
text-justify-trim: punctuation;
}
p { /* за счет сжатия всех символов */
text-justify-trim: punct-and-kana;
}
p { /* не сжимать */
text-justify-trim: none;
}
- text-kashida-space (Востребовано)
/* синтаксис
text-kashida-space: {Расширение}%|inherit */
p { /* задает процент, на который будут расширяться символы арабского языка при выравнивании текста по ширине */
text-kashida-space: 20%;
}
p { /* наследует значение родителя */
text-kashida-space: inherit;
}
- text-overflow (Востребовано)
- Свойство text-overflow указывает метод отображения текста, если текст выходит за границы элемента
/* синтаксис
text-overflow: clip | ellipsis | inherit */
p { /* текст обрезается и к концу строки добавляется многоточие */
text-overflow:ellipsis;
}
p { /* текст обрезается по размеру области */
text-overflow:clip;
}
p { /* наследуется от родительского контейнера */
text-overflow:inherit;
}
- text-shadow (Востребовано)
- Свойство text-shadow указывает свойства тени для текста
/* синтаксис
text-shadow: none | тень [,тень]*
где тень: <цвет> <сдвиг по x> <сдвиг по y> <радиус размытия> */
h1 { /* задает эффект тени тексту элемента */
text-shadow: 0px 3px 3px #000;
}
h1 { /* нет тени */
text-shadow: none;
}
- text-transform (Востребовано)
- Свойство text-transform указывает использование строчных или прописных букв при отображении текста.
/* синтаксис
text-transform: capitalize | lowercase | uppercase | none | inherit */
p { /* каждое слово будет начинаться с заглавной буквы */
text-transform: capitalize;
}
p { /* все символы будут строчными (нижний регистр) */
text-transform: lowercase;
}
p { /* наследует значение от родителя */
text-transform: inherit;
}
- toggle-group (Востребовано)
/* синтаксис
toggle-group: <имя> | none | inherit */
.radiobutton { /* имя, идентифицирующее группу переключателей */
toggle-group: group-a;
}
.radiobutton { /* группа переключателей явно не определена */
toggle-group: none;
}
.radiobutton { /* наследует свойство от родительского элемента */
toggle-group: inherit;
}
- top (Востребовано)
- Свойство top указывает позиционирование элемента сверху.
/* синтаксис
top: значение | проценты | auto | inherit */
div { /* определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента */
top: 100px;
}
div { /* не изменяет положение элемента */
top: auto;
}
div { /* наследует значение родителя */
top: inherit;
}
U- unicode-bidi (Востребовано)
- Свойство unicode-bidi указывает как отображать направление текста.
/* синтаксис
unicode-bidi: normal | embed | bidi-override | inherit */
p { /* меняется порядок символов в тексте, подчиняясь значению в свойстве direction */
direction: rtl;
unicode-bidi: bidi-override;
}
p { /* браузер самостоятельно определяет, как ему следует отображать текст */
direction: rtl;
unicode-bidi: normal;
}
p { /* наследует значение от родителя */
direction: rtl;
unicode-bidi: inherit;
}
- user-focus (Востребовано)
/* синтаксис
user-focus: auto | normal | select-all | select-before | select-after |
select-same | select-menu | inherit */
input.focus-text { /* задает выбор всего содержимого */
user-focus: select-all;
}
input.focus-text { /* задает поведение элемента, предусмотренное по умолчанию */
user-focus: auto;
}
input.focus-text { /* элемент должен действовать подобно родительскому */
user-focus: inherit;
}
- user-focus-key (Востребовано)
/* синтаксис
user-focus-key: auto | normal | select-all | select-before | select-after |
select-same | select-menu | inherit */
input.focus-text { /* сделать поле/элемент активным */
user-focus-key: normal;
}
input.focus-text { /* задает поведение элемента, предусмотренное по умолчанию */
user-focus-key: auto;
}
input.focus-text { /* элемент должен действовать подобно родительскому */
user-focus-key: inherit;
}
- user-focus-pointer (Востребовано)
/* синтаксис
user-focus-pointer: auto | normal | select-all | select-before | select-after |
select-same | select-menu | inherit */
input.focus-text { /* переместить курсор в начало */
user-focus-pointer: select-before;
}
input.focus-text { /* задает поведение элемента, предусмотренное по умолчанию */
user-focus-pointer: auto;
}
input.focus-text { /* элемент должен действовать подобно родительскому */
user-focus-pointer: inherit;
}
- user-input (Востребовано)
/* синтаксис
user-input: nоnе | enabled | disabled | inherit */
input.enable { /* полностью исключает элемент из процесса ввода данных */
user-input: nоnе;
}
input.enable { /* разрешает ввод */
user-input: enabled;
}
input.enable { /* задает наследование свойства от родительского элемента */
user-input: inherit;
}
- user-modify (Востребовано)
/* синтаксис
user-modify: read-only | read-write | write-only | inherit */
.block { /* пользователь может читать и изменять контент */
user-modify:read-write;
}
.block { /* контент только для чтения */
user-modify:read-only;
}
.block { /* наследует значение родителя */
user-modify:inherit;
}
- user-select (Востребовано)
/* синтаксис
user-select: none | text | toggle | element | elements | all | inherit */
div { /* пользователь не может выделить контент в элементе */
user-select: none;
}
div { /* пользователь может выделить в элементе только текст */
user-select: text;
}
div { /* наследует значение родителя */
user-select: inherit;
}
V- vertical-align (Востребовано)
- Свойство vertical-align указывает веритикальное позиционирование содержимого элемента.
/* синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|
inherit | значение | проценты */
div { /* центр элемента выравнивается по центру текста */
vertical-align: middle;
}
div { /* элемент отображается как нижний индекс */
vertical-align: sub;
}
div { /* наследует значение от родителя */
vertical-align: inherit;
}
- visibility (Востребовано)
- Свойство visibility указывает будет ли виден слой или нет.
/* синтаксис
visibility: visible | hidden | collapse | inherit */
img { /* элемент не виден */
visibility: hidden;
}
img { /* элемент виден */
visibility: visible;
}
img { /* наследует значение от родителя */
visibility: inherit;
}
- voice-balance (Востребовано)
/* синтаксис
voice-balance: число | left | center | right | leftwards |
rightwards | inherit */
h2 { /* баланс стереоканалов: –100 */
voice-balance: left;
}
h2 { /* баланс стереоканалов: наполовину вправо */
voice-balance: 50;
}
h2 { /* наследовать от родителя */
voice-balance: inherit;
}
- voice-duration (Востребовано)
/* синтаксис
voice-duration: <время> */
p { /* произнести содержимое блока за 5 сек. */
voice-duration: 5s;
}
- voice-family (Востребовано)
/* синтаксис
voice-family: [[<specific-voice> | <generic-voice> ],]*
[<specific-voice> | <generic-voice> ] | inherit
<generic-voice>: 'male', 'female', 'child'
<specific-voice>: значения представляют собой конкретные экземпляры, например,
comedian, trinoids, carlos, lani */
h1 { /* тип голоса */
voice-family: announcer, male;
}
h1 { /* наследовать от родителя */
voice-family: inherit;
}
- voice-pitch (Востребовано)
/* синтаксис
voice-pitch: <число> | x-low | low | medium | high | x-high | inherit */
p { /* читать басом в 75 герц */
voice-pitch: 75hz;
}
p { /* читать высоким голосом */
voice-pitch: high;
}
p { /* наследовать от родителя */
voice-pitch: inherit;
}
- voice-rate (Востребовано)
/* синтаксис
voice-rate: <число> | x-slow | slow | medium | fast | x-fast | slower |
faster |inherit */
p { /* читать 100 слов в минуту */
voice-rate: 100;
}
p { /* читать 300 слов в минуту */
voice-rate: fast;
}
p { /* наследовать от родителя */
voice-rate: inherit;
}
- voice-stress (Востребовано)
/* синтаксис
voice-stress: strong | moderate | none | reduced | inherit */
p { /* сильная эмоциональная окраска */
voice-stress: strong;
}
p { /* норма */
voice-stress: none;
}
p { /* наследовать от родителя */
voice-stress: inherit;
}
- voice-volume (Востребовано)
/* синтаксис
voice-volume: <число> | <процент> | silent | x-soft | soft | medium | loud |
x-loud | louder | softer | inherit */
p { /* мягко, 25 */
voice-volume: soft;
}
p { /* вполголоса */
voice-volume: 50%;
}
p { /* наследовать от родителя */
voice-volume: inherit;
}
- volume (Востребовано)
/* синтаксис
volume: <число> | <процент> | silent | x-soft | soft | medium | loud |
x-loud | louder | softer | inherit */
p { /* нет звука */
volume: silent ;
}
p { /* вполголоса */
volume: 50%;
}
p { /* наследовать от родителя */
volume: inherit;
}
W- white-space (Востребовано)
- Свойство white-space указывает как обрабатывать пробельные символы.
/* синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit */
p { /* автоматический перевод игнорируется, текст отображается одной строкой */
white-space: nowrap;
}
p { /* препятствует браузерам делать переносы строк */
white-space: pre-wrap;
}
p { /* наследует значение от родителя */
white-space: inherit;
}
- widows (Востребовано)
- Свойство widows указывает минимальное количество строк для переноса на следующую страницу при печати.
/* синтаксис
widows: число | inherit */
p { /* минимум строк в абзаце, с которого начнется новая страница */
widows: 1;
}
p { /* наследует значение от родителя */
widows: inherit;
}
- width (Востребовано)
- Свойство width указывает ширину элемента.
/* синтаксис
width: значение | проценты | auto | inherit */
div { /* точное значение ширины */
width: 200px;
}
div { /* ширина зависит от содержимого элемента */
width: auto;
}
div { /* наследует значение от родителя */
width: inherit;
}
- word-spacing (Востребовано)
- Свойство word-spacing устанавливает величину пробела между словами
/* синтаксис
word-spacing: значение | normal | inherit */
p { /* точное значение расстояния между словами */
word-spacing: 5px;
}
p { /* обычное растояние для текущего шрифта и настроек браузера */
word-spacing: normal;
}
p { /* наследует значение от родителя */
word-spacing: inherit;
}
- word-wrap (Востребовано)
- Свойство word-wrap указывает как переносить длинные слова
/* синтаксис
word-wrap: normal | break-word */
p { /* если слово превышает ширину блока, оно может быть разорвано */
word-wrap: break-word;
}
p { /* слово нельзя разорвать */
word-wrap: normal;
}
- writing-mode (Востребовано)
- Свойство writing-mode указывает направление текста на странице
/* синтаксис
writing-mode: lr-tb | rl-tb | lr-bt | rl-bt | tb-rl | bt-rl | tb-lr | bt-lr | inherit */
#ramechNetBox1 { /* направление текста слева направо, сверху вниз внутри текстового блока */
writing-mode: lr-tb;
}
#ramechNetBox2 { /* направление текста справа налево, сверху вниз внутри текстового блока */
writing-mode: rl-tb;
}
#ramechNetBox3 { /* направление текста слева направо, снизу вверх внутри текстового блока */
writing-mode: lr-bt;
}
#ramechNetBox4 { /* направление текста справа налево, снизу вверх внутри текстового блока */
writing-mode: rl-bt;
}
#ramechNetBox5 { /* направление текста сверху вниз, справа налево внутри текстового блока */
writing-mode: tb-rl;
}
#ramechNetBox6 { /* направление текста снизу вверх, справа налево внутри текстового блока */
writing-mode: bt-rl;
}
#ramechNetBox7 { /* направление текста сверху вниз, слева направо внутри текстового блока */
writing-mode: tb-lr;
}
#ramechNetBox8 { /* направление текста снизу вверх, слева направо внутри текстового блока */
writing-mode: bt-lr;
}
#ramechNetBox9 { /* положение текста определяется значением родительского контейнера */
writing-mode: inherit;
}
Z- z-index (Востребовано)
- Свойство z-index в CSS3 указывает порядок отображения элементов при наложении друг на друга. Поверх остальных отображается блок у которого свойство z-index больше.
/* синтаксис
z-index: число | auto | inherit */
div { /* чем больше число, тем «выше» элемент по z-оси */
position: relative;
z-index: 100;
}
div { /* эквивалентно z-index: 0, браузер автоматически определяет какой из элементов отобразить поверх другого при наложении */
position: relative;
z-index: auto;
}
div { /* наследует значение от родителя */
position: relative;
z-index: inherit;
}
- zoom (Востребовано)
/* синтаксис
zoom: <значение> | <проценты> | normal */
.zoom:hover { /* увеличивает масштаб объекта в 3 раза */
zoom: 3;
}
.zoom:hover { /* значение масштабирования в процентах */
zoom: 200%;
}
.zoom:hover { /* объект имеет исходный масштаб */
zoom: normal;
}
|