2. Краткий перечень css-команд

Шрифт

1) Текст

1) text-align – задает горизонтальное выравнивание текста.

text-align: left (значение по умолчанию) – выравнивает текст по левому краю;

text-align: right – выравнивает текст по правому краю;

text-align: center – выравнивает текст по центру;

text-align: justify – выравнивает текст по ширине.

<p style="text-align: right"> Абзац текста с выравниванием по правому краю</p>

<p style="text-align: justify">Абзац текста с выравниванием по ширине</p>

2) text-decoration – задает специальное оформление текста.

text-decoration: none – отменяет любое специальное оформление (значение по умолчанию для большинства тегов);

text-decoration: underline – подчеркивает текст;

text-decoration: overline – «надчеркивает» текст;

text-decoration: line-through – зачеркивает текст;

3) font-size – задает размер шрифта, используемого в элементе страницы.

font-size: cm – размер шрифта в сантиметрах;

font-size: mm – размер шрифта в миллиметрах;

font-size: pt – размер шрифта в точках;

font-size: in – размер шрифта в дюймах;

font-size: pc – размер шрифта в пиках;

font-size: px – размер шрифта в пикселях;

4) text-indent – задает отступ красной строки.

Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.

5) text-transform – задает преобразования регистра символов текста.

text-transform: none (значение по умолчанию) – отключает любые преобразования регистра символов;

text-transform: capitalize – преобразует первую букву каждого слова текста в верхний регистр;

text-transform: uppercase – преобразует все символы текста в верхний регистр;

text-transform: lowercace – преобразует все символы текста в нижний регистр;

6) color – задает цвет текста.

color: Цвет;

В качестве комбинаций цвета может использоваться:

- непосредственно написание цвета, то есть такие названия как red (красный), green (зеленый), blue (синий). Предлагается 60 стандартных названий цветов на английском языке. Есть еще много других названий цветов, которые поддерживают многие браузеры;

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

color: rgb(200,100,150);

Данный способ удобно применять, используя любой (даже самый простой) графический редактор (Paint), где можно зайти в палитру, выбрать любой нужный цвет и определить необходимые цифры.

- RGB-цвета в шестнадцатеричном написании

color: #FF0000;

color: #FF00;

7) font-family – задает имя шрифта, используемого в элементе страницы.

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

font-family: «Имя шрифта»;

font-family: serif;

font-family: san-serif, cursive, fantasy, monospace;

8) font-style – задает вид шрифта, используемого в элементе страницы.

font-style: normal (значение по умолчанию) – задает обычный вид шрифта;

font-style: italic – задает курсивное начертание;

font-style: oblique – задает наклонное начертание.

9) font-weight – задает полужирное начертание шрифта, используемого в элементе страницы.

font-weight: normal (значение по умолчанию) – задает обычный вид шрифта;

font-weight: bold – задает полужирное начертание шрифта

10) line-height – задает вертикальное расстояние между строками текста (междустрочный интервал).

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

line-height: 150%; - полуторный интервал между стоками.

11) background-image – задает фоновый рисунок Web-страницы или ее элемента.

background-image: url(Интернет-адрес файла рисунка)

url – uniform resource locator – адрес в Интернет.

background-image: none – отключает фоновый рисунок (значение по умолчанию).

<body style="background-image: URL(risunok1.jpg); ">

12) background-color – задает фоновый цвет Web-страницы или ее элемента.

background-color: цвет;

13) background – в данной команде можно прописывать цвет фона или задавать фоновый рисунок, или задавать и то и другое одновременно

14) width – задает ширину свободно позиционированного элемента.

15) height – задает высоту свободно позиционированного элемента.

Ширина и высота могут быть заданы как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto (значение по умолчанию) заставляет браузер устанавливать ширину или высоту элемента самостоятельно.

<p style="width: 30%;">Абзац текста заданного размера в процентах</p>

height: auto;

width: 300px;

16) border – общая команда для всех рамок, содержит стиль, ширину и цвет в любой последовательности

Border: dotted 5px red;

17) border-color – задает цвет всех границ элемента страницы.

Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе – к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе – к левой и правой, третье – к нижней.

18) border-style – задает стиль границ элемента.

border-style: none – (значение по умолчанию) – запрещает рисование границы;

border-style: dotted – рисует точечную линию;

border-style: dashed – рисует штриховую линию;

border-style: solid – рисует сплошную линию;

border-style: double – рисует двойную сплошную линию;

border-style: groove – с рельефом;

border-style: ridge – волнистая.

19) border-width – задает толщину всех границ элемента страницы.

Как и при задании цвета каждой границы по отдельности, можно задавать их ширину с помощью команд: border-top-width, border-right-width, border-bottom-width и border-left-width.

Рамка или граница также позволяет отформатировать каждую из четырех сторон отдельно. Для этого используются команды border-left, border-top, border-right, border-bottom. Эти команды комбинируются с цветом (color), стилем (style) рамки и ее шириной (width). Так, например, чтобы указать толщину правой стороны, используется команда border-right-width, цвет нижней границы задается командой border-bottom-color, стиль верхней границы задается командой border-top-style и т.д.

20) border-collapse –совпадение границ у таблицы.

Применяется только для тега <TABLE>

border-collapse: separate (значение по умолчанию) разделяет границу таблицы и границы ее ячеек

border-collapse: collapse по возможности объединяет их.

<table border="1" style="border-collapse:collapse;">

21) padding – задает отступ между элементом страницы и различными элементами.

Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам элемента. Если задано два значения, первое относится к верхней и нижней границам, а второе – к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе – к левой и правой, третье – к нижней. Значение по умолчанию 0, для <TD> 1.

<p style="border-color: blue green red; border-width: 2px; border-style:dotted; padding: 2em;">Текст в разноцветной рамке с заданным отступом</p>