Вы находитесь на странице: 1из 36

Форматирование при

помощи CSS. Cписки.


Что такое css?

CSS означает каскадные таблицы стилей.


CSS описывает, как HTML-элементы должны отображаться на экране,
бумаге или на других носителях.
CSS экономит много работы. Он может контролировать
расположение нескольких веб-страниц все сразу.
Добавлять css-форматирование можно 4-мя способами:
1. С помощью атрибута style
2. Внутри тегов <style> в блоке <head>
3. С помощью тега <link>
4. С помощью директивы @import.
Внутренние стили
Внутренняя таблица CSS определена в разделе <head> HTML-
страницы в элементе <style> :
Внешние стили
Свойства
• Свойство CSS color определяет используемый цвет текста.

• Свойство CSS font-family определяет используемый шрифт.

• Свойство CSS font-size определяет размер текста, который будет


использоваться.
Color
Для установки цвета различных элементов можно использовать
несколько правил. Мы рассмотрим сегодня свойство color, которое
отвечает за цвет текста, и backgroundcolor, которое управляет
цветом фона элемента.

Цвета HTML задаются с использованием предопределенных имен


цветов, или RGB, Hex, HSL, RGBA, HSLA значений.
В HTML, цвет может быть указан как RGB значение, используя эту
формулу: RGB (красный, зеленый, синий)
Каждый параметр (красный, зеленый и синий) определяет
интенсивность цвета между 0 и 255.
Например, RGB (255, 0, 0) отображается красным цветом, так как
красный цвет устанавливается в его наивысшее значение (255), а
остальные устанавливаются в 0.
Для отображения черного цвета, все параметры цвета должны быть
установлены в 0, как это: RGB (0, 0, 0).
Для отображения белого цвета, все параметры цвета должны быть
установлены в 255, как это: RGB (255, 255, 255).
В HTML, цвет может быть указан с помощью шестнадцатеричного
значения в форме: #RRGGBB
Где RR (красный), GG (зеленый) и BB (синий) являются
шестнадцатеричными значениями между 00 и FF (то же, что и
десятичное 0-255).
Например, #ff0000 отображается красным цветом, так как для
параметра Red устанавливается наибольшее значение (FF), а другим —
наименьшее значение (00).
RGBA значение
Значения цвета RGBA являются расширением значений цвета RGB с
альфа-каналом, который задает непрозрачность для цвета.
Значение цвета RGBA задается с помощью:
RGBA (красный, зелёный, голубой, альфа)
Параметр Alpha является числом между 0,0 (полностью прозрачным) и
1,0 (не прозрачным вообще):
В HTML цвет можно задать с помощью оттенка, насыщенности и
легкости (HSL) в форме:
HSL (оттенок, насыщенность, легкость)
Оттенок-это степень на цветном колесе от 0 до 360. 0-красный, 120-
зеленый, 240-синий.
Насыщенность представляет собой процентное значение, 0% означает
оттенок серого, а 100%-полный цвет.
Легкость также процент, 0% черный, 50% не является ни светлым, ни
темным, 100% белый
Шрифты

• serif — для шрифтов с засечками (по умолчанию обычно Times New


Roman);
• sans-serif — для шрифтов без засечек, или рубленых
шрифтов(обычно Arial);
• monospace — для моноширинных шрифтов, в которых символы
имеют одинаковую ширину (обычно Consolas или Courier New);
cursive — для курсивных шрифтов (как вариант —ComicSans MS);
• fantasy — для фантазийных, или декоративных шрифтов
Посмотреть, какие шрифты используются
по умолчанию, можно в настройках
браузера. Например, для Хрома, они
выглядят так:
Значения bolder и lighter изменяют жирность шрифта в большую или
меньшую сторону относительно значения этого свойства у родителя.
Единицы от 100 до 900 указываются с шагом в 100 и распределяются так: от
100 до 300 — это, как правило, тонкий шрифт, 400-500 — обычное
начертание, от 600 — полужирное начертание. Если рассматривать их
подробнее, то начертание в единицах имеет следующие значения:
• 100 — Thin (Hairline)
• 200 — Extra Light (Ultra Light)
• 300 — Light
• 400 — Normal
• 600 — Semi Bold (Demi Bold)
• 700 — Bold
• 800 — Extra Bold (Ultra Bold)
• 900 — Black (Heavy)500 — Medium
Размер шрифта font-size. Указывается он в различных единицах: cm,
mm, pc, px, pt, em, rem, %, реже — в ex, vh или vw,а также в
абсолютном и относительном размере. Еще размер шрифта может
иметь значение inherit, т.е. унаследованный от родителя. Для указания
абсолютного размера используются ключевые слова xxsmall,x-small,
small, medium, large, x-large, xx-large.
Для относительного размера шрифта используются значения larger и
smaller. Размер шрифта родительского элемента берется за 100%.
Нельзя использовать отрицательные значения.
Граница
Свойство css border определяет границу вокруг элемента HTML
CSS заполнение
Свойство CSS padding определяет отступ (пробел) между текстом и
границей:
CSS маржа

Свойство CSS margin определяет поле (пробел) за пределами


границы:
Атрибут ID

Чтобы определить конкретный стиль для одного специального


элемента, нужно добавить атрибут id к элементу:
Примечание: Идентификатор элемента должен быть уникальным в
пределах страницы, поэтому селектор ID используется для выбора
одного уникального элемента!
Атрибут class
Чтобы определить стиль для специального типа элементов, нужно
добавить атрибут class к элементу.
Затем нужно определить стиль для элементов с определенным
классом.
Внешние ссылки
Внешние таблицы стилей можно ссылаться с полным URL-адресом
или с помощью пути относительно текущей веб-страницы.