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)

Добавление CSS

 

Самое первое, что нам нужно сделать, это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать.

Существует три различных способа применения CSS к HTML-документу.

  • Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле.Для связывания документа с этим файлом применяется тег <link>.Данный тег помещается в контейнер <head>.

Пример:

<html>
<head>
<link rel="stylesheet" href="путь к файлу">
</head>
</html>
  • Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. Определение стиля задается тегом <style>. 

Пример:

<html>
<head>
<style>
H1 {
font-size: 20px;
font-family: Arial;
color: #333366;
}
</style>
</head>
</html>
  • Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега.Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

Пример:

<html>
<head>
<title>Название страницы</title>
</head>
<body>
<p style="font-family: arial">Какой-то текст </p>
</body>
</html>