Внимание!

Данный документ является переводом, который может содержать ошибки и неточности.

Оригинал этой страницы доступен по адресу http://www.w3.org/Style/LieBos2e/enter/.

Все авторские права принадлежат W3C.

Перевод сделал Шарилов Александр

Глава 2
CSS

Это глава 2 книги Каскадные таблицы стилей, разработанные для Интернета, от Hеkon Wium Lie и Bert Bos (2-ое издание, 1999, Addison Wesley, ISBN 0-201-59625-3)

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

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

Правила и таблицы стилей

Чтобы начать использовать CSS вам даже не придется писать таблицу стилей. Глава 16 расскажет вам, как указать существующие стили в Интернете.

Существуют два способа создания CSS. Вы можете использовать обычный текстовый редактор и написать каскадные таблицы стилей (Style Sheets) "от руки", или Вы можете использовать специальный инструмент - например, для веб-дизайна программ - с поддержкой CSS. Специальные инструменты позволяют создавать таблицы стилей без изучения синтаксиса языка CSS. Однако во многих случаях, конструктор захочет настроить таблицу стилей вручную позже, потому мы рекомендуем, чтобы Вы научились писать и редактировать CSS вручную. Давайте приступим! 

H1 { color: green }

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

Рисунок 2.1

[image]

Мы в настоящий момент рассмотрим правило.

Структура правила

Правило состоит из двух частей:

  • Селектор - часть перед левой фигурной дужкой
  • Объявление - часть в фигурных дужках

    [image]

Селектор является связующим звеном между документом HTML и стилями. Он определяет, какие элементы зависят от этого объявления. Объявление является той частью правила, которое определяет, какой будет конечный эффект. В вышеприведенном примере, селектор H1 и Объявления, "color: green". Таким образом, все элементы H1 будут отмеченные в объявления, то есть они будут зелеными. (Свойство color влияет только на цвет тексту, есть и другие свойства фона, предела и т.д.)

Предыдущий селектор в зависимости от типа элемента: выбирает все элементы типа "h1". Такой селектор называется селектором типа (type selector). Любой тип HTML элементу может быть использованный в качестве тип селектора. Селектор типа самых простых тип селекторов. Мы обговорюваємо другие виды селекторов см. CSS селектора., "CSS селектора".

Структура объявления

Объявление имеет две части разделенные на колонки:

  • Свойства - и часть перед двоеточием
  • Значення - и часть после двоеточие

    [image]

Свойства является характеристикой, которая что-то обрабатывает. В предыдущем примере, это цвет. CSS2 (см. в отдельном блоке) определяет около 120 свойств, и мы можем присвоить значение всем из них.

Спецификация CSS

Каскадные таблицы стилей формально описанные в двух спецификациях W3C: CSS1 и CSS2. CSS1 был выпущен в декабре 1996 года и описывает простую модель формирования в основном для экранных презентаций. CSS1 имеет около 50 свойств (например, color и font-size). CSS2 было завершено в мае 1998 года и базируется на CSS1. CSS2 включает у себя все CSS1 свойства и добавляют около 70 собственных, таких как свойства для описания слуховых презентаций и разрывов страниц. В этой книге мы не пытаемся обнаружить разницу между CSS1 и CSS2 и употреблять термин "CSS" хотя расхождение имеет важное значение. Большинство из этого описано в первых четырех разделах части CSS1. Если бы вы хотели читать спецификации CSS для себя, вы можете найти их в: 

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2

Значення точной спецификации свойств. В примере, это свойство является "зеленым", но цвет может так же легко быть голубым красным, желтым, или кто-либо другой.

На нижеприведенной диаграмме показаны все ингредиенты правила. Фигурные скобки (()) и двоеточие (:) делает возможным для браузера различать селектор, свойство и значение.

Схема

Рисунок 2.2 системы правления.

[image]

Группировка селектора и правила

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

Например, рассмотрим эти три правила: 

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }

Все три правила имеют такое же объявление - они устанавливают жирный шрифт (Bold). (Это делается с использованием font-weight свойства, которое мы обсудим см. Шрифты.) Поскольку все три заявления являются идентичными, мы можем сгруппировать селектора разделенные запятыми в список: 

H1, H2, H3 { font-style: bold }

Это правило сделает тот же результат, что и первые три.

Селектор может иметь больше одного описания. Например, мы могли бы написать таблицу стилей с этими двумя правилами: 

H1 { color: green }
H1 { text-align: center }

У этому случаю, мы определили все элементы h1 как зеленые и выровненные по центру страницы. (Это делается с помощью text-align свойства, что детальнее рассматривается в разделе 5.)

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

