Справочник CSS

Свойства CSS Описание свойств CSS
background Определяет стиль фона. (базовый атрибут).

Используется когда стилю фона необходимо одновременно присвоить несколько значений. Может иметь от одного до пяти значений из атрибутов применяемых к стилю фона.

Атрибуты стиля фона и их возможные значения:

background-attachment – прокрутка фонового изображения.

  • fixed – фиксированный фон.
  • scroll – подвижный фон (по умолчанию).

background-color – определяет цвет фона элемента.

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный фон.

background-image – фоновое изображение элемента.

  • url – путь к файлу с изображением.
  • none – изображение отсутствует.

background-position – позиция фонового изображения элемента.по горизонтали:

  • left – расположить слева.
  • center – расположить по центру.
  • right – расположить справа.по вертикали:
  • top – расположить сверху.
  • center – расположить по центру.
  • bottom – расположить снизу.

background-repeat – регулирует повторение фонового изображения.

  • no-repeat – не повторять, показать только одно изображение.
  • repeat – повторять (по умолчанию).
  • repeat-x – повторять только по горизонтали.
  • repeat-y – повторять только по вертикали.

Для более детального ознакомления смотрите каждый атрибут отдельно.

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

body{
background: url(fon.jpg) fixed repeat-y
}

background-attachment Определяет будет ли прокручиваться фоновое изображение элемента.

Если в том или ином элементе страницы присутствует полоса прокрутки то по умолчанию фоновое изображение прукручивается вместе с остальным содержанием данного элемента. Атрибут background-attachment может принять одно из двух значений: запретить прокрутку фонового изображения или же разрешить прокрутку.

Возможные значения:

  • fixed – фиксированный фон.
  • scroll – подвижный фон (по умолчанию).

Синтаксис:

body{
background-image: url(fon.jpg);
background-attachment: fixed
}

background-color Определят цвет фона элемента.

Цвет может быть задан следующими методами:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный фон.

Синтаксис:

h1 { background-color: red }
h2 { background-color: #ff0000 }
h3 { background-color: RGB(255, 0, 0) }

background-image Делает графическое изображение фоном элемента.

К фоновому изображению указывается путь, либо устанавливается отсутствие фонового рисунка.

Значения:

  • url() – путь к файлу с изображением.
  • none – изображение отсутствует (по умолчанию).

Синтаксис:

body{
background-image: url(fon.jpg)
}

background-position Определяет положение левого верхнего угла фонового изображения.

Положение рисунка по осям х и у от краёв элемента может задаваться в процентах, пикселях а так же двумя (по вертикали и горизонтали)логическими значениями.

Значения:по горизонтали:

  • left – расположить слева.
  • center – расположить по центру.
  • right – расположить справа.по вертикали:
  • top – расположить сверху.
  • center – расположить по центру.
  • bottom – расположить снизу.

Синтаксис:

body {
background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: center top
}

background-repeat Управляет повторением фонового рисунка.

border Может одновременно определять стиль, цвет и толщину границы элемента. (базовый атрибут).

Атрибуты управляющие бордюром и их возможные значения:

border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

border-width – устанавливает ширину границы. border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:
Так как атрибут border является базовым то указываются только значения родственных атрибутов, в любом порядке через пробел.

div{
border: RGB(255, 0, 0) 6px double
}

border-bottom Определяет стиль, цвет и ширину нижней границы элемента.

Атрибуты управляющие бордюром и их возможные значения:
border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

border-width – устанавливает ширину границы. border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div{
border-bottom: red 6px dashed
}

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

border-bottom-colorr – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-bottom-color: #0000ff
}

border-bottom-style Определяет стиль нижней границы элемента.

border-bottom-style может иметь следующие значения:

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-bottom-style: solid
}

border-bottom-width Определяет ширину нижней границы элемента.

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

  • thin – тонкая граница
  • medium – средняя толщина границы
  • thick – толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-collapse Задает стиль рисования границ таблицы.

Внешний вид границ таблицы может принимать следующий вид:

  • separate – ячейки таблицы отделены друг от друга (по умолчанию).
  • collapse – ячейки таблицы не имеют промежутков между собой.
  • inherit — свойства наследуются у родителя элемента.

Синтаксис:

<html>
<head>
<title>Стиль таблицы</title>
</head>
<body>
<table border=”5″ style=”border-collapse: collapse”>
<tr>
<td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td>
</tr>
</table>
</body>
</html>

border-collapse применяется только к тегу table и элементам, у которых атрибут display имет значение table или inline-table.

border-color Устанавливает цвет границ элемента.

border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:

div{
border-color: #ff0000
}

border-left Определяет стиль, цвет и ширину левой границы элемента.

Атрибуты управляющие бордюром и их возможные значения:
border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

border-width – устанавливает ширину границы. border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div{
border-left: #ff0000 6px solid
}

border-left-color Устанавливает цвет левой границы элемента.

border-left-colorr – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-left-color: #0000ff
}

