Каскадные таблицы стилей
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки.
Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
Обзор
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
CSS при отображении страницы может быть взята из различных источников:
- Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
- Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
- Встроенных стилей — блоков CSS внутри самого HTML-документа.
- Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте
style
.
- Пользовательские стили
- Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
- Стиль браузера
- Стандартный стиль, используемый браузером по умолчанию для представления элементов.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
Схематически это можно показать так:
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Приоритеты рассчитываются таким образом (от большего к меньшему):
- свойство задано при помощи
!important
? - стиль прописан напрямую в теге?
- количество идентификаторов (
#id
) в селекторе (чем больше, тем больше приоритет); - количество классов (
.class
) и псевдоклассов (:pseudoclass
) в селекторе; - количество имён тегов в селекторе;
Кроме того, имеет значение относительный порядок расположения свойств — свойство, указанное позже, имеет приоритет.
Пример таблицы стилей:
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-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.
История
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web».[1] В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.
В начале 1990-х различные браузеры имели свои стили для отображения веб страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
В середине 1990-х Концорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Уровень 1 (CSS1)
Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года.[2] Среди возможностей, предоставляемых этой рекомендацией:
- Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
- Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
- Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
- Выравнивание для текста, изображений, таблиц и других элементов.
- Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
Уровень 2 (CSS2)
Рекомендация W3C, принята 12 мая 1998 года.[3] Построена на CSS1 с сохранением обратной совместимости. Добавление к функциональности:
- Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
- Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
- Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
- Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
- Расширенный механизм селекторов.
- Указатели.
- Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
Уровень 2.1 (CSS2.1)
Рабочая версия W3C от 8 сентября 2009 года.[4] Построена на CSS2, содержит исправления ошибок.
Уровень 3 (CSS3)
Рабочая версия.
Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.[источник не указан 5337 дней]
Включение в 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>
XML
Для включения CSS в XML существует ещё один способ:
<?xml-stylesheet href="style.css" type="text/css"?>
Поддержка браузерами
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera.[5]
Бывший когда-то самым распространённым браузером[6] Internet Explorer 6 поддерживает CSS далеко не полностью[7].
Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS[8][9], но всё ещё содержит значительное количество ошибок[10].
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.[11]
Для проверки поддержки браузером различных частей стандарта 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 являются условные комментарии.
См. также
Примечания
- ↑ Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.
- ↑ http://www.w3.org/TR/CSS1
- ↑ http://www.w3.org/TR/CSS2
- ↑ http://www.w3.org/TR/CSS21
- ↑ Web browser standards support
- ↑ Mozilla’s Firefox global usage share is still growing according to OneStat.com
- ↑ Contents and browser compatibility
- ↑ Details on our CSS changes for IE7 IEBlog
- ↑ Cascading Style Sheet Compatibility in Internet Explorer 7 MSDN
- ↑ The weird and wonderful world of Internet Explorer
- ↑ CSS Compatibility and Internet Explorer MSDN
Литература
- Кристофер Шмитт. 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
Ссылки
- Описание CSS(англ.) на официальном сайте W3C
- Демонстрация возможностей CSS-вёрстки(англ.)
- Таблицы поддерживаемых браузерами возможностей CSS(англ.)
- Различные блоковые модели CSS(англ.)
- Валидатор CSS(англ.)
- CSS3 Preview — Демонстрация новых возможностей CSS3(англ.)
- Русскоязычные
- Изучайте CSS(рус.) Рекомендован w3.org
- Cascading Style Sheets home page (перевод статьи W3C)
Стандарты Консорциума Всемирной паутины |
|
---|---|
Рекомендации | CDF • CGI • CSS • DOM • HTML • LOGML • MathML • OWL • RDF • RDF Schema • SISR • SMIL • SOAP • SRGS • SSML • SVG • Timed Text • VoiceXML • WSDL • XForms • XHTML • XInclude • XML • XML Base • XML Events • XML Information Set • XML Schema • XPath • XPointer • XQuery • XSL • XSL-FO • XSLT • XLink |
Примечания | XHTML+SMIL |
Рабочие проекты | CCXML • CURIE • InkML • XFrames • XFDL • WICD • XHTML+MathML+SVG |
См. также | WHATWG |
ar:صفحات الطرز المتراصة az:CSS bat-smg:CSS bg:CSS bs:CSS ca:Cascading Style Sheets cs:Cascading Style Sheets cy:Cascading Style Sheets da:CSS de:Cascading Style Sheets el:CSS en:Cascading Style Sheets eo:CSS es:Hojas de estilo en cascada et:CSS eu:CSS fa:الگوهای آبشاری fi:Cascading Style Sheets fr:Feuilles de style en cascade ga:Stílbhileoga cascáideacha gd:CSS gl:CSS he:גיליונות סגנון מדורגים hr:CSS hsb:CSS hu:CSS id:Cascading Style Sheets is:Cascading Style Sheets it:Fogli di stile a cascata ja:Cascading Style Sheets ka:CSS km:Cascading Style Sheets ko:CSS la:CSS lt:CSS lv:CSS ml:കാസ്കേഡിങ്ങ് സ്റ്റൈൽ ഷീറ്റ്സ് ms:Cascading Style Sheets nl:Cascading Style Sheets nn:Stilark no:Cascading Style Sheets pl:Kaskadowe arkusze stylów pt:Cascading Style Sheets ro:Cascading Style Sheets simple:Cascading Style Sheets sk:Kaskádové štýly sl:CSS sq:Fletat e Stileve të Shkallëzuar sr:CSS sv:Cascading Style Sheets ta:விழுத்தொடர் பாணித் தாள்கள் th:แคสเคดดิงสไตล์ชีตส์ tk:CSS tr:Stil şablonları uk:CSS vi:CSS zh:CSS
Если вам нравится SbUP.com Сайт, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....