H1 {
  color: green;
  text-align: center;
}

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

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

таблиц

"Склеивание" стилей из документов

Чтобы любой стиль влиял на HTML документ, он должен быть "связан" с документом. То есть, таблицы стилей и HTML документ должны быть объединены, для того, чтобы они могли работать вместе, чтобы представить настоящий документ. Это можно сделать любым из четырех способов:

  1. Чаще, это применение всего документу таблиц стилей к HTML документу за помощью элемента стилю (style).
  2. Принадлежность стилей к отдельным элементам с помощью атрибута стиля.
  3. Соединение внешней таблицы стилей из HTML документом, используя элемент ссылки.
  4. Импорт таблиц стилей используя CSS обозначения @import.

У следующем разделе мы рассмотрим первый метод: использование стиля элемента. Мы обсудим использование стиля атрибута в разделе 4, "CSS селектора", и с использованием элемента ссылки и обозначение @import 16 глава, "Внешние стили".

Склеивание с помощью элемента стиля

Вы можете связать стили и HTML документ вместе, разместив таблицу стилей внутри элемента стиля (style) в верхней части документа. Элемент стиля был введен в HTML специально, чтобы позволить стилям быть розмещенными внутри HTML документов. Вот таблица стилей (обозначено жирным) размещенная в середине документа и связанная с образцом документа за помощью элемента стиля. Результат показанный на рисунке 2.3. 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was а prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>

Рисунок 2.3 Результат придания к таблице стилей правила, которое делает все h1 (h2) элементы зеленого цвета, а затем связывает их из документом с помощью элементов стиля (style). (попробуйте)

[image]

Обратите внимание, что стиль элемента описывается после названия элемента и перед телом элемента. Название документа, не появляется в самом документе, так что это не влияет на стиле CSS.

Вместо элемента стиля это таблицы стилей. В то время как, содержание таких элементов как h1, p и ul появляется при отображении документа содержание элемента стиля не отображается в настоящем документе. Скорее, это является следствием содержания элемента стиля - таблиц стилей - что появляется в документе. Таким образом, Вы не увидите изображенный на экране текст "(color: green)", Вы увидите вместо двух элементов h1 слово или текст зеленым цветом. Не было прибавлено никаких правил, что задевают любые другие элементы, так что эти элементы будут отображаться в цвете определенному в браузере по умлочанию.

Браузеры и CSS

Для обновленных обзоров имеющихся браузеров на на странице W3C обзор

Для того, чтобы CSS работал, как описано в этой книге, вы должны использовать браузер с CSS-расширениями то есть браузер, который поддерживает CSS. CSS-расширения браузера распознает стиль элемента как контейнер для стилей и отображает документ, соответственно. Большинство браузеров которые распространяются сегодня поддерживают CSS например, Microsoft Internet Explorer 4 (IE4), Netscape Navigator 4 (NS4) и Opera 3.5 (O3.5). Консервативные оценки показывают, что больше половины людей в Интернете используют CSS-расширення браузера, и эта цифра безостановочно растет. Скорее всего, что люди, которые работают из CSS имеют обновленные браузеры. Если нет, то не было причины для обновления!

Лучшим источником информации о том, как разные браузеры поддерживают CSS является WebReview's charts

К сожалению, не все CSS реализации являются совершенными. Когда Вы начнете экспериментировать со стилями, Вы заметите что каждый браузер поставляется с набором ошибок и недостатков. В целом, новые браузеры ведут себя лучше, чем старые. IE4 и O3.5 является одними из лучших, Netscape предлагает - под кодовым названием Gecko - так же многообещающую значительно улучшившую поддержку CSS.

Те, кто не пользуется обновленными CSS браузерами, как и раньше могут читать страницы, которые используют стили. CSS был тщательным образом спроектированный таким образом, что все содержание должно оставаться видимым даже если браузер ничего не знает о CSS. Некоторые браузеры, такие как Netscape Navigator версий 2 и 3 не поддерживают стили, но они знают достаточно об элементах стилей и полностью игнорируют их. Рядом с поддержкой стилей, это правильное поведение.

