Что такое CSS?
CSS (англ. Cascading Style Sheets), или каскадные таблицы стилей, используются для описания визуального стиля веб-страницы, чаще всего веб-сайта. Одной из целей CSS является отделение оформление документа от структуры и содержания. Пока HTML определяет содержимое веб-страницы, CSS занимается её стилизацией. Это подразумевает настройку цвета, шрифтов, размеров, полей, положения элементов веб-страницы.
Внешняя таблица стилей представляет собой текстовый файл с расширением.css, в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница.
Как устроен CSS?
CSS выбирает элемент HTML (например, абзац), задаёт свойство для изменения (такое как цвет) и применяет определённое значение (например, красный).
p {
color: red;
}
CSS как атрибут:
Вы можете писать CSS непосредственно в элементах HTML с помощью атрибута style:
<p style="color: red;"> Это текст красного цвета </p>
CSS в <head>:
Вы можете использовать тег <style> внутри <head> вашего HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title> Заголовок страницы </title>
<style>
p {color: red;}
</style>
</head>
<body>
<p> Этот абзац будет красным </p>
</body>
</html>
Как правильно
Рекомендуется писать CSS в отдельном файле с расширением.css, а затем связывать его с HTML с помощью тега <link>:
| HTML файл (index.html) | CSS файл (style.css) |
| <!DOCTYPE html> <html> <head> <title> Заголовок страницы </title> <link rel="stylesheet" href="style.css"> </head> <body> <p> Этот абзац будет красным </p> </body> </html> | p { color: red; } |
Синтаксис CSS
Целью CSS является определение стиля элементов HTML. Синтаксис CSS очень прост:
селектор {
свойство: значение;
}
Можно прочитать это так:
кто {
что: как;
}
CSS представляет собой процесс из трёх частей:
· селектор определяет, на какой элемент или элементы нацелиться;
· свойство определяет характеристики для изменения;
· значение определяет, как изменить эту характеристику.
Весь этот блок (селектор, свойство, значение) является правилом CSS.
Как вы уже заметили есть прямая связь между именем тега и селектором.
СSS правило описанное выше задаёт красный цвет для всех абзацев HTML страницы. Добавим в правило ещё одно значение:
p {
color: red;
font: 20px;
}
Теперь наше правило содержит два значение и не только меняет цвет текста во всех абзацах страницы, но и устанавливает размер шрифта равным 20 пикселам. Одно правило CSS может содержать произвольное количество свойств.
Если мы хотим применить одно CSS правило для нескольких HTML элементов (тегов), то достаточно перечислить их селекторы через запятую. Допустим мы хотим применить наше правило не только к абзацам, но и к заголовком первого уровня. Для этого сделаем следующее:
p, h1 {
color: red;
font: 20px;
}
Комментарии
Как и HTML CSS поддерживает комментарии, которые имеют следующий синтаксис:
/* Это комментарий CSS */
Селекторы
Селекторы CSS определяют, к каким элементам мы хотим применить стиль.
Базовые селекторы тегов
Чтобы нацелиться на базовые теги HTML достаточно просто использовать имя тега:
a { /* Ссылки */ }
p { /* Абзацы */ }
ul { /* Неупорядоченные списки */ }
li { /* Пункты списка */ }
Классы
Учитывая, что мы, вероятно, не желаем стилизовать все абзацы или все заголовки одинаково, нам надо их различать.
Из всех атрибутов HTML атрибут class является наиболее важным для CSS. Он позволяет определить группу элементов HTML, на которые мы можем точно нацелиться. Пример применения стилей с помощью классов рассмотрен ниже.
| HTML файл (index.html) | CSS файл (style.css) |
| <!DOCTYPE html> <html> <head> <title> Заголовок страницы </title> <link rel="stylesheet" href="style.css"> </head> <body> <p class="red-color"> Красный текст в абзаце </p> <p class="red-color"> Красный текст в абзаце </p> <p class="blue-color"> Голубой текст в абзаце </p> </body> </html> | .red-color { color: red; } .blue-color { color: blue; } |
К нескольким классам можно применять одно правило:
.class-1,.class-2 {
color: red;
font: 20px;
}
| Вы можете использовать любое имя для вашего класса, но оно не должно начинаться с цифры. |
| Имейте в виду, что имя тега не важно, учитывается только атрибут class. |
Псевдоклассы
Элементы HTML могут иметь разные состояния. Наиболее распространённый случай — когда вы наводите курсор на ссылку. В CSS возможно применить другой стиль, когда происходит такое событие.
Псевдоклассы привязаны к обычным селекторам и начинаются с двоеточия:
a {
color: blue;
}
a:hover {
color: red;
}
Наследование
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Например, чтобы сделать весь текст на странице красным, мы можем применить CSS правило только для тега <body>.
body {
color: red;
}
Единицы цвета
Цвета широко используются в CSS для изменения цвета текста, цвет фона, градиентов, теней, границ и др. Есть несколько способов задать цвета в CSS, каждый со своими плюсами и минусами.
Свойство color определяет цвет текста. Это довольно просто. Что более важно — есть разные доступные типы единиц цвета.
Названия цветов
CSS предлагает 145 названий цветов, от самых простых (black, white, orange, yellow, blue и др.) до более специфичных (lawngreen, orchid, crimson и др.)
body {
color: black;
}
a {
color: orange;
}
Rgb()
Компьютерные мониторы, телевизоры, мобильные телефоны, все они используют цветовую модель RGB для отображения цветов. В основном, каждый цвет определяется сочетанием красного, зелёного и синего. Есть 256 возможных значений для красного, зелёного или синего цвета. Поскольку компьютеры начинают считать с нуля, максимальное значение равно 255.
Принимая во внимание, что цвет является результатом сочетания красного, зелёного и синего, а также потому что у каждого из этих трёх цветов есть 256 возможных значений, существует 256 * 256 * 256 = 16777216 возможных цветов.
Поскольку модель RGB напрямую связана с тем, как цвета физически визуализируются, она стала единицей цвета в CSS.
Например, красный цвет на сайте Marksheet.io — это 219 красного, 78 зелёного и 68 синего:
a {
color: rgb(219, 78, 68);
}
Чёрный цвет получается, когда нет никакого количество красного, зелёного или синего цвета:
body {
color: rgb(0, 0, 0);
}
С другой стороны спектра, белый — это полное количество каждого красного, зелёного и синего:
p {
color: rgb(255, 255, 255);
}
Rgba()
Единица цвета rgba() — это rgb(), к которому мы добавляем значение альфа (в диапазоне от 0 до 1 в десятичном значении), она определяет прозрачность цвета.
Слегка прозрачный чёрный цвет:
body {
color: rgba(0, 0, 0, 0.8);
}
Задавать цвет прозрачным требуется для смешивания с фоном, в результате цвет будет выглядеть по разному в зависимости от фона.
Шестнадцатеричное
Цвета в CSS могут быть также определены через шестнадцатеричные значения, вроде #db4e44.
Как правило, при выборе цвета вы не пишете его напрямую. Вы либо используете палитру цветов или копируете/вставляете его из Photoshop или выбираете цветовую палитру где-то ещё.
Шестнадцатеричные значения легче копировать и вставлять, так как они содержат только шесть символов.
| Проще скопировать и вставить единственное поле, чем три отдельных. В CSS вам нужно всего лишь добавить перед шестнадцатеричным значением цвета решётку (#). |
Единицы размера
Существует много свойств CSS, которые требуют размер в качестве единицы:
- font-size определяет размер текста;
- border-width определяет толщину границ элементов;
- margin определяет пространство между элементами;
· left/right/top/bottom позволяют позиционировать и перемещать элементы.
Наиболее часто используемые единицы:
- px для пикселей;
- % для процентов;
· em для определения размера относительно родительского значения font-size.
| Поскольку компьютерные экраны используют пиксели для отображения содержимого, это самая распространённая единица размера в CSS. |
Текст
Свойство font-family определяет, какой шрифт использовать.
body {
font-family: Arial;
}
Надёжные веб-шрифты
Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).
Arial является безопасным выбором, хотя бы потому, что он установлен на всех компьютерах Windows и Mac, а также на большинстве систем Linux. Именно поэтому Arial считается надёжным веб-шрифтом: вы можете безопасно использовать его в CSS и быть почти уверены, что шрифт на компьютере пользователя будет установлен.
Есть девять надёжных веб-шрифтов:
· Arial
· Arial Black
· Comic Sans MS
· Courier New
· Georgia
· Impact
· Times New Roman
· Trebuchet MS
· Verdana
Применение списка шрифтов
Хотя использование любого из этих значений для свойства font-family является безопасным выбором, вы можете определить запасные значения, написав список семейств шрифтов:
h1 {
font-family: Arial, Verdana;
}
При определении нескольких значений для font-family, браузер будет искать первое значение Arial и использовать его. Если Arial не доступен, то будет использоваться следующий шрифт Verdana.
Свой шрифт на сайте
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
@font-face {
font-family: Roboto; /* Имя шрифта */
src: url(site/fonts/Roboto.ttf); /* Путь к файлу со шрифтом */
}
| Одной из самых объёмных библиотек шрифтов является Google Fonts. Она содержит более 800 свободно распространяемых шрифтов и интерактивный каталог для их просмотра и скачивания. |
Свойства шрифта в CSS
font-size - определяет размер шрифта.
p { font-size: 16px; }
font-style может сделать ваш текст курсивным:
h2 { font-style: italic; }
Значение по умолчанию — font-style: normal.
font-weight может сделать ваш текст жирным:
h2 { font-weight: bold; }
Значение по умолчанию — font-weight: normal.
В зависимости от используемого font-family, существует целый ряд насыщенности шрифта, доступных от 100 до 900:
font-weight: 100; /* Тонкий */
font-weight: 200; /* Сверхлёгкий */
font-weight: 300; /* Лёгкий */
font-weight: 400; /* Такой же, как font-weight: normal; */
font-weight: 500; /* Средний */
font-weight: 600; /* Полужирный */
font-weight: 700; /* Такой же, как font-weight: bold; */
font-weight: 800; /* Сверхжирный */
font-weight: 900; /* Ультражирный */
Очень немногие шрифты предлагают все девять насыщенностей.
Свойства текста в CSS
Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.
Text-align
Свойство text-align должно применяться к блочному элементу и определяет, каким образом текст и дочерние строчные элементы выравниваются по горизонтали.
body { text-align: left; }
Наиболее используемые значения:
· left
· right
· center
· justify
Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:
Text-decoration
Свойство text-decoration применяется для добавления линии к вашему тексту.
Значение по умолчанию: none.
.main-content { text-decoration: line-through; }
Возможные значения:
· overline
· underline
· line-through
Text-shadow
В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.
Вы определяете:
· х — горизонтальное смещение;
· у — вертикальное смещение;
· размытие;
· цвет.
h1 { text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
Обязательны только значения х и у. Размытие тени по умолчанию 0 (ноль), а цвет по умолчанию совпадает с цветом текста.
Очень полезные ссылки:
https://fonts.google.com/