CSS (Cascading Style Sheets) — это язык стилей, который определяет отображение HTML-документов, CSS работает со множеством параметров начиная со шрифта заканчивая позиционированием элементов. CSS код как правило делается в другом документе и использует разрешение css (пример: example.css). Таким образом мы облегчаем работу с кодом разделяя его.

 

Для чего он нужен:

  • Обеспечивает простую и быструю разработку, так как ранее созданное оформление можно применять ко многим страницам.
  • Делает редактирование более простым, достаточно внести правку в CSS чтобы оформление поменялось у всех элементов.
  • Снижает повторы в коде что делает его более простым в чтении программистам и поисковым ботам.
  • Исходя из предыдущего пункта, ускоряет загрузку страницы, потому что файл css может кэшироваться при первом открытии.
  • Позволяет создавать адаптивную вёрстку под разные устройства.

 

Правила набора CSS.

 

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

 

Селектор (Selector)

Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы H1). Для стилизации другого элемента, просто измените селектор.

 

Объявление (Declaration)

Единственное правило, например border: 2px solid red; указывает, какие из свойств элемента вы хотите стилизовать.

 

Свойства (Properties)

Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, border является свойством для элементов <table>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.

 

Значение свойства (Property value)

Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений 2px,solid)

 

Разные типы селекторов

 

Существует множество различных типов селектора. Рассмотрим селекторы которые выбирают все элементы определённого типа.

  • Селектор элемента

Селектор элемента

Все HTML элемент(ы) указанного типа.

p {
color: red;
}

Весь текст что заключён в тег p будет красного цвета.

ID селектор

Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.

#style-id {
color: blue;
}

Теперь если внутрь тега записать id=»название селектора» то к этому тегу применятся записанные свойства.  

<p id=»style-id»> Какой-то текст <p>

<span id=»style-id»> Какой-то текст <span>

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

class используется если множество элементов в документе может иметь одно и то же значение класса.

.example {
font-size: 14px;
}

<p class="example"> Какой-то текст </p>