Однак в других браузерах, которые не знают элементу стиля, таких как Netscape Navigator 1 и Microsoft Internet Explorer 2, будут игнорировать тэги в стиле отображение содержимого элемента стиля. Таким образом, пользователю, в конечном итоге будут отображены таблицы стилей в верхней части документа. На момент написания только у нескольких процентов пользователей Сети будет возникать эта проблема. Чтобы избежать этого, Вы можете прибавить к таблице стилей в середине HTML комментарии, какие мы обсуждали в Главе 1. Потому что комментарии не отображаются на экране, размещая свой лист стилей в середине комментария HTML, Вы избежите проблем отображения содержания элемента стиля самых старых браузеров. Браузеры с поддержкой CSS-розширення уже знают об этой хитрости и будут относиться к содержанию элемента стиля, как к таблице стилей.

Напомним, что HTML комментарии начинаются из <!-- и заканчиваются -->. Вот часть кода из предыдущего примера, который показывает, как Вы можете писать стили в комментариях HTML. Комментарии покрывают только содержание элементу стиля: 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY> 
</HTML>

CSS также имеет свой собственный набор замечаний, которые можно использовать в таблицы стилей. CSS комментарии начинаются из "/*" и заканчиваются "*/". (Те, кто знаком из языком программирования с этим будут согласны.) CSS правила внутри CSS комментария не будет никоим образом влиять на отображение документа.

Также необходимо указать браузеру что Вы работаете с таблицами стилей CSS. Сегодня CSS является единственным языком таблицы стилей что может работать с документами HTML и мы не ожидаем изменений этого. Для XML положение может быть другим. Но, так же, существует более чем один формат изображения (GIF, JPEG и PNG это те что приходят на ум), не может быть больше одного языка стиля. Так что, для браузеров это хорошо сказать, что они имеют дело только из CSS. (В действительности, HTML требует это от Вас.) Это делается по типу атрибута элемента стиля. Значение типа указывает, какой тип таблицы стилей используется. Для CSS, это значение "text/css". Ниже приводится часть кода из наших предыдущих образцов документа который показывает Вам, как можно было бы написать это (в сочетании с использованием HTML комментария): 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    <!--
      H1 { color: green }
    -->
  </STYLE>
  <BODY>
    ..
  </BODY>
</HTML>

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

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

Древовидные структуры и наследование

Напомним, из главы 1 обсуждение представление HTML документа из деревовидной структурой, и как элементы в HTML документе имеют детей и родителей. Есть много причин того, чтобы документ был деревовидной структурой. Для стилей, есть одна очень хорошая причина: наследование. Подобно тому, как дети наследуют от своих родителей, так же делают и HTML элементы. Вместо того, чтобы постоянно наследовать гены и богатство, HTML элементы наследуют стилистические свойства.

Видно из короткого примера образца документа: 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was а 
      <STRONG>prolific</STRONG> composer. Among his
        works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
  </BODY>
</HTML>

Древовидная структура этого документа:

[image]

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

<STYLE TYPE="text/css">
  H1, H2, P, LI { color: green }
</STYLE>

Однак, большинство HTML документов есть сложнее, чем наши образцы документов, в таком случае, Ваш стиль будет достаточно большим. Существуют более лучшей, и более короткий, путь. Вместо того, чтобы устанавливать стиль на каждый тип элемента мы поставили его на элемент body: 

<STYLE TYPE="text/css">
  BODY { color: green } 
</STYLE>

Поскольку другие элементы наследуют свойства от элемента body все они будут подражать зеленому цвету (рис. 2.4).

Рисунок 2.4 Результат наследования. (Попробуйте)

[image]

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

Обнуление наследования

В предыдущем примере, все элементы получили тот же цвет в наследство. Однако, иногда дети не похожие на своих родителей. Не удивительно, в CSS также. Скажем вы хотели бы для элементов H1 установить синий цвет, а для остальных зеленый цвет. Это легко выражается в CSS: 

<STYLE TYPE="text/css">
  BODY { color: green }
  H1 { color: navy }
</STYLE>

H1 является дочерним для элемента body (и таким образом, наследует от body), два правила в вышеприведенной таблице стилей, которые является противоречивыми. Первое устанавливает цвет элемента body (и, тем самым, цвет элемента h1 в наследство), а второе устанавливает цвет беспосередньо для элемента h1. Какое правило победит? Давайте выясним:

(попробуйте)

[image]

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

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

<STYLE TYPE="text/css">
  H1 { color: navy }
  BODY { color: green }
</STYLE>

CSS был разработан для решения конфликтов между таблицами стилей, как приведено выше. Специфика является одним из аспектов этого. Вы можете найти подробности в главе 15 ,"Каскадность и наследственность"

Свойства, которые не наследуются

Как правило, свойства CSS получают подобие от элементов родителей к ребенку, как описано в предыдущих примерах. Однако, некоторые свойства не наследуются, и потому всегда есть важная причина. Мы будем использовать свойство background (фон) (описанную в главе 11), как пример свойств, которые не наследуются.

