ПОЗНАВАТЕЛЬНОЕ

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

Как определить диапазон голоса - ваш вокал

Игровые автоматы с быстрым выводом

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

Целительная привычка

Как самому избавиться от обидчивости

Противоречивые взгляды на качества, присущие мужчинам

Тренинг уверенности в себе

Вкуснейший "Салат из свеклы с чесноком"

Натюрморт и его изобразительные возможности

Применение, как принимать мумие? Мумие для волос, лица, при переломах, при кровотечении и т.д.

Как научиться брать на себя ответственность

Зачем нужны границы в отношениях с детьми?

Световозвращающие элементы на детской одежде

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

Как слышать голос Бога

Классификация ожирения по ИМТ (ВОЗ)

Глава 3. Завет мужчины с женщиной

Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.

Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.

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

Внутренние и внешние листы стилей

Тема «Листы стилей»

Цель работы: Создание и изменение листов стилей в Web-докyмeнтах с использованием атрибутов, приемы работы с листами стилей

1.2 Теоретическое введение

Листы стилей

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

Напомним, что при работе в текстовом процессоре (например, Word) вы можете произ­вольным образом форматировать текст. Такая свобода появляется благодаря тому, что свое пред­ставление о том, как должен выглядеть документ, вы можете сформулировать на языке стилей. Заранее опре­деленные стили могут применяться к любому форматируемому объекту (символу, слову, абзацу, рисунку и проч.). В то же время имеется возможность уточнения формата для конкретного объекта, которому был присвоен стиль.

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

Понятие о листах стилей. Стандарты листов стилей для Web были разработаны в 1995-96 гг. и названы Cascading Style Sheets {каскадные листы стилей), или сокращенно, CSS. При­сутствие слова «каскадные» в этом термине означает, что листы стилей позволяют соз­давать иерархию стилевых свойств, согласно которой локальный стиль отменяет гло­бальный стиль. Вообще, HTML-документ представляется как структура вложенных эле­ментов различного уровня, в которой стиль элемента более низкого уровня имеет при­оритет перед стилем внешнего элемента высокого уровня.

Определение встроенного стиля (атрибут style)

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

<Р style="font-size:6pt">

При отображении элемента Р браузер согласно этой записи заменит размер основного шрифта, принятого по умолчанию, на шрифт 6 пунктов. Приведенный способ формати­рования называется встроенным стилем. Встроенный стиль можно применять к строковым элементам (например, SPAN). Сле­дующий код присваивает красный цвет одному слову в заголовке:

<H1><SPAN style="color:red"> 3aщитa</SPAN>компьютерных сетей</Н1>

CSS-правила

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

{font-style:italic}

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

{color:blue; font-family:Arial; text-align:right}

Согласно спецификации CSS назначение стиля тому или иному элементу HTML состоит в установлении связи:

Элемент {Определение_стиля}

Например, если вы хотите, чтобы все элементы абзацев Р отображались шрифтом Arial размером 14pt, запишите следующую строку:

Р {font-family:Arial;font-size:14pt}

Этоселектор типа, которыйустанавливает соответствие между определением стиля и типом HTML-элементов, к которым этот стиль будет применен. Элемент, к которому относится определяемый стиль, обобщенно называетсяселек­тором. Cелекторы обозначаются по имени элементов, к которым применяется определение сти­ля. Например, селектор Р указывает на то, что определение стиля относится к элементам Р «селек­тор типа». Селекторы нечувствительны к регистру, однако мы будем придержи­ваться принятой в CSS записи элементов прописными буквами.

Селек­тор класса

HTML- элемент или группа элементов, оформленных одним стилем, образуют класс. Например, элементы заголовков второго уровня, одинаково форматируемые, состав­ляют класс. Селекторы, записанные прописными буквами, обозначают классы. Класс может обозначаться так же, как и тип HTML-элемента, например, абзацы до­кумента образуют класс р. Однако чаще классу присваивается формальное имя, ко­торое в дальнейшем будет связано с определенным набором стилевых свойств. До­пустим, вы можете заголовки первого уровня H1 синего цвета сгруппировать в класс с именем blue:

H1.blue{color:blue} Имя класса отделяется от имени элемента точкой.Есливы хотите задать отображение разных элементов (абзацев Р, блоков DIV и т.д.) на желтом фоне. Для этого в список стилей вводится CSS-правило с точкой перед именем класса, но без указания названия элементов, например,

.bgyellow{background-color:yellow}

Селектор .bgyellow обозначает класс, а выражение в фигурных скобках - определе­ние стиля, которое будет относиться к любому элементу класса bgyellow. Принадлеж­ность HTML-элемента этому классу должна быть указана в атрибуте class, например:

<DIV class="bgyellow">

<Р class="bgyellow">

<SPAN class="bgyellow">

