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

• word-spacing - расстояние между словами (значение, normal);

• text-decoration - декорация текста (none, underline, overline, line-through, blink);

Свойство  text-decoration  позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

• letter-spacing - расстояние между буквами (значение, normal);

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:

• h1 {

• letter-spacing: 6px;

• }

• p {

• letter-spacing: 3px;

• }

• vertical-align - позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %);

• text-transform - изменение текста (none, Capitalize, UPPERCASE, lowercase);

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize

Капитализирует (делает первую букву в слове строчной) каждое слово. Например: "john doe" станет "John Doe".

uppercase

Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

lowercase

Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".

none

Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

h1 {

text-transform: uppercase;

}

li {

text-transform: capitalize;

}

• text-align - положение текста (left, right, center, justify);

В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:

th {

text-align: right;

}

td {

text-align: center;

}

p {

text-align: justify;

}

• text-indent - отступ (значение, %);

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

p {

text-indent: 30px;

}

• line-height - отступ сверху (normal, значение, %);

Свойства фон и цвет

• color - цвет элемента (значение);

• background-color - цвет фона элемента (значение);

• background-image - изображение фон (none, URL);

• background-repeat - варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat);

• background-attachment - возможность прокрутки фонового изображения (scroll, fixed);

• background-position - положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right);

• background -обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений);

Используя выше приведенные правила стилей применить их к документу

Задание:

Создать в таблице стилей стиль для тега Form

font-family: Tahoma, Geneva, sans-serif;

font-size: 14px;

font-style: italic;

line-height: 24px;

font-weight: bold;

color: #09C;

для кнопки

input.button {

width:100px;

background:#09C;

color:#fff;

font-family: Tahoma, Geneva, sans-serif;

border: 1p solid #999;

}

Обнулить стили

body, div, h1, form, fieldset, input, textarea {

margin: 0; padding: 0; border: 0; outline: none;}

html {height: 100%;}

body {background:#075f92;font-family:???????}

Установить цвет фона и шрифт, общий для всех элементов.

#contact {width:460px; margin: 60px auto; padding: 60px 30px;background:#bbb;

box-shadow: 0px 0px 8px rgba(4,4,4,0.55)

border-radius: 5px}

Установить стиль для заголовка

h1 {font-size: 30px; color: #333;text-align: center;

margin: 0 0 35px 0;text-shadow: 0 0 1px #000000;

filter: dropshadow(color=#000, offx=, offy=0);font-weight:normal}

Установить стили для надписей и полей ввода.

textarea {width: 260px; height: 170px; padding: 12px 20px 0px 20px;

margin: 0 0 20px 0;

background: #a2a2a2;

border-radius: 5px;

-

box-shadow: inset 1px 0px 2px rgba(0,0,0,0.55);

font-size: 14px; color: #333;text-shadow: 0 0 0;font-family: Ubuntu;}

Отдельно создать стиль для поля “Сообщение”. Другой атрибут, не input, а textarea.. input больше предназначен для однострочных значений. Псевдоселектор :focus дает нам некоторую интерактивность.

input[type=submit].submitbutton {

width: 185px;float:right;padding: 10px 15px; margin: 0 22px 0 0;

box-shadow: 0px 0px 3px #424242;

background: #ef652a;

text-shadow: 0 0 0;

cursor: pointer}