CSS

Ошибка скрипта: Модуля «hatnote» не существует.{{#if: | }} Шаблон:Файловый формат Шаблон:Боковая навигационная таблица CSS (англ. Шаблон:Lang-en2 «каскадные таблицы стилей») — формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.

Обзор

Использование CSS

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

Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля Шаблон:Нет АИ.

Способы подключения CSS к документу

Правила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних файлах, имеющих расширение .css. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.
Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:

когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента Шаблон:Tago, включённого в элемент Шаблон:Tago:

  <head>
     .....
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
     .....
  </body>

</html> </source>

когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементеШаблон:Tago:

  <head>
     .....
     <style media="all">
        @import url(style.css);
     </style>
  </head>

</html> </source>

когда стили описаны внутри документа, они могут быть включены в элемент Шаблон:Tago, который, включается в элемент Шаблон:Tago:

  <head>
     .....
     <style>
        body { 
           color: red;
        }
     </style>
  </head>
  <body>
     .....
  </body>

</html> </source>

когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента

  <head>
     .....
  </head>
  <body>

.....

  </body>

</html> </source>

В первых двух случаях к документу применены внешние стили, а во вторых — внутренние стили.

Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей: <source lang="xml">

 <?xml-stylesheet type="text/css" href="style.css"?>

</source>

Правила построения CSS

В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{», определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. <source lang="css"> селектор, селектор {

 свойство: значение;
 свойство: значение;
 свойство: значение;

} </source> В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».

Виды селекторов

Универсальный селектор

{

  margin: 1; 
  padding: 1;

} </source>

Селектор тегов

<source lang="css"> p {

  font-family: arial, helvetica, sans-serif;

} </source>

Селектор классов

<source lang="css"> .note {

  color: red; 
  background-color: yellow; 
  font-weight: bold;

} </source>

Селектор идентификаторов

paragraph1 {

   margin: 0;

} </source>

Селектор атрибутов

<source lang="css"> a[href="http://www.somesite.com"] {

  font-weight: bold;

} </source>

Селектор потомков (контекстный селектор)

<source lang="css"> div#paragraph1 p.note {

  color: blue;

} </source>

.card {

 width: 420px;            /* можно изменить под размер картинки */
 margin: 0 auto;          /* центр по странице */
 text-align: center;      /* подпись по центру под картинкой */
 font-family: 'Comic Neue', cursive; /* или 'Luckiest Guy', cursive */
 background: linear-gradient(180deg, #f9e4e4 0%, #ffe6e6 100%);
 padding: 14px;
 border-radius: 14px;
 box-shadow: 0 6px 18px rgba(10, 25, 47, 0.08);

}

.card img {

 width: 100%;
 border-radius: 12px;
 display: block;

}

.caption {

 margin-top: 12px;
 font-weight: bold;
 font-size: 22px;        /* размер шрифта для подписи */
 color: #e84a26;         /* теплый оттенок */
 letter-spacing: 0.2px;

}

.elo {

 font-family: ui-monospace, 'Courier New', monospace; /* моноширинный шрифт для ELO */

}

Селектор элементов одного уровня

<source lang="css"> h1 + p {

  font-size: 24px;

} </source>

Селектор псевдоклассов

<source lang="css"> a:active {

  color: blue;

}

</source>

Селектор псевдоэлементов

<source lang="css"> p::first-letter {

  font-size: 32px;

} </source>

Классы и идентификаторы элементов

Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:

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

  </body>

</html> </source>Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе. Файл:UserCSS хочу поменять дизайн чужого сайта, на примере gpo.zugaina.org.webm Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

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

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками.

Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.

Наиболее низким приоритетом обладает стиль браузера;
Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
- Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
- Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
- Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел "виды селекторов"), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже.
  - Специфичность селекторов делится на 4 группы — 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; }). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.
  - Таблица расчёта специфичностиШаблон:Sfn:

Селектор	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, либо же обрамлена тегами Шаблон:Tago и размещена в «шапке» той самой веб-страницы, на которую она действует): <source lang="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;

} </source> Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].

Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.
Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером.
Третье правило будет применено к любому элементу, атрибут class которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p>
Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).
Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию в большинстве браузеров текст элементов a подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами.
Шестое правило применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).
Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button">или <button type="button">Кнопка</button> (обычная кнопка), изменив его цвет фона на зелёный.

CSS-вёрстка

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

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

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

Недостатки:

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

История создания и развития CSS

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»<ref name="shea">Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина. — М.: НТ Пресс, 2005. — 312 с.: ил.</ref>. В 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 года<ref>Шаблон:Cite web</ref>. Среди возможностей, предоставляемых этой рекомендацией:

Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (Шаблон:Code) и внешние (Шаблон:Code) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как Шаблон:Code и Шаблон:Code.

Уровень 2 (CSS2)

Рекомендация W3C, принята 12 мая 1998 года<ref>Шаблон:Cite web</ref>. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Расширенный механизм селекторов.
Указатели.
Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

Уровень 2, ревизия 1 (CSS2.1)

Рекомендация W3C, принята 7 июня 2011 года.

CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторыеШаблон:Какие и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3.

Уровень 3 (CSS3)

