Свойство Display

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

Относительное позиционирование

Когда элементы спозиционированы относительно, они позиционируются относительно того места, где они обычно появляются в потоке. В отличие от абсолютно спозиционированных элементов, относительно спозиционированные элементы воздействуют на позиционирование последующих родственных элементов (потомков). Элементы позиционируются относительно установкой свойства relative и указанием одного или нескольких свойств «смещения»:
Читать далее

Иерархия селекторов

Группировка

Запятые, которые разделяют селекторы, позволяют «разделять» декларации между селекторами. Правило, которое продемонстрировано ниже, указывает, что все элементы i, элементы класса «warning» и элементы с идентификатором id «important» будут подчеркнуты.

i, .warning, #important {
 text-decoration: underline;
}

Читать далее

Псевдоэлементы

Псевдоэлементы прикрепляются к селекторам схожим образом, что и псевдоклассы. Их структура выглядит так: селектор:псевдоэлемент { свойство: значение; }.

Буквица и первая линия

Псевдоэлемент first-letter описывает первую букву элемента, а first-line — первую строку элемента. Например, можно подготовить буквицу и первую строку для абзаца благодаря этому коду:
Читать далее

Раскладка страницы

Это не сложно – подготовить раскладку страницы с помощью CSS. Многие люди используют для создания раскладки страницы таблицы, поэтому на первый взгляд использование CSS может показаться сложным. Однако на самом деле это не так. Этот способ просто другой и, что важно, имеет больше смысла.

Важно воспринимать каждую часть вашей страницы как отдельный фрагмент, который можно перемещать и трансформировать по своему желанию. Эти фрагменты могут быть размещены абсолютно или относительно другого фрагмента.
Читать далее

Сокращение свойств

Несколько свойств CSS можно записать в виде одной строки значений, которая заменяет необходимость указывать целый ряд свойств. Эти свойства описываются значениями, разделенными пробелами.

Например, вы можете объединить margin, padding и border-width и записать margin-top-width, margin-right-width, margin-bottom-width и т.п. в виде свойство: top right bottom left;
Читать далее

Псевдоклассы

Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. Они обладают следующей структурой: selector:pseudo class { property: value; }, т.е. вам лишь надо поместить двоеточие между селектором и псевдоклассом.
Читать далее

Внешние таблицы стилей

Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил. Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример внешней таблицы стилей.

Пример кода

.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}

Читать далее

Цвета

CSS дает возможность использования 16777216 цветов. Они могут быть представлены именем, rgb-значением (red/green/blue, т.е. красный/зеленый/синий) или hex-кодом.

red

Тоже самое, что и:

rgb(255,0,0)

Читать далее

Селекторы, свойства и значения в CSS

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

У каждого селектора есть свойства, которые находятся внутри фигурных скобок. Примеры свойств: color, font-weight, background-color.
Читать далее