Основы CSS

С помощью HTML разметки мы выводим на страницу контент. Картинки, текстовое содержимое, ссылки и прочее. Но как же сделать сайт более ярким, красивым, оживить его и придать более конкурентый внешний вид? Для этих целей используется язык CSS.

CSS расшифровывается как Cascading Style Sheets - каскадная таблица стилей. Это не язык программирования, а скорее язык таблиц стилей.

Как использовать CSS

Существует три способа применить стили CSS к HTML тегу.

inline стили. Такой способ предполагает написание CSS кода непосредственно в теге HTML. Это делается с помощью атрибута style. Посмотрим на такую запись:
```
 <p style="color: red;">Red text</p>
```
Мы создали параграф и присвоили ему с помощью CSS красный цвет текста.
embedded. Такой способ предполагает создание тега style в теге head и описание стилей внутри этого тега. Выглядит это примерно вот так:
```
 <head>
   <style>
   p {
     color: red;
   }
   </style>
 </head>
 <body>
   <p>Red text</p>
 </body>
```
Мы создали тег style, и в нем присвоили параграфу красный цвет текста.
linked (external). Такой способ предполагает создание отдельного файла, где будут описываться стили для элементов, и подключение этого файла к HTML документу. Делается это с помощью тега link внутри тега head:
```
 <head>
   <link href="css/style.css" rel="stylesheet">
 </head>
```
В атрибуте href прописываем путь к CSS файлу. В данном случае это папка css, внутри которой - наш файл с названием style.css. Также приписываем атрибут rel со значением stylesheet (то есть говорим, что это файл со стилями).

Наиболее распространенный и рекомендуемый способ подключения стилей - это третий, то есть подключение отдельного файла со стилями. Это позволяет избегать мешанины языков и синтаксиса в одном документе, и более удобно для управления стилями. Все три способа в той или иной мере используются, но наиболее распространенный - external.

Основы синтаксиса CSS

Рассмотрим код из предыдущего примера.

p {
 color: red;
}

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

Посмотрим детальнее.

Выше мы написали - р и дальше фигурные скобки с каким-то кодом. В таком синтаксисе р для CSS - это так называемый селектор (от слова select - выбирать).

Селектор - это некий набор правил, по которому будет идентифицироваться элемент. В нашем примере селектор - это тег р. То есть, мы говорим - все теги р на странице будут иметь данный набор правил.

Набор правил (также блок объявлений) - это все, что пишется внутри фигурных скобок после селектора. Этими правилами мы описываем то, какие стили будут применяться к элементу.

Свойство и значение - это и есть правила.

Свойствами являются различные характеристики элемента, которые мы можем менять по своему усмотрению.

Мы можем задать элементу цвет текста, можем поменять его высоту и ширину, можем сделать цвет фона другим, можем менять различным образом шрифт и многое другое.

Эти вещи и будут свойствами. А значение - это то, на что мы будем менять наше свойство. Например,в вышеуказанном примере с тегом р - color будет свойством, а red - значением.

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

Использование CSS на практике

На практике в CSS существует много разных селекторов (то есть способов выбирать HTML теги для стилизации). Наиболее часто используемый (и рекомендуемый к использованию) - селектор класса.

Чтобы использовать такой вид селектора, в HTML коде для нужного тега или тегов необходимо добавить атрибут class, указав любое подходяще для нас имя класса. Например:

<div class="background-blue">
  <div class="text-yellow">
    This text will be yellow
  </div>

  <div class="text-red-bold text-big">
    This text will be red and bold
  </div>
</div>

В коде выше вы можете заметить следующие особенности:

У одного тега может быть несколько классов. Это значит, что к нему будут применяться стили каждого из классов.
Имена классов всегда пишутся прописными буквами, без заглавных букв.
Если имя класса состоит из нескольких слов, они пишутся через дефис.

Если сейчас открыть данный код в браузере, весь текст будет черного цвета, так как само по себе добавление имени класса ничего не меняет. Чтобы цвет поменял текст, нам теперь необходимо задать правила стилизации для этих классов в CSS.

Напишем следующий код:

.background-blue {
  background-color: blue;
}

.text-red-bold {
  color: red;
  font-weight: bold;
}

.text-yellow {
  color: yellow;
}

.text-big {
  font-size: 30px;
}

Какие выводы можно сделать из кода выше:

Чтобы в CSS написать правило для класса, перед именем класса нужно поставить точку (.имя-класса)
Для одного селектора в CSS можно написать сколько угодно правил. Не забывайте в конце правила ставить точку с запятой, это обязательно!

PreviousМодуль 1 NextЦветовое оформление в CSS

Last updated 4 months ago