Допустим, Вы хотите установить фоновый рисунок для страницы. Это достаточно распространенная практика в Интернете. В CSS, Вы можете написать: 

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE TYPE="text/css">
    BODY { 
      background: url(texture.gif) white;
      color: black;
    }
  </STYLE>
  <BODY>
    <H1>Bach's <EM>home</EM> page</H1>
    <P>Johann Sebastian Bach was а prolific
      composer.
  </BODY>
</HTML>

Свойство background (фон) имеет URL ("texture.gif"), что указывает на фоновое изображение как значение. При загрузке изображения, документ выглядит следующим образом:

(попробуйте)

[image]

Несколько примечательных вещей в вышеприведенном примере:

Так почему именно background (фон) не наследует значение? Визуально, эффект прозрачности похожий на наследование: Похоже, что все элементы имеют одинаковый фон. Есть две причины: во-первых, прозрачный фон является быстрее для отображения (потому что нет ничего для отображение!), а чем другие свойства фона. Во-вторых, фоновые изображения отвечают и принадлежат элементу, в другом случае в конце документа не всегда идет гладкая поверхность отображение.

Постые задания CSS

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

Простое задание: fonts (шрифты)

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

H1 { font: 36pt serif }

Правило вышеприведено устанавливает шрифт для элементов h1. Первая часть значение (36pt) устанавливает размер шрифта в 36 пикселов. "Крапка/Пункт" - это старая печатная единица измерения, которая выжила в эпоху цифровых технологий. В следующем разделе мы расскажем вам, почему вы должны использовать "em" единицу вместо "pt", но пока мы будем придерживаться пунктов. Говорит вторая часть значения (Serif) браузеру использовать шрифт serif (из маленькими крючками на концах символов глава 5 роскаже Вам все о них). Более украшенные serif шрифты были больше употребимыми на страницах, как образец Bach's home page, поскольку современные sans-serif шрифты (шрифты без крючков), не были использованы в свое время. Вот результат:

(попробуйте)

[image]

Свойство font (шрифт) является упрощенным свойством, для установления ряда других свойств одновременно. Используя ее Вы можете сократить Ваши таблицы стилей и набор значений за всеми свойствами. Если Вы решите использовать расширенную версию, Вам придется установить все параметры, чтобы заменить вышеприведенный пример: 

H1 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

Иногда Вы только желаете установить одно из них. Например, вы можете установить текст с наклоном в некоторых элементах. Вот пример: 

UL { font-style: italic }

Font-style свойство не будет изменять размер шрифта или семейства шрифтов, будет касаться только для наклона существующего шрифту. При установлении ul элемента, li элементы внутри ul станут с наклоном, так как стиль шрифта наследуется. Вот результат при применении к тестовой страницы:

(попробуйте)

[image]

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

UL { 
  font-style: italic;
  font-weight: bold;
}

Что это дает:

(попробуйте)

[image]

Остальные свойства, font-variant и line-height, поддерживаются не всеми браузерами до сих пор, и потому еще не так часто используются.

Простое задание: margins (отступление)

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

По умолчянию, браузер знает совсем немного о том, как отобразить разные типы элементов HTML. Например, он знает, что list (список) и blockquote (цитата) элементы должны иметь отступление от другого текста. Как дизайнер, Вы можете построить страницу на этих параметрах и, в то же время, обеспечить собственные уточнения. Давайте воспользуемся blockquote элементом как примером. Вот тестовый документ: 

<HTML>
  <TITLE>Fredrick the Great meets Bach</TITLE>
  <BODY>
    <P>One evening, just as Fredrick the Great was 
      getting his flute ready, and his musicians 
      were assembled, an officer brought him а 
      list of the strangers who had arrived. With
      his flute in his hand he ran over the list
      but immediately turned to the assembled 
      musicians, and said, with а kind of 
      agitation:
    <BLOCKQUOTE>"Gentlemen, old Bach is come."
    </BLOCKQUOTE>
    <P>The flute was now laid aside, and old Bach, who
      had alighted at his son's lodgings, was immediately
      summoned to the Palace.
  </BODY>
</HTML>

Рисунок, нижеприведенный, является снимком из экрана и отображает, как типичный HTML браузер будет отображать настоящий документ:

(попробуйте)

[image]

Как Вы можете видеть, браузер прибавил пространству на всех сторонах цитируемого текста. В CSS это называют "полями" или "отступлениями", а все элементы имеют такие поля по всех четырех сторонах. Свойства называются: margin-top, margin-right, margin-bottom и margin-left. Вы можете изменить способ отображения элемента blockquote и прибавить немного стилей: 

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}
группа

"em" будет рассматриваться детально в следующем разделе, но мы можем уже в настоящий момент раскрыть свой секрет: оно масштабируется со сравнением размера шрифту. Таким образом, вышеприведенный пример приведет к тому, что вертикальные поля будут выше, чем размер шрифта (1em) от blockquote, а горизонтальные поля маютимуть нулевую ширину. Чтобы убедиться, текст в кавычках еще можно отличить курсивом (наклоном). Результат:

(попробуйте)

[image]

Так же, как сокращенные свойства font для установление нескольких свойств шрифтов одновременно, margin есть укороченное свойство, которое устанавливает все свойства полей. Вышеприведенный пример может быть записан: 

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

Первая часть значения (1em) присваивается margin-top. Оттуда по часовой стрелке: 0em присваивается margin-right, 1em присваивается margin-bottom и 0em присваивается margin-left.

С левого края отступление равняется нулю, но тексту в кавычках нужно установить больше стилей, чтобы его отделить от остального текста. В этом помогает настройка font-style курсивом и придание цвета фона: 

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

Результат:

(попробуйте)

[image]

Как и ожидалось, цвет фона текста в кавычках изменился. В отличие от предыдущего примера, цвет, указанный в красный/зелений/синий (red/green/blue) (RGB) компоненте. RGB цвета подробно описаны в разделе 11.

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

BLOCKQUOTE { 
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

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

(попробуйте)

[image]

Обратите внимание, что свойства padding было определено лишь одно значение (0.5em). Так же, как margin свойство, padding может вбирать 4 значения какие назначены сверху, справа, внизу и слева отступление соответственно. Однако, когда нужно установить одинаковые значения на всех сторонах, достаточно указать значение только один раз. Это верно как для padding и margin (а также для некоторых других свойств пространства, которые описаны см. Пространство вокруг блоков.).

Простое задание: link (ссылка)

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

A:link { text-decoration: underline }

Наведений выше пример указывает, что посещенные ссылки должны быть подчеркнуты:

(попробуйте)

[image]

Подчеркнутыми ссылки, как мы определили, но они также являются синими, однако мы этого не делали. Если авторы не указывают все возможные стили, браузеры используют стандартные стили для заполнения пробелов. Взаимодействию между автором стиля, типичного стилю браузера и стилей определенных пользователем (за собственными вкусами пользователя) является еще одним примером урегулирование конфликтов правил CSS. Он называется каскад ( "С" в CSS сокращении). Мы обсудим каскад ниже.

Селектор (A:link) заслуживает особого упоминания. Вы, по-видимому, знаете "A" как элемент HTML, но последняя часть является новой. ":link" является одним из ряда так называемых псевдо-класов в CSS. Псевдо-класы используются, чтобы предоставить стили элементов на основе информации, за пределами самого документа. Например, автор документ не может знать наверняка, было ли пересмотрена пользователем эта ссылка или нет. Псевдо-класы обстоятельно описаны в главе 4 И мы лишь приведем несколько примеров: 

A:visited { text-decoration: none }

Это правило предоставляет стиль посещенным ссылкой, а A:link дает стиль не посещенным ссылкой: 

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

Данное правило внедряет новый псевдо-клас :hover. Допуская, что пользователь наводит указательное устройство (например, мышь), указанный стиль будет применяться к элементу, когда пользователь перемещает указание на ("парит" (hovers) над ним) ссылка. Общий эффект заключается в изменении цвета фона. В примере она выглядит следующим образом:

(попробуйте)

[image]

Псевдо-клас :hover имеет интересную историю. Он был введен в CSS2, после того как этот эффект стал популярным среди JavaScript программистов. Решение JavaScript сложнее по сравнению с CSS псевдо-класом, и это является примером сбора CSS эффектов, которые стали популярными среди веб-дизайнеров.

Несколько слов о каскадах

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

В последнем наборе примеров вы видели что цвет текста ссылки был синим и без указание в таблице стилей. Так же браузер знает как отображать элементы blockquote и h1 без прямого определения. Все, что браузер не знает о возможностях формирования сохраняется в таблице стилей за умолчанием браузера и совмещается из таблицами стилей автора при отображении документа.

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

Мы вникали в подробности о каскадных в Главе 15 "Каскадность и наследственность". К этого, нужно еще много чего узнать о шрифты, пространства и цвета.