Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Каскадные таблицы стилей (Cascad Style Sheets)

↑

⇐ ПредыдущаяСтр 6 из 10Следующая ⇒

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

Идея положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращется в язык разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например, заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов типизирован.

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

Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript:

При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 1.28

<html>
<head>
<style type="text/css">
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
</style>
</head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

Пример 1.29

<html>
<head>
<style type="text/javascript">
tags.p.color="blue";
tags.p.fontFamily="times";
tags.p.fontSize="10pt";
tags.h1.color="black";
tags.h1.fontSize="12pt";
tags.h1.fontStyle="Arial";
tags.h1.textAlign-"center";
</style>
</head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>

Сoзданный таким образом документ будет отображаться следующим образом:

Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.

Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE (<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:

/* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE CSS.HTM*/
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
/* the end of style sheets definition */

Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг:

Пример 1.30

<html>
<head>
<link REL=STYLESHEET TYPE="text/css" HREF=HTTP://LOCALHOST/CSS.HTM>
</head>
<body>
The body of the document should be here.
</body>
</html>

Из данного примера видно, что писание стилей в фале CSS.HTM полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских эффектов, таких например, как выделение заглавной буквы абзаца:

Пример 1.31

<HTML>

<HEAD>
<style TYPE="text/css">
FS.all { color:red; font-size: 24pt; font-family: times;}
H1 {color:navy; text-transform: uppercase;font-size: 18pt;
font-weight: bold; font-family: times;}
H2 {color:navy; font-size: 14pt;
font-weight: bold; font-style: italic;
font-family: times;}
H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
P {color:navy; font-size: 12pt; font-family: times; text-align: justify}
P.HELP {color:darkgreen; font-size: 10pt; font-family: times; text-align: justify;}
P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;}
</style>
</HEAD>
<BODY bgcolor=lightyellow>
<center>
<h3>Центр информационных технологий</h3>
<h1>Информационные Ресурсы Internet</h1>
<h3>(Учебное пособие для компьютерных непрофессионалов)</h3>
<h3>Храмцов П.Б.</h2>
<h3>Москва, 1997</h2>
<hr>
</center>
<p><span class=FS>C</span>
обществу глобальных компьютерных сетей Internet в 1995 году исполнилось 25 лет.
На настоящий момент - это самый большое информационный ресурс мира.
Одновременно Internet - это самая популярная и массовая компьютерная сеть планеты.
По оценкам международного центра координации сетевой деятельности в рамках
Internet(Internic-Internet Information Center) на 1997 год в сети читывалось
несколько десятков миллионов постоянно зарегистрированных компьютеров-серверов,
которые откликаются на запросы пользователей 365 дней в году и 24 часа в сутки.
Этот огромный информационный ресурс полностью децентрализован и не подчиняется ни
одному правительству или крупной финансовой компании мира.
</BODY>
</HTML>

В данном примере, контейнер SPAN применен сразу после тага начала параграфа <p>, что позволяет выделить первую букву в отображаемом абзаце:

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.

Новые свойства контейнеров HTML

Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера:

<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text

<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text

Можно также определить класс стилей и использовать его при помощи атрибута CLASS:

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

Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса:

<h3 class="class1" id="C1">This is a blue text

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

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

Познавательные статьи:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2016-08-01; просмотров: 216; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.156 (0.006 с.)