Селекторы, начинающиеся со знака # («рамка») «селек­тор id», отвечают уникальным идентифика­торам элементов: пример - назначение стиля элементу, обозначенному в докумен­те идентификатором id="fl". Например, чтобы выделить красным цветом текст абзаца, обозначенного идентификато­ром id= "red", можно воспользоваться следующим CSS-правилом:

#red{color:FFOOOO}

Нужный элемент абзаца должен содержать одноименное значение атрибута id:

<Р id="red">Этот абзац будет отображен красным шрифтом</Р>

Запись, состоящая из селектора и определения стиля, называ­ется CSS-правилом. Листы стилей - это фактически наборы CSS-правил, которые задают свойства форматирования эле­ментов документа.

Внутренние и внешние листы стилей

Ранее мы рассмотрели простейший способ стилевого форматирования с помощью вве­дения встроенных стилей для элементов HTML. Однако встроенные стили имеют существенный недостаток -они не позволяют отделить средства форматирования документа от его содержания. Кроме того, объявления встроенного стиля приходится повторять для каждого формати­руемого элемента на протяжении всего документа. От этих недостатков свободен другой способ введения стилей - это размещение листа стилей в заголовочной части документа (в элементе HEAD). Согласно этому способу, называемому заголовочным стилем, можно единым образом управлять представлением всего документа. Для изменения отображения одинаково оформленных элементов (абза­цев, заголовков, рисунков и т.д.) достаточно один раз изменить соответствующие свой­ства в листе стилей. Встроенные и заголовочные стили относятся согласно специ­фикации CSS к внутренним листам стилей.Это название ука­зывает на то, что определение стилей выполняется в рамках одного документа. В то же время возможно задание стилей в отдельном файле с расширениями .сss или .jss. Такой способ оп­ределения называется внешним листом стилей.

Введение заголовочного стиля (элемент STYLE) Как отмечалось выше, CSS представляет собой язык описания информации о стиле фор­матирования элементов HTML-документа. Поэтому по отношению к HTML-документу листы стилей CSS являются инородными элементами. Для размещения информации о стиле применяется специальный контейнер <STYLE></STYLE>, который вставляется в заголовочную часть документа и имеет вид:

<STYLE type="text/сss">

<!-- Описание листа стилей -->

</STYLE>

В этом коде значение text /сss атрибута type сообщает браузеру, что в текущем файле применен текст на языке CSS. Все формальные описания стилей, представляющие собой CSS-правила, помещаются в элемент STYLE..

Стилевые свойства

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

Значения свойств. Различают числовые и символьные значения свойств. Числовые значения применяются для задания размеров, например, ширины и высоты блока, размера шрифта, толщины рамки, межстрочных интервалов и т.д. Значение выражается десятичным числом, за которым обычно следует размерность. Размер­ность записываются после числа без дополнительного пробела, например, 8pt, lcm, 2.5in, 130%. В случае отрицательного значения перед числом ставится знак минус (например -15рх). Числовые значения могут выражаться в абсолютных или относительных единицах (Табл. 4.1): абсолютные значения задают точный размер элемента и приводятся в стандартных единицах измерения длины, например, в дюймах, сантиметрах или миллиметрах; относительные значения определяют размер элемента относительно другого элемента. Например, ширина изображения может выражаться в процентах относительно ширины блока, в который вложен рисунок, или относительно размера окна браузера. Межсимвольный интервал часто задается в единицах em ширины символа основного шрифта (буквы «т»).

Табл. 4.1. Единицы измерения значений свойств

Свойства шрифтовВ CSS предусмотрено множество свойств для управления шрифтами (задание гарниту­ры, размера, начертания и т.д.). Рассмотрим кратко только свойства шрифтов.

• font-family ~ задает гарнитуру шрифта, которая будет использована для вывода текста. Значением этого свойства может быть название конкретного шрифта (напри­мер, Arial) либо название семейства шрифтов. В спецификации CSS предусмотрены следующие семейства: serif (например, Times New Roman, Bodoni) и т д.
• font-size- определяет размер шрифта. Значение размера может быть заданов абсолютных единицах (например, lOpt, 8mm, 2in), в процентах от основного шриф­та (например, 130%), а также с помощью размерных выражений. К таким выражени­ям относятся: хх-small (сверхмелкий), х-small (очень мелкий), small (мел­кий), medium (средний), large (крупный), х-large (очень крупный), хх-large (сверхкрупный), larger (крупнее), smaller (мельче);
• font-style - задает стиль вывода символов. Возможны следующие значения этого свойства: normal (обычный), italic (курсив) и oblique (наклонный);
• font-weight - назначает вес или степень «жирности» шрифта. Для этого исполь­зуются целые числа из диапазона от 100 до 900 с шагом 100 единиц. Однако чаще применяют ключевые слова: bold (жирный), bolder (более жирный) и lighter (более тонкий);
• font-variant - указывают вариант начертания текущего шрифта. Для этого свойства браузеры поддерживают только два значения: small-caps (отображение малыми прописными буквами) и normal(не влияет на отображение). Приведем примеры задания свойств шрифта:

