Текст и шрифты

Свойства, text-indent, text-align, text-decoration, text-shadow, letter-spacing, word-spacing, text-transform, white-space позволяют установить свойства текста, расположенного в контейнерах p, span, div, h1, h2 и др., такие как, - отступ текста внутри блока, выравнивание фрагмента текста (такого как абзац) в пределах содержащего блока, оформление текста (подчеркивание, перечеркивание, мигание и т.п.), оттеняющие эффекты, изменение расстояния между буквами в тексте, изменение расстояния между словами в тексте, определить обработку пробелов или символов перевода строк.

Пример

Ниже представлен фрагмент CSS-файла, в котором даются описания шрифтов и отступов для различных тегов, примененных в документах, - p, div, span, td.

p#name { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; font-weight: bold; color: #330099; clip: rect( ); margin-left: 12%}

p#nnorm { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; font-weight: normal; clip: rect( ); margin-left: 12%}

p.zagl { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; font-style: italic; font-weight: bold; color: #3333FF}

p#cont { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: oblique; color: #3300FF; font-weight: bold}

p.norm { padding-left: 2em; font-family: "Times New Roman", Times, serif; font-size: 16px; font-style: normal; width: 500px; clip: rect( ); text-align: justify}

div#osob { position: absolute; height: 140px; width: 500px; left: 440px; top: 540px; clip: rect( ); font-family: "Times New Roman", Times, serif; font-size: 16px; font-style: normal; color: #330000; font-weight: normal; text-align: justify; border: none}

div { left: auto; top: auto; clip: rect( ); width: 430px; height: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bolder; color: #3333FF}

p#kursi { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bolder; color: #3333FF}

div#publ { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; padding-left: 2em; font-weight: normal; color: #000000}

span.some-text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; font-weight: normal; color: #000000}

td { text-align:center; font-weight: normal; color: #000000}

В данном примере свойства font-family, font-size, font-style, font-weight, color, позволяют управлять следующими параметрами отображения текста, - установить используемое для отображения текста семейство шрифтов, размер букв, стиль шрифта (нормальный, полужирный наклонный), вес или «жирность» шрифта, цвет. Свойства clip, margin-left, width, position, height, padding-left относятся к блокам, содержащим текст.

Вопросы для самоконтроля

• Для каких целей в документе используются контейнер style и тэг link?

• Могут ли повторяться в документе контейнер style и тэг link?

• Укажите , какие 2 типа утверждений содержатся в CSS-файле или style-контейнере?

• Как выглядят at-правила?

• Как разделяются элементы внутри блоков для утверждений, которые содержатся в CSS-файле или style-контейнере?

• Как обрабатываются браузером элементы с ошибками?

• Для чего применяются селекторы в css-утверждениях?

• Что указывает «универсальный селектор»?

• Для чего применяются «E-селекторы типов»?

• Что указывают «А В селекторы наследования»?

• Что указывает утверждение «h1 * div{ color: blue }»?

• Что указывает утверждение «h1#found + h2 { margin-top: 3mm }»?

• Какие символы используются для ссылок через значение атрибута id или class в качестве селекторов?

• Управление визуализацией

• Что из себя представляет наследование в управлении визуализацией?

• С чем связано понятие схемы позиционирования в управлении визуализацией?

• Перечислите значения свойства position, применяемого в css-утверждениях?