border-left-style Определяет стиль левой границы элемента.

border-left-style может иметь следующие значения:

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-left-style: solid
}

border-left-width Определяет ширину левой границы элемента.

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

  • thin – тонкая граница
  • medium – средняя толщина границы
  • thick – толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-right Определяет стиль, цвет и ширину правой границы элемента.

Атрибуты управляющие бордюром и их возможные значения:
border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

border-width – устанавливает ширину границы. border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div{
border-right: #ff0000 5px double
}

border-right-color Устанавливает цвет правой границы элемента.

border-right-colorr – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-right-color: #0000ff
}

border-right-style Определяет стиль правой границы элемента.

border-right-style может иметь следующие значения:

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-right-style: solid
}

border-right-width Определяет ширину правой границы элемента.

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

  • thin – тонкая граница
  • medium – средняя толщина границы
  • thick – толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-style Определяет стиль границ элемента.

Границы элемента могут иметь следующий стиль: border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-style: double
}

border-top Определяет стиль, цвет и ширину верхней границы элемента.

Атрибуты управляющие бордюром и их возможные значения:
border-style

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

border-width – устанавливает ширину границы. border-color – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:
Указываются значения родственных атрибутов, в любом порядке через пробел.

div{
border-top: #ff0000 5px double
}

border-top-color Устанавливает цвет верхней границы элемента.

border-top-colorr – цвет бордюра, может быть задан одним из четырёх вариантов:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.
  • transparent – прозрачный бордюр.

Синтаксис:

div{
border: red 5px solid;
border-top-color: #0000ff
}

border-top-style Определяет стиль верхней границы элемента.

border-top-style может иметь следующие значения:

  • none – граница отсутствует (по умолчанию).
  • dotted – граница из ряда точек.
  • dashed – пунктирная граница.
  • solid – сплошная граница
  • double – двойная граница
  • groove – граница “бороздка”
  • ridge – граница “гребень”
  • inset – вдавленная граница
  • outset – выдавленная граница

Синтаксис:

p{
border: red 5px dotted;
border-top-style: solid
}

border-top-width Определяет ширину верхней границы элемента.

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

  • thin – тонкая граница
  • medium – средняя толщина границы
  • thick – толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-bottom-width: thin;
border-left-width: medium;
border-right-width: thick;
border-top-width: 12px
}

border-width Определяет ширину границ элемента.

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

  • thin – тонкая граница
  • medium – средняя толщина границы
  • thick – толстая граница

Синтаксис:

div{
border: #00ff00 solid;
border-width: 12px
}

bottom Определяет положение при позиционировании элемента от нижнего края.

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

  • auto – Не меняет положения элемента. (по умолчанию)
  • px – Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
  • % – Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style=”position: absolute; bottom: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black”>
<p>Этот блок расположен в 150-ти пикселях от нижнего края окна браузера.</p>
</div>

clear Запрещает обтекание элемента с левой и/или правой стороны.

Свойство clear отменяет обтекание элемента заданного с помощью параметра floatдля указанных сторон.Значения:

  • both – Запрещает обтекание элемента с левой и правой стороны.
  • left – Запрещает обтекание элемента с левой стороны.
  • right – Запрещает обтекание элемента с правой стороны.
  • none – Запрет на обтекание элемента не задается.(по умолчанию)

Синтаксис:

<div style=”clear:both; width:100%; background: #c0e4ff;”>Верх</div>
<div style=”width:180px; float:left; background: #c5ffa0;”>левая колонка</div>
<div style=”width:180px; float:right; background: #c5ffa0″>правая колонка</div>
<div style=”margin:0 180px; background: #d0dfa0″>центр</div>
<div style=”clear:both; width:100%; background: #c0e4ff;”>подвал</div>
</div>

clip Определяет видимую часть элемента.

clip работает только для абсолютно позиционированных элементов и показывает лишь ту его часть, что входит в прямоугольную область заданную четырьмя значениями от левого и верхнего краёв данного элемента.Значения:

  • rect(сверху справа снизу слева) – Обрезает элемент сверху, справа, снизу и слева в соответствии с заданными, в скобках, четырьмя значениями, которые могут выражаться в процентах от ширины/длины элемента, пикселях или любых других единицах измерения принятых в CSS.
  • auto – Оставляет элемент или одну из сторон элемента без изменений.(по умолчанию).

Синтаксис:

<div style=”position: absolute; clip: rect(20px auto auto 20px); width: 150px; height: 150px; background: #c0e4ff; border: double 5px red”>
Этот блок частично обрезан слева и сверху
</div>

color Определят цвет элемента.

Цвет может быть задан следующими методами:

  • #ff0000 – шестнадцатеричное значение цвета RGB.
  • red – именное значение цвета.
  • RGB(255, 0, 0) – значение цвета RGB.

Синтаксис:

<span style=”color: red“>Блок 1</span>
<span style=”color: #ff0000“>Блок 2</span>
<span style=”color: RGB(255, 0, 0)“>Блок 3</span>

