Ключевыми элементами CSS являются свойства, селекторы и две модели компоновки — модель «коробок» и табличная.

Содержание

Свойства

Свойства описывают желаемый способ воспроизведения материала.

Спецификация CSS 2.1 включает свойства для поддержки как «экранного» воспроизведения, так и «звукового» (иными словами — при помощи синтезаторов речи.)[1][2] Мы рассмотрим только первую из этих групп свойств.

Свойство display

Свойство display определяет способ преобразования элемента в используемые CSS блоки.[3]

block
Элемент воспроизводится как отдельный блок в рамках модели «коробок» (например: абзац текста, группа абзацев, раздел, документ в целом.)
inline-block
Элемент воспроизводится как блок, который затем встраивается в строку вышестоящего блока как ее неделимая составляющая (иными словами — как если бы он представлял отдельный «составной символ».)
inline
Элемент воспроизводится как одна или несколько «коробок» в пределах строки вышестоящего блока.
list-item
Элемент воспроизводится как блок, дополненный коробкой-маркером.
table, inline-table
Аналогично block и inline-block, но предполагает использование табличной модели. Последняя предлагает ряд отдельных значений данного свойства (table-caption и др.) для воспроизведения элементов как заголовков, строк, ячеек и других частей таблицы.
none
Элемент не воспроизводится.

Верстка абзаца в целом

text-align
Выравнивание — left, right, center, justify; inherit.
text-indent
Абзацный отступ — абсолютная или относительная (от ширины блока) длина; или inherit.

Верстка строк текста

line-height
Высота строки — абсолютная или относительная (от высоты шрифта — в процентах или долях) длина; normal; inherit.[4]
vertical-align
Вертикальное выравнивание — абсолютная или относительная (от высоты строки) длина; baseline, sub, super, top, text-top, middle, bottom, text-bottom; inherit.
letter-spacing
word-spacing
Межсимвольный и межсловный интервал — абсолютная длина; normal; inherit.

Цвет текста и фон

color
Цвет текста.
background
Фон — значение inherit, или последовательность из одного или более следующих значений (свойств):

Шрифт и интервалы

font
Шрифт — inherit; caption, icon, menu, message-box, small-caption, status-bar; или же последовательность из одного или более следующих значений (свойств):
  1. Опционально, в любом порядке:
    • -stylenormal, italic, oblique; inherit;
    • -variantnormal, small-caps; inherit;
    • -weight.
  2. -size; опционально — / и значение line-height.
  3. -family — одно или более разделенных запятыми названий семейств шрифтов. Помимо фактических названий, допускаются следующие предопределенные значения («псевдонимы»): serif, sans-serif, cursive, fantasy, monospace.
text-decoration

Текстовые преобразования

content
quotes
text-transform

Обработка пробелов

white-space
normal, pre, nowrap, pre-wrap, pre-line; inherit.

Положение на странице

float
clear
position
z-index

Некоторые другие свойства

cursor
outline

Селекторы

Селекторы определяют, к каким именно элементам документа будут применены те или иные свойства.[6]

Модель «коробок»

margin
border
padding
width, max-width, min-width
height, max-height, min-height

Пример документа

<!DOCTYPE html>
<html lang="ru">
<title >Пример документа</title>
<style>
/* Пусто */
</style>

<article id="art">
<header>
<h1 >Пример документа</h1>
<h2 class="author" >А. В. Тор</h2>
<h3 >2015-10-06</h3>
</header>

<section id="art-toc">
<header>
<h2 >Содержание</h2>
</header>

<ol>
<li ><a href="#art-sec-one" >Раздел первый</a>
<ol>
<li ><a href="#art-sec-one-sub-one" >Подраздел</a>
</ol>
<li ><a href="#art-sec-two" >Раздел второй</a>
</ol>
</section>

<section id="art-sec-one">
<header>
<h2 >Раздел первый</h2>
</header>

<p >В первом абзаце этого раздела совершенно ни о чем не говорится.

<p >Как, впрочем, и во втором.

<section id="art-sec-one-sub-one">
<header>
<h3 >Подраздел</h3>
</header>

<p >Этот подраздел предназначен для проверки оформления заголовков.

</section>

</section>

<section id="art-sec-two">
<header>
<h2 >Раздел второй</h2>
</header>

<p id="art-sec-two-par-one" >Этот раздел ничем не лучше
<a href="#art-sec-one" >предыдущего.</a>
</section>

<section id="art-sec-three">
<header>
<h2 >Раздел третий</h2>
<h4 class="author" >Др. Угой</h4>
</header>

<p >Этот раздел написан другим автором.

</section>
</article>

Оформление заголовков

article header  { text-align: center; }
section header  { text-align: left; }

header h1 { font-size: 257%; }
header h2 { font-size: 203%; }
header h3 { font-size: 160%; }
header h4 { font-size: 127%; }

article header,
article header * {
  margin: 1.72ex  0;
}
section header {
  margin: 0.28ex  0;
}
section header * {
  margin: 0.28ex  0;
}
section header h2:last-child,
h2 ~ section header :last-child {
  padding-bottom:   0.28ex;
  border-bottom:    thick solid silver;
}

Отступы

body > *  { margin: 3.14ex  1.72ex; }
article   { margin: 0; }

article > :first-child, body > :first-child {
  margin-top:   0;
}

article > :last-child,  body > :last-child {
  margin-bottom: 0;
}

Цели

/** FIXME: ? */
header ::first-line {
  background: transparent;
}

:target::first-line,
:target :first-child::first-line {
  background: #def;
}

:target section :first-child::first-line {
  background: transparent;
}

Цитаты

:lang(de) > q { quotes: '»' '«' '‹' '›'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(ru) > q { quotes: '«' '»' '„' '“'; }

Ссылки

  1. http://w3.org/TR/html5/document-metadata.html#the-style-element
  2. http://w3.org/TR/html5/dom.html#the-style-attribute
  3. http://userstyles.org/
  4. http://w3.org/TR/html5/tabular-data.html
  5. http://kovodstvo.ru/sections/79/Делать фонт болдом или италиком?
  6. http://kovodstvo.ru/sections/97/Тире, минус и дефис, или Черты русской типографики
  7. http://kovodstvo.ru/sections/158/Короткое тире
  8. http://kovodstvo.ru/sections/104/Кавычки
  9. http://kovodstvo.ru/sections/120/Висячая пунктуация
  10. http://code.stephenmorley.org/html-and-css/creating-drop-caps/
  11. https://css-tricks.com/snippets/css/drop-caps/
  12. http://webdesign.about.com/od/css/qt/tipcssdropcaps.htm

Примечания

  1. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 1 октября 2015.
  2. Full property table. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 6 октября 2015.
  3. Visual formatting model. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.
  4. Visual formatting model details. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.
  5. background-position. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.
  6. Selectors Level 3. W3C. Проверено 1 октября 2015.

© 2015 Иван Шмаков, CC BY-SA 3.0+.