CSS3 (англ. Шаблон:Lang-en2 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS<ref>Шаблон:Cite web</ref>, поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.

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

Разрабатываемая версия (список всех модулей)<ref>W3C: CSS: current work Шаблон:Wayback, CSS 3, etc.</ref>.

В отличие от предыдущих версий, спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных<ref>CSS3: css variables are a bad idea. Just allow us to call other selectors. Шаблон:Wayback // Rip’s Domain</ref><ref>CSS Variables Шаблон:Wayback // dave-woods.co.uk</ref>.

Уровень 4 (CSS4)

Разрабатывается W3C с 29 сентября 2011 года<ref>Шаблон:Cite web</ref><ref>Шаблон:Cite web</ref>.

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

Например:

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

Наиболее полно поддерживающими стандарт CSS являются работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera)<ref>Шаблон:Cite web</ref> браузеры.

Бывший самый распространённый браузер<ref>Шаблон:Cite web</ref> Internet Explorer 6 поддерживает CSS не полностью<ref>Шаблон:Cite web</ref>.

Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS<ref>Details on our CSS changes for IE7 Шаблон:Wayback IEBlog</ref><ref>Cascading Style Sheet Compatibility in Internet Explorer 7 Шаблон:Wayback MSDN</ref>, но всё ещё содержал значительное количество ошибок<ref>Шаблон:Cite web</ref>.

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3<ref>CSS Compatibility and Internet Explorer Шаблон:Wayback MSDN</ref>.

Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест Acid.

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

В стандартах CSS от Консорциума W3C используется модель, в которой свойство Шаблон:Code определяет ширину содержимого блока, не включая в неё отступы и рамки. Ранние версии Internet Explorer (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (Шаблон:Code) и рамки (Шаблон:Code). Кроме Internet Explorer 5, эту модель также понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство Шаблон:Code со значениями Шаблон:Code для указания на использование стандартной модели W3C и Шаблон:Code для использования модели IE 5.

В браузере Mozilla при поддержке этого свойства под собственным «рабочим» названием Шаблон:Code ввели ещё одно значение — Шаблон:Code, таким образом создав третью блочную модель, в которой Шаблон:Code — это размер содержимого и отступов блока, не включая рамки.

CSS-фильтры

Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Чтобы блоковая модель W3C и IE, работающая в Quirks mode, отображала блок Шаблон:Code шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код:

<source lang="css"> /* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */

someblock { width: 80px; padding: 10px; }

</source>

<source lang="css"> /* Следующее правило применит только IE6. */

html #someblock { width: 100px; padding: 10px; }

</source>

Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.

Безопасность

Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя<ref>Шаблон:Cite web</ref>.

CSS Framework

Шаблон:Main

CSS Framework (также Web design framework) — это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.

Расширения CSS

Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах.

Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:

во время запуска страницы на стороне клиента (средствами JavaScript)
во время запуска страницы на стороне сервера
во время вёрстки сайта средствами специального компилятора

Примеры расширений (препроцессоров) CSS:

Sass
LESS
Stylus
Языки некоторых расширений PostCSS

См. также

Шаблон:Родственный проект{{#if:||{{#if:CSS||}}}}

Примечания

Шаблон:Примечания

Литература

Ссылки

Англоязычные ресурсы

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

Шаблон:Языки таблиц стилей Шаблон:Стандарты W3C Шаблон:CSS

CSS

Содержание

Обзор

Использование CSS

Способы подключения CSS к документу

Правила построения CSS

Виды селекторов

Универсальный селектор

Селектор тегов

Селектор классов

Селектор идентификаторов

Селектор атрибутов

Селектор потомков (контекстный селектор)

Селектор элементов одного уровня

Селектор псевдоклассов

Селектор псевдоэлементов

Классы и идентификаторы элементов

Наследование. Каскадирование. Приоритеты стилей CSS.

Пример таблицы стилей

CSS-вёрстка

История создания и развития CSS

Уровень 1 (CSS1)

Уровень 2 (CSS2)

Уровень 2, ревизия 1 (CSS2.1)

Уровень 3 (CSS3)

Уровень 4 (CSS4)

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

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

CSS-фильтры

Безопасность

CSS Framework

Расширения CSS

См. также

Примечания

Литература

Ссылки

Англоязычные ресурсы

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

Навигация

CSS

Обзор

Использование CSS

Способы подключения CSS к документу

Правила построения CSS

Виды селекторов

Универсальный селектор

Селектор тегов

Селектор классов

Селектор идентификаторов

Селектор атрибутов

Селектор потомков (контекстный селектор)

Селектор элементов одного уровня

Селектор псевдоклассов

Селектор псевдоэлементов

Классы и идентификаторы элементов

Наследование. Каскадирование. Приоритеты стилей CSS.

Пример таблицы стилей

CSS-вёрстка

История создания и развития CSS

Уровень 1 (CSS1)

Уровень 2 (CSS2)

Уровень 2, ревизия 1 (CSS2.1)

Уровень 3 (CSS3)

Уровень 4 (CSS4)

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

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

CSS-фильтры

Безопасность

CSS Framework

Расширения CSS

См. также

Примечания

Литература

Ссылки

Англоязычные ресурсы

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

Навигация

Поиск