cursor Вид курсора в пределах элемента.

Атрибут cursor определяет тип курсора, а его непосредственная форма, цвет, размеры зависят от операционной системы пользователя и её настроек.

Возможные значения:

  • auto – курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)
  • url– путь к курсору. позволяет указать на свой “нестандартный” курсор в формате CUR.
  • crosshair – перекрестие
  • default – встроенный(основной)
  • e-resize – стрелка на “восток”
  • help – помощь
  • move – перемещение
  • n-resize – переместить на “север”
  • ne-resize – переместить на “северо-восток”
  • nw-resize – переместить на “северо-запад”
  • pointer – указатель
  • s-resize – переместить на “юг”
  • se-resize – переместить на “юго-восток”
  • sw-resize – переместить на “юго-запад”
  • text – текст
  • w-resize – переместить на “запад”
  • wait – ожидание

Синтаксис:

<div align=”center” style=”cursor: help; width: 80px; height: 20px; background-color: #828282; color: #0000ff; font-size:20px”>помощь</div>

display Определяет параметры вывода браузером элемента на экран.

Значения:

  • block – Показывает элемент как блочный. Происходит перенос строк вначале и в конце элемента.
  • inline – Показывает элемент как встроеный. Элемент(ты) не переносятся на следующую строку.(по умолчанию)
  • list-item – Показывает элемент как блок в списке с добавлением маркера списка.
  • none – Запрещает показ элемента. Элемент “удаляется” из общего потока, его занимаемое пространство на экране не резервируется.

Синтаксис:

<p style=”display: inline; background: #c5ffa0; padding: 5px;”>блок 1</p>
<p style=”display: inline; background: #c0e4ff; padding: 5px;”>блок 2</p>
<p style=”display: inline; background: #c5ffa0; padding: 5px;”>блок 3</p>

<p style=”display: none“>Скрытый блок</p>

<p style=”display: block; background: #c5ffa0; padding: 5px;”>блок 1</p>
<p style=”display: block; background: #c0e4ff; padding: 5px;”>блок 2</p>
<p style=”display: block; background: #c5ffa0; padding: 5px;”>блок 3</p>

float Определяет с какой стороны будет происходить выравнивание и обтекание элемента.

Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.Значения:

  • left – Выравнивает элемент по левому краю, остальные элементы обтекают его справа.
  • right – Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
  • none – Выравнивание элемента не задается.(по умолчанию)

Синтаксис:

<div style=”float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px”>
<span style=”float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px”>блок выровнен по левому краю</span>
<span style=”float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px”>блок выровнен по правому краю</span>
содержание блока div обтекает выровненные элементы слева и справа
<div>

font Определяет параметры шрифта. (базовый атрибут).

font – (шрифт), являясь базовым атрибутом может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

font-style -Стиль шрифта

  • normal – обычный (по умолчанию)
  • italic – курсив
  • oblique – наклонный

font-variant – варианты начертания шрифта:

  • normal – нормальный (по умолчанию)
  • small-caps – все буквы заглавные и уменьшенные

font-weight – Жирность шрифта

  • normal – обычный шрифт
  • bold – полужирный шрифт
  • bolder – жирный шрифт
  • lighter – тонкий шрифт
  • 100 – 900 – жирность шрифта выражается в числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900)

font-size – Размер шрифта в процентах или пикселях и любых других допустимых единицах измерения CSS, а так же:
значения абсолютного размера шрифта:

  • xx-small – очень очень маленький
  • x-small – очень маленький
  • small – маленький
  • medium – средний
  • large – большой
  • x-large – очень большой
  • xx-large – очень очень большой

значения относительного размера шрифта:

  • larger – больше чем размер шрифта родительского элемента
  • smaller – меньше чем размер шрифта родительского элемента

font-family – Указывает одно или несколько имен шрифтов из библиотеки шрифтов. Так же можно указать семейство шрифтов.

  • serif – шрифты с засечками
  • sans-serif – рубленные шрифты
  • cursive – курсивные шрифты
  • fantasy – декоративные шрифты
  • monospace – моношириные шрифты

Для более детального ознакомления смотрите каждый атрибут отдельно.

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

p{
font: italic bold 20px Arial
}

font-family Семейство шрифтов.

font-family – Указывает одно или несколько имен шрифтов из библиотеки шрифтов. Ввиду того что у пользователя может не оказаться того или иного шрифта в библиотеке шрифтов, можно просто указать семейство шрифтов в этом случае браузер в зависимости от настроек и наличия выберет необходимый.

  • serif – шрифты с засечками
  • sans-serif – рубленные шрифты
  • cursive – курсивные шрифты
  • fantasy – декоративные шрифты
  • monospace – моношириные шрифты

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

<p style=“font-family: cursive”>Конкретно шрифт не указан, однако он будет из семейства курсивов</p>
<p style=“font-family: Arial”>Указано имя конкретного шрифта Arial</p>
<p style=“font-family: Vivaldi, Arial”>В случае если браузер не найдет шрифт Vivaldi он будет использовать Arial</p>

