Справочник по каскадным таблицам стилей.

Введение

править

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Цель создания CSS

править

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

Обзорная история CSS

править

Первая версия CSS1 была принята как рекомендация W3C 17 декабря 1996 года. Она предоставляет пользователю следующие возможности:

  • управление способом отображения элемента на странице;
  • возможность для элемента задать и запретить обтекание текстом;
  • управление размерами элемента;
  • управление внешними и внутренними отступами элемента;
  • управление вертикальным выравниванием в табличных блоках;
  • управление границами элемента: задавать стиль границы, цвет границы и ее ширину;
  • управление форматированием нумерованных и ненумерованных списков: можно задать тип маркера, возможность обтекания маркера текстом, а также применить в качестве маркера ненумерованного списка изображение;
  • возможность задавать цвет текста и цвет фона элемента;
  • возможность задавать в качестве фона элемента изображения, а также позиционирование и повторение этого изображения в фоне;
  • управление параметрами шрифта: название шрифта, размер, курсив и жирность;
  • управление свойствами текста: выравнивание, отступ первой строки, оформление (подчеркивание, курсив и т. д.). Также предусмотрена возможность изменения регистра текста;
  • управление междустрочным интервалом, а также расстоянием между словами и между буквами.

12 мая 1998 года была принята как рекомендация W3C вторая версия CSS2. В CSS2 дополнительно предоставляются следующие возможности:

  • задавать направление текста в элементе (слева направо или справа налево);
  • управлять позиционированием элемента на странице;
  • задавать видимую область элемента и обрезать все остальное;
  • управлять отображением контента, который выходит за пределы размеров элемента;
  • генерировать контент до и после элемента, в том числе и автоматическая нумерация;
  • управлять внешним видом курсора;
  • управлять положением элементов по оси z (то есть возможность располагать один элемент поверх другого);
  • показывать вместо элемента пустое место;
  • задавать минимально возможные и максимально возможные размеры элемента;
  • указывать расстояние между ячейками таблицы, либо схлопывать их;
  • управлять обводкой элемента: задавать ее толщину, тип и цвет;
  • указать тип и цвет для каждой границы элемента отдельно;
  • задавать фиксированные размеры элементам таблицы;
  • управлять внешним видом кавычек, в которые оборачиваются цитаты;
  • задавать таблицы стилей для не визуальных носителей: управлять контентом при печати, а также задавать звуковое оформление контента (силу, громкость голоса, длину пауз и т. д.) для голосовых браузеров.

8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1 — это попытка привести спецификацию в соответствие со сложившимися реалиями:

  • исправлен ряд ошибок CSS2;
  • изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;
  • убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом;
  • удалили фрагменты CSS2, которые будут устаревшими в CSS3;
  • добавили некоторые новые значения свойств.

Будущее, которое стало реальностью.

На момент написания статьи активно разрабатывается спецификация CSS3. Возможности, которые сулит нам CSS3 значительно превосходят предыдущие версии. Это и анимация, которая ранее ложилась на плечи скриптов, и различные скругления, тени, множественные фоны и прочие вещи, для реализации которых в CSS2 приходилось прилагать значительные усилия.

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

править
  1. управление отображением множества документов с помощью одной таблицы стилей;
  2. более точный контроль над внешним видом страниц;
  3. различные представления для разных носителей информации (экран, печать, и т. д.);
  4. сложная и проработанная техника дизайна.

Кроссбраузерность

править

Программное обеспечение для создания CSS

править

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

править

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

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

  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  • когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
<head>
  <style type="text/css" media="all">
    @import url(style.css);
  </style>
</head>
  • когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
<head>
  <style type="text/css">
    body { 
      color: red;
    }
  </style>
</head>
  • когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
  <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

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

Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:

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

Структура CSS

править

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

править

Селекторы правила CSS могут быть:

  • селекторами элементов;
p {font-family: Garamond, serif;}
  • селекторами классов;
.note {color: red; background: 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: green;}
  • селекторами сестринских элементов;
