CSS: различия между версиями

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
Интерактивная навигация по истории
[отпатрулированная версия][непроверенная версия]
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
м ← Откат правок 93.84.41.98 (обс) к версии Sh nick
Строка 162: Строка 162:


== Поддержка браузерами ==
== Поддержка браузерами ==
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на [[Gecko]] ([[Mozilla Firefox]] и др.) и [[WebKit]] ([[Arora]], [[Google Chrome]], [[Safari]]), а также браузер [[Opera]]<ref>[http://www.webdevout.net/browser-support-summary webdevout.net:Web browser standards support]</ref>. К сожалению, самый распространенный на данный момент браузер<ref>[http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html OneStat.com:Mozilla's Firefox global usage share is still growing according to OneStat.com]</ref> [[Internet Explorer]] 6 поддерживает CSS далеко не полностью<ref>[http://www.quirksmode.org/css/contents.html QuirksMode.org:Contents and browser compatibility]</ref>. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS<ref>[http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx IEBlog:Details on our CSS changes for IE7]</ref><ref>[http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx MSDN:Cascading Style Sheet Compatibility in Internet Explorer 7]</ref>, но всё ещё содержит значительное количество ошибок<ref>[http://www.positioniseverything.net/explorer.html PositionIsEverything.net:The weird and wonderful world of Internet Explorer]</ref>. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично - CSS 3 <ref>[http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx MSDN - CSS Compatibility and Internet Explorer]</ref>.
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на [[Gecko]] ([[Mozilla Firefox]] и др.) и [[WebKit]] ([[Arora]], [[Google Chrome]], [[Safari]]), а также браузер [[Opera]]<ref>[http://www.webdevout.net/browser-support-summary webdevout.net:Web browser standards support]</ref>.
К сожалению, самый распространенный на данный момент браузер<ref>[http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html OneStat.com:Mozilla's Firefox global usage share is still growing according to OneStat.com]</ref> [[Internet Explorer]] 6 поддерживает CSS далеко не полностью<ref>[http://www.quirksmode.org/css/contents.html QuirksMode.org:Contents and browser compatibility]</ref>.
Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS<ref>[http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx IEBlog:Details on our CSS changes for IE7]</ref><ref>[http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx MSDN:Cascading Style Sheet Compatibility in Internet Explorer 7]</ref>, но всё ещё содержит значительное количество ошибок<ref>[http://www.positioniseverything.net/explorer.html PositionIsEverything.net:The weird and wonderful world of Internet Explorer]</ref>.
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3 <ref>[http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx MSDN - CSS Compatibility and Internet Explorer]</ref>.


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


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

Версия от 12:15, 10 сентября 2009

Запрос «CSS» перенаправляется сюда; Но у этой аббревиатуры могут быть и другие значения см. CSS (значения).

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

HTML

Обзор

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».

CSS-вёрстка

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

Преимущества CSS вёрстки:

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

Недостатки CSS верстки:

  • Различное отображение верстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
  • Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги html и код php, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

История

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

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

Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 90х Концорциум Всемирной Паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Уровень 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)

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

Включение в 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"?>

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

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera[2]. К сожалению, самый распространенный на данный момент браузер[3] Internet Explorer 6 поддерживает CSS далеко не полностью[4]. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS[5][6], но всё ещё содержит значительное количество ошибок[7]. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3 [8].

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

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

В стандартах 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 являются условные комментарии.

См. также

Примечания

  1. ↑ Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.
  2. ↑ webdevout.net:Web browser standards support
  3. ↑ OneStat.com:Mozilla's Firefox global usage share is still growing according to OneStat.com
  4. ↑ QuirksMode.org:Contents and browser compatibility
  5. ↑ IEBlog:Details on our CSS changes for IE7
  6. ↑ MSDN:Cascading Style Sheet Compatibility in Internet Explorer 7
  7. ↑ PositionIsEverything.net:The weird and wonderful world of Internet Explorer
  8. ↑ MSDN - CSS Compatibility and Internet Explorer

Ссылки

Англоязычные

Русскоязычные

Литература

  • Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. — СПб.: «БХВ-Петербург», 2007. — С. 592. — ISBN 978-5-9775-0075-3.
  • Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. — М.: «Вильямс», 2007. — С. 272. — ISBN 1-59059-614-5.
  • Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство = Cascading Style Sheets: The definitive Guide. — М.: «Символ», 2006. — С. 576. — ISBN 5-93286-075-8.
  • Расс Уикли. Освой самостоятельно CSS. 10 минут на урок = Sams Teach Yourself CSS in 10 Minutes. — М.: «Вильямс», 2006. — С. 256. — ISBN 0-672-32745-7.
Источник — https://ru.wikipedia.org/ruwiki/w/index.php?title=CSS&oldid=18354674