Изучаем CSS за час!

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

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) – это формальный язык описания внешнего вида документа, написанного с помощью HTML. Если провести параллель с написанием картины и сказать просто, то с помощью HTML мы делаем набросок карандашом, а с помощью CSS наносим мазки масляными красками.

Синтаксис CSS.  

Синтаксис CSS довольно прост и представляет он собой правило, которое содержит селектор элемента, к которому применены пары свойств и значений. Выглядит это примерно так:

Селектор {
	Свойство1: значение1;
	Свойство2: значение2;
	Свойство3: значение3;
	…
	СвойствоN: значениеN;
}

Селектор (от англ. select — выбирать) – это формальное правило, которое применяется к одному элементу или набору элементов.

CSS могут быть написаны как в самом HTML с помощью тегов , inline – способом, с помощью атрибута style у HTML – тега и могут быть подключены как внешний файл. Чтобы не было беспорядка и хаоса, лучше CSS подключать к HTML как отдельный файл. Подключается он следующей конструкцией:

<link rel="stylesheet" href="{путь до файла с CSS}"/>

Размещается данная конструкция обычно в разделе head HTML-документа.

Основные селекторы CSS.

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

Селектор HTML-тега.

Данный тип селекторов применяется ко всему набору элементов определенного тега. Например, чтобы все ссылки на странице сделать зелеными, вы напишите:

a {
	color: green;
}

Селектор класса.

Чтобы выбрать на странице все элементы с определенным классом, нужно написать класс элементов с точкой впереди. Например, чтобы все элементы с классом red сделать красными, мы напишем:

.red {
	color: red;
}

Селектор идентификатора.

Также у нас на странице может встретиться элемент с определенным идентификатором, чтобы нам его получить, необходимо написать идентификатор с символом # впереди. Например, сделать фон у элемента с идентификатором ident черным:

#ident {
	background: black;
}

Мультиселектор.

С помощью мультиселектора мы можем выбрать абсолютно все элементы на нашей странице, пишется он с помощью символа *. Например, сделаем у всех элементов на странице прозрачность равную 0:

* {
	opacity: 0;
}

Селектор потомка.

Данный селектор очень важен при написании стилей, так как он позволяет обойти их наложение друг на друга. Например, вам нужно выбрать все элементы абзаца, которые находятся в div и сделать там текст подчеркнутым:

div p {
	text-decoration: underline;
}

Селектор первых потомков.

Обычно данный селектор пригождается, когда у нас есть многоуровневая вложенность однотипных элементов, например, многоуровневое меню. Пишется данный селектор как селектор потомка, только между элементами добавляется символ >. Например, нам нужно выбрать все элементы li первого уровня и сделать им кегль 18px:

ul > li {
	font-size: 18px;
}

Селектор правого соседа.

Данный тип селекторов тоже помогает при работе со списками. Например, вам необходимо добавить слева отступ 10px у всех элементов кроме первого:

li + li {
	margin-left: 10px;
}

Селектор атрибута

Допустим, вам необходимо выбрать все элементы input с атрибутом type равным text:

input[type=text]{
	border: 1px solid #000;
}

Составные селекторы.

Представьте, что вам нужно написать правило для нескольких элементов с разными селекторами, тогда вы напишите следующую конструкцию:

.red, a{
	color: red;
}

Отлично! Мы прошли с вами основные селекторы CSS.

Каскадность.

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

Например, селектор идентификатора имеет приоритет над селектором класса, а более точно заданный селектор будет иметь приоритет над селектором более общим.

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

У каждого элемента есть псевдоклассы, которые мы можем также использовать для наших селекторов. Вот примеры псевдоклассов:

• :not(селектор) – все, кроме подходящих под селектор.
• :focus – в фокусе.
• :hover – под мышью.
• :empty – без детей (даже без текстовых).
• :checked, :disabled, :enabled – состояния INPUT.
• :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #… текущего URL.

Соответственно, если мы, например, хотим задать другой цвет ссылки при наведении мыши, то мы будем использовать следующую конструкцию:

a:hover {
	color: red;
}

Также есть еще следующие псевдоклассы:

• :first-child – первый потомок своего родителя.
• :last-child – последний потомок своего родителя.
• :only-child – единственный потомок своего родителя, соседних элементов нет.
• :nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
• :nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
• Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
• :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
• :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.

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

Также мы можем использовать вспомогательные элементы, которые называются “псевдоэлементы”. При помощи них мы можем добавлять содержимое в конец и начало элемента при помощи конструкции ::before и ::after.

Например, таким образом можно добавить кавычки ссылке, которые не будут подчеркнуты:

a::before{
	content: “\””
}

a::after{
	content: “\””
}

Блочные и строчные элементы.

В CSS существуют два основных типа элементов:

• Блочные – это элементы высшего уровня, которые форматируются как блоки и генерируют новые блоки контента. Примеры блочных элементов: div, p, h1-h6, header, section и так далее.
• Строчные – это элементы, которые генерируют внутристрочные контейнеры. Они не создают новых блоков контента. Примеры строчных элементов: a, em, strong, label, small, span и так далее.

Блочная модель.

В блочной модели CSS элемент рассматривается как прямоугольный контейнер, имеющий область содержимого и необязательные рамки и отступы (внутренние и внешние). Если объяснить более простым языком, то можно представить себе картину, которая висит на стене:

• Расстояние от потолка, стен и пола до рамки картины – это внешние отступы (margin).
• Расстояние от рамки до изображения – это внутренние отступы (padding).
• Само изображение это содержимое, которое имеет высоту (height) и ширину (width).
• Рамка и ее толщина – это границы блока (border).

Позиционирование.

Свойство position в CSS позволяет точно задать новое местоположение блока, относительно того места, где он находился в нормальном потоке документа. По умолчанию, все элементы располагаются последовательно друг за другом в том порядке, в котором они описаны в HTML. Свойство position имеет следующие значения:

• static – это значение по умолчанию, означает отсутствие позиционирования.
• relative – относительно позиционированный элемент. Сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал не исчезает.
• absolute – абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера. Блок-контейнер – это ближайший предок, у которого свойство position отлично от static.
• fixed — фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа.
• Initial — устанавливает значение свойства в значение по умолчанию.
• Inherit — наследует значение свойства от родительского элемента.