CSS
- 1 year ago
- 0
- 0
CSS ( /siːɛsɛs/ англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декорирования и описания внешнего вида документа ( веб-страницы ), написанного с использованием языка разметки (чаще всего HTML или XHTML ). Также может применяться к любым XML-документам , например, к SVG или XUL .
CSS используется создателями веб-страниц для задания цветов , шрифтов , стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки ) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля [ источник не указан 1565 дней ] .
Правила CSS могут располагаться как в самом
веб-документе
, внешний вид которого они описывают, так и во внешних
файлах
, имеющих
расширение
.css
. Формат CSS — это
текстовый файл
, в котором содержится перечень правил CSS и комментариев к ним.
Стили CSS могут быть подключены или внедрены в описываемый ими
веб-документ
четырьмя способами:
<link>
, включённого в элемент
<head>
:
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" 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: blue;
}
p.note > b {
color:green;
}
.div {
border: 1px solid red;
padding-left: 20px;
}
.title {
font-size: 20px;
background-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, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
a
,
b
,
c
,
d
:
style="..."
, то
а=1
, иначе
a=0
) ;
b
равно количеству идентификаторов (иначе — id=" ", они начинаются с
#
) в селекторе;
c
равно количеству классов (class=" ", они начинаются с
.
), псевдоклассов (они начинаются с
:
, например
a:hover
) и селекторов атрибутов (
input[type="text"
);
d
равно количеству селекторов типов элементов (
h1 { color: blue; }
) и псевдокод-элементов (
p::first-line { color: blue; }
). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
Селектор | a, b, c, d | Число |
---|---|---|
span | 0, 0, 0, 1 | 1 |
div .class | 0, 0, 1, 1 | 11 |
#id .class | 0, 1, 1, 0 | 110 |
div span | 0, 0, 0, 2 | 2 |
.class | 0, 0, 1, 0 | 10 |
#id span | 0, 1, 0, 1 | 101 |
!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 — это типичный случай селектора потомков, см.
).
type
равен
button
. Например, это правило будет применено к элементу
<input type="button">
или
<button type="button">Кнопка</button>
(обычная кнопка), изменив его цвет фона на зелёный.
До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML , непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
Недостатки:
CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web» . В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML , и стандарт CSS.
В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин «каскадные таблицы стилей» был предложен Хоконом Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.
В середине 1990-х Консорциум Всемирной паутины ( W3C ) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
Рекомендация W3C, принята 17 декабря 1996 года , откорректирована 11 января 1999 года . Среди возможностей, предоставляемых этой рекомендацией:
padding
) и внешние (
margin
) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как
float
и
clear
.
Рекомендация W3C, принята 12 мая 1998 года . Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1
Рекомендация W3C, принята 7 июня 2011 года .
CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые [ какие? ] и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3.
CSS3 ( англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения ) — активно разрабатываемая спецификация CSS . Представляет собой формальный язык , реализованный с помощью языка разметки . Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS , поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.
Преимущественно используется как средство описания и оформления внешнего вида веб-страниц , написанных с помощью языков разметки HTML и XHTML , но может также применяться к любым XML-документам , например, к SVG или XUL .
Разрабатываемая версия (список всех модулей) .
В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.
Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией ( анимацией ) и, возможно, введением переменных .
Разрабатывается W3C с 29 сентября 2011 года .
Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).
Например:
Наиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko ( Mozilla Firefox и др.), WebKit ( Safari , Arora , Google Chrome ) и Presto (Opera) браузеры.
Бывший самый распространённый браузер Internet Explorer 6 поддерживает CSS не полностью .
Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS , но всё ещё содержал значительное количество ошибок .
В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3 .
Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта 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
селектор
(фильтр, известный как «
»). Чтобы блоковая модель 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) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя .
CSS Framework (также Web design framework ) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.
Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах.
Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
Примеры расширений (препроцессоров) CSS: