Основы работы с таблицами стилей CSS

Основы работы с
таблицами стилей CSS
Курс Frontend-разработки на Javascript + Vue/React

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

Подключение стилей
• Стили могут подключаться к HTML-документу тремя способами:
• При помощи тега <link> в теге <head>
• При помощи тега <style>
• При помощи атрибутов style в тегах
• Как правило, используется первый способ:
<head>
<link rel="stylesheet" href="main.css" />
</head>

Структура CSS-документа
• CSS-документ в общем случае
представляет собой простой
список стилевых правил.
• Каждое правило состоит из:
• Селектора
• Набора свойств и их значений (по
одному на каждое).
• Свойства разделяются между собой
точкой с запятой.
• Значение пишется после названия
свойства и двоеточия
body .wrapper {
display: block;
margin: 10px 20px;
padding: 12px 0;
background-color: green;
}
body #form a.link {
display: inline-block;
color: green;
text-decoration: none;
font-family: "Open Sans", sans-serif;
}
.wrapper * {
box-sizing: border-box;
}

Селекторы
• Селектором называется описание выборки тех элементов, для
которых будут применяться стилевые свойства в правиле, где стоит
этот селектор.
• Под один селектор может подпадать 0, 1, 2 и более элементов.
• Селектор выбирает только теги в странице. Спецсимволы,
атрибуты, текстовые узлы, а также теги частично выбраны
селектором быть не могут.

Селекторы (2)
• Селекторы состоят из отношений и компонентов (токенов,
составляющих).
• Компоненты указывают на то, какие именно элементы попадут в
выборку.
• Отношения указывают на то, как между собой должны быть
расположены элементы, чтобы попасть в выборку.

Компоненты селектора
• Теги. Записываются в селекторе
просто названием тега. В выборку
попадут все теги с таким
названием.
• Классы. Записываются с
лидирующей точки. В выборку
попадут все теги, у которых есть
указанный класс (могут быть и
другие!)
• Идентификаторы. Записываются с
лидирующего знака #. В выборку
попадут все элементы, у которых
атрибут id в точности равен
указанному в компоненте
значению.
body {}
div {}
article {}
.wrapper {}
.first {}
.blog-article__button_active {}
#main-app {}
#submit_form
#checkoutButton {}

Компоненты селектора (2)
• Теги, классы и
идентификаторы могут
комбинироваться в рамках
одного компонента.
• В такую выборку попадут
все элементы, которые
подпадают под все
условия в таком
компоненте (название
тега, класс,
идентификатор)
div.wrapper.main {}
/* Все теги div, у которых есть оба
класса: wrapper и main */
a#main.button_active.red.disabled {}
/* Тег а, у которого id="main" и есть
три класса: button_active, red, disabled */
span.text_form.disabled.a.b.c.d {}
/* Все теги span, у которых есть классы
a, b, c, d, text_form, disabled */

Селекция по атрибутам
p[title] {}
/* Будут выбраны все теги p, у которых есть атрибут title */
a[href="#"] {}
/* Выбраны все теги a, у которых атрибут href равен в точности # */
div[id^="item-"] {}
/* Выбраны все теги div, у которых значение атрибута id начинается со значения item-
*/
img[src*="image"] {}
/* Выбраны все теги img, у которых в значении атрибута src есть текст image */

Отношения: вложенность
• Простейшее и самое часто
используемое отношение –
вложенность.
• Записывается при помощи
знака пробел.
• Означает, что в выборку
попадут все элементы,
удовлетворяющие второму
компоненту, которые
находятся внутри любого
элемента, подпадающего
под первый компонент.
body div {}
/* Все теги div, которые лежат внутри body */
div.wrapper span.button {}
/* Все теги span, у которых есть класс button,
и они лежат в любом из тегов div, у которого
есть класс wrapper */
section#main .disabled-link.short i {}
/* Любой тег i, который лежит внутри любого тег
а, у которого есть два класса: disabledlink и
short, которые, в свою очередь,лежат в теге
section, с идентификатором main */

Отношения: вложенность
<main class="main">
<div class="item">
<div class="wrap">
<h3 class="first">Section title <i>Click here</i></h3>
</div>
</div>
<div class="item last">
<div class="wrap">
<h3 class="second">Section title <i>Click here</i></h3>
<p>Anything you wanted to know is just to <i>Click here</i>!</p>
</div>
</div>
</main>
main div {} /* ? */
main .item, main div.item, .main .item {} /* ? */
.item h3 {} /* ? */
.main i {} /* ? */
.item h3 i {} /* ? */
.main .item .wrap h3.first i {} /* ? */
.item.last h3.first i {} /* ? */

Отношения (2)
• Прямая вложенность (>).
Требует, чтобы второй
компонент находился
напрямую внутри первого.
• Следование (+). Требует,
чтобы второй компонент
следовал сразу же за первым.
• Родственность (~). Требует,
чтобы второй компонент был
в том же теге, что и первый,
но следовал за первым.
.wrapper > div {}
/* Все теги div, родитель которых -
тег с классом wrapper */
div.item + .footer_description {}
/* Тег с классом footer_description, перед
которым находится тег div с классом item */
span.summary ~ a {}
/* Теги а, которые находятся в том же теге, что
и тег span с классом summary, но позднее него.
*/

Вес селектора. Каскадность
• Вес селектора вычисляется по формуле:
100 * (количество идентификаторов) + 10 * (количество классов) + (количество тегов)
• Если один и тот же тег подпадает под два разных селектора, и в этих
правилах указано одно и то же стилевое свойство, то будет
применяться то значение, которое написано в правиле с
селектором большего веса.
• Если эти два селектора имеют одинаковый вес, то приоритетнее
будет тот, что записан ниже (каскадность)

Вес селектора. Каскадность
<div class="main">
<div class="wrap">
<button id="main_button">First button</button>
<button>Second button</button>
<button class="disabled">Third button</button>
<button>Fourth button</button>
</div>
</div>
button {
color: red;
}
.wrap button {
color: green;
}
button.disabled {
color: grey;
}
#main_button {
color: yellow;
}
.main button {
color: blue;
}

Единицы измерения
Абсолютные Относительные
1px Один пиксель на экране 1% Один процент от ширины или высоты
прямого родителя (зависит от контекста)
1cm Один физический сантиметр 1em Размер шрифта у прямого родителя
1in Один физический дюйм 1rem Размер шрифта у тега html
1mm Один физический миллиметр 1vh 1% от высоты области просмотра
страницы
1vw 1% от ширины области просмотра
страницы
1vmin Минимум из 1vh, 1vw
1vmax Максимум из 1vh, 1vw

Единицы измерения (2)
• Значения стилевых свойств с единицами измерения записываются
так: число + название единицы без пробела.
• Если необходимо указать нулевое значение, название единицы не
указывается.
• При указании дробных значений, меньших 1, но больших 0,
лидирующий ноль не указывается:
font-size: 14px; padding: 1.2em 0.5em; width: 60vh;
font-size: 0; padding: 0 0; width: 0;
font-size: .8em; padding: .7cm .8cm; width: .95vmax;

Цвета в CSS
• Цвет может быть задан
следующими способами:
• Ключевое слово
• Шестнадцатеричное
значение
• Функция rgb(r, g, b)
• 0 <= r, g, b < 256
• Функция rgba(r, g, b, a)
• 0 <= r, g, b < 256
• 0 <= a <= 1
color: yellow;
color: #af35c0;
color: #737;
color: rgb(115, 34, 221);
color: rgba(109, 225, 31, 0.45);

Наследование стилей
• Большинство стилей наследуются. Это значит, например, что если
свойство задано у родителя, то его значение унаследуют
вложенные элементы (если для них нет их собственных).
• К примеру, размер шрифта, цвет и т.д.
• Некоторые свойства не наследуются. Для указания явного
наследования используется ключевое слово inherit.

Базовые стилевые свойства
Свойство Значения Описание
color Цвет CSS Цвет текста в элементе
text-decoration [ blink || line-through || overline ||
underline ] |
none | inherit
Добавляет или удаляет декоративную линию
для текста
text-transform capitalize | lowercase | uppercase |
none | inherit
Изменяет написание букв в тексте в элементе
text-align center | justify | left | right | start
| end
Задает выравнивание текста внутри элемента
text-indent В единицах измерения CSS Задает отступ красной строки внутри элемента
word-wrap normal | nowrap | pre | pre-line | pre-
wrap |
Inherit
Задает правила переноса текста внутри
элемента
opacity Дробное число от 0 до 1 Позволяет задать прозрачность для элемента
letter-spacing В единицах измерения CSS Задает расстояние между буквами
word-break normal | break-all | keep-all Указывает, как переносить текст по словам
внутри блока

Базовые стилевые свойства (2)
Свойство Значения Описание
font-family Название шрифта или семества, или
несколько – через запятую
Указывает, какой шрифт будет использоваться
для текста в блоке. Если первый шрифт из
списка отсутствует на компьютере
пользователя, будет использоваться второй и
так далее.
font-size В единицах измерения Задает размер шрифта для текста
font-weight 100 – 900 (кратно 100), или
bold|bolder|lighter|normal
Задает жирность для текста
font-style normal | italic | oblique | inherit Задает или убирает курсивное начертание
line-height В долях единицы или в единицах
измерения
Задает высоту линии текста
visibility visible | hidden | inherit Позволяет скрыть элемент. При этом он все
еще будет занимать место на странице, но
виден не будет

Задача 1 (самостоятельно)
Vestibulum nullam condimentum urna a
enim adipiscing arcu fames mi vestibulum vel
consectetur magna mi a nisi vel duis dis
in taciti mi quam quis.

Дополнительные материалы
Добавление стилей
http://htmlbook.ru/samcss/sposoby-
dobavleniya-stiley-na-stranitsu
Построение селекторов
https://developer.mozilla.org/ru/docs/Web/
CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%
B5%D0%BA%D1%82%D0%BE%D1%80%D1
%8B
Основы синтаксиса CSS
https://developer.mozilla.org/ru/docs/Web/
CSS/%D0%A1%D0%B8%D0%BD%D1%82%
D0%B0%D0%BA%D1%81%D0%B8%D1%81
Вес селектора
https://canonium.com/articles/css-
understanding-weight-selectors/
Единицы измерения
http://proglang.su/css/measurement-units
Цвета CSS
https://idg.net.ua/blog/uchebnik-
css/ispolzovanie-css/tsvet-teksta
Текстовые свойства CSS
https://webref.ru/css/type/text

Основы работы с таблицами стилей CSS

More Related Content

What's hot (20)

Similar to Основы работы с таблицами стилей CSS (20)

More from Denis Latushkin (14)

Основы работы с таблицами стилей CSS