font-size Определяет размер шрифта.

Размер шрифта можно указывать в процентах (относительно размера шрифта элемента родителя), пикселях или любых других допустимых единицах измерения CSS, а так же используя константы:
для абсолютного размера шрифта:

  • xx-small – очень очень маленький
  • x-small – очень маленький
  • small – маленький
  • medium – средний
  • large – большой
  • x-large – очень большой
  • xx-large – очень очень большой

для относительного размера шрифта:

  • larger – больше чем размер шрифта родительского элемента
  • smaller – меньше чем размер шрифта родительского элемента

Синтаксис:

<div style=”background-color: #ff0000; font-size: 12pt“>
<p style=“font-size: larger”>этот шрифт более крупный чем остальные в этом блоке</p>
<p>этот шрифт использует размер элемента родителя</p>
<p style=“font-size: smaller”>а этот шрифт более мелкий чем остальные в этом блоке</p>
</div>
<div style=”background-color: #00ff00; font-size: 18px“>
<p style=“font-size: 50%”>шрифт в два раза меньше</p>
<p style=“font-size: 100%”>шрифт, использует размер элемента родителя</p>
<p style=“font-size: 200%”>шрифт в два раза больше</p>
</div>
<div style=”background-color: #0000ff”>
<p style=“font-size: xx-small”>очень очень маленький</p>
<p style=“font-size: medium”>средний</p>
<p style=“font-size: xx-large”>очень очень большой</p>
</div>

font-style Стиль шрифта.

font-style – определяет в каком стиле будет отображаться текст.

Значения:

  • normal – обычный (по умолчанию)
  • italic – курсив
  • oblique – наклонный

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

Синтаксис:
<p style=“font-style: italic”>это курсив</p>
<p style=“font-style: oblique”>а это наклонный текст</p>

font-variant Варианты начертания шрифта.

font-variant -Может преобразовать все прописные буквы в заглавные, уменьшенного размера.

  • normal – Нормальный. (по умолчанию – Аа Бб Вв Гг Дд Ее)
  • small-caps – Все буквы заглавные и уменьшенные (Аа Бб Вв Гг Дд Ее)

Синтаксис:
<p style=“font-variant: small-caps”>Аа Бб Вв Гг Дд Ее</p>

font-weight Жирность шрифта.

Жирность шрифта можно задать используя константы, а так же числовое значение от 100 до 900 с шагом 100.

  • normal – обычный шрифт (по умолчанию)
  • bold – полужирный шрифт
  • bolder – жирный шрифт
  • lighter – тонкий шрифт
  • 100 – 900 – жирность шрифта выражается в числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900)

Синтаксис:
<p style=“font-weight: bolder”>жирный шрифт</p>
<p style=“font-weight: lighter”>тонкий шрифт</p>
<p style=“font-weight: 600”>жирность шрифта равна 600</p>

height Высота элемента.

height – Устанавливает высоту блочных элементов не учитывая отступы и границы элементов. Высота элемента может быть задана следующими способами:

  • auto – Высота элемента определяется его содержанием. (по умолчанию)
  • % – Высота элемента задаётся в процентах от высоты элемента родителя.
  • px – Высота элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style=”height: 300px; background-color: #ff0000; padding: 5px”>
<div style=”background-color: #00ffff; height: 25%“>Блок 1</div>
<div style=”background-color: #00ff00; height: 50%“>Блок 2</div>
<div style=”background-color: #ffff00; height: 25%“>Блок 3</div>
</div>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание “выползет” за пределы элемента.

left Определяет положение при позиционировании элемента от левого края.

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

  • auto – Не меняет положения элемента. (по умолчанию)
  • px – Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
  • % – Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style=”position: absolute; left: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black”>
<p>Этот блок расположен в 150-ти пикселях от левого края окна браузера.</p>
</div>

letter-spacing Межсимвольное расстояние.

letter-spacing определяет расстояние между символами в тексте и может быть задано следующими значениями:

  • normal – Нормальное расстояние. (по умолчанию)
  • px – Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:
<p style=“letter-spacing: 4px”>Расстояние между буковками равно четыре пикселя</p>

line-height Интерлиньяж, расстояние между строками текста.

Расстояние между строками текста можно задать несколькими способами:

  • normal – Норма (по умолчанию).
  • % – Проценты. за сто процентов берется высота шрифта
  • 0.5 – Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 – двойному.
  • px – Пиксели и любые другие единицы измерения, принятые в CSS.

Синтаксис:

<div style=”border: RGB(255, 0, 0) 3px double; line-height: 150%”>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<div style=”border: RGB(255, 0, 0) 3px double; line-height: 0.5″>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<div style=”border: RGB(255, 0, 0) 3px double; line-height: 25px”>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>

list-style Определяет стиль списка. (базовый атрибут).

Используется когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из атрибутов применяемых к стилю списка, в любой последовательности через пробел.Атрибуты стиля маркера и их возможные значения:

