Для чего нужны таблицы стилей?

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

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

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

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

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

С помощью CSS эти проблемы можно решить.

Способы применения CSS

Существует три способа применения таблиц стилей:

    Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.
    Пример HTML:

    Пример CSS:

    Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.
    При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.

    Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе.
    Для этого используется тег

    Тэг

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

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

    ,

    ,

    И . Каждое определение называется правилом (rulе). Правило содержит селектор (тэг HTML), за которым следует декларация (определение стиля). Селектор является связующим звеном между определением и тэгом. Ниже приведен пример правила, указывающего стиль для каждого из тэгов заголовка

    :

    H1 (color: blue}

    Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и присваиваемое ему значение, разделенные двоеточием. В HTML включены десятки свойств (font-size, font-style, color, margin-right и т. д.), о которых будет рассказано ниже. Каждое свойство может принимать несколько значений, одно из которых приписывается ему по умолчанию.

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

    HI {color: blue; font-size: 12pt; text-line: center}

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

    Если необходимо определить один и тот же стиль для нескольких тэгов, можно перечислить их в отдельном списке:

    Р (font-size: 12pt}
    UL {font-size: 12pt}
    LI {font-size: 12pt}

    HTML позволяет сделать то же самое и в более компактном виде - в одной строке:

    Р, UL, LI (font-size: 12pt}

    Запятая здесь является обязательным элементом. Если она опущена, смысл правила изменится (см. раздел " " ниже в этой главе).

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

    BODY {margin-left: lin} /* Отступ на 1 дюйм */
    H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */
    Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */

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

    В таблице приведен обзор свойств таблиц стилей HTML.. В колонке "Категория" показано, может ли то или иное свойство объединяться в группу с другими свойствами. В третьей колонке приведены сведения о том, наследуется или нет свойство подчиненными тэгами (о наследовании свойств см. раздел " ").

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

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

      , то это фон будет только у тэгов
        всей страницы:

        U L {background-image: URL(http://www.myserver.com/images/watermark.gif)}

        Рекомендации W3C дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств:

        • border - используются для определения рамки, расположенной слева, справа, сверху и снизу от элемента. Можно устанавливать ширину, цвет и стиль рамки.

        • margin - используются для определения полей, расположенных слева, справа, сверху и снизу от элемента. Можно также устанавливать ширину полей.

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

        Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image).

        Свойства списков наследуются, т. е. если определено свойство в тэге

          , оно будет действительно для всех тэгов
        • контейнера UL .

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

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

          H1 (font-weight: bold; font-style: normal; font-size: 12pt; font-family: serif)

          можно записать более краткую формулировку:

          H1 (font: bold normal 12pt serif}

          Таблицы стилей HTML позволяют группировать свойства border, background, font, list, margin и padding. Рассмотрим каждую из групп в отдельности.

          Группа свойств border

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

          border-top, border-right, border-bottom И border-left, либо определить всю рамку сразу при помощи border.

          С каждым из этих свойств можно указать ширину, стиль и цвет рамки, например:

          b order-top: thin dotted black

          Группа свойств background

          В группе свойств background можно указать значения для color, image, repeat, attachment и position, например:

          background: white URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left

          Группа свойств font

          Группе font можно дать значения weight, style, size и family, например:

          font: bold normal 12pt times, serif

          Группа свойств list

          Свойства группируются при помощи свойства list-style. Возможно указание изображения для маркера, типа и позиции маркера, например:

          list-style: square URL(http://www.myserver.com/images/marker.gif) inside

          Группа свойств margin

          Группе margin можно определить ширину для каждого из полей top, right, bottom и left, например:

          margin: .5in 1in .5in 1in

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

          Группа свойств padding

          В Группе padding можно указать значения для top, right, bottom и left, например:

          padding: .25in .25in .25in .25in

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

          В HTML подчиненные тэги наследуют некоторые свойства родительских тэгов. Например, все тэги контейнера (< P > и

            ) будут обладать некоторыми свойствами тэга . Точно так же тэг
          • наследует свойства тэга
              . Рассмотрим следующий код:



              Hello. This is a paragraph of text. This is emphasized

              Таблица стилей этого документа устанавливает цвет в тэге

              < P > синим, однако, цвет для тэга явно не определен (по умолчанию - это черный цвет). Здесь не о чем беспокоиться, так как этот тэг находится в родительском контейнере

              И наследует таким образом синий цвет.

              Иногда возникает необходимость определения двух (и более) стилей для одного тэга. Например, может понадобиться указание двух стилей для тэга

            • : один для случая, когда он подчинен тэгу

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

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

                • только в том случае, если этот тэг является подчиненным тэгу
                    :

                    OL LI (list-style-type: decimal}

                    Для того же тэга

                  1. можно определить другой стиль, действительный только в случае подчиненности тэгу
                      :

                      UL LI {list-style-type: square}

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

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

                      Kак это работает? Каждому правилу браузер приписывает весовой коэффициент. При интерпретации каждого тэга программа просматривает все правила этого тэга и сортирует их по величине весового коэффициента. Выигрывает самое "весомое" правило.

                      Существуют следующие общие принципы разрешения конфликтов между таблицами стилей:

                        Старшинство типов таблиц стилей в документе (по убыванию): текущее задание стиля (inline), встраивание (embedding), связывание (linking).

                      Также можно изменить весовой коэффициент правила при помощи служебного слова important. В следующем примере значение red свойства

                      color и значение sans-serif свойства font-family помечены этим служебным словом, и поэтому программа просмотра не должна их переопределять. Однако если вступают в конфликт два таких правила, противоречие решается согласно принципам, изложенным выше.

                      H1 (color: red ! important font-weight: bold font-family: sans-serif ! important}

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

                      H1 blue (color: blue} H1 .red (color: red} H1 .black (color: black}

                      Теперь, включая в документ тэг

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

                      Red Heading