1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
"http://www.w3.org/1999/xhtml"
>
Стили</
title
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style/mysite. ess"
/
><br>
<link
rel
=
"stylesheet"
type
=
"text/css"
<br>href
=
<span>"http://www.htmlbook.ru/main.ess"
</span> /
><br>
</
head
><br>
<body
><br>
<h1
>Заголовок</
h1
><br>
<р>Текст</
р><br>
</
body
><br>
</
html
></p>
</td>
</tr></tbody></table><p>А файл стилей будет выглядеть вот так:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></p>
</td><td><p>H1 {
<br>color
:
#000080
;
<br>font-size
:
2em
;
<br>font-family
:
Arial,
Verdana,
sans-serif
;
<br>text-align
:
center
;
<span>/* Выравнивание по центру */
</span><br>}
<br>
P {
<br>padding
-left
:
20px
;
<br>}
</p>
</td>
</tr></tbody></table><p>Как видно из кода выше, на html-страницу добавляется запись, сообщающая браузеру откуда нужно получать стили. Сам стилевой файл содержит только описание стилей. Такое разделение html и css кода облегчает разработку и сопровождение сайтов. Такому стилю верстки рекомендуется придерживаться.</p>
<h3>Глобальные стили</h3>
<p>При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на странице с помощью контейнера <b><style>
</b>.Описанные в заголовке страницы стили можно использовать во всем документе (поэтому они и получили название «глобальные»). Хочется отметить, что такой подход к верстке страниц приводит к большим трудностям в сопровождении и применяется очень редко. Для примера неудачного использования такого подхода можно привести сервис ведения блогов Blogger.com . Созданные на нем блоги для оформления страниц используют как раз глобальные стили.</p>
<p>Вот пример использования глобальных стилей:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br></p>
</td><td><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
</span><br><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><br><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Глобальные стили<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
H1 {<br>
font-size: 1.2 em;<br>
font-family: Verdana, Arial, Helvetica, sans-serif;<br>
color: #333366;<br><<span>/
style
>
</span><br><<span>/
head
>
</span><br><<span>body
>
</span><br><hl>
Hello, world!<<span>/
hl>
</span><br><<span>/
body
>
</span><br><<span>/
html
>
</p>
</td>
</tr></tbody></table><h3>Внутренние стили</h3>
<p>Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут <b>style
</b>, а его значением выступает набор стилевых правил. Например:</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers">
</td><td><p><p style=
<span>"font-size: 120%; font-family: monospace;<br>
color: сd66сс"
</span>>
Пример текста</р>
</p>
</td>
</tr></tbody></table><p>Внутренние стили рекомендуется применять на сайте <b>ограниченно
</b> или <b>вообще отказаться
</b> от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.</p>
<h3>Импорт CSS</h3>
<p>В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды <b>@import
</b>.</p>
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><span>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span><br><<span>html
xmlns=
<span>"http://www.w3.org/1999/xhtml"
</span>>
</span><p><<span>head
>
</span><br><<span>meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/
>
</span><br><<span>title
>
</span>Импорт<<span>/
title
>
</span><br><<span>style
type
=
"text/css"
>
</span><br>
@import url("style/mysite.ess");<br>
H2 {<br>
font-size: 1.2 em;<br>
font-family: Arial, Helvetica, sans-serif;<br>
color: green;<br><<span>/
style
>
{
</span><br>font-family
:
Arial,
Verdana,
Helvetica,
sans-serif
;
<br>font-size
:
90%
;
<br>background
:
white
;
<br>color
:
black
;
<br>}
</p>
</td>
</tr></tbody></table><h3>Не забывайте об иерархии!</h3>
<p>При комбинированном применении различных стилей нужно помнить об их иерархии. <b>Первым всегда применяется внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.
</b> Таким образом, определения одних стилей можете перекрывать другие, будьте внимательны.</p>
<h2>Что дальше?</h2>
<p>Выше уже упоминались структурные единицы <b>CSS
</b> — селекторы. Но о синтаксисе CSS нужно писать отдельную статью, поэтому я и решил вынести этот материал в отдельный пост.</p>
<p>Теперь что касается стандартов: сейчас официально принят и поддерживается стандарт CSS 2.1, а в разработке находится CSS 3, который внесет огромное количество новшеств. О некоторых из них можно почитать в статье Будущее CSS разметки</p>
<p>Вообще, изучение приемов верстки веб-страниц это сложная тема, в которой порой приходится изучать кучу сопутствующих технологий и смиряться с особенностями реализации различных браузеров. Готовьтесь к трудностям.</p>
<p>По материалам книги Влада Моржевича «Верстка веб-страниц». Очень советую эту книгу подойдет как справочник и учебник.</p>
<td width="620">
<br>Применение Таблицы Стилей к документу <br><br>Встраивание Таблиц Стилей в документ <br>Задание стиля для отдельного фрагмента документа <br>Импорт Таблицы Стилей <br><br>Указание нескольких свойств одновременно <br>Группирование селекторов <br>Комментирование Таблицы Стилей <br>Свойства стилей <br>Свойства background <br>Обрамление элементов <br>Свойства списков <br>Свойства текста <br>Группирование свойств для упрощения определения стиля <br>Наследование свойств <br>Применение контекстных селекторов <br>Почему Таблицы Стилей называются каскадными <br><br><p>Таблицы стилей предусмотрены рекомендациями W3C и являются стандартным
инструментом форматирования Web - страниц,
использующим подходы, характерные для
настольных издательских систем. Программа Microsoft
Internet Explorer 3.0 стала первым браузером,
поддерживающим таблицы стилей. Браузер Netscape
Navigator поддерживает таблицы стилей, начиная с
версии 4.0В2 (Beta 2), доступной с февраля 1997 года.</p>
<p>Подробные сведения о рекомендациях W3C можно
получить по адресу: h<span>ttp://www.w3.org/pub/WWW/TR/WD-cssl.html
</span> . <span>В стандарте W3C используется термин
"каскадные таблицы стилей уровня 1" ("cascading
style sheets level 1, CSSI").
</p>
<span>
<p>Для начала необходимо пояснить, что
имеется в виду под названием “таблиц стилей”.
Большинство современных текстовых редакторов
позволяют пользователю определять стиль,
который будет использоваться для форматирования
документа. В частности, можно выбрать стиль
абзаца с одинарным межстрочным интервалом,
шрифтом Courier и левым полем в один дюйм. Этот стиль
форматирования может быть в дальнейшем применен
к любому числу абзацев этого и других документов.
Таблицы стилей НТ</p>
</span>M<span>L действуют
точно таким же образом. Ниже приведен краткий
список основных функций:
</span>
<span>
<ul><p>Изменение расстояний между строками,
словами и отдельными символами.</p>
<p>Установка левого, правого, верхнего и
нижнего полей элемента (блока текста контейнера
HTML).</p>
<p>Установка отступа элемента.</p>
<p>Изменение размера, стиля и других
атрибутов шрифта элемента.</p>
<p>Установка рамки вокруг элемента.</p>
<p>Включение фонового изображения и
фонового цвета в элемент.</p>
</ul></span>
<p>Большим преимуществом таблиц стилей HTML
является возможность отделить операцию
форматирования от содержания документа. Сначала
определяется, как должен выглядеть текст в том
или ином месте страницы, а затем вводите сам
текст. Если вы позднее решите, например, заменить
цвет шрифта заголовков на синий, для этого будет
достаточно поменять только стиль этих
заголовков. Делать изменения в тексте нет
необходимости<i>.
</i></p>
<p>Существует четыре метода применения
таблицы стилей к документу:</p>
<ul><p>Связывание (Linking) - можно связать HTML -
документ с таблицей стилей, хранящейся в
отдельном файле.</p>
<p>Встраивание (Embedding) - можно встроить
таблицу стилей в HTML - документ с помощью
контейнера <STYLE>
.</p>
<p>Задание стиля для отдельного фрагмента
документа (Inline) - можно определять элементы стиля
"на лету", т. е. указывать их в тэгах HTML,
например, в тэге абзаца <span></li>
<li><p>Импорт (Import) - можно использовать
зарезервированное слов @import для импортирования
таблицы стилей в HTML - документ.</p>
</ul><p>Как было указано выше, существует
возможность создания таблиц стилей в виде
отдельного файла для применения его ко всем
страницам cайта. Этот метод упрощает создание
сайта.</p>
<p>Хранить таблицу стилей следует в
текстовом файле с расширением.css. Его можно
создать при помощи любого текстового редактора.
Для связывания таблицы стилей с документом HTML
необходимо использовать тэг <LINK>
<span> следующим образом:
</p>
<p><LINK
<span>REL=STYLESHEET HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
</p>
<p>В атрибуте HREF
<span>указывается URL - адрес таблицы
стилей.
</p>
<p>Таблицу стилей необязательно хранить в
виде отдельного файла. Ее можно встроить
непосредственно в документ, однако в этом случае
она будет действовать только внутри файла этого
документа. Для распространения действия таблицы
на другие документы ее необходимо скопировать в
каждый из них.</p>
<p>Для включения таблицы стилей в документ
необходимо воспользоваться контейнером <STYLE>
<span>. Он
размещается между тэгами
</span><HTML>
и <span><BODY>
:
</p>
<p><HTML><br>
<HEAD> </HEAD><br>
<STYLE TYPE="text/css"><br>
STYLE definitions go here<br>
</STYLE> <br>
<BODY> </BODY> <br>
<HTML>
</p>
<p>Тэг <STYLE>
<span> имеет единственный атрибут TYPE
, определяющий тип MIME (Multipurpose Internet
Mail Extension, стандарт электронной почты Internet). Для
того, чтобы браузеры, не поддерживающие таблицы
стилей, могли игнорировать тэг <STYLE>
,
его необходимо определить как "text/css"
.
</p>
<p>Можно определять стиль, что называется,
"на лету", оперативно внося требуемые
изменения. Например, если сначала определен
стиль документа с заголовком одного цвета, а
потом необходимо выделить цветом какой-то
элемент заголовка, можно это сделать внутри тэга
заголовка, не изменяя общий стиль документа.</p>
<p>Такой метод действует внутри тэга, где
определен или переопределен стиль при помощи
атрибута STYLE
он поддерживается
всеми подчиненными тэгами тэга <BODY>
<span>. Для оперативного определения стиля
необходимо добавить к нужному тэгу атрибут STYLE
и присвоить ему строковое
значение, указывающее новый стиль:
</p>
<p><H1
STYLE="color:
blu
е">
</p>
<p>Если оперативное указание стиля в
строке вступает в конфликт с другими методами
определения, оно всегда "берет верх".
Например, если при помощи связанного с
документом файла стиля цвет заголовка H1
<span> определен как
синий, а в самом тэге заголовка цвет изменен на
красный, браузер выведет этот заголовок шрифтом
красного цвета.
</p>
<p>Используя атрибут STYLE
c
тэгом <span><DIV>
,
можно определять стиль части документа,
расположенной в контейнере <DIV>
.
Это работает благодаря принципу
"наследования", о чем будет рассказано ниже.
Например, если необходимо установить цвет шрифта
для целого блока тэгов синим, можно расположить
эти тэги внутри контейнера
</span> <span><DIV>
и определить цвет шрифта
текста следующим образом:
</p>
<p><DIV STYLE="color: bluе">
<H1>This is a heading</H1><br>
<P>This is a paragraph. It will look blue in the user"s browser</P>
</DIV>
</p>
<p>Для изменения стиля нескольких слов или
даже символов можно использовать атрибут STYLE
совместно с тэгом <span>,
например:</p>
<p>This is a <SPAN STYLE="color:
blue">simple</SPAN> block of text
</p>
<p>Для того чтобы импортировать таблицу
стилей в HTML - документ, надо поместить в него
зарезервированное слово @import. Импортированный
файл должен размещаться в контейнере <STYLE>
.
Эта операция весьма похожа на встраивание
таблицы стилей, например:</p>
<p><STYLE TYPE="text/css"><br>
@import url(http://www.myserver.com/style.css) ;<br>
</STYLE>
</p>
<p>Как было указано ранее, таблицы стилей
хранятся в текстовых файлах, удобных для
редактирования. Их нетрудно создавать вручную,
однако существуют специальные редакторы таблиц
стилей, например, популярная программа Мicrosoft FrontPage.
</p>
<p>Таблицы стилей позволяют определять
стиль для одного или нескольких тэгов. Например,
можно создать таблицу стилей, определяющую стили
для тэгов <H1>
, <H2>
,
<P>И
<EM>
<span>. Каждое
определение называется <i>правилом
</i>
</span>(rul<span>е). Правило содержит <i>селектор
</i>
(тэг HTML), за которым следует <i>декларация
</i>
(определение стиля). Селектор является связующим
звеном между определением и тэгом. Ниже приведен
пример правила, указывающего стиль для каждого
из тэгов заголовка <H1>
:
</p>
<p>H1 (color: blue}
</p>
<p>Декларация заключается в фигурные
скобки. Каждая декларация имеет две части:
название свойства и присваиваемое ему значение,
разделенные двоеточием. В HTML включены десятки
свойств (font-size, font-style, color, margin-right и т. д.), о которых
будет рассказано ниже. Каждое свойство может
принимать несколько значений, одно из которых
приписывается ему по умолчанию.</p>
<p>В предыдущем примере было указано лишь
одно свойство color. Однако ничто не мешает
определить целый ряд свойств в одном тэге,
отделив их друг от друга точкой с запятой:</p>
<p>HI {color: blue; font-size: 12pt; text-line: center}
</p>
<p>В этом примере программа просмотра
выведет каждый заголовок первого уровня синим
шрифтом размером 12 пунктов и выровняет их по
центру окна. Для всех прочих свойств будут
использоваться значения по умолчанию (например,
свойству font-style будет присвоено значение normal).</p>
<p>Если необходимо определить один и тот же
стиль для нескольких тэгов, можно перечислить их
в отдельном списке:</p>
<p>Р (font-size: 12pt}<br>
UL {font-size: 12pt}<br>
LI {font-size: 12pt}
</p>
<p>HTML позволяет сделать то же самое и в
более компактном виде - в одной строке:</p>
<p>Р, UL, LI (font-size: 12pt}
</p>
<p>Запятая здесь является обязательным
элементом. Если она опущена, смысл правила
изменится (см. раздел " " ниже в этой главе).</p>
<p>По мере усложнения таблицы стилей,
скорее всего, понадобится включить в нее
дополнительные сведения о назначении того или
иного правила. Комментарии располагаются между
символами /* и */ и игнорируются программами
просмотра, например:</p>
<p>BODY {margin-left: lin} /* Отступ на 1
дюйм */<br>
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */ <br>
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */
</p>
<p>HTML позволяет определить широкий спектр
свойств таблиц стилей. Имена свойств состоят из
одного, а чаще - из двух или трех слов, разделенных
дефисом. В сложных названиях первое слово обычно
представляет категорию и одновременно является
сокращенным вариантом (shorthand) имени свойства (см.
раздел " ").</p>
<p>В таблице приведен обзор свойств таблиц
стилей HTML.. В колонке "Категория" показано,
может ли то или иное свойство объединяться в
группу с другими свойствами. В третьей колонке
приведены сведения о том, наследуется или нет
свойство подчиненными тэгами (о наследовании
свойств см. раздел " ").</p>
<table border="1" cellspacing="1" bordercolor="#000000" cellpadding="3" width="469" height="1000"><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span><p><b> Наследование
</b></p>
</span>
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"></td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138">
</td>
</tr><tr><td width="127">
</td>
<td width="150">
</td>
<td width="138"><span>
<p>Таблицы стилей HTML позволяют украшать
фон элемента страницы цветом или изображением.
Необходимо заметить, что здесь и далее речь
пойдет об использовании свойств не для всей
страницы, а для отдельного элемента. Например,
если определяется фон для тэга <UL>
,
то это фон будет только у тэгов <UL>
всей страницы:</p>
<p>U
<span>L
{background-image: URL(http://www.myserver.com/images/watermark.gif)}
</p>
<i>
</i>
<p>Рекомендации W3C дают возможность
определять рамки, поля и свободное пространство
для элементов страницы. Можно, например,
заключить заголовок в рамку или изменить поля в
тэге абзаца <Р>
так, чтобы
организовать отступ для всех абзацев текста. Для
этих целей можно использовать следующие группы
свойств:</p>
<ul><li><i>
</i><p>border - используются для
определения рамки, расположенной слева, справа,
сверху и снизу от элемента. Можно устанавливать
ширину, цвет и стиль рамки.</p></li>
<li><i>
</i><p>margin - используются для
определения полей, расположенных слева, справа,
сверху и снизу от элемента. Можно также
устанавливать ширину полей.</p></li>
<li><i>
</i><p>padding - применяются для того,
чтобы указать свободное пространство между
рамкой и содержимым элемента.</p></li>
</ul><i>
</i>
<span><i>
</i>
<p>Эти свойства применяются для указания
способов вывода списков. С их помощью можно
изменить позицию маркера (свойство list-style-position),
стиль или изображение маркера (свойства list-style-type
и list-style-image).</p>
<p>Свойства списков наследуются, т. е. если
определено свойство в тэге <UL>
,
оно будет действительно для всех тэгов <LI>
<span> контейнера UL
.
</p>
<i>
</i>
<p>Свойства дают вам полный контроль того,
как программа просмотра выводит текст. С их
помощью можно управлять цветом, размером,
шрифтом, межстрочным интервалом и т, д. Ниже будут
подробно описаны все свойства текста.</p>
<i>
</i>
<span><b><i>
</i>
</b>
<span><i>
</i>
<p>Многие из описанных выше свойств могут
группироваться друг с другом. Так, вместо правила</p>
<p>H1 (font-weight: bold; font-style: normal;
font-size: 12pt; font-family: serif)
</p>
<p>можно записать более краткую
формулировку:</p>
<p>H1 (font: bold normal 12pt serif}
</p>
<p>Таблицы стилей HTML позволяют
группировать свойства border, background, font, list, margin и
padding. Рассмотрим каждую из групп в отдельности.</p>
<p><i><u>Группа свойств border
</u>
</i></p>
<p>Группировать свойства border можно пятью
различными способами. Можно определить свойства
для отдельной стороны рамки, используя</p>
</span>b<span>order-top, border-right, border-bottom И border-left, либо
определить всю рамку сразу при помощи border.
<p>С каждым из этих свойств можно указать
ширину, стиль и цвет рамки, например:</p>
</span>
<p>b
order-top:
thin dotted black
</p>
<p><i><u>Группа свойств background
</u>
</i></p>
<p>В группе свойств background можно указать
значения для color, image, repeat, attachment и position, например:</p>
<p>background: white
URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left
</p>
<p><i><u>Группа свойств font
</u>
</i></p>
<p>Группе font можно дать значения weight, style, size
и family, например:</p>
<p>font: bold normal 12pt times, serif
</p>
<p><i><u>Группа свойств list
</u>
</i></p>
<p>Свойства группируются при помощи
свойства list-style. Возможно указание изображения
для маркера, типа и позиции маркера, например:</p>
<p>list-style: square
URL(http://www.myserver.com/images/marker.gif) inside
</p>
<p><i><u>Группа свойств margin
</u>
</i></p>
<p>Группе margin можно определить ширину для
каждого из полей top, right, bottom и left, например:</p>
<p>margin: .5in 1in .5in 1in
</p>
<p>Если будет указано только одно значение,
программа просмотра сделает ширину других полей
такой же. Если не указать одно или два значения,
поля с неуказанным значением будут такой же
ширины, как противоположные поля. Например, если
опустить последнее значение (left), ширина левых
полей будет равна ширине правых полей, т. е. 1
дюйму.</p>
<p><i><u>Группа свойств padding
</u>
</i></p>
<p>В Группе padding можно указать значения для
top, right, bottom и left, например:</p>
<p>padding: .25in .25in .25in .25in
</p>
<p>Если будет указано только одно значение,
программа просмотра назначит отсутствующим
значениям такую же величину. Если не указать одно
или два значения, свободные пространства с
неуказанными значениями будут такой же ширины,
как и им противоположные. Например, если опустить
последнее значение (left), свободное пространство
между левой стороной рамки и содержимым элемента
будет таким же, как и пространство с правой
стороны.</p>
<p>В HTML подчиненные тэги наследуют
некоторые свойства родительских тэгов. Например,
все тэги контейнера <BODY>
(<
P
>
и <span><UL>
) будут обладать некоторыми
свойствами тэга <BODY>
. Точно так
же тэг <LI>
наследует свойства
тэга <UL>
. Рассмотрим следующий
код:
</p>
<p><STYLE TYPE="text/css"> <br>
Р (color: blue) <br>
</STYLE> <br>
<BODY><br>
<P>Hello. This is a paragraph of text. <EM>This is
emphasized</EM><P>
</BODY>
</p>
<span>
<p>Таблица стилей этого документа
устанавливает цвет в тэге</p>
</span><
P
>
<span> синим, однако,
цвет для тэга
</span><EM>
<span> явно не определен (по умолчанию -
это черный цвет). Здесь не о чем беспокоиться, так
как этот тэг находится в родительском контейнере <P>И наследует таким образом
синий цвет.
<p>Иногда возникает необходимость
определения двух (и более) стилей для одного тэга.
Например, может понадобиться указание двух
стилей для тэга <LI>
: один для
случая, когда он подчинен тэгу</p>
</span><UL>
<span>, и второй, когда он подчинен тэгу <UL>
. Это возможно сделать с
помощью контекстных селекторов.
<p>Контекстный селектор определяет точную
последовательность тэгов, для которых будет
применен тот или иной стиль. Другими словами,
можно указать, что какой-то стиль должен
применяться, например, в тэге <LI>
только в том случае, если этот тэг является
подчиненным тэгу <OL>
:</p>
<p>OL LI (list-style-type: decimal}
</p>
<p>Для того же тэга <LI>
можно определить другой стиль, действительный
только в случае подчиненности тэгу <UL>
:</p>
<p>UL LI {list-style-type: square}
</p>
<p>Необходимо заметить, что список
селекторов не разделен запятыми. В противном
случае всем тэгам списка будет приписан один и
тот же стиль.</p>
<p>В рекомендациях W3C таблицы стилей
называются "каскадными таблицами стилей<i>"
</i>
потому, что для верстки Web - страницы можно
применять не одну, а сразу несколько таблиц. При
этом программа просмотра сама определяет
последовательность использования таблиц и
разрешает конфликты между ними по принципу
каскадирования. Например, таблица стилей для
страницы может быть определена не только ее
автором, но и читателем, и тогда правила
каскадирования решают, какая из таблиц стилей
будет иметь силу.</p>
<p>Kак это работает? Каждому правилу
браузер приписывает весовой коэффициент. При
интерпретации каждого тэга программа
просматривает все правила этого тэга и сортирует
их по величине весового коэффициента. Выигрывает
самое "весомое" правило.</p>
<p>Существуют следующие общие принципы
разрешения конфликтов между таблицами стилей:</p>
<ul>
<p>Старшинство типов таблиц стилей в
документе (по убыванию): текущее задание стиля
(inline), встраивание (embedding), связывание (linking).</p>
</ul><p>Также можно изменить весовой
коэффициент правила при помощи служебного слова
important. В следующем примере значение red свойства</p>
</span>col<span>or и значение sans-serif свойства font-family
помечены этим служебным словом, и поэтому
программа просмотра не должна их переопределять.
Однако если вступают в конфликт два таких
правила, противоречие решается согласно
принципам, изложенным выше.
<p>H1 (color: red ! important font-weight: bold
font-family: sans-serif ! important}
</p>
<p>Классом называется определение
нескольких стилей одного элемента, каждый из
которых может использоваться в нужном месте
страницы. Например, можно определить три
вариации стиля заголовка H1
.
Определение вариаций похоже на указание стиля,
только к названию тэга добавляется произвольное
имя класса, отделенное точкой:</p>
<p>H1 blue (color: blue} H1 .red (color: red} H1 .black
(color: black}
</p>
<p>Теперь, включая в документ тэг <H1>
, можно указать в нем
конкретный стиль при помощи атрибута CLASS
:</p>
<p><H1 CLASS=red>Red Heading</H1>
</p>
</span></td></tr></table></td>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
</div>
</article>
<style>
.VashAdaptTest {
width: 100%;
height: 300px;
}
@media(min-width: 500px) {
.VashAdaptTest {
width: 100%;
height: 300px;
}
}
@media(min-width: 800px) {
.VashAdaptTest {
width: 100%;
height: 300px;
}
}
</style>
<div id="share_button">
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div>
</div>
<div class='yarpp-related'>
<div class="title">Похожие статьи</div>
<ul class="related-items">
<li> <img src="/uploads/ed2b1a9e6ad84f6d497c8b0f38b86f90.jpg" width="120" height="120" alt="Первые действия при появлении ошибки «Устройство USB не опознано" / loading=lazy> <a href="/yusb-ne-opoznano-chto-delat-pervye-deistviya-pri-poyavlenii/">Первые действия при появлении ошибки «Устройство USB не опознано</a> </li>
<li> <img src="/uploads/ce49988f17ebc16b6b63b6bd47a23c7f.jpg" width="120" height="120" alt="Недостаточно патриотичный" / loading=lazy> <a href="/aleksandr-bon-vedushchii-biografiya-nedostatochno-patriotichnyi-radio-maximum/">Недостаточно патриотичный</a> </li>
<li> <img src="/uploads/653067dd6cbb221291259a8a48964503.jpg" width="120" height="120" alt="Компьютер не видит флешку через USB или неопознанное устройство" / loading=lazy> <a href="/komp-ne-raspoznaet-usb-ustroistvo-kompyuter-ne-vidit-fleshku-cherez-usb-ili/">Компьютер не видит флешку через USB или неопознанное устройство</a> </li>
<li> <img src="/uploads/ffb85025854ebd2c2769fc7f30b7c382.jpg" width="120" height="120" alt="Использование эквалайзера Windows Как настроит эквалайзер на windows 7" / loading=lazy> <a href="/skachat-na-kompyuter-horoshii-ekvalaizer-muzyki-na-russkom-yazyke/">Использование эквалайзера Windows Как настроит эквалайзер на windows 7</a> </li>
</ul>
</div>
</div>
</div>
<aside id="sidebar">
<div id="sidebar_wrap">
<div class="section" id="category_block">
<div class="section_title">РУБРИКИ САЙТА:</div>
<ul id="cats">
<li class="cat-item cat-item-17"><a href="/category/internet/">Интернет</a></li>
<li class="cat-item cat-item-17"><a href="/category/programs/">Программы</a></li>
<li class="cat-item cat-item-17"><a href="/category/instructions/">Инструкции</a></li>
<li class="cat-item cat-item-17"><a href="/category/browsers/">Браузеры</a></li>
<li class="cat-item cat-item-17"><a href="/category/windows-10/">Windows 10</a></li>
<li class="cat-item cat-item-17"><a href="/category/android/">Android</a></li>
<li class="cat-item cat-item-17"><a href="/category/ios/">Ios</a></li>
<li class="cat-item cat-item-17"><a href="/category/communication/">Связь</a></li>
</ul>
</div>
<div class="section section-comments">
<div class="section_title">Последние статьи:</div>
<div class="last-comments">
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-03-06 02:07:19</div>
<div class="last-comments__item-text">Microsoft.</div><a href="/razreshenie-ekrana-htc-sensation-xe-htc-sensation-xe---tehnicheskie-harakteristiki/" class="last-comments__item-link" title="HTC Sensation XE - Технические характеристики">HTC Sensation XE - Технические характеристики</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-29 02:09:14</div>
<div class="last-comments__item-text">Ios.</div><a href="/kak-eto-sdelano-kak-eto-rabotaet-kak-eto-ustroeno-kak-eto-sdelano-kak/" class="last-comments__item-link" title="Как это сделано, как это работает, как это устроено Видео: как работает Picaso Builder">Как это сделано, как это работает, как это устроено Видео: как работает Picaso Builder</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-29 02:09:14</div>
<div class="last-comments__item-text">Word.</div><a href="/ne-rabotaet-internet-dns-pochemu-dns-server-nedostupen-kak/" class="last-comments__item-link" title="Почему DNS-сервер недоступен: как решить проблему">Почему DNS-сервер недоступен: как решить проблему</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-25 02:16:19</div>
<div class="last-comments__item-text">Интернет.</div><a href="/posobie-po-rabote-s-kompyuterom-chtoby-nauchitsya-s-nulya/" class="last-comments__item-link" title="Чтобы научиться с нуля работатьна компьютере и ноутбуке, нужны:хороший самоучитель и ваше желание">Чтобы научиться с нуля работатьна компьютере и ноутбуке, нужны:хороший самоучитель и ваше желание</a> </div>
</div>
<div class="last-comments__item">
<div class="last-comments__item-box">
<div class="last-comments-item__date">2024-02-10 02:54:49</div>
<div class="last-comments__item-text">Microsoft.</div><a href="/pgp-na-strazhe-elektronnoi-korrespondencii/" class="last-comments__item-link" title="PGP на страже электронной корреспонденции">PGP на страже электронной корреспонденции</a> </div>
</div>
</div>
</div>
<div class="section widget_text" id="text-4">
<div class="textwidget">
</div>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div id="footer_logo">
<div id="footer_logomob"><img src="/img/logo.png" alt="Все о современной технике. Поломки. Техника. Интернет. Ошибки. Windows" loading=lazy></div>
</div>
<div id="footer_copyright">
<p>© lab-music.ru, Все о современной технике. Поломки. Техника. Интернет. Ошибки. Windows </p>
<p></p>
</div>
<nav id="footer_nav">
<ul>
<li><a href="/sitemap.xml">Карта сайта
</a></li>
</ul>
</nav>
</footer>
</div>
</div>
</body>
</html> |