h1 + p {font-size: 24pt;}
  • селекторами псевдоклассов;
a:active {color:yellow;}
  • селекторами псевдоэлементов.
p::first-letter {font-size: 32px;}
  • Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color: red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {…} и *.first {…} имеют один и тот же смысл.

Свойства и их значения

править

Свойство background

править

Характеристики фона элемента веб-страницы

Свойство background-attachment

править

Примечание:проверить работоспособность.VasjaMirnyj (обсуждение) 17:19, 11 августа 2012 (UTC)

Свойство селектора определяющее возможность перемещения фонового изображения по элементу во время перемещения данного элемента.

Значения:

  • fixed — фоновое изображение остается неподвижным на экране монитора во время скроллинга.
  • scroll — фоновое изображение перемещается по веб-странице вместе с другими элементами.(Значение по умолчанию)
  • inherit — заимствует свойство родителей.
  • local — фоновое изображение прокручивается вместе с содержимым элемента, если для элемента доступна прокрутка.

Синтаксис

CSS2.1 background-attachment: scroll;

CSS3 background-attachment: scroll, scroll;

Версия CSS

  CSS1

  CSS2

  CSS2.1

  CSS3

Значение fixed
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style type="text/css">
   body {
    background-attachment: fixed; /*Делает фон НЕподвижным*/
    background-repeat: no-repeat; /*Одна копия изображения не дает браузеру замостить фон одним изображением*/
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg); /*Путь к изображению*/
    height: 1000px; /*Высота страницы: 1000 пикселей*/
   }
  </style>
 </head>
 <body>
  <h1>Тест</h1>
  <p>Фон с изображением</p>
 </body>
</html>
Значение scroll
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style type="text/css">
   body {
    background-attachment: scroll; /*Делает фон подвижным*/
    background-repeat: no-repeat; /*Одна копия изображения*/
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg); /*Путь к изображению*/
    height: 1000px; /*Высота страницы 1000 пикселей*/
   }
  </style>
 </head>
 <body>
  <h1>Тест</h1>
  <p>Фон с изображением</p>
 </body>
</html>
Значение inherit
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style type="text/css">
   body {
    background-attachment: scroll; /*Изучаемое свойство*/
    background-repeat: no-repeat; /*Одна копия изображения*/
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg); /*Путь к изображению*/
    height: 1000px; /*Высота страницы 1000 пикселей*/
   }
   div {/*Слой внутри браузер*/
    background-attachment: inherit; /*Изучаемое свойство*/
    background-repeat: no-repeat; /*Одна копия изображения*/
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg); /*Путь к изображению*/
    height: 1000px; /*Высота страницы 1000 пикселей*/
    margin:100px;/*Отступ слоя от окна браузера*/
   }
  </style>
 </head>
 <body>
  <div>
   <h1>Тест</h1>
   <p>Фон с изображением</p>
  </div>
 </body>
</html>
Значение local
править

Свойство background-clip

править

Определяет пространство занимаемое фоном или фоновым изображением.

Значения:

  • padding-box — фон или фоновое изображение внутри границ элемента веб-страницы.(Значение по умолчанию)
  • border-box — фон или фоновое изображение занимают внутреннее пространство и границы элемента.
  • content-box — фон внутри элемента.

Синтаксис

background-clip: padding-box;

Версия CSS

  CSS1

  CSS2

  CSS2.1

  CSS3

Значение padding-box
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style>
   p {
    background-clip:padding-box;/*Фон занимает элемент и отступ от элемента(padding)*/
    background-color:#006699;/*Цвет фона*/
    padding: 20px;/*Отступ от элемента до границы тогоже элемента*/
    border-width: 3px;/*Толщина границы*/
    border-style:dashed;/*Граница элемента пунктиром*/
   }
  </style>
 </head>
 <body>
  <p>Пространство занимаемое фоном.</p>
 </body>
</html>

Пространство занимаемое фоном.

