CSS | |
---|---|
|
|
Разработчик | CSS Working Group[d] |
Опубликован | 17 декабря 1996 |
Тип формата | Язык стилей |
Стандарт(ы) |
Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Recommendation) |
Сайт |
w3.org/Style/CSS/ drafts.csswg.org |
CSS (/kaːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Правила CSS пишутся на формальном языке CSS. Правила могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих формат CSS. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Cтили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:
<link>
, включенного в элемент <head>
:<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" href="style.css">
</head>
<body>
.....
</body>
</html>
<style>
:<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
<style>
, который, включается в элеменет <head>
:<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>
В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.
Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей:
<?xml-stylesheet type="text/css" href="style.css"?>
В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, до знака «{», определяет, на какие части документа (возможно, специально обозанченные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком ": ". Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения CSS к документу (см. список) правило CSS,. являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
* {
margin: 0;
padding: 0;
}
p {
font-family: arial, helvetica, sans-serif;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
#paragraph1 {
margin: 0;
}
a[href="http://www.somesite.com"] {
font-weight: bold;
}
div#paragraph1 p.note {
color: red;
}
p.note > b {
color: red;
}
h1 + p {
font-size: 24px;
}
a:active {
color: blue;
}
p::first-letter {
font-size: 32px;
}
Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Селекторы классов и идентификаторов
</title>
<style>
p.big {
font-family: arial, helvetica, sans-serif;
color: red;
}
div#first {
background-color: silver;
}
</style>
</head>
<body>
<div id="first">
<!-- Это div c серым фоном, стилизованный по id -->
</div>
<p class="big">
<!-- Это текст красного цвета -->
</p>
</body>
</html>
Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.
Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.
Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.», например, «.big») или свойство идентификатора самого по себе (в таком случае селектор начинается с «#», например, «#first»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS объявленные для элементов-предков, почти всегда,наследуются элементами-потомками.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
#id
) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);.class
), атрибутов ([attr], [attr="value"]
) и псевдоклассов (:pseudo-class
) в селекторе — ((0,1,0) за каждый объявленный класс, атрибут и псевдокласс в селекторе правила CSS);h1, input
) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый объявленный элемент и псевдоэлемент в селекторе правила CSS).!important
. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным автором или пользователем, а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами <style>
и размещена в «шапке» той самой веб-страницы, на которую она действует):
p {
font-family: arial, helvetica, sans-serif;
}
h2 {
font-size: 20pt;
color: red;
background: white;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
p#paragraph1 {
padding-left: 10px;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
[type="button"] {
background-color: green;
}
Здесь приведено семь правил CSS с селекторами p
, h2
, .note
, p#paragraph1
, a:hover
, #news p
и [type="button"]
.
p
(абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.h2
(заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером.class
которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
p
, атрибут id
которого равен paragraph1
. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).a
— гиперссылок. По умолчанию, в большинстве браузеров текст элементов a
подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами.p
, которые находятся внутри какого-либо элемента с атрибутом id
, равным «news
» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).type
равен button
. Например, это правило будет применено к элементу <input type="button">
или <button type="button">Кнопка
</button>
(обычная кнопка), изменив его цвет фона на зелёный.
До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
Недостатки:
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»[1]. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.
В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.
В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года[2]. Среди возможностей, предоставляемых этой рекомендацией:
padding
) и внешние (margin
) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как float
и clear
.Рекомендация W3C, принята 12 мая 1998 года[3]. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1
Рекомендация W3C, принята 7 июня 2011 года.
CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые и вовсе удалены. Удаленные части могут быть в будущем добавлены в CSS3.
CSS3 (англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS[4], поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.
Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Разрабатываемая версия (список всех модулей)[5].
В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.
Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных[6][7].
Разрабатывается W3C с 29 сентября 2011 года.[8][9]
Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).
Например:
Наиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)[10] браузеры.
Бывший самый распространённый браузер[11] Internet Explorer 6 поддерживает CSS не полностью[12].
Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS[13][14], но всё ещё содержал значительное количество ошибок[15].
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3[16].
Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест Acid.
В стандартах 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-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что 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 являются условные комментарии.
Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя [17].
CSS Framework (также Web design framework) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. В стандартном CSS нет возможностей наследования стилей, вычисляемых значений и прочих зависимостей.
Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
Примеры расширений (препроцессоров) CSS:
Данная страница на сайте WikiSort.ru содержит текст со страницы сайта "Википедия".
Если Вы хотите её отредактировать, то можете сделать это на странице редактирования в Википедии.
Если сделанные Вами правки не будут кем-нибудь удалены, то через несколько дней они появятся на сайте WikiSort.ru .