Применение таблиц стилей CSS

 

Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<strong>), а в CSS — конструкция font-weight: bold; (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида

text-decoration: underline; И Т. Д.

В рамках данной книги, посвященной применению языка разметки HTML, сложно рассказать обо всех свойствах переопределения стиля с помощью CSS. Поэтому мы остановимся лишь на некоторых аспектах использования каскадных таблиц стилей, а именно: на форматировании текста, структурном форматировании и организации пользовательских форм.

CSS в форматировании текста

 

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

Единицы измерения в таблицах стилей

 

Все единицы измерения свойств элементов в CSS можно разделить на абсолютные и относительные (табл. 9.1).

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

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

 Единицы измерения CSS

 

 

Абсолютные

Относительные

 

in (дюйм ~ 2,5 см)

mm (миллиметр)

cm (сантиметр)

pt (пункт ~ 1/7 дюйма)

рс (пика =12 пунктов)

em (высота шрифта элемента)

ех (высота буквы х)

рх (пиксел)

% (процентное соотношение)

 

В табл. 9.2 приведены наиболее распространенные свойства форматирования текста в CSS.

Свойства форматирования текста в CSS

 

Свойство

font-family

font-size

font-style

font-weight

font-variant

text-decoration text-align text-transform letter-spacing

line-height Color Background-color

Формат записи

font-family: Tahoma, Arial;

font-size: llpx; font-style: italic; font-weight: bold;

font-variant: small-caps;

text-decoration: underline;

text-align: right;

text-transform: uppercase;

letter-spacing: lem;

line-height: 5mm; color: tFFFFFF;

background-color: white;

Функция

Выбор гарнитуры для отображения (допускается перечисление нескольких названий через запятую)

Размер шрифта

Выбор наклона текста (курсив)

Наличие/отсутствие жирного начертания

Преобразование строчных букв в прописные с изменением пропорций

Подчеркивание текста

Определение типа выравнивания текста

Выбор регистра букв Межбуквенный интервал

Межстрочный интервал Цвет текста Цвет фона текста

 

 

<FONT CLASS="text">

CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (<FONT STYLE="text-decoration: underline;">подчеркивание</ГОМТ>, <FONT ID="kursiv">KypCMB</FONT>, '<FONT STYLE="font-weight: bold;">жирное начертание</ГОЫТ>, <FONT STYLE= "font-family: Times New Roman;">выбор гарнитуры</ГОЫТ> и <SPAN CLASS="font">pa3Mep шрифта</ЗРШ>), с помощью средств CSS возможно <FONT С1АЗЗ="со1ог">изменять такие параметры</ГОЫТ>, как <FONT STYLE= "letter-spacing: Зрх;">межбуквенный</РОМТ> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;">тирегистра</ЕОМТ> (строчные и прописные буквы) и многое другое.

</FONT> </BODY> </HTML>

Структурное форматирование

 

Также каскадные таблицы стилей CSS привнесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: р, div и пр.

В табл. 9.3 приведены наиболее распространенные свойства структурного форматирования в CSS.

 

Таблица 9.3. Свойства структурного форматирования в CSS

 

list-style-image list-style-image: url(«bullet.gif");

Свойство

margin

border-width border-style border-color list-style-type

Формат записи

border-width: 20px;

border-style: solid;

border-color: gray;

list-style-type: square;

margin:  Ipx 2px 3px 4px;

Функция

Ширина границы структурного элемента

Ти декоративного отображения границы элемента

Цвет границы структурного элемента

Тинумерованного или маркированного списка

Указание пути к графическому маркеру

Определение размера поля относительно верхнего, правого, ниж-

JavaScript

 

JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. После его изучения вы сможете заниматься разработкой Web-приложений на качественно новом уровне. Для написания сценариев JavaScript обязательно требуется знание языка HTML. В этой главе вы получите первое представление о JavaScript еще до того, как начнете создавать свой первый сценарий.

Здесь приводится следующая информация:

Q важность изучения JavaScript; а история JavaScript;

а некоторые различия между языками подготовки сценариев и языками программирования; а инструменты, необходимые для написания сценариев JavaScript.