list-style-type – Вид маркера в списке.

  • disc – Диск. (по умолчанию для <ul>)
  • circle – Полый круг.
  • square – Квадрат.
  • decimal – Арабские цифры. (по умолчанию для <ol>)
  • lower-roman – Строчные римские цифры.
  • lower-alpha – Строчные буквы.
  • upper-roman – Заглавные римские цифры.
  • upper-alpha – Заглавные буквы.
  • none – Маркер отсутствует.

list-style-position – Стиль обтекания маркера текстом.

  • outside – Маркер находится в стороне от списка.(по умолчанию)
  • inside – Маркер обтекается текстом.

list-style-image – Определяет в качестве маркера графическое изображение.

  • none – Отменяет графическое изображение маркера.
  • url – Путь к файлу с графическим изображением маркера.

Для более детального ознакомления смотрите каждый атрибут отдельно.

Синтаксис:

<div style=”width: 300px; height: 200px; background: #c0e4ff”>
<ul style=”list-style: upper-roman inside“>
<li>пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
<li>пункт, в котором говорится о том, что всё-таки можно бы было сделать, ещё кое-что там, где это кое-что еще не сделано.
</ul>
</div>

list-style-image Определяет в качестве маркера списка графическое изображение.

В качестве маркера списка можно использовать некое изображение указав к нему путь.Значения:

  • none – Отменяет графическое изображение маркера.
  • url – Путь к файлу с графическим изображением маркера.

Синтаксис:

<ul style=”list-style-image: url(‘marker.gif’)“>
<li>Пункт 1.
<li style=”list-style-image: none“>Пункт 2.
<li>Пункт 3.
</ul>

list-style-position Стиль обтекания маркера списком.

Значения:

  • outside – Маркер находится в стороне от списка.(по умолчанию)
  • inside – Маркер обтекается текстом.

Синтаксис:

<div style=”width: 300px; height: 200px; background: #c0e4ff”>
<ul style=”list-style-position:inside“>
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
<li>Пункт, в котором говорится о том, что всё-таки можно бы было сделать, ещё кое-что там, где это кое-что еще не сделано.
</ul>
</div>

list-style-type Вид маркера в списке.

Значения:

  • disc – Диск. (по умолчанию для <ul>)
  • circle – Полый круг.
  • square – Квадрат.
  • decimal – Арабские цифры. (по умолчанию для <ol>)
  • lower-roman – Строчные римские цифры.
  • lower-alpha – Строчные буквы.
  • upper-roman – Заглавные римские цифры.
  • upper-alpha – Заглавные буквы.
  • none – Маркер отсутствует.

Синтаксис:

<ul style=”list-style-type: square“>
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.
</ul>

<ul style=”list-style-type: upper-roman“>
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.
</ul>

margin cursor: sw-resize; text-decoration: underlinecursor: sw-resize; text-decoration: underlineУстанавливает размер отступов от границ элемента до границ элемента родителя или окна браузера.

Атрибут margin одновременно устанавливает все отступы вокруг элемента.Значения:

  • auto – Отступы автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Отступ выражается в процентах от размера элемента.

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

Четыре варианта указания полей:

  • margin: 30px; – Указывается одно значение для отспупов со всех сторон элемента.
  • margin: 20px 10px; – Указывается два значения: Первое – одновременно для верхнего и нижнего отступа, второе – одновременно для правого и левого отступа.
  • margin: 20px 30px 10px; Указывается три значения: Первое – для верхнего отступа, второе – одновременно для правого и левого отступа, третье – для нижнего отступа.
  • margin: 30px 15px 10px 20px; Указывается четыре значения: Первое – для верхнего отступа, второе – для правого отступа, третье – для нижнего отступа, четвертое – для левого отступа.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000″>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin: 30px“>
<p align=”center”>блок</p>
</div>
</div>
<br>
<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000″>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin: 50px 20px 10px 40px“>
<p align=”center”>блок</p>
</div>
</div>

margin-bottom Устанавливает размер отступа от нижней границы элемента до нижней границы элемента родителя или окна браузера.

Значения:

  • auto – Отступ автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px”>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin-bottom: 30px“>
<p align=”center”>блок</p>
</div>
</div>

margin-left Устанавливает размер отступа от левой границы элемента до левой границы элемента родителя или окна браузера.

Значения:

  • auto – Отступ автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px”>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin-left: 30px“>
<p align=”center”>блок</p>
</div>
</div>

margin-right Устанавливает размер отступа от правой границы элемента до правой границы элемента родителя или окна браузера.

Значения:

  • auto – Отступ автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px”>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin-right: 30px“>
<p align=”center”>блок</p>
</div>
</div>

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

Значения:

  • auto – Отступ автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Отступ выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 5px”>
<div style=” background-color: #c0e4ff; border: 2px solid #000000; margin-top: 30px“>
<p align=”center”>блок</p>
</div>
</div>

