aw CSS (Каскадные таблицы стилей) » Ua-Arts - Уроки дизайна в фотошопе в Украине, уроки веб-дизайна по фотошопу. Как рисовать в фотошопе. Всё о дизайне. Сайт о фотошопе в Украине.



CSS (Каскадные таблицы стилей)
Автор: ykiigor, Дата: 5 июля 2008, Категория: Статьи / Языки программированния
CSS как важная часть работы Web-дизайнера

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

  1. Обзор

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

    CSS при отображении страницы может быть взята из различных источников:
    • Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
      — Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
      — Встроенных стилей — блоков CSS внутри самого HTML-документа.
      — Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

    • Пользовательские стили
      — Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

    • Стиль браузера
      — Стандартный стиль, используемый браузером по умолчанию для представления элементов.


    Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

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

    Схематически это можно показать так:
    селектор, селектор {
      свойство: значение;
      свойство: значение;
      свойство: значение;
    }


    Например:
    p {
      font-family: "Garamond", serif;
    }
    h2 {
      font-size: 110 %;
      color: red;
      background: white;
    }
    .note {
      color: red;
      background: yellow;
      font-weight: bold;
    }
    p#paragraph1 {
      margin: 0;
    }
    a:hover {
      text-decoration: none;
    }
    #news p {
      color: blue;
    }


    Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

    В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

    Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:
    <p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>


    Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

    Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

    Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

  2. CSS-вёрстка

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

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

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

    • Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

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

  3. История

    CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

    • Уровень 1 (CSS1)

      Рекомендация W3C принята 17 декабря 1996, откорректирована 11 января 1999. Среди возможностей, предоставляемых этой рекомендацией были:
      Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
      Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
      Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
      Выравнивание для текста, изображений, таблиц и других элементов.
      Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
      И другое…


    • Уровень 2 (CSS2)

      Рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.

      Добавление к функциональности:
      Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки
      Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК)
      Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта)
      Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати
      Расширенный механизм селекторов
      Указатели
      Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента
      И другое…


    • Уровень 2.1 (CSS2.1)

      Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.


    • Уровень 3 (CSS3)

      Рабочая версия.


  4. Включение в HTML

    CSS можно включать в HTML четырьмя способами:
    • Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):
      <link rel="stylesheet" type="text/css" href="style.css">

    • Еще один способ подключить CSS, находящиеся в отдельном файле:
      <style type="text/css" media="all">@import "style.css";</style>

    • Непосредственно в HTML-документе:
      <style type="text/css">
          body {
              color: red;
          }
      </style>

    • Непосредственно в элемент:
      <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>


    XHTML

    Для включения CSS в XML существует ещё один способ:
    <?xml-stylesheet href="style.css" type="text/css"?>


  5. Поддержка браузерами

    Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS но всё ещё содержит значительное количество ошибок.

    Для проверки поддержки браузером различных частей стандарта CSS был разработан тест «Acid». Его вторая версия называется «Acid2».

    Различные блоковые модели

    В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

    В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing, со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

    В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием -moz-box-sizing, ввели еще одно значение — padding-box, таким образом создав третью блочную модель, в которой width это размер содержимого и отступов блока, не включая рамки.

    [править]
    CSS-фильтры

    Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:
    /* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
    #someblock { width: 80px; padding: 10px; }
    /* Следующее правило применит только IE6. */
    * html #someblock { width: 100px; padding: 10px; }


    Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.
Источник: ВикипедиЯ
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.




Реклама от партнеров: