04. Основы CSS

Что такое CSS

CSS (Cascading Style Sheets) — это язык стилей, который определяет внешний вид веб-страницы. Он задаёт цвета, отступы, размеры, шрифты, фон и многое другое.

Если HTML — это скелет сайта, то CSS — это его одежда и стиль.

Как подключить CSS

Есть три способа добавить стили на страницу:

1. Внешний файл (рекомендуется)


<link rel="stylesheet" href="styles.css">

Так подключается отдельный файл со стилями. Это лучший вариант: код аккуратный и легко поддерживаемый.

2. Встроенные стили в разделе <head>


<style>
  body { background-color: #121212; color: white; }
</style>

Используется для мелких правок или экспериментов.

3. Внутри самого тега (не рекомендуется)


<p style="color: red; font-weight: bold;">Это пример встроенного стиля</p>

Такой способ быстро работает, но нарушает структуру кода.

Селекторы

Селектор определяет, к какому элементу применяются стили.

Примеры селекторов:


/* По названию тега */
h1 {
  color: #61dafb;
}/* По классу */
.card {
  background-color: #1f1f1f;
  padding: 16px;
  border-radius: 12px;
  color: white;
}/* По идентификатору */
#main-title {
  font-size: 32px;
  text-transform: uppercase;
}

Разбор:

```
h1
```
— применяется ко всем заголовкам h1.
```
.card
```
— применяется к элементам с классом “card”.
```
#main-title
```
— применяется к элементу с id="main-title".

Основные CSS-свойства

CSS состоит из свойств и значений:


селектор {
  свойство: значение;
}

Примеры свойств

```
color
```
— цвет текста.
```
background-color
```
— цвет фона.
```
font-size
```
— размер шрифта.
```
margin
```
— внешний отступ.
```
padding
```
— внутренний отступ.
```
border
```
— граница элемента.
```
text-align
```
— выравнивание текста.
```
border-radius
```
— скругление углов.

Пример оформления блока


.card {
  background-color: #2b2b2b;
  color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

Работа с цветами и фоном

```
#ff0000
```
— шестнадцатеричный формат (красный цвет).
```
rgb(255, 255, 255)
```
— формат RGB (белый).
```
rgba(0, 0, 0, 0.5)
```
— то же, но с прозрачностью.

Пример фона


body {
  background: linear-gradient(120deg, #007bff, #6610f2);
  color: white;
  font-family: Arial, sans-serif;
}

Группировка и каскадность

Можно объединять селекторы, если у них одинаковые стили:


h1, h2, h3 {
  color: #00ffff;
  font-weight: bold;
}

Если к одному элементу применяются несколько правил, то действует то, которое ближе по приоритету или прописано позже (отсюда название — каскадные).

Практика: создаём карточку профиля

HTML


<div class="card">
  <img src="avatar.jpg" alt="Аватар" width="100" style="border-radius:50%;">
  <h2 id="main-title">Алекс — веб-разработчик</h2>
  <p>Люблю писать код и учить других!</p>
</div>

CSS


body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
}.card {
  background-color: #1f1f1f;
  display: inline-block;
  padding: 20px;
  border-radius: 12px;
  margin-top: 50px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

Результат

Красивая карточка с аватаром, заголовком и описанием, которая немного увеличивается при наведении.

Bootstrap и готовые стили

CSS можно писать с нуля, а можно использовать фреймворк Bootstrap. Это набор уже готовых классов.

Пример с Bootstrap


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><div class="card p-3 text-center bg-dark text-white" style="width: 18rem;">
  <img src="avatar.jpg" class="card-img-top rounded-circle" alt="Аватар">
  <div class="card-body">
    <h5 class="card-title">Алекс — фронтенд разработчик</h5>
    <p class="card-text">Создаю современные сайты и приложения.</p>
    <a href="#" class="btn btn-primary">Связаться</a>
  </div>
</div>

Итоги урока

Теперь вы знаете:

Что такое CSS и зачем он нужен.
Как подключать стили к странице.
Что такое селекторы, классы и id.
Какие есть основные свойства для оформления.
Как применять Bootstrap для ускорения работы.