|
CSS
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декодирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL. ОбзорИспользование CSSCSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля[источник не указан 1864 дня]. Способы подключения CSS к документуПравила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих расширение
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
.....
</body>
</html>
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
<!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 к документу (см. список) правило 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.Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками. Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
Пример таблицы стилейПример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами 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 с селекторами
CSS-вёрсткаДо появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления. Преимущества:
Недостатки:
История создания и развития CSS CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»[2]. В 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 года[3]. Среди возможностей, предоставляемых этой рекомендацией:
Уровень 2 (CSS2)Рекомендация W3C, принята 12 мая 1998 года[4]. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1 Уровень 2, ревизия 1 (CSS2.1)Рекомендация W3C, принята 7 июня 2011 года. CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые[какие?] и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3. Уровень 3 (CSS3) ● Рекомендация ● Кандидат в рекомендации ● Последнее требование ● Рабочий проект CSS3 (англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS[5], поддержка линейных и радиальных градиентов, теней, сглаживания и прочее. Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. Разрабатываемая версия (список всех модулей)[6]. В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые. Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных[7][8]. Уровень 4 (CSS4)Разрабатывается W3C с 29 сентября 2011 года[9][10]. Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft). Например:
Поддержка CSS браузерамиНаиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)[11] браузеры. Бывший самый распространённый браузер[12] Internet Explorer 6 поддерживает CSS не полностью[13]. Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS[14][15], но всё ещё содержал значительное количество ошибок[16]. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3[17]. Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест Acid. Различные блоковые моделиВ стандартах CSS от Консорциума W3C используется модель, в которой свойство В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием CSS-фильтрыРазличия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида /* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock { width: 80px; padding: 10px; }
/* Следующее правило применит только IE6. */
* html #someblock { width: 100px; padding: 10px; }
Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии. БезопасностьВсе поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя[18]. CSS FrameworkCSS Framework (также Web design framework) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет. Расширения CSSЧасто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах. Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
Примеры расширений (препроцессоров) CSS: См. такжеПримечания
Литература
СсылкиАнглоязычные ресурсы
Русскоязычные ресурсы
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
