Управление стилем

В HTML 4 появилась возможность придавать элементам формата таким как параграф, тело, заголовок, ячейка стилевые назначения, которые мы определим ниже в таблице (некоторые из них мы уже встречали - цвет, размер, отступ). Стилевые назначения не всеми браузерами воспринимаются одинаково. В таблице приведены стилевые назначения для браузера Internet Explorer.

Стилевые назначения - это набор атрибутов и их значений, записанный по определенным правилам.

Для использования стилевых назначений в html-документе в заголовочной части размещается строка

<META http-equiv="Content-Style-Type" content="text/css">

Таким образом браузер получит информацию о применении стилей.

Стилевые назначения фрагментов HTML-документов

Стилевое назначение
Смысл и возможные значения
font-family
Название шрифта: Times New Roman, Arial,...
font-size
Размер шрифта: в пикселах или: xx-large, x-large, large, medium, small, x-small, xx-small
font-weight
Толщина шрифта: normal, bold
font-style
Наклон букв: normal, italic=oblique
color
Цвет шрифта
text-decoration
Подчеркивание букв: none,underline, overline, line-through
text-align
Расположение текста: left,center, right
text-indent
Отступ
text-transform
Преобразование текста: capitalize (каждое слово - с большой буквы), uppercase (к верхнему регистру), lowercase (к нижнему регистру)
background-color
Цвет фона
background-image
URL ('адрес файла с изображением').
margin-left,
margin-top,
margin-right,
margin-bottom
Отступ элемента слева, сверху, справа и снизу (в пикселах).
Замечание : некоторые тэги , например, <body> , допускают использование атрибутов leftmargin,
topmargin,
rightmargin,
bottommargin .
padding-left,
padding-top,
padding-right,
padding-bottom
Расстояние от границы элемента (например, таблицы) до содержимого слева, сверху, справа и снизу (в пикселах).
border-width
Толщина рамки:
thin, medium, thick
border-left-width,
border-right-width,
border-top-width,
border-bottom-width
Толщина рамки слева, справа, сверху, снизу:
thin, medium, thick
border-color
Цвет рамки
border-style

Вид рамки:

  • none
  • solid
  • double
  • groove (бороздка)
  • ridge (гребень)
  • inset (тень - сверху)
  • outset (тень - снизу)
float
Расположение элемента (аналог атрибута align )
list-style-type
Вид значка для пунктов списка:
  • none
  • disk (кружок)
  • circle (окружность)
  • decimal ( 1., 2.,... )
  • lower-roman ( i., ii., iii., iv.,... )
  • upper-roman ( I., II., III., IV.,... )
  • lower-alpha ( a., b., c., d.,... )
  • upper-alpha ( A., B., C., D.,... )

Использование специализированных редакторов Web-страниц (например, Macromedia Dreamweaver MX 2004) позволяет производить выбор стиля и его значения из списка.

Стилевые назначения можно задавать с помощью

Aтрибут Style

Многие тэги ( <body>, <p>, <h1>,...,<h6>, <td> ) имеют атрибут style , в котором можно задавать различные назначения. Общий формат задания значения атрибута style

<Тэг STYLE="стилевое_назначение1: значение1;стилевое_назначение2: значение2;...стилевое_назначениеN: значениеN;>

...

</Тэг>

Следующий пример задания стиля параграфа использует тот стиль, который описывает

<p style="font-size : medium;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : RED;
text-decoration :underline;
text-align : left;
text-indent : 10%;
text-transform : capitalize;
line-height: 30pt;
background-color : #99CCCC ">
ТЕКСТ ПАРАГРАФА ...
</p>

С помощью стилевых назначений можно управлять видом курсора, который тоже может зависить от браузера. Стилевые назначения курсора подчиняются общему формату. Например, вид курсора help в таблице "Стиль курсора" задан так

<td align=middle style="cursor:help;">&nbsp;</td>

Стиль курсора

№
пп
Стилевое назначение
Вид курсора в ячейке
№
пп
Стилевое назначение
Вид курсора в ячейке
№
пп
Стилевое назначение
Вид курсора в ячейке

1

 auto

6

 help  

11

 s-resize  

2

 crosshair  

7

 e-resize  

12

 se-resize  

3

 default  

8

 ne-resize  

13

 sw-resize  

4

 hand  

9

 nw-resize  

14

 move  

5

 text  

10

 n-resize  

15

 wait  


Tэг Style

С помощью контейнера <style>...</style> можно изменять или дополнять стилевые назначения тэгов физического и логического форматирования (абзацев, заголоков, таблиц или отдельных ячеек таблиц, списков и т.д.). В контейнере заголовка документа размещают контейнер такого вида

<style type="text/css">
идентификатор тэга {стилевые назначения}
................................................................................
идентификатор_тэга:идентификатор_варианта {стилевые назначения}

........................................................................... ...
</style>

Ниже в плавающем окне приведен пример использования тэга <style>

Стилевые классы

Тэг задает стиль абзаца. Абзацы в одном тексте могут быть разные: обычный абзац, определение, решение, доказательство, цитата и др. Аналогично, списки в одном тексте могутмогут быть разного вида (например, нумерованные и маркированные). Одного тэга для задания разных стилей может быть недостаточно. С целью большего разнообразия стилевых назначений для одного и того же тэга введены стилевые классы. Один и тот же тэг используется по разному в зависимости от назначенного класса. Стилевые классы можно разделить на два типа

Перед использованием стилевые классы должны быть объявлены.

Объявление стилевого класса происходит внутри контейнера <style>...</style> по схеме:

Тэг.имя_класса {стилевое_назначение1: значение1; стилевое_назначение2: значение2;..., стилевое_назначениеN: значениеN}

.имя_класса {стилевое_назначение1: значение1; стилевое_назначение2: значение2;..., стилевое_назначениеN: значениеN}

Привязанные стилевые классы могут использоваться только в сочетании с тем тэгом, для которого они определены. Свободные стилевые классы могут использоваться в сочетании с любыми тэгами.

Использование стилевого класса происходит по схеме:

<тэг class='имя_класса' >...</тэг>

 

Каскадные таблицы стилей

Каскадные таблицы стилей ( Cascading Style Sheets, СSS ) - это совокупности стилевых спецификаций, которые размещаются в отдельных файлах с расширением СSS и могут быть использованы на любой странице сайта.

Свойства каскадных таблиц стилей и правила их использования

  1. Каскадные таблицы стилей позволяют придать единый стиль всем страницам сайта.
  2. Стилевые спецификации помещаются в файл, не содержащий никаких тэгов, и имеющий расширение css.
  3. Стилевые назначения записываются в файл по обычным правилам как
  4. Стилевые назначения наследуются (каскадные таблицы!) во вложенных контейнерах: стилевые назначения, используемые в наружном контейнере, сохраняются во внутреннем, если не были изменены в стилевых классах, используемых во внутреннем контейнере.
  5. Для использования каскадной таблицы стилей в html-документе необходимо установить связь документа с физическим файлом, содержащем таблицу. С этой целью в секции <head>...</head> размещается следующий тэг
    <link rel='stylesheet' type='text/css' href='URL_адрес_файла.css '>
  6. При необходимости можно легко изменить стиль всего сайта , внеся изменения в один лишь файл, содержащий набор стилевых назначений.
  7. Если стилевое назначение в таблице содержит ошибку (например, неверный URL-адрес при формировании рисунка фона), то стилевое назначение будет проигнорировано.

Примеры стилевых классов и их использования приведены в следующем плавающем фрейме.

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

Оглавление