Р {font-family: helvetica, arial} STRONG {font-size: 150%} DIV.mono{font-

family: monospace;font-zise: larger; font-variant: small-caps}

Наименования свойств не чувствительны к регистру символов. На­пример, записи font-style и Font-STYLE будут интерпретированы браузером одинаково как свойство шрифта. Однако обычно исполь­зуют строчные символы, как принято в спецификации CSS.

Свойства текстаПонятно, что задать шрифт - еще не значит определить внешний вид всего текста. Необ­ходимо также указать свойства, отвечающие за межстрочный интервал, расстояние между словами и буквами и т.д. Эти свойства, называемые свойствами текста, определяются для абзацев и даже для всего документа, то есть задаются на уровне блоков (Р, DIV, BODY). Но можно их задавать и для отдельных слов или нескольких букв, то есть на уров­не строковых элементов (SPAN, STRONG и др. Перечислим свойства текста, предусмотренные спецификацией CSS:

· letter-spacing - устанавливает расстояние между буквами (межсимвольный ин­
тервал). По умолчанию этому свойству присваивается значение normal. Разработчик
может указать расстояние в любых абсолютных единицах (см.. Табл. 4..1);

· word-spacing - устанавливает расстояние между словами. Аналогично letter-spacing значением этого свойства по умолчанию считается normal. Иные значе­ния могут быть заданы в абсолютных единицах (например, 10рх, 2mm);

· text-indent - задает отступ первой строки абзаца («красную строку»). Это свой­ство применяется к блокам, и его значение выражается в абсолютных единицах (на­пример, 4mm, lcm, 20pt и т.д.) либо в процентах от ширины блока (например, 5% или 10%). По умолчанию значение свойства text-indent равно нулю. Если этому свойству присвоить отрицательное значение, то вместо абзацного отступа получим выступ первой строки;

· text-align - задает горизонтальное выравнивание для текста, размещенного внутри элемента (например, Р или DIV). Это свойство принимает значения: center (по центру), left (влево), right (вправо) и justify (по ширине). По умолчанию текст выравнивается по левому краю. Эффект выравнивания особенно заметен при большом размере шрифта и малой ширине окна браузера;

· vertical-align - устанавливает расположение текста и рисунков по вертикалиотносительно базовой линии. Свойство может принимать, например, следующие зна­чения: baseline (выравнивание по базовой линии, принимается по умолчанию),
sub (выравнивание по линии нижнего индекса), super (выравнивание по линии
верхнего индекса);

· line-height - определяет межстрочный интервал. Значение этого свойства мож­но

задавать в абсолютных единицах (например, 16pt, 3mm), в процентах (130%), а
также количеством строк (например, 1.7 или 3).

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

• color - устанавливает цвет шрифта. Простым примером задания красного цвета шрифта для абзаца является тег <Р style="color:red">

• background-color - задает цвет фона, на котором выводится элемент. По умолчанию это свойство имеет значение nоnе. Часто свойство background-color используется совместно со свойством color, определяющим цвет текста. Следующие два тега задают цвет olive для фона всего документа и цвет yellow для первого абзацного блока: <BODY styles"background-color:olive">
• <P style="color:yellow">

• background-image - определяет вставку фонового изображения. Значением этого свойства является URL рисунка, например, следующее CSS-правило:

.роg {background-image: url(myfig.jpg)}; задает для элементов класс а роg фоновый рисунок, хранящийся в файле myfig. jpg. Если изображение прозрачное, то через него будут видны нижние объ­екты страницы. Чтобы этого не происходило, совместно с рассматриваемым свойст­вом задается цвет фона (например, white);

• background-repeat - назначает повтор фонового рисунка. Это свойство приме­няется, если размер рисунка меньше видимой области элемента. Если вы хотите, что­бы рисунок повторялся по горизонтали и по вертикали, задавать свойство background-repeat не требуется (оно по умолчанию имеет значение repeat). Для повторения рисунка только по горизонтали выбирается значение repeat-х, только по вертикали - repeat-у, а для отключения повторения - значение nо-repeat.

Свойства блокаТекстовые HTML-элементы можно представить в виде прямоугольных блоков. К таким элементам относятся Р, DIV и даже тело документа BODY. Для них в CSS предусмотрена специальная группа свойств, которая позволяет задавать поля, границы, отступы, разме­ры блока. Рассмотрим по отдельности каждое из свойств блока:

· margin - это ключевое слово обозначает набор свойств, определяющих каждое из четырех полей вокруг блока. В набор входят свойства margin-top (верхнее поле), margin-right (правое поле), margin-bottom (нижнее поле), margin-left (левое поле). К свойствам поля относится также и margin, позволяющее одной строкой задать значения всех четырех полей. Значения полей выражаются в абсолютных числах (например, 50pt, 10em) или в процентах от ширины блока (например, 70%). Возможно значение auto, при котором браузер сам подбирает оптимальное поле, пример (margin-top:10pt);

· border- обозначает набор свойств отображения границы элемента. Различают свойства border-style (управление выводом границы), border-width (шири­на границы) можно задавать как в абсолютных единицах (например, Зрх), так и с помощью ключевых слов: thin (тонкая), medium (средняя) и thick (толстая), border-color (цвет границы) определяется символьным названием цве­та, шестнадцатеричным кодом #RRGGBB, в десятичном формате (например, г gb (56,28,18)) или процентном формате (например, rgb (25%,30%,70%));. Свойства границ могут применяться не только к блочным элементам, но и к строчным элементам (например, SPAN). При этом строчный элемент автоматически превращается в блок, отделенный от осталь­ного текста пустыми строками. Значениями свойства border-style являются dotted (граница из точек), dashed (пунктирная граница), solid (обычная сплошная граница) и т.д. примеры (border-style: dotted; border-width:3px);

· padding - определяет просвет между содержимым блока и границей. Для каждой границы имеется свое свойство: padding-top, padding-right, padding-bottom и padding-left. Значение свойства задается в абсолютных единицах (на­пример, lcm, 5mm, 10pt);

· width и height - задают соответственно ширину и высоту блока без учета отсту­пов, границ и полей. Эти свойства указываются в абсолютных единицах (mm, cm, pt и т.д.), а ширину можно задавать также в процентах. Когда речь идет о текстовом блоке, высоту можно вообще не определять, при этом свойству height присваива­ется значение по умолчанию - auto. Если при абсолютной единице отсутствует раз­мерность (например, weight: 100), то считается, что размер указан в пикселах. От­метим, что свойства width и height наиболее естественно использовать для форматирования изображений;

· float - определяет размещение текущего элемента по горизонтали по отношению к внешнему элементу. Например, если это свойство задано для рисунка IMG, за кото­рым следует текстовый блок, то float будет задавать обтекание рисунка текстом. Свойство float принимает значения left (размещение элемента слева), right (размещение элемента справа) и попе (отсутствие обтекания при размещении эле­мента вдоль левой границы документа);

· clear - отменяет действие свойства float. Если, например, было задано разме­щение рисунка вдоль левой границы с обтеканием текстом, то значение clear: left отключит это обтекание. Аналогично применяется значение clear: right для элемента, размещенного вдоль правой границы. Отключить обте­кание по обеим сторонам можно значением both.

Внешние листы стилей

Внешние листы стилей записываются в отдельных файлах и применяются для оформле­ния набора HTML-документов. Использование внешних листов стилей позволяет еди­ным образом оформлять множество Web-страниц и даже сайтов. Удобство внешних сти­лей заключается также в том, что автор Web-страниц может изменять стили, не затраги­вая содержания документов.

CSS-файлы В рассматриваемой технологии собственно описание стилей хранится в отдельном фай­ле, который имеет расширение .css (для стилей CSS) или jss (для стилей JSSS -JavaScript Style Sheet, разработанных компанией Netscape). Такой файл является обыч­ным ASCII-файлом (как и HTML-файл). Для обращения к файлу внешних стилей ему присваивается имя, например, firmstyle.css.

Содержательная часть CSS-файла состоит только из листа стилей. Для пояснений в эти файлы могут включаться комментарии. Количество правил, описываемых в файле сти­лей, может быть любым.Пример CSS-файла:

P.red {font-weight:bold; color:red}

SPAN {font-style:italic; font-size:14pt}

.yellowbg {background-color:yellow; font-family:arial}

Как видим, CSS-файл не содержит каких-либо заголовков или конечных элементов.

Обращение к внешнему листу стилей (элемент LINK)

Основным инструментом подключения к HTML-документу внешних листов стилей является одиночный тег <LINK>. Этот тег располагается в заголовочной части HEAD. В состав тега <LINK> входит ряд атрибутов, из которых три являются обяза­тельными - это:

o type=" text /ess" - указывает браузеру, что применяется текст формата CSS.

· href - задает URL файла внешнего листа стилей. Если CSS-файл располагается в том же каталоге, что и текущий документ, то указывается только имя файла, например, firmstyle.css.

· • rel="stylesheet" - определяет отношение между текущим документом и объ­ектом ссылки href. Значение stylesheet указывает на то, что элемент LINK ус­танавливает связь с внешним листом стилей.

Один элемент link устанавливает связь только с одним CSS-файлом. Для обращения, например, к трем файлам, содержащим листы стилей, в HTML-документ необходимо ввести три элемента link.