Значение border-box
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style>
   p {
    background-clip:border-box;/*Фон занимает элемент и отступ от элемента(padding) и границу элемента(border)*/
    background-color:#006699;/*Цвет фона*/
    padding: 20px;/*Отступ от элемента до границы тогоже элемента*/
    border-width: 3px;/*Толщина границы*/
    border-style:dashed;/*Граница элемента пунктиром*/
   }
  </style>
 </head>
 <body>
  <p>Пространство занимаемое фоном.</p>
 </body>
</html>

Пространство занимаемое фоном.

Значение content-box
править
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Фон с изображением</title>
  <style>
   p {
    background-clip:content-box;/*Фон занимает элемент(width и height)*/
    background-color:#006699;/*Цвет фона*/
    padding: 20px;/*Отступ от элемента до границы тогоже элемента*/
    border-width: 3px;/*Толщина границы*/
    border-style:dashed;/*Граница элемента пунктиром*/
   }
  </style>
 </head>
 <body>
  <p>Пространство занимаемое фоном.</p>
 </body>
</html>

Пространство занимаемое фоном.

Свойство background-color

править

Задаёт цвет фона.

Значения:

  • transparent — задаёт прозрачный фон. (Значение по умолчанию)
  • inherit — наследует значение у родителя.
  • #006699 — значение цвета в шестнадцатеричной системе исчисления.
  • red — по названию.
  • rgb(214,86,43) — при помощи RGB.
  • rgba(255,255,255,.9) — при помощи RGBA.
  • hsl(60,100 %,25 %) — при помощи HSL.
  • hsla(120,100 %,50 %,0.1) — при помощи HSLA.

Синтаксис

background-color: transparent;

Версия CSS

  CSS1

  CSS2

  CSS2.1

  CSS3

Свойство background-image

править

Указывает путь к файлу фонового изображения.

Если одновременно заданы два свойства: background-image и background-color. То в начале устанавливается цвет фона, пока загружается изображение.

Значения:

  • url() — в скобках указывают путь к файлу.
  • none — элемент не содержит фонового изображения. (Значение по умолчанию)
  • inherit — наследует значение у родителя.

Синтаксис

CSS2.1 background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg);

CSS3 background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/04/CroppedISS008-E-5604.jpg), url(http://upload.wikimedia.org/wikipedia/commons/3/3d/Circ-terre.JPG);

Версия CSS

  CSS1

  CSS2

  CSS2.1

  CSS3

Свойство background-position

править

Свойство background-repeat

править

Свойство background-size

править

Свойство border

править

Свойство bottom

править

Свойство box-shadow

править

Свойство box-sizing

править

Свойство caption-side

править

Свойство clear

править

Свойство clip

править

Свойство color

править

Свойство columns

править

Свойство cursor

править

Свойство direction

править

Свойство display

править

Свойство empty-cells

править

Свойство float

править

Свойство font

править

Свойство height

править

Свойство left

править

Свойство letter-spacing

править

Свойство line-height

править

Свойство list-style

править

Свойство margin

править

Свойство max-height

править

Свойство max-width

править

Свойство min-height

править

Свойство min-width

править

Свойство opacity

править

Свойство orphans

править

Свойство outline

править

Свойство overflow

править

Свойство padding

править

Свойство page-break-after

править

Свойство page-break-before

править

Свойство page-break-inside

править

Свойство position

править

Свойство quotes

править

Свойство resize

править

Свойство right

править

Свойство tab-size

править

Свойство table-layout

править

Свойство text-align

править

Свойство text-decoration

править

Свойство text-indent

править

Свойство text-overflow

править

Свойство text-shadow

править

Свойство text-transform

править

Свойство top

править

Свойство transform

править

Свойство unicode-bidi

править

Свойство vertical-align

править

Свойство visibility

править

Свойство white-space

править

Свойство widows

править

Свойство width

править

Свойство word-spacing

править

Свойство word-wrap

править

Свойство writing-mode

править

Свойство z-index

править

Вёрстка

править

Приложения

править

Валидация

править

Сервисы

править