Css правило: CSS-правила — Знакомство с CSS — HTML Academy

CSS-селекторы — CSS | MDN

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Универсальный селектор

Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента

Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.=»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинатор запятая

Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и <div> и <span>.

Комбинатор потомков

Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.

Дочерние селекторы

Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.

Комбинатор всех соседних элементов

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который  находится непосредственно после элемента <ul>.

Псевдоклассы

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

Псевдоэлементы

Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Синтаксис CSS: правила и оформление кода

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

Правила CSS

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

• Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.

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

• Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
• Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание «;» можно только в конце последнего объявления перед закрывающей фигурной скобкой.
• Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

Оформление кода

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

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

p {
  color: blue;
  font-size: 12px;
}

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

p{color:blue;font-size:12px;}

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

С этой темой смотрят:

Глава 2 CSS

Как мы уже пояснили в предыдущей главе, элементы
HTML позволяют сайтостроителям разметить документ в соответствии с
его структурой. В спецификации HTML перечислены рекомендации по
отображению браузерами этих элементов. К примеру, можно быть
более-менее уверенным, что содержание контейнера strong будет отображено полужирным шрифтом.
Вполне можно доверять и тому факту, что большинство браузеров
отобразит содержимое контейнера h2
крупным шрифтом… по меньшей мере, крупнее, чем p, и крупнее, чем h3. Однако помимо веры и надежды на это, средств контроля
за внешним видом текста у нас просто нет.

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

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

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

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

h2 { color: green }

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

Figure 2.1

Теперь давайте тщательно разберем правило.

Анатомия правила

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

• Селектора — части перед левой фигурной
  скобкой

• Объявления — части внутри фигурных скобок

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

Предыдущий селектор основан на типе элемента: он выбирает все элементы типа «h2». Этот вид селектора зовется селектором типа. Любой тип
элемента HTML может быть использован в качестве селектора типа.
Селекторы типа являются простейшим видом селекторов. Мы обсудим
другие виды селекторов в
See CSS
selectors. , «CSS selectors.»

Анатомия объявления

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

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

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

Значение это
точная спецификация свойства. В примере, это «green» «зеленый»,
но точно также цвет мог бы быть синим (blue), красным (red),
желтым (yellow) или каким-нибудь еще.

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

Рисунок 2.2 Диаграмма правила.

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

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

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

h2 { font-weight: bold }
h3 { font-weight: bold }
h4 { font-weight: bold }
     

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

h2, h3, h4 { font-style: bold }

Это правило производит такой же эффект, как и
первые три..

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

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

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

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

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

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

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

«Приклеивание» таблиц стилей к документу

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

1. Применить базовую, внутридокументную таблицу
   стилей, к документу, исп ользуя тег style .

2. Применить таблицу стилей к отдельному тегу,
   используя атрибут style.

3. Привязать внешнюю таблицу стилей к документу,
   используя элемент link.

4. Импортировать таблицу стилей, испольхуя запись
   CSS @import.

В следующем разделе, мы обсудим первый метод: с
использованием тега style. Атрибут
style мы обсудим в главе
4
, «Селекторы CSS», а использование элемента link element и записи @import в главе 16 , «Внешние таблицы
стилей».

«Склеивание» с использованием тега STYLE

Можно склеить таблицу стилей и HTML документ,
поместив таблицу стилей внутрь контейнера style вверху вашего документа. Тег style был введен в HTML в частности для того, чтобы
позволить вставлять таблицы стилей внутрь HTML документов. Вот
таблица стилей (полужирным шрифтом) прикрепленная к
документу-образцу с использованием тега style. Результат показан в рисунке
2.3 .

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

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

Обратите внимание на то, что тег style размещен после тега title и перед тегом body. Заголовок документа «title» не появляется на самой
странице, поэтому стили CSS не оказывают на него влияния.

Содержимое тега style это таблица
стилей. Однако, в то время, как содержимое таких тегов, как h2, p и ul появляется на странице, содержимое тега
style там не появляется. Точнее, на
странице появляется эффект от содержимого контейнера
style таблицы стилей. Поэтому вы не
видите «{ color: green }», показанным на экране; вместо этого вы
видите два тега h2 зеленого цвета.
Правил, определяющих цвет прочих элементов, добавлено не было,
так что все прочие элементы будут отображаться цветом по
умолчанию.

Браузеры и CSS

Для обновляемого обзора доступных браузеров,
просмотрите страницу обзоров W3C

Для того, чтобы CSS работала как написано в этой
книге, необходимо использовать CSS-совместимый браузер, то есть,
браузер, поддерживающий CSS. CSS-совместимый браузер узнает тег
style как контейнер для таблицы
стилей и отображает документ соответственно. Многие браузеры,
распространенные сегодня, поддерживают 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, не поддерживают таблицы
стилей, но они знают о теге style
чтобы полностью его игнорировать. После поддержки таблиц стилей,
это и есть правильное поведение.

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

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

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

В CSS также есть собственные способы
комментирования, которые можно использовать внутри таблицы стилей.
Комментарий CSS начинается с «/*» и оканчивается на «*/.» (Те, кто
знаком с языком программирования C, узнают его.) Правила CSS
помещененные в комментарий CSS никак не повлияют на предсталение
документа.

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

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

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

Чтобы облегчить чтение примеров, мы решили не заключать таблицы
стилей в HTML-комментарии, но мы обязательно будем использовать
атрибут type во всей книге.

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

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

Давайте начнем с того, что посмотрим на документ-образец.:

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

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

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

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

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

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

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

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

Аннулирование наследования

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

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

Раз тег h2 дочерний
элемент тега body (и, следовательно,
наследует body), эти два правила в
таблице стилей выше несовместимы. Первое присваивает цвет
содержимому тега body, а, значит, и
цвет элементов h2 посредством
наследования; в то время, как второе правило присваивает цвет
исключительно тегу h2. Какое из них
победит? Давайте узнаем:

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

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

