Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 4

Стилевые свойства в CSS

Цвета и фон

Представление цветов

Некоторые цвета

Имя Цвет Код Описание
white #ffffff или #fff Белый
silver #c0c0c0 Серый
gray #808080 Темно-серый
black #000000 или #000 Черный
maroon #800000 Темно-красный
red #ff0000 или #f00 Красный
orange #ffa500 Оранжевый
yellow #ffff00 или #ff0 Желтый
olive #808000 Оливковый
lime #00ff00 или #0f0 Светло-зеленый
green #008000 Зеленый
aqua #00ffff или #0ff Голубой
blue #0000ff или #00f Синий
navy #000080 Темно-синий
teal #008080 Сине-зеленый
fuchsia #ff00ff или #f0f Пурпурный
purple #800080 Фиолетовый

Цвет текста

Синтаксис:

{color: цвет | inherit

Определяет цвет текста элемента.

Пример:

h1 {
  color: #ff0000;
  }

Цвет фона

Синтаксис:

{background-color: цвет | transparent | inherit

Определяет цвет фона элемента.

Пример:

body {
  background-color: #FFCC66;
  }

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

Фоновые изображения

Синтаксис:

{background-image: url(путь к файлу) | none | inherit

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

body {
  background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
  background-color: #c7b39b; /* Цвет фона */
  }

Блокировка фонового изображения

Синтаксис:

{background-attachment: fixed | scroll | inherit}

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Повторение/мультипликация фонового изображения

Синтаксис:

{background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit}

Свойство background-repeat определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Сокращенная запись свойств фона

Синтаксис:

{background: [background-attachment || background-color ||
 background-image || background-position || background-repeat] | inherit

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

Шрифтовые свойства

Семейство шрифтов

Синтаксис:

{font-family: имя шрифта [, имя шрифта[, ...]] | inherit
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

Семейство шрифтов

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Семейство шрифтов

Times New Roman
Garamond
Georgia
Эти три шрифта принадлежат к общему семейству serif. У них имеются т.н. «засечки».
Trebuchet MS
Arial
Verdana
Эти три шрифта принадлежат к общему семейству sans-serif. У них нет «засечек».
Consolas
Courier New
Lucida Console
Эти три шрифта принадлежат к общему семейству monospace. Символы этих шрифтов имеют одинаковую ширину (т.н. «моноширинные шрифты»).
Comic Sans
Gabriola
Monotype Corsiva
Эти три шрифта принадлежат к общему семейству cursive. Это рукописные шрифты с большим количеством плавных красивых элементов и всевозможных завитушек.
Impact Этот шрифт принадлежит к семейству fantasy. Это декоративные шрифты, использующиеся в основном для создания заголовков.

Начертание шрифта

Синтаксис:

{font-style: normal | italic | oblique | inherit}
Определяет начертание шрифта. Значения:

Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.

Представление строчных букв

Синтаксис:

{font-variant: normal | small-caps | inherit}

Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.
Значения:

Обычный текст
Капитель

Насыщенность шрифта

Синтаксис:

{font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 |
400 | 500 | 600 | 700 | 800 | 900}

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.

Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

Размер шрифта

Синтаксис:

{font-size: абсолютный размер | относительный размер |
значение | проценты | inherit}

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Интерлиньяж

Синтаксис:

{line-height: множитель | значение | проценты | normal | inherit}

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение не допускается.

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. При значении normal расстояние между строк вычисляется автоматически.

Универсальное свойство шрифта

Синтаксис:

{font: [font-style||font-variant||font-weight] font-size
[/line-height] font-family | inherit}

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Примеры использования:
p { font: 12pt/10pt sans-serif; } 
p { font: bold italic 110% serif; }
p { font: normal small-caps 12px/14px fantasy; }

Преобразования текста

Выравнивание текста

Синтаксис:

{text-align: center | justify | left | right | inherit}

Определяет горизонтальное выравнивание текста в пределах элемента.

Декор текста

Синтаксис:

{text-decoration: [ blink | line-through | overline | underline ] |
none | inherit}

Добавляет оформление текста. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Отступ красной строки

Синтаксис:

{text-indent: значение | проценты | inherit}

Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

Преобразование заглавных и прописных букв

Синтаксис:

{text-transform: capitalize | lowercase | uppercase | none | inherit}
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

Интервал между символами

Синтаксис:

{letter-spacing: значение | normal | inherit}

Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Можно использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
В качестве значений принимаются любые единицы длины, принятые в CSS. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Значение normal — задает интервал между символами как обычно.

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

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

Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа.

Синтаксис:

селектор:псевдокласс {описание правил стиля}

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

Условно все псевдоклассы делятся на три группы:

Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.

:active
происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на нее курсор и щелкнуть мышкой.
:link
применяется к непосещенным ссылкам, т.е. таким ссылкам, на которые пользователь еще не нажимал.
:hover
этот псевдокласс активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
псевдокласс применяется к посещённым ссылкам.

Валидация CSS

http://jigsaw.w3.org/css-validator/
Разработка: Викулин Максим