overflow Указывает браузеру что делать с содержанием если оно выходит за пределы элемента.

Если элементу присвоены точные значения высоты и ширины (height, width) а его содержание, например длинный текст, не вмещается в указанных пределах, то по умолчанию такой элемент растягивается до нужных размеров, что не всегда на руку веб-мастеру. На помощь приходит атрибут overflow который указывает браузеру что делать с элементом в таких случаях.Может иметь следующие значения:

  • visible – Элемент растягивается до необходимых размеров. (по умолчанию)
  • hidden – Содержание элемента “обрезается” видна лишь та его часть что помещается в элементе.
  • scroll – Добавляются полосы прокрутки (всегда! даже если содержание помещается в пределах элемента).
  • auto – Полосы прокрутки добавляются при необходимости.

Синтаксис:

<div style=”overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

padding Устанавливает размер полей от границ элемента до его содержания.

Атрибут padding одновременно устанавливает все поля вокруг содержания элемента.Значения:

  • auto – Поля автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Поле выражается в процентах от размера элемента.

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

Четыре варианта указания полей:

  • padding: 30px; – Указывается одно значение для всех полей элемента.
  • padding: 20px 10px; – Указывается два значения: Первое – одновременно для верхнего и нижнего поля, второе – одновременно для правого и левого поля.
  • padding: 20px 30px 10px; Указывается три значения: Первое – для верхнего поля, второе – одновременно для правого и левого поля, третье – для нижнего поля.
  • padding: 30px 15px 10px 20px; Указывается четыре значения: Первое – для верхнего поля, второе – для правого поля, третье – для нижнего поля, четвертое – для левого поля.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 30px“>
<p align=”center” style=”background-color: #c0e4ff; border: 2px solid #000000;”>содержание</p>
</div>
<br>
<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding: 10px 5px 20px 30px“>
<p align=”center” style=”background-color: #c0e4ff; border: 2px solid #000000;”>содержание</p>
</div>

padding-bottom Устанавливает размер нижнего поля от границы элемента до его содержания.

Значения:

  • auto – Поле автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Поле выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-bottom: 50px“>
<p align=”center” style=”background-color: #c0e4ff;”>содержание</p>
</div>

padding-left Устанавливает размер левого поля от границы элемента до его содержания.

Значения:

  • auto – Поле автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Поле выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-left: 50px“>
<p align=”center” style=”background-color: #c0e4ff;”>содержание</p>
</div>

padding-right Устанавливает размер правого поля от границы элемента до его содержания.

Значения:

  • auto – Поле автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Поле выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-right: 50px“>
<p align=”center” style=”background-color: #c0e4ff;”>содержание</p>
</div>

padding-top Устанавливает размер верхнего поля от границы элемента до его содержания.

Значения:

  • auto – Поле автоматически рассчитываются браузером.
  • px – Пиксели или любые другие принятые единицы измерения в CSS.
  • % – Поле выражается в процентах от размера элемента.

Синтаксис:

<div style=”width: 200px; background-color: #c5ffa0; border: 2px solid #000000; padding-top: 50px“>
<p align=”center” style=”background-color: #c0e4ff;”>содержание</p>
</div>

position Указывает на способ позиционирования элемента.

Значения:

  • absolute – Абсолютное позиционирование элемента. Элемент занимает позицию от края/краёв окна браузера заданную атрибутами left, top, right, bottom.
  • fixed – Фиксированное позиционирование элемента. Элемент занимает свою позицию точно так же как и при абсолютном позиционировании, но при прокрутке страницы не меняет своего положения относительно краёв окна браузера.
  • relative – Относительное позиционирование элемента. Элемент занимает позицию от края/краёв родительского элемента с помощью атрибутов left, top, right, bottom.
  • static – Статическое позиционирование элемента. Элемент отображается как обычно, занимая своё место в общем потоке элементов.(по умолчанию).

Синтаксис:

<div style=”position: absolute; width: 300px; height: 200px; top: 100px; left: 150px; background: #c0e4ff; border: solid 1px black”>
<div style=”position: relative; width: 80px; height: 30px; top: 10px; left: 10px; background-color: #c5ffa0; border: solid 1px black”>Блок 1</div>
<div style=”position: relative; width: 80px; height: 30px; top: 50px; left: 110px; background-color: #c5ffa0; border: solid 1px black”>Блок 2</div>
<div style=”position: relative; width: 80px; height: 30px; top: 100px; left: 200px; background-color: #c5ffa0; border: solid 1px black”>Блок 3</div>
</div>

right Определяет положение при позиционировании элемента от правого края.

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

  • auto – Не меняет положения элемента. (по умолчанию)
  • px – Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
  • % – Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style=”position: absolute; right: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black”>
<p>Этот блок расположен в 150-ти пикселях от правого края окна браузера.</p>
</div>

scrollbar-3dlight-color Определяет цвет верхней и левой тени ползунка и кнопок на полосе прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-3dlight-color: RGB(255, 0, 0); overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-arrow-color Определяет цвет стрелок на кнопках полосы прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-arrow-color: #ff0000; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-base-color Определяет базовый цвет полосы прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-base-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-darkshadow-color Определяет цвет тени полосы прокрутки.(dark shadow – темная тень)

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-darkshadow-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-face-color Определяет цвет лицевой части полосы прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-face-color: RGB(255, 0, 0); overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввична, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-highlight-color Определяет цвет подсветки полосы прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-highlight-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-shadow-color Определяет цвет тени полосы прокрутки (shadow-тень)

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-shadow-color: red; overflow: auto; width: 250px; height: 150px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

scrollbar-track-color Определяет цвет дорожки для полосы прокрутки.

Семейство свойств scrollbar определяет цветовую стилизацию полосы прокрутки. Может быть применено к любому элементу, содержащему полосу прокрутки, в том числе к основному окну браузера (элемент body).Значения:

  • #ff0000 – Шестнадцатеричное значение цвета RGB.
  • red – Именное значение цвета.
  • RGB(255, 0, 0) – Значение цвета RGB.

Синтаксис:

<div style=”scrollbar-track-color: red; overflow: auto; width: 220px; height: 120px; border: solid 2px #dddddd”>
<h3 align=”center”>Диктант</h3>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввечна, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>

table-layout Устанавливает алгоритм обработки таблицы браузером.

table-layout применяется к тегу <table> для увеличения производительности браузера.Значения:

  • auto – Браузер вычисляет размеры ячеек таблицы после полной загрузки содержания. (по умолчанию)
  • fixed – Браузер не учитывает содержание ячеек и строит таблицу на основании следующих данных:
    – по значению атрибута width элементов col,
    – по значению атрибута width элементов td первого ряда таблицы,
    – если таковые данные отсутствуют то таблица строится по содержанию ячеек.

Используя значение fixed можно несколько увеличить производительность работы браузера при вычислении размеров отдельных ячеек таблицы.

Синтаксис:

<table width=600 cellspacing=0 border=1 style=”table-layout: fixed“>
<tr>
<th>&nbsp;</th><th>Доход</th><th>Расход</th>
</tr>
<tr>
<td>Январь</td><td>1543</td><td>1332</td>
</tr>
<tr>
<td>Февраль</td><td>3453</td><td>2343</td>
</tr>
<tr>
<td>Март</td><td>5456</td><td>3344</td>
</tr>
</table>

text-align Выравнивание содержания относительно элемента родителя или окна браузера.

Содержание в элементе может быть выровнено по левому, правому краю элемента, его центру, а также по обоим краям документа.Значения:

  • left – по левому краю элемента (по умолчанию).
  • rigth – по правому краю элемента.
  • center – по центру элемента.
  • justify – по обоим краям элемента.

Синтаксис:

<p style=”text-align: center“>содержание</p>

text-decoration Оформление текста.

Атрибут text-decoration позволяет декорировать текст присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста.Возможные значения:

  • blink — Текст будет мигать.
  • line-through — Делает текст перечеркнутым.
  • overline — Надчёркивание текста.
  • underline — Подчеркивание текста.
  • none — Текст без оформления.

Синтаксис:

<a href=”primer.html” style=”text-decoration:none“>Ссылка без подчёркивания</a>
<p style=”text-decoration:line-through“>Перечёркнутый текст</p>
<p style=”text-decoration:underline blink“>Подчёркнутый мигающий текст. жуть..</p>

text-indent Отступ первой строки в текстовом блоке.

text-indent – задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает “красную строку”.Отступ может быть задан:

  • % – В процентах от ширины текстового блока.
  • px – В пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style=”width: 400px; padding: 5px; border: RGB(255, 0, 0) 3px double”>
<p style=”text-indent: 40px“> Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом! </p>
<p style=”text-indent: 10%“> Мало кто знает, как много надо знать, для того что бы знать, как мало мы знаем. </p>
</div>

text-transform Преобразует символы в тексте в заглавные или прописные.

text-transform может иметь следующие значения:

  • none – Текст отображается без каких-либо изменений.(по умолчанию)
  • capitalize – Каждое слово в тексте отображается с заглавного символа.
  • lowercase – Все символы преобразуются в нижний регистр.
  • uppercase – Все символы преобразуются в верхний регистр.

Синтаксис:

<p style=”text-transform: capitalize“> союз советских социалистических республик </p>
<p style=”text-transform: lowercase“> СССР ссср </p>
<p style=”text-transform: uppercase“> ссср СССР </p>

top Определяет положение при позиционировании элемента от верхнего края.

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

  • auto – Не меняет положения элемента. (по умолчанию)
  • px – Расстояние указывается в пикселях или любых других принятых единицах измерения в CSS.
  • % – Расстояние выражается в процентах от размера родительского элемента или окна браузера.

Синтаксис:

<div style=”position: absolute; top: 150px; padding: 5px; background: #c0e4ff; border: solid 1px black”>
<p>Этот блок расположен в 150-ти пикселях от верхнего края окна браузера.</p>
</div>

vertical-align Устанавливает вертикальное положение элемента.

Значения:

  • baseline — Выравнивает базовую линию элемента по базовой линии родителя.
  • bottom — Выравнивает элемент по нижней части строки.
  • middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
  • sub — Нижний индекс (размер шрифта не меняется).
  • super — Верхний индекс (размер шрифта не меняется).
  • text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
  • text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
  • top — Выравнивает элемент по верхней части строки.
  • % — В процентах.
  • px — Пиксели или любые другие принятые единицы измерения в CSS.

Синтаксис:

<div style=”background-color: #c5ffa0; width: 150px”>
формула воды:
< Отступ первой строки в текстовом блоке. Отступ первой строки в текстовом блоке. ;span style=”vertical-align: -2px“>H</span>
<span style=”vertical-align: sub“>2</span>
<span style=”vertical-align: -2px“>O</span>
</div>
<div style=”background-color: #c0e4ff; width: 150px”>
<font size=”+3″>С&l Значения: t;/font>
<span style=”vertical-align: text-bottom“>лово</span>
<span style=”vertical-align: bottom“>слово</span>
<span style=”vertical-align: top“>слово</span>
</div>

visibility Отображает или скрывает элемент.

Значения:

  • inherit – Элемент отображается так как указанно в элементе родителе.
  • visible – Отображает элемент.(по умолчанию).
  • hidden – Скрывает элемент. Однако в отличии от display: none оставляет за элементом площадь которую он занимает. Проще говоря если display: none“удаляет” элемент hidden делает его “прозрачным”.
  • collapse – Скрывает колонки и строки таблицы идентично display: none, Если свойство применяется к другим элементам не имеющим отношения к таблицам то результат будет таким же, как hidden.

Синтаксис:

<div style=”visibility: visible;”>
<span style=”visibility: inherit; background: #c5ffa0; padding: 5px;”>блок 1</span>
<span style=”visibility: hidden; background: #c0e4ff; padding: 5px;”>блок 2</span>
<span style=”visibility: inherit; background: #c5ffa0; padding: 5px;”>блок 3</span>
</div>

white-space Определят показывать или нет пробелы между слов, а так же разрешает или запрещает перенос строки.

Атрибут white-space имитирует работу тега <pre> может иметь следующие значения:

  • normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
  • nowrap — запрещает автоматический перенос строки.
  • pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Синтаксис:

<p style=“white-space: pre”> текст текст текст текст текст текст текст </p>
width Ширина элемента.

width – Устанавливает ширину блочных элементов не учитывая отступы и границы элементов. Ширина элемента может быть задана следующими способами:

  • auto – Ширина элемента определяется его содержанием. (по умолчанию)
  • % – Ширина элемента задаётся в процентах от высоты элемента родителя.
  • px – Ширина элемента задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:

<div style=”width: 600px; background-color: #ff0000; padding: 5px”>
<div style=”background-color: #00ffff; float:left; width: 25%“>Блок 1</div>
<div style=”background-color: #00ff00; float:left; width: 50%“>Блок 2</div>
<div style=”background-color: #ffff00; float:left; width: 25%“>Блок 3</div>
</div>

Если содержание элемента превышает его указанный размер, то в некоторых браузерах элемент автоматически присвоит значение auto, а в некоторых содержание “выползет” за пределы элемента.

word-spacing Задаёт расстояние между словами в строке.

word-spacing определяет расстояние между словами (группами символов не разделенными пробелами) в тексте и может быть задано следующими значениями:

  • normal – Нормальное расстояние. (по умолчанию)
  • px – Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Синтаксис:
<p align=”left” style=“word-spacing: 10px”>Расстояние между словами равно десяти пикселям</p>

z-index Определяет позицию элемента по z-оси. (задаёт позицию слоя).

CSS дает возможность с помощью позиционирования накладывать одни элементы на другие тем самым, имитируя трёхмерность изображения. Свойство z-index регулирует очерёдность данных слоёв в глубину экрана.Значения:

  • auto – Элементы накладываются друг на друга в том порядке каком они указаны в коде HTML.
  • целое число – Чем выше данное значение тем более высокую позицию занимает элемент по отношению к тем элементов, значение которых ниже.

Синтаксис:

<html>
<body>
<div align=”center” style=”position: absolute; z-index:5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size:100px”>z-index</div>
<div style=”position: absolute; z-index:3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff”>&nbsp;</div>
<div style=”position: absolute; z-index:4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000″>&nbsp;</div>
<div style=”position: absolute; z-index:2; width: 150px; height: 150px; top: 100px; left: 200px; background-color: #ffff00″>&nbsp;</div>
<div style=”position: absolute; z-index:1; width: 150px; height: 150px; top: 200px; left: 100px; background-color: #00ff00″>&nbsp;</div>
</body>
</html>

 

Залишити відповідь