<STYLE TYPE="text/css">
  h2 { 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>
    <h2>Bach's <EM>home</EM> page</h2>
    <P>Johann Sebastian Bach was a prolific
      composer.
  </BODY>
</HTML>

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

В примере выше есть несколько вещей, о которых
стоит рассказать подробнее:

• Фоновое изображение перекрывает поверхность
  наподобие обоев фоны элементов h2 и
  p также были перекрыты. Это не из-за
  наследования, причина в том, что если не определено иначе, все
  фоны прозрачны. Так что, раз мы не определили как-либо фоны для
  содержимого тегов h2 или p, фон родительского элемента body будет просвечивать.

• Вдобавок к URL изображения, в качестве фона
  также приваивается цвет (по умолчанию белый). Если изображение не
  будет найдено, вы увидите вместо него цвет.

• Цвет содержимого body установлен черным. Чтобы гарантировать контраст
  между текстом и фоном, хорошей привычкой будет всегда
  устанавливать свойство color
  когда устанавливаете свойство background.

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

Стандартные задачи в CSS

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

Частые задачи: шрифты

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

h2 { font: 36pt serif }

Это правило присваивает определенный шрифт
элементам h2. Первая часть значения
36pt устанавливает шрифт размером 36
пунктов. «Пункт» старая типографская единица измерения, которая
здравствует и в цифровом веке. В следующей главе мы расскажем,
почему стоит использовать единицу «em» вместо «pt» но пока что
заострим внимание на пунктах. Вторая часть значения serif сообщает браузеру, что нужно
использовать шрифт с серифами (маленькими засечками на концах
шрифтов, глава 5 расскажет вам о них
подробнее). Более декоративные шрифты с засечками лучше подходят
домашней страничке Баха, поскольку современные санс-серифные
шрифты (шрифты без засечек) не использовались в его время. Вот
результат:

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

h2 {
  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 внутри этого контейнера
станет наклоенным, поскольку свойство font-style наследуется. Вот результат применения к
тестовой странице, которые вы уже знаете.:

Похожим образом, свойство font-weight используется для изменения плотности
толщины букв. Можно еще больше выделить пункты списка, присвоив
их предку значение bold:

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

Что выводит:

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

Частые задачи: поля

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

По умолчанию, ваш браузер знает совсем немного о том, как
отображать раличные виды элементов в HTML. Например, он знает,
что списки и содержание тегов 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 a
      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 a 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-браузер отобразит этот документ:

Как можно видеть, браузер добавил пробелы со всех
сторон цитируемого текста. В CSS эти пробелы называются «margins»
«поля» и все элементы имеют поля со всех четырех сторон. Свойства
называются: 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, и горизонтальные поля с
нулевой шириной. Чтобы убедиться, что цитируемый текст все-таки
будет отличаться, сделаем его курсивным. Результат таков:

Точно так же, как 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 значения italic помогает, а добавление фонового цвета
еще больше усиливает цитату:

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

Вот результат:

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

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

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

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

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

Частые задачи: ссылки

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

A:link { text-decoration: underline }

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

Ссылки подчеркнуты, как мы и указали, но они
вдобавок синие, чего мы не указывали. Когда авторы не указывают
все возможные стили, браузеры используют стили по умолчанию,
чтобы заполнить пробелы. Взаимодействие между авторскими стилями,
стилями по умолчанию и пользовательскими стилями (собственными
предпочтениями пользователя) еще один пример противоречия между
решающими правилами CSS. Это называется «каскадом»(«C» в «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. При условии, что пользователь
перемещает указующее устройство (вроде мыши), определенный стиль
будет приложен к элементу, когда пользователь двигает курсор над
(«зависает» над) ссылкой. Вот как это выглядит:

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

Слово о каскадах

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

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

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

Мы углубимся в детали каскадирования в главе 15, «Каскадирование
и наследование». Перед этим, следует узнать многое о шрифтах,
промежутках и цветах.

Каскадность CSS. Как определяется приоритет стилей — учебник CSS

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

• подключить внешнюю таблицу стилей;
• добавить внутреннюю таблицу стилей в HTML-документ через тег <style>;
• определить стиль элемента, применив к тегу атрибут style с необходимыми значениями (inline-стиль).

Эти способы добавления стилей могут быть использованы одновременно. К примеру, для тегов <p> может быть одновременно задан стиль как во внешней таблице стилей, так и во внутренней. Кроме того, в одной таблице стилей может быть записано несколько вариантов форматирования тегов <p>. Например:

p {color: green;}
.your_class p {color: yellow;}
#your_id p {color: red;}

В этом примере для тегов <p> указано три варианта форматирования. Но каким образом браузер расставляет приоритеты между стилями? Какой стиль из вышеприведенных будет выбран и по какому принципу? Это нам и предстоит выяснить.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Когда селектор состоит из нескольких других селекторов, необходимо посчитать их общий вес. Вот как вычисляется приоритет: за каждый селектор добавляется 1 в соответствующую ячейку. В остальных ячейках стоят нули. Чтобы получить общий вес, необходимо «склеить» все числа в ячейках.

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

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

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

Объявление !important

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important:

p {color: red !important;}
p {color: green;}

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

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

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

• в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
• второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
• с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
• для списков ol, ul убраны маркеры;
• отменены кавычки и другой контент перед и после содержимого тегов blockquote, q;
• упрощено добавление рамок для ячеек таблиц.

Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.

Итоги

Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.

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

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

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

CSS-правила и селекторы · jQuery для начинающих

CSS-правила и селекторы

Теперь приступим к CSS, и начнём, пожалуй, с расшифровки аббревиатуры CSS. Это Cascading Style Sheets, дословно «каскадная таблица стилей», но:

— Почему же она называется каскадной? — этот вопрос я часто задаю на собеседованиях претендентам. Ответом же будет аналогия, ибо она незыблема как перпендикулярная лягушка: представьте себе каскад водопада, вот вы стоите на одной из ступенек каскада с чернильницей в руках, и выливаете её содержимое в воду — вся вода ниже по каскаду будет окрашиваться в цвет чернил. Применив эту аналогию на HTML — создавая правило для элемента, вы автоматически применяете его на все дочерние элементы (конечно, не все правила так работают, но исключения обсудим позже) — то есть, происходит «наследование стилей от элементов-родителей».

— Зачем мне всё это? — работая с jQuery, вы должны «на отлично» читать правила CSS, а также уметь составлять CSS-селекторы для поиска необходимых элементов на странице. Практически все задачи, которые вы будете решать с помощью jQuery, начинаются с поиска необходимого элемента на странице, так что знание CSS-селекторов обязательно.

Но давайте обо всём по порядку, возьмём следующий простенький пример вполне семантического HTML (см. html.example.html):

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>Page Title</title>
  <link rel="shortcut icon" href="/favicon.ico"/>
  <style>
    body {
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 14px;
    }
    h2, h3, h4 {
      color: #333333;
    }
    header, section, footer {
      position: relative;
      max-width: 800px;
      margin: 16px auto;
    }
    article {
      padding: 16px;
      margin-bottom: 16px;
    }
    #content {
      padding-bottom: 16px;
    }
    .box {
      border:1px solid #ccc;
      border-radius:4px;
      box-shadow:0 0 2px #ccc;
    }
  </style>
</head>
<body>
  <header>
    <h2>Page Title</h2>
    <p>Page Description</p>
  </header>
  <section>
    <h3>Section Title</h3>
    <article>
      <h4>Article Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
    </article>
    <article>
      <h4>Article Title</h4>
      <p>Morbi malesuada, ante at feugiat tincidunt...</p>
    </article>
  </section>
  <footer>
      &copy;copyright 2018
  </footer>
</body>
</html>

Это пример простого и правильного HTML с небольшим добавлением CSS. Давайте разберём селекторы в приведённом CSS-коде
(я умышленно не выносил CSS в отдельный файл, ибо так наглядней):

• body — данные правила будут применены к тегу <body> и всем его потомкам, запомните: настройки шрифтов распространяются вниз «по каскаду»
• h2,h3,h4 — мы выбираем теги <h2>, <h3> и <h4>, и устанавливаем цвет шрифта для данных тегов и их потомков
• #content — выбираем элемент с «id=»content»», настройки отступов не распространяются на потомков, они будут изменяться только для данного элемента
• .box — выбираем элементы с «class=»box»», и изменяем внешний вид границ элементов с заданным классом

Теперь подробнее и с усложнёнными примерами:

Это отнюдь не весь список, описание же всех CSS-селекторов можно найти на соответствующей страничке W3C: https://www.w3.org/TR/selectors-3/

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

• самый низкий приоритет имеют стили браузера по умолчанию — в разных браузерах они могут отличаться, поэтому придумали CSS Reset (гуглится и юзается), и все будут на равных
• чуть важнее — стили, заданные пользователем в недрах настроек браузера; встречаются редко
• самые важные — стили автора странички, но и там всё идёт по порядку
  • самый низкий приоритет у тех, что подключены файлом в мета-теге <link rel="stylesheet" type="text/css" href="...">
  • затем те, что встроили внутрь HTML с помощью тега <style>
  • потом те, что захардкодили плохие люди (не вы, вы так делать не будете) в атрибуте «style=»»» при тегах
  • самый высокий приоритет у правил с меткой !important
  • при равенстве приоритетов тапки у того, кто объявлен последним

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

• расчёт происходит по четырём весовым позициям [0:0:0:0]
• стили заданные в атрибуте «style=»»» имеют наибольший приоритет и получают единицу по первой позиции — [1:0:0:0]
• за каждый идентификатор элемента (#id) — [0:1:0:0]
• за каждый класс (.class), либо псевдо-класс (:pseudo) — [0:0:1:0]
• за каждый тег (<a>, <div>) — [0:0:0:1]
• при этом [1:0:0:0] > [0:x:y:z] > [0:0:x:y] > [0:0:0:x]
• при равенстве счета — снова тапки у того, кто объявлен последним

Пример селекторов, выстроенных по возростанию приоритета (все селекторы кликабельны, результат работы можно посмотреть чуть ниже):

📌🗘

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

Во втором параграфе прописан «style=»color:#333″», именно поэтому он не изменяет свой цвет, так как его приоритет наивысший [1:0:0:0]

Метка !important — страшная вещь, использовать следует лишь в крайнем случае, вот посмотрите что она творит — p { color: darkred !important }

Говорят, что правило с 255 классами будет выше по приоритету, нежели правило с одним «id», но я надеюсь, такого кода в реальности не существует

Вот кусочек CSS для тренировки, напишите соответствующий ему HTML (это вопрос с собеседования ;):

#my p.announce, .tt.pm li li a:hover + span { 
    color: #f00;
}

И ещё один:

#my > li, dd.dd.tt ~ span {
    text-decoration: underline;
}

CSS | Селектор правила

Селектор CSS – указатель (маркер) браузеру выполнения внешнего или внутреннего стилевого правила отображения выбранного html-элемента

1. Стилевое правило
2. CSS-стили
3. Правило CSS
4. Селектор правила CSS
5. Селектор html-тегов
6. Селектор классов
7. Селектор идентификаторов

Стилевое правило

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

свойство: значение;

CSS-стили

CSS-стили определяют внешний вид и расположение html-элемента на странице – цвет, шрифт, размер блока, списка, абзаца … Различают встроенный стиль html-элемента и таблицы стилей CSS (внутренние и внешние). Таблицы стилей CSS, в отличие от встроенного стиля – находятся за пределами html-элемента. Связать воедино правило стиля html-элемента и сам элемент, указать браузеру конкретный html-элемент выполнения правила стиля, требуется маркер – CSS-селектор правила. Селектор правила CSS указывает браузеру место на странице (html-элемент) применения прописанных CSS-стилей. CSS-селектор – неотъемлемая часть внешних и внутренних таблиц CSS. Справка:

Правило CSS

Подключенные (внутренние и внешние) таблицы CSS-стилей состоят из правил и содержат минимум одно правило отображения html-элемента. Текст правила начинается его селектором. Селектор правила располагается до знака фигурной открывающей скобки «{» и определяет элемент html-документа, подчиненный правилу.
Блок объявлений правила расположен за селектором, заключен в фигурные скобки и содержит объявления стилей, разделённых знаком «;». В объявлении стиля указано конкретное свойство элемента и его значение.

Допускается (но, не приветствуется) сокращенная форма записи правила таблицы CSS, без пробелов и перевода строки: селектор{свойсто:значение;}

Селектор правила CSS

Селектор правила CSS – неотъемлемая часть CSS-стиля, находящегося за пределами html-элемента документа. Cелектор CSS указывает браузеру html-элемент для применения CSS-стилей, содержащихся в блоке объявлений возглавляемого им правила и определяющих внешний вид и расположение html-элемента на странице – цвет, шрифт, размер, обтекание блока, списка, абзаца …

Селектор html-тегов

Селектором html-тегов (селектором по типу элементов) выступает непосредственно html-тег спецификации HTML. Правило селектора тегов распространяется на элементы страницы с прописанным html-тегом и применяется браузером при отсутствии указания иного:
/* Кроссбраузерный сброс отступов */
html, body, div, p, a, span, h2, dl, dt, dd, ol, ul, li, form, label, table, caption, tr, th, td, article, aside, menu, nav, output, section, audio, video {margin:0;}

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

Правило селектора классов верно для элементов HTML с присвоенным атрибутом class указанного в селекторе имени. Имя слагается из цифр и латинских символов в любой комбинации. Желательно использовать человеко-понятную форму имени, отличимую от названий тегов спецификации HTML и литеры нижнего регистра. Селектору классов в CSS характерна точка перед именем:
CSS
.red123{color:red;}
HTML
<div class=”red123”>красный текст</div>
<p class=”red123”>красный текст</p>
<h4 class=”red123”>красный текст</h4>

Селектор идентификаторов

Действие селектора идентификатора ничем не отличается от работы селектора классов, кроме одного: идентификатор «id» присваивается исключительно одному элементу HTML. Свойства правила, обозначенные селектором идентификаторов, применятся в одном единственном экземпляре с уникальным атрибутом «id» – универсальным индивидуальным идентификатором. Имя идентификатора формируется (придумывается автором) по принципу имени селектора классов и прибавляется спереди решетка. Принципиальное отличие идентификатора от класса: идентификаторы универсальны, они используются в якорях-html и jаvascript для нахождения уникального места в документе. Выбирая имя, важно не повториться и не сбить работу страницы.
CSS
#red123{color:red;}
HTML
<div id=”red123”>красный текст исключительно здесь !!!</div>

Классы и идентификаторы элементов

Основное отличие класса от идентификатора – идентификатор предназначен для одного элемента, класс присваивают сразу нескольким. Для идентификаторов такое невозможно, два идентификатора с одинаковым именем не работают.

Верстальщики практикуют комбинирование селекторов с указанием уровня наследственности и расширение возможностей основных селекторов селекторов за счет добавления атрибутов, псевдо-классов и псевдоэлементов.=»http://»] {свойство: значение;}

– часть атрибута, любое слово в маске*
а[атрибут*=»любое_слово_в_маске»]

a[href*=»tehnopost «]{свойство: значение;}

– часть атрибута, окончание маски$:
ссылки на домен «. Info»
[атрибут$=»_окончание»]
а[href$=». info»] {свойство: значение;}
ссылки на фото «.jpg»:
а[href$=».jpg»]

Браузер выберет элементы с указанным атрибутом и отобразит в описанном стиле. В учебниках приводятся в основном, примеры со ссылками.

1. #menu {свойство: значение;}
2. #menu ul {свойство: значение;}
3. #menu ul li {свойство: значение;}
4. #slidemenu ul li a {свойство: значение;}
5. #slidemenu ul li a span{свойство: значение;}
/* Глубже вкладывать и засовывать свойства не надо. */

1.  <ul><b>текст</b>
2.   <li><b>текст</b>
3.    <ul>
4.     <li><b>текст</b></li>
5.    </ul>
6.    <ul>
7.     <li><b>текст</b></li>
8.    </ul>
9.   </li>
10.  <li><b>текст</b></li>
11. </ul>

Селекторы псевдоклассов и псевдоэлементов

Отдельный интерес представляют селекторы псевдоклассов и псевдоэлементов, образуемые при обращении к интерактивному html-элементу, как правило – ссылке или якорю:

Селектор псевдоклассов
a:active {color: blue;}
a:link { color: red; }
a:visted { color: purple; }

Селектор псевдоэлементов
/* Выделение первой буквы абзаца*/
p::first-line {font-weight:bold; font-size: 1.2em;}

Разница не только в лишнем двоеточии.

В CSS существует ограниченный набор псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Псевдоэлементов в CSS существует четыре: первая буква, первая строка, стили «до» и «после» элемента.

{color: blue;}
{font-size: 32px;}
{color: red;}
дальше по тексту:
{свойство: значение;}

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Вестимо, внешние стили CSS находятся в отдельных (внешних) файлах, внутренние – в теле веб-документа, встроенные – непосредственно в открывающем теге html-элемента.

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

Подключаются или внедряются CSS-стили в документ следующим образом:
CSS-стили указаны в атрибутах отдельного html-элемента, в открывающем теге:
<p>
CSS-стили внутри документа заключаются в элемент <style>, находящийся в теле веб-документа. Место нахождения элемента <style> на поле веб-страницы для браузера не имеет значения. CSS-код отработается браузером в любом случае:
<style type=»text/css»>селектор{правила}</style>
CSS-стили находятся в отдельном внешнем файле, подключаемом к документу посредством элемента <link>, включённом в элемент <head>:
<link rel=»stylesheet» type=»text/css» href=»style.css»>

В html назначаю тегу <section> класс <section>.
В style.css прописываю свойства и значения классу:
section .mainpage {…} — свойства и значения игнорируются (смотрю в последнем Хроме).
Пишу:
section.mainpage {…} (без пробела между тегом и классом) — свойства и значения срабатывают.

Под селектор «section .mainpage» попадает любой элемент с классом mainpage, НАХОДЯЩИЙСЯ ВНУТРИ элемента section. Под селектор «section.mainpage» попадает любой элемент section, которому назначен класс mainpage.

Дело в пробеле. «section .mainpage {}» — Тут под него попадут все элементы с классом ‘mainpage’, которые идут после любого <section>. «section.mainpage» — правила применятся только к <section> , но не к вложенным в него элементам.

Таблица стилей CSS. Структура CSS правила. CSS значения и свойства. Комментарии в CSS.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. И первая публикация в этой рубрики будет посвящена CSS правилам, синтаксису CSS, CSS свойствам и их значениям, а также комментариям в CSS. На моем блоге вы можете найти две публикации, в которых я использовал для оформления каскадные таблицы стилей, но ничего практически не объяснял: Меню для сайта. Горизонтальное CSS меню и Вертикальное выпадающее CSS меню. Горизонтальное выпадающее CSS меню.

Согласитесь, оформлять HTML документы при помощи HTML атрибутов неудобно, получается, что для каждого HTML элемента приходится задавать свои атрибуты, конечно для оформления HTML таблиц есть теги <col> и <colgroup>, но все же, это неудобно.

Хотелось бы как-нибудь объединить однотипные HTML элементы в одну группу и изменять их оформления не по отдельности, а сразу все вместе, например стили HTML заголовков или стили для HTML списков. Выход из этой ситуации есть – нужно просто использовать таблицу стилей CSS.

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

Основные правила CSS.

Содержание статьи:

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

Основной особенность CSS является то, что каскадная таблица стилей позволяет вносить изменение и применять определенные правила для каждого элемента сформированного браузером. Допустим, у нас есть HTML список, маркированный HTML список, который формируется при помощи тегов <ul> и <li>:

<ul>

<li>Первый пункт</li>

<li> Второй пункт </li>

<li> Третий пункт </li>

<li> Четвертый пункт </li>

</ul>

Выглядит созданный HTML список примерно так:

Предположим, что мы хотим сделать оранжевым цвет текста каждого пункта HTML списка, в HTML для этих целей есть тег <font>, у которого есть атрибут color (цвета в HTML, таблица RGB):

<ul>

<li<font color=»orange»> Первый пункт</font></li>

<li><font color=»orange»> Второй пункт</font> </li>

<li><font color=»orange»> Третий пункт</font> </li>

<li><font color=»orange»> Четвертый пункт</font> </li>

</ul>

Так будет выглядеть HTML список после внесенных изменений:

Согласитесь, довольно нудно и долго писать для каждого пункта списка тег font и задавать атрибут color, хорошо, что в примере четыре пункта, а если их будет больше, а если через какое-то время мы захотим поменять цвет?

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

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

Это CSS правило позволяет сделать текст всех элементов <li> на странице оранжевым. Более того, мы можем поменять цвет пунктов HTML списка, просто изменив одну строку и теперь нам не нужен тег <font> и его атрибуты. Чтобы изменить цвет пунктов HTML списка, мы просто меняем правила CSS и все. Неплохо, да?

Структура CSS правила. Синтаксис CSS. CSS значение и CSS свойство.

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

На рисунке вы можете видеть, что все стили, которые мы хотим задать для нужного HTML элемента или группы элементов заключаются в фигурные скобки, перед которыми пишется CSS селектор. Внутри фигурных скобок размещаются CSS объявления: пара CSS свойство и CSS значение, между собой они разделяются двоеточием, после каждого объявления ставится точка с запятой. Обратите внимание: у каждого CSS свойства имеется свой набор значений. Понятно, что цвет фона, заданный при помощи CSS свойства background-color, и цвет текста внутри элемента <li> будут применены к каждому элементу <li> HTML документа.

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

LI{Color: red; list-Style:NONE;}

p{

background:gray;

botton-border: 1px;

}

То есть, вы можете писать все CSS свойства, CSS значения и правила в одну строку, так, как это записано для элемента <li>, а можете записывать каждое CSS объявление на новой строке. Второй вариант мне нравится больше просто потому, что такой код проще редактировать, с другой стороны лишние пробельные символы увеличивают объем файла, в котором хранятся CSS правила.

CSS стили, правила. Синтаксис CSS, комментарии CSS. Приоритет CSS.

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

menu{

color: #545ff3

list-style: none;

display:inline;

}

В данном случае мы задали CSS стили для тега <menu> внутри одного CSS правила.

table{color: orange;}

table{border: 1px;}

table{background: pink;}

В данном случае мы создали несколько CSS правил для тега <table>, каждая пара CSS свойство и значение записана в отдельное CSS правило. Конечно, такая форма записи неудобна, приходится повторять CSS селектор и легко можно запутаться.

Теперь давайте поговорим о приоритете CSS правил и объявлений, допустим у нас на странице есть элемент <a>, ссылка. И для этого элемента существует следующее CSS правило:

a{

color: red;

color:blue;

}

И как угадать, какого цвета будут ссылки в HTML документе? Очень просто, высший приоритет имеют CSS свойства, которые написаны ниже по коду. На самом деле применятся оба CSS свойства, просто вначале цвет ссылок станет красным, а затем синим, в итоге мы увидим синие ссылки.

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

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

CSS комментарии бывают только блочными и могут располагаться в любом месте документа с расширением .css:

/* CSS комментарий может

располагаться и занимать несколько

строк */

/* Стили для тега <menu> */

&nbsp;

menu{

color: #545ff3; /* цвет текста  */

list-style: none; /* убираем мерзкие маркеры  */

display:inline; /* отображать элемент <menu>, как строчный  */

}

&nbsp;

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

At-rules — CSS: каскадные таблицы стилей

Ат-правила — это инструкции CSS, которые указывают CSS, как себя вести. Они начинаются со знака « @ » ( U + 0040 КОММЕРЧЕСКИЙ АДРЕС ), за которым следует идентификатор и включает все до следующей точки с запятой, «»; ‘( U + 003B SEMICOLON ) или следующий блок CSS, в зависимости от того, что наступит раньше.

Обычный

 
@IDENTIFIER (ПРАВИЛО);


@charset "utf-8";  

Существует несколько обычных правил at-правил, обозначаемых своими идентификаторами, каждое со своим синтаксисом:

• @charset — определяет набор символов, используемый таблицей стилей.
• @import — Указывает механизму CSS включить внешнюю таблицу стилей.
• @namespace — Сообщает механизму CSS, что все его содержимое должно рассматриваться с префиксом пространства имен XML.

Вложенный

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

• @media — правило условной группы, которое будет применять его контент, если устройство соответствует критериям условия, определенного с помощью медиа-запроса .
• @supports — Условное групповое правило, которое будет применять свое содержимое, если браузер соответствует критериям данного условия.
• @document — правило условной группы, которое будет применять свое содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия. (отложено до уровня 4 спецификации CSS)
• @page — описывает аспект изменений макета, которые будут применены при печати документа.
• @ font-face — описывает внешний вид загружаемого внешнего шрифта.
• @keyframes — описывает аспект промежуточных шагов в последовательности анимации CSS.
• @viewport — описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии рабочего проекта)
• @ counter-style — определяет определенные стили счетчика, которые не являются частью предопределенного набора стилей. (на стадии рекомендации кандидата, но реализовано только в Gecko на момент написания)
• @ font-feature-values ​​ (плюс @swash , @ornaments , @annotation , @stylistic , @styleset и @ character-option ) — Определить общие имена шрифтом -variant-alternates для функции, по-разному активированной в OpenType. (на стадии рекомендации кандидата, но реализовано только в Gecko на момент написания)
• @property — описывает аспект настраиваемых свойств и переменных. (в настоящее время на стадии рабочего проекта)
• @ color-profile — Позволяет определить цветовой профиль для использования функцией color () .

Подобно значениям свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них можно сгруппировать в специальную категорию условных правил группы . Эти операторы имеют общий синтаксис, и каждый из них может включать в себя вложенных операторов — либо наборов правил , либо вложенных правил .Более того, все они передают общее семантическое значение — все они связывают некоторый тип условия, которое в любой момент оценивается как истинно или ложно . Если условие оценивается как истинно , то будут применены все операторы в группе.

Условные групповые правила определены в CSS Conditionals Level 3 и следующие:

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

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

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

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

[Базовый синтаксис | Псевдоклассы и псевдоэлементы | Каскадный порядок]

Правила

Селекторы

Любой элемент HTML является возможным селектором CSS1. Селектор — это просто элемент, связанный с определенным стилем. Например, селектор в

  P {text-indent: 3em}  

— это P .

Селекторы классов

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

  code.html {color: # 191970}
code.css {color: # 4b0082}  

В приведенном выше примере созданы два класса, css и html для использования с элементом HTML CODE . Атрибут CLASS используется в HTML для обозначения класса элемента, e.г. ,

  
 Для каждого селектора разрешен только один класс.
Например, code.html.pappeetary недействителен. 
  

Классы также могут быть объявлены без связанного элемента:

  .note {font-size: small}  

В этом случае класс note может использоваться с любым элементом.

Хорошая практика — называть классы в соответствии с их функцией , а не внешним видом .Класс note в приведенном выше примере можно было бы назвать small , но это имя стало бы бессмысленным, если бы автор решил изменить стиль класса так, чтобы у него больше не было маленького размера шрифта.

Селекторы ID

Селекторы идентификаторов назначаются индивидуально с целью определения для каждого элемента. Этот тип селектора следует использовать с осторожностью из-за присущих ему ограничений. Селектор идентификатора назначается с помощью индикатора «#» перед именем.Например, селектор идентификатора может быть назначен как таковой:

  # svp94O {text-indent: 3em}  

На это будет ссылаться в HTML атрибут ID :

  
 Текст с отступом 3em 
  

Контекстные селекторы

Контекстные селекторы — это просто строки из двух или более простых селекторов, разделенных пробелом. Этим селекторам могут быть назначены обычные свойства, и из-за правил каскадного порядка они будут иметь приоритет над простыми селекторами.Например, контекстный селектор в

  P EM {фон: желтый}  

— это P EM . Это правило гласит, что выделенный текст в абзаце должен иметь желтый фон; выделенный текст в заголовке не изменится.

Декларации

Недвижимость

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

Значения

Объявление значение — это присвоение, которое получает свойство. Например, свойство цвет может получить значение красный .

Группировка

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

  h2, h3, h4, h5, H5, H6 {
  красный цвет;
  font-family: sans-serif}  

Наследование

Практически все селекторы, вложенные в селекторы, наследуют значения свойств, присвоенные внешнему селектору, если иное не изменено.Например, цвет , определенный для BODY , также будет применен к тексту в абзаце.

В некоторых случаях внутренний селектор не наследует значения окружающего селектора, но они должны логически выделяться. Например, свойство margin-top не наследуется; интуитивно понятно, что у абзаца не будет такого же верхнего поля, как у тела документа.

Комментарии

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

.

  / * КОММЕНТАРИИ НЕ МОГУТ ВСТАВИТЬ * /  

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

Правила с псевдоклассами или псевдоэлементами принимают форму

  селектор: псевдокласс {свойство: значение}  

или

  селектор: псевдоэлемент {свойство: значение}  

Псевдоклассы и псевдоэлементы не должны указываться с атрибутом HTML CLASS . Нормальные классы могут использоваться с псевдоклассами и псевдоэлементами следующим образом:

  selector.class: псевдокласс {свойство: значение}  

или

  селектор.class: псевдоэлемент {свойство: значение}  

Якорь Псевдоклассы

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

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

  A: ссылка {цвет: красный}
A: активный {цвет: синий; font-size: 125%}
A: посетил {цвет: зеленый; font-size: 85%}  

Псевдоэлемент первой строки

Часто в газетных статьях, например, в Wall Street Journal , первая строка текста статьи отображается жирным шрифтом и заглавными буквами.CSS1 включил эту возможность как псевдоэлемент. Псевдоэлемент первой строки может использоваться в любом элементе уровня блока (например, P , h2 и т. Д.). Примером псевдоэлемента первой строки будет:

  П: первая линия {
  вариант шрифта: капители;
  font-weight: bold}  

Первая буква Псевдоэлемент

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

  P: первая буква {font-size: 300%; float: left}  

создаст буквицу в три раза больше обычного размера шрифта.

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

1. ! важный

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

     BODY {background: url (bar.gif) white;
          фон-повтор: повтор-х! important}  

2. Происхождение правил (Авторские vs.Читатель)

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

   Авторам следует опасаться использования ! важные правила , поскольку они отменяют любое из правил пользователя ! важные правила. Например, пользователю может потребоваться большой размер шрифта или специальные цвета из-за проблем со зрением, и такой пользователь, вероятно, объявит определенные правила стиля как ! important , поскольку некоторые стили жизненно важны для того, чтобы пользователь мог читать страницу.Любой ! важные правила будут иметь приоритет перед обычными правилами, поэтому авторам рекомендуется использовать обычные правила почти исключительно для того, чтобы пользователи с особыми требованиями стиля могли читать страницу.

3. Правила выбора: вычисление специфичности
   Таблицы стилей

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

   1. Подсчитайте количество атрибутов ID в селекторе.
   2. Подсчитайте количество атрибутов CLASS в селекторе.
   3. Подсчитайте количество имен тегов HTML в селекторе.

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

     # id1 {xxx} / * a = 1 b = 0 c = 0 -> специфичность = 100 * /
   UL UL LI.red {xxx} / * a = 0 b = 1 c = 3 -> специфичность = 013 * /
   LI.red {xxx} / * a = 0 b = 1 c = 1 -> специфичность = 011 * /
   LI {xxx} / * a = 0 b = 0 c = 1 -> специфичность = 001 * /
     

4. Порядок ТУ

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

[Базовый синтаксис | Псевдоклассы и псевдоэлементы | Каскадный порядок]

Индекс CSS ~
Структура CSS ~
Свойства CSS

Дом,
Форумы,
Справка,
Инструменты,
FAQs,
Статьи,
Дизайн,
Ссылки

Авторские права © 1996 — 2006.Все права защищены.

каскадных таблиц стилей, разработка для Интернета — Глава 2: CSS

Как мы объясняли в предыдущей главе, HTML
элементы позволяют дизайнерам веб-страниц размечать документ в соответствии с его
структура. В спецификации HTML приведены рекомендации о том, как браузеры
должны отображать эти элементы. Например, вы можете разумно
уверен, что содержимое крепкого
элемент будет выделен жирным шрифтом. Кроме того, вы можете в значительной степени
верьте, что большинство браузеров будут отображать содержимое элемента h2 с использованием большого размера шрифта… по меньшей мере
больше, чем элемент p и больше
чем элемент h3. Но вне доверия
и надеюсь, у вас нет никакого контроля над тем, как выглядит ваш текст.

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

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

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

Есть два способа создания CSS. Вы также можете
используйте обычный текстовый редактор и напишите таблицы стилей «вручную» или
вы можете использовать специальный инструмент — например, дизайн веб-страницы
приложение — которое поддерживает CSS. Специальные инструменты позволяют
создавать таблицы стилей без изучения синтаксиса CSS
язык.Однако во многих случаях дизайнер захочет настроить
таблицу стилей вручную, поэтому мы рекомендуем вам изучить
писать и редактировать CSS вручную. Давайте начнем!

 h2 {цвет: зеленый} 

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

Рисунок 2.1

Теперь приступим к анализу правила.

Анатомия правила

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

• Селектор — часть перед левой фигурной
  скоба

• Декларация — деталь внутри фигурной
  подтяжки

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

Вышеупомянутый селектор основан на типе элемента : он выбирает
все элементы типа «h2.» Этот
вид селектора называется типом
селектор . Любой тип элемента HTML может использоваться как тип
селектор. Селекторы типа — это простейший вид селекторов. Мы
обсудить другие виды селекторов в
См. CSS
селекторы. , «Селекторы CSS».

Анатомия декларации

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

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

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

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

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

Рисунок 2.2 Схема правила.

Селекторы и правила группировки

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

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

 h2 {font-weight: bold}
h3 {font-weight: bold}
h4 {font-weight: bold}
      

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

 h2, h3, h4 {font-style: bold} 

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

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

 h2 {цвет: зеленый}
h2 {text-align: center} 

В этом случае мы устанавливаем для всех h2 зеленый цвет и центрируем их на холсте. (Этот
выполняется с использованием выравнивания текста
собственность, обсуждаемая в
Глава
5.)

Но мы можем достичь того же эффекта быстрее, сгруппировав
объявления, которые относятся к тому же селектору, в список , разделенных точкой с запятой, , например
это:

 h2 {
  цвет: зеленый;
  выравнивание текста: центр;
} 

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

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

«Приклеивание» таблиц стилей к документу

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

1. Применить базовую таблицу стилей для всего документа
   для документа, используя стиль
   элемент.

2. Применение таблицы стилей к отдельному элементу
   используя атрибут стиля.
3. Свяжите внешнюю таблицу стилей с документом
   используя элемент ссылки.

4. Импортировать таблицу стилей с помощью CSS @import
   обозначение.

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

Склеивание с использованием элемента STYLE

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

 
  
  <СТИЛЬ>
    h2, h3 {цвет: зеленый}
   
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым
        композитор.Среди его работ:
    

      
 Вариации Гольдберга
      
 Бранденбургские концерты
      
 Рождественская оратория
    
    
 Историческая перспектива 
    
 Бах сочинил то, что было названо
      период барокко.
  
 

Рисунок 2.3.
результат добавления к таблице стилей правила, чтобы сделать h2s зеленым, а затем склеивания таблицы стилей
к документу, используя стиль
элементы.(попробуй)

Обратите внимание, что стиль
элемент помещается после заголовка
element и перед элементом body.
Заголовок документа не отображается на холсте, поэтому он
не зависит от стилей CSS.

Содержимое элемента стиля
таблица стилей. Однако в то время как содержание таких элементов, как
h2, p,
и ul появляется на холсте,
содержание элемента стиля не
показать на холсте.Скорее, это эффект
содержание элемента стиля —
таблица стилей — которая появляется на холсте. Значит, вы не видите «{
color: green} «на экране; вместо этого вы видите два
Элементы h2 окрашены в зеленый цвет. Без правил
были добавлены, которые влияют на любой из других элементов, поэтому те
элементы отображаются в цвете браузера по умолчанию.

Браузеры и 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

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

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

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

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

 
  
  <СТИЛЬ>
  
      h2 {цвет: зеленый}
  -> 
  
  <ТЕЛО>
    ..
  
 

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

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

 
  
  
  <ТЕЛО>
    ..
  
 

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

Чтобы примеры было легче читать, мы решили не оборачивать
таблицы стилей в комментариях HTML, но мы действительно используем атрибут type в этой книге.

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

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

Начнем с ознакомления с образцом документа:

 
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был
       плодовитый  композитор. Среди его
        работы:
    

      
 Вариации Гольдберга
      
 Бранденбургские концерты
      
 Рождественская оратория
    
  
 

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

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

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

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

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

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

Отмена наследования

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

Так как h2 - ребенок
элемент тела (и тем самым наследует
от тела), два правила в
приведенные выше таблицы стилей противоречат друг другу. Первый устанавливает цвет
элемент тела - и, следовательно, также
цвет h2 по наследству -
а второй устанавливает цвет специально для элемента h2. Какое правило победит? Давайте найдем
вне:

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

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

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

Свойства, не наследуемые

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

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

 
  
  <ТИП СТИЛЯ = "текст / css">
    ТЕЛО {
      фон: url (texture.gif) белый;
      черный цвет;
    }
  
  <ТЕЛО>
    
 
 домашняя  страница Баха 
    
 Иоганн Себастьян Бах был плодовитым
      композитор.
  
 

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

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

• Фоновое изображение покрывает поверхность как
обои - также были изменены фоны элементов h2 и p
покрытый. Это не из-за наследования, а из-за того, что
если не установлено иное, все фоны прозрачны. Итак, поскольку
мы не установили фон элемента h2 или p на
что-то еще, родительский элемент body будет просвечивать.
• Помимо URL-адреса изображения, цвет
  (белый) также указан в качестве фона. В случае если
  изображение не может быть найдено, вместо этого вы увидите цвет.

• Цвет элемента тела установлен на черный. Для обеспечения контраста
между текстом и фоном, хорошая привычка всегда
установите цвет , когда установлено свойство фона .

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

Общие задачи с CSS

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

Общие задачи: шрифты

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

 h2 {font: 36pt serif} 

Правило выше устанавливает шрифт для элементов h2. Первая часть стоимости -
36pt - устанавливает размер шрифта 36
точки."Точка" - это старая типографская единица измерения, которая
дожил до эпохи цифровых технологий. В следующей главе мы будем
расскажет, почему вам следует использовать единицу "em" вместо "pt", но для
теперь будем придерживаться пунктов. Вторая часть значения - serif - указывает браузеру использовать шрифт с
засечки (крючки на концах штрихов,
Глава 5
расскажу о них все). Более декорированные шрифты с засечками
хорошо подходят для домашней страницы Баха, поскольку современные шрифты без засечек
(шрифты без засечек) в его время не использовались.Здесь
результат:

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

 h2 {
  размер шрифта: 36pt;
  семейство шрифтов: с засечками;
  стиль шрифта: нормальный;
  шрифт: нормальный;
  вариант шрифта: нормальный;
  высота строки: нормальный;
} 

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

 UL {font-style: italic} 

Стиль шрифта
свойство не изменит размер шрифта или семейство шрифтов, оно
только наклонит существующий шрифт. При установке в элементе ul элементы li внутри станут наклонными, поскольку стиль шрифта наследуется. Здесь
результат при применении к тестовой странице, которую вы уже знаете:

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

 UL {
  стиль шрифта: курсив;
  font-weight: жирный;
}
      

Что дает:

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

Общие задачи: поля

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

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

 
  
  <ТЕЛО>
    
 Однажды вечером, когда Фредерик Великий был
      готовит свою флейту, и его музыканты
      были собраны, офицер принес ему
      список прибывших незнакомцев. С
      свою флейту в руке он пробежал по списку,
      но сразу обратился к собранным
      музыкантов, и сказал, с некоторой
      волнение:
    
 «Господа, старый Бах пришел."
    
    
 Флейта была отложена, и старый Бах, который
      высадился в квартире сына, немедленно
      вызвали во дворец.
  
 

На снимке экрана ниже показано, как типичный HTML-код
браузер отобразит документ:

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

 BLOCKQUOTE {
  маржа сверху: 1em;
  маржа справа: 0em;
  нижнее поле: 1em;
  маржа слева: 0em;
  стиль шрифта: курсив;
} 

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

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

 BLOCKQUOTE {
  маржа: 1em 0em 1em 0em;
  стиль шрифта: курсив;
} 

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

Если левое поле установлено на ноль, цитируемый текст требует большего
стиль, чтобы отделить его от остального текста.Параметр
font-style курсивом помогает, и добавление цвета фона дополнительно
усиливает цитату:

 BLOCKQUOTE {
  маржа: 1em 0em 1em 0em;
  стиль шрифта: курсив;
  фон: #EDB;
} 

Результат:

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

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

 BLOCKQUOTE {
  маржа: 1em 0em 1em 0em;
  стиль шрифта: курсив;
  фон: #EDB;
  отступ: 0.5em;
} 

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

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

Общие задачи: ссылки

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

 A: ссылка {text-decoration: underline} 

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

Ссылки подчеркнуты, как мы указали,
но они тоже синие, чего у нас нет. Когда авторы не
укажите все возможные стили, браузеры используют стили по умолчанию для заполнения
в промежутках.Взаимодействие авторских стилей, браузера
стили по умолчанию и пользовательские стили (собственные предпочтения пользователя):
еще один пример правил разрешения конфликтов CSS. Это называется
каскад («C» CSS). Мы обсудим каскад ниже.

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

 A: посетил {text-decoration: none} 

Это правило придает стиль посещенным ссылкам, как и
A: ссылка придала стиль непосещенным ссылкам.Вот немного более сложный пример:

 A: ссылка, A: посетил {text-decoration: none}
A: hover {background: cyan} 

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

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

Несколько слов о каскадировании

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

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

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

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

Введение в CSS 2.1

Введение в CSS 2.1

Этот раздел не является нормативным.

В этом уроке мы покажем, насколько легко можно создать простой дизайн.
таблицы стилей.Для этого урока вам нужно будет немного знать HTML.
(см. [HTML4]) и некоторую базовую терминологию настольных издательских систем.

Начнем с небольшого HTML-документа:

  <ГОЛОВА>
  
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым композитором.
  

 

Чтобы установить красный цвет текста элементов h2, вы можете написать
следующие правила CSS:

  h2 {цвет: красный}
 

Правило CSS состоит из двух основных частей: селектора ('h2') и объявления.
('красный цвет').В HTML имена элементов нечувствительны к регистру, поэтому
«h2» работает так же хорошо, как «h2». Декларация состоит из двух частей:
имя свойства («цвет») и значение свойства («красный»). Хотя приведенный выше пример пытается
влияет только на одно из свойств, необходимых для рендеринга HTML
документ, он сам по себе квалифицируется как таблица стилей. В сочетании с
другие таблицы стилей (одной из фундаментальных особенностей CSS является то, что стиль
листы объединены), правило будет определять окончательное представление
документ.

Спецификация HTML 4 определяет, как правила таблицы стилей могут быть
указывается для HTML-документов: либо внутри HTML-документа, либо через
внешняя таблица стилей.Чтобы поместить таблицу стилей в документ, используйте
элемент СТИЛЬ:

  <ГОЛОВА>
  
  <СТИЛЬ type = "текст / css">
    h2 {цвет: красный}
  
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым композитором.
  

 

Для максимальной гибкости мы рекомендуем авторам указывать
внешние таблицы стилей; они могут быть изменены без изменения
исходный HTML-документ, и они могут использоваться несколькими
документы.Чтобы создать ссылку на внешнюю таблицу стилей, вы можете использовать ССЫЛКУ
элемент:

  <ГОЛОВА>
  
  
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым композитором.
  

 

Элемент LINK определяет:

• тип ссылки: на «таблицу стилей».
• расположение таблицы стилей через атрибут «href».
• тип связываемой таблицы стилей: «text / css».

Чтобы показать тесную связь между таблицей стилей и
структурированной разметки, мы продолжаем использовать элемент СТИЛЬ в этом
руководство. Добавим еще цветов:

  <ГОЛОВА>
  
  <СТИЛЬ type = "текст / css">
    корпус {цвет: черный; background: white}
    h2 {цвет: красный; background: white}
  
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым композитором.

 

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

CSS 2.1 имеет более 90 свойств, включая «цвет». Давайте посмотрим на некоторые из
другие:

  <ГОЛОВА>
  
  <СТИЛЬ type = "текст / css">
    тело {
      семейство шрифтов: "Gill Sans", без засечек;
      размер шрифта: 12 пунктов;
      маржа: 3em;
    }
  
  
  <ТЕЛО>
    
 Домашняя страница Баха 
    
 Иоганн Себастьян Бах был плодовитым композитором.

 

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

Первое объявление элемента BODY устанавливает семейство шрифтов на
«Гилл Санс». Если этот шрифт недоступен, пользовательский агент (часто
обозначаемый как "браузер") будет использовать семейство шрифтов 'sans-serif'
который является одним из пяти общих семейств шрифтов, которые все пользователи используют
знать.Дочерние элементы BODY наследуют значение свойства font-family.

Второе объявление устанавливает размер шрифта элемента BODY равным
12 баллов. Единица "точка" обычно используется в типографике, основанной на печати.
для обозначения размеров шрифта и других значений длины. Это пример
абсолютная единица измерения, которая не масштабируется относительно окружающей среды.

Третье объявление использует относительную единицу, которая масштабируется с учетом
к его окрестностям. Единица "em" относится к размеру шрифта
элемент.В этом случае в результате поля вокруг ТЕЛА
элемент в три раза шире, чем размер шрифта.

Этот раздел не является нормативным.

CSS можно использовать с любым форматом структурированного документа, например
с приложениями расширяемого языка разметки [XML10]. В
Фактически, XML больше зависит от таблиц стилей, чем HTML, поскольку авторы могут
создают свои собственные элементы, которые пользовательские агенты не знают, как
отображать.

Вот простой фрагмент XML:

<СТАТЬЯ>
   Фредрик Великий встречает Баха 
   Иоганн Николаус Форкель 
  <ПАРА>
    Однажды вечером, когда он получал
     флейта  готов и его
    собрались музыканты, офицер принес ему список
    пришедшие незнакомцы.