← HTML & CSS/Что такое CSS?#16 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

Что такое CSS?

Когда ты заходишь на сайт Wildberries и видишь фиолетовые кнопки, карточки товаров с тенями и красивые шрифты — всё это работа CSS. HTML создаёт структуру («здесь кнопка, здесь картинка»), а CSS отвечает за то, как это выглядит: цвет, размер, расположение, анимации.

Зачем нужен CSS?

Без CSS любой сайт выглядел бы как документ Word 1995 года — чёрный текст на белом фоне, синие ссылки, никакой красоты. CSS отделяет содержимое от оформления: HTML-разработчик думает о структуре, CSS-разработчик — о внешнем виде.

Это как разница между скелетом здания (стены, перекрытия) и дизайном интерьера (краска, мебель, освещение).

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

<p style="color: red; font-size: 18px;">Красный текст</p>

Плохо: нельзя переиспользовать, трудно читать.

2. Тег `<style>` внутри HTML

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

Подходит для небольших страниц, но стили не переиспользуются между файлами.

3. Внешний файл (стандарт в реальных проектах)

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

Файл styles.css подключается к любому количеству HTML-страниц. Именно так работают все профессиональные сайты.

Как браузер применяет стили

Браузер читает HTML и CSS одновременно, строит дерево элементов (DOM) и применяет к каждому элементу подходящие стили. Этот процесс называется каскадом — отсюда и название «Cascading Style Sheets».

Каскад означает, что стили «текут» сверху вниз: если один стиль перекрывает другой, побеждает тот, что «сильнее» или написан позже.

/* Сначала объявляем одно */
p { color: red; }

/* Потом переопределяем */
p { color: blue; }

/* Итог: текст будет синим — последний выигрывает */

Базовый синтаксис CSS

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

Например:

button {
  background-color: #7b2ff7;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Типичные ошибки

Ошибка 1: Забыть точку с запятой

p {
  color: red   /* ошибка — нет ; */
  font-size: 18px;
}

Ошибка 2: Пробел перед двоеточием в значении

color :red;   /* Некоторые браузеры это не поймут */
color: red;   /* Правильно */

Ошибка 3: Подключить CSS после `</body>`

</body>
<link rel="stylesheet" href="styles.css">  <!-- Слишком поздно! -->
</html>

Стили нужно подключать в <head>.

В реальных проектах

В современном React/Vue-проекте CSS пишется по-разному: CSS Modules, styled-components, Tailwind CSS. Но в основе всегда лежат те же правила CSS, которые мы изучаем сейчас. Понимание базы делает тебя эффективным с любым инструментом.

Инлайн-стили через element.style — стандартный инструмент в JavaScript: именно так анимации и динамические эффекты управляют видом элементов в реальном времени.

Примеры

Применение CSS-стилей через JavaScript: три способа задать цвет

// Способ 1: Инлайн-стиль через element.style
const title = document.createElement('h1')
title.textContent = 'Заголовок сайта'
title.style.color = 'purple'
title.style.fontSize = '32px'
title.style.fontFamily = 'Arial, sans-serif'
document.body.appendChild(title)

const computed = window.getComputedStyle(title)
console.log('Цвет заголовка:', computed.color)        // rgb(128, 0, 128)
console.log('Размер шрифта:', computed.fontSize)      // 32px

// Способ 2: Задать целый блок стилей через cssText
const btn = document.createElement('button')
btn.textContent = 'Кнопка Wildberries'
btn.style.cssText = 'background-color: #7b2ff7; color: white; padding: 10px 20px; border: none; border-radius: 8px;'
document.body.appendChild(btn)

const btnStyle = window.getComputedStyle(btn)
console.log('Фон кнопки:', btnStyle.backgroundColor)  // rgb(123, 47, 247)
console.log('Цвет текста:', btnStyle.color)           // rgb(255, 255, 255)

// Способ 3: Класс со стилями (как работает CSS в реальных проектах)
const styleTag = document.createElement('style')
styleTag.textContent = '.card { background: #f5f5f5; padding: 16px; border-radius: 12px; }'
document.head.appendChild(styleTag)

const card = document.createElement('div')
card.className = 'card'
document.body.appendChild(card)

const cardStyle = window.getComputedStyle(card)
console.log('Отступ карточки:', cardStyle.padding)    // 16px
console.log('Скругление:', cardStyle.borderRadius)    // 12px

Что такое CSS?

Зачем нужен CSS?

Это как разница между скелетом здания (стены, перекрытия) и дизайном интерьера (краска, мебель, освещение).

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

<p style="color: red; font-size: 18px;">Красный текст</p>

Плохо: нельзя переиспользовать, трудно читать.

2. Тег `<style>` внутри HTML

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

Подходит для небольших страниц, но стили не переиспользуются между файлами.

3. Внешний файл (стандарт в реальных проектах)

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

Файл styles.css подключается к любому количеству HTML-страниц. Именно так работают все профессиональные сайты.

Как браузер применяет стили

/* Сначала объявляем одно */
p { color: red; }

/* Потом переопределяем */
p { color: blue; }

/* Итог: текст будет синим — последний выигрывает */

Базовый синтаксис CSS

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

Например:

button {
  background-color: #7b2ff7;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Типичные ошибки

Ошибка 1: Забыть точку с запятой

p {
  color: red   /* ошибка — нет ; */
  font-size: 18px;
}

Ошибка 2: Пробел перед двоеточием в значении

color :red;   /* Некоторые браузеры это не поймут */
color: red;   /* Правильно */

Ошибка 3: Подключить CSS после `</body>`

</body>
<link rel="stylesheet" href="styles.css">  <!-- Слишком поздно! -->
</html>

Стили нужно подключать в <head>.

В реальных проектах

Примеры

Применение CSS-стилей через JavaScript: три способа задать цвет

// Способ 1: Инлайн-стиль через element.style
const title = document.createElement('h1')
title.textContent = 'Заголовок сайта'
title.style.color = 'purple'
title.style.fontSize = '32px'
title.style.fontFamily = 'Arial, sans-serif'
document.body.appendChild(title)

const computed = window.getComputedStyle(title)
console.log('Цвет заголовка:', computed.color)        // rgb(128, 0, 128)
console.log('Размер шрифта:', computed.fontSize)      // 32px

// Способ 2: Задать целый блок стилей через cssText
const btn = document.createElement('button')
btn.textContent = 'Кнопка Wildberries'
btn.style.cssText = 'background-color: #7b2ff7; color: white; padding: 10px 20px; border: none; border-radius: 8px;'
document.body.appendChild(btn)

const btnStyle = window.getComputedStyle(btn)
console.log('Фон кнопки:', btnStyle.backgroundColor)  // rgb(123, 47, 247)
console.log('Цвет текста:', btnStyle.color)           // rgb(255, 255, 255)

// Способ 3: Класс со стилями (как работает CSS в реальных проектах)
const styleTag = document.createElement('style')
styleTag.textContent = '.card { background: #f5f5f5; padding: 16px; border-radius: 12px; }'
document.head.appendChild(styleTag)

const card = document.createElement('div')
card.className = 'card'
document.body.appendChild(card)

const cardStyle = window.getComputedStyle(card)
console.log('Отступ карточки:', cardStyle.padding)    // 16px
console.log('Скругление:', cardStyle.borderRadius)    // 12px

Задание

Напиши HTML-страницу с CSS-баннером: div с синим фоном (#3b82f6), шириной 300px, высотой 100px. Подключи стили тремя способами, показанными в уроке: инлайн-стиль на одном элементе, тег <style> в head для второго, и класс для третьего.

Подсказка

background-color: #3b82f6 — синий цвет. width: 300px, height: 100px. Инлайн-стиль: style="background-color: #3b82f6; width: 300px; height: 100px". Класс: class="banner-class". Инлайн-стили трудно переиспользовать — лучше использовать классы.

Загружаем среду выполнения...

Загружаем AI-помощника...

← HTML & CSS/Что такое CSS?#16 из 383← Предыдущий Следующий →+10 XP

Полезно по теме:Гайд: старт в frontend Практика: DOM и события Термин: DOM Маршрут: старт с нуля

Что такое CSS?

Зачем нужен CSS?

Это как разница между скелетом здания (стены, перекрытия) и дизайном интерьера (краска, мебель, освещение).

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

<p style="color: red; font-size: 18px;">Красный текст</p>

Плохо: нельзя переиспользовать, трудно читать.

2. Тег `<style>` внутри HTML

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

Подходит для небольших страниц, но стили не переиспользуются между файлами.

3. Внешний файл (стандарт в реальных проектах)

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

Файл styles.css подключается к любому количеству HTML-страниц. Именно так работают все профессиональные сайты.

Как браузер применяет стили

/* Сначала объявляем одно */
p { color: red; }

/* Потом переопределяем */
p { color: blue; }

/* Итог: текст будет синим — последний выигрывает */

Базовый синтаксис CSS

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

Например:

button {
  background-color: #7b2ff7;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Типичные ошибки

Ошибка 1: Забыть точку с запятой

p {
  color: red   /* ошибка — нет ; */
  font-size: 18px;
}

Ошибка 2: Пробел перед двоеточием в значении

color :red;   /* Некоторые браузеры это не поймут */
color: red;   /* Правильно */

Ошибка 3: Подключить CSS после `</body>`

</body>
<link rel="stylesheet" href="styles.css">  <!-- Слишком поздно! -->
</html>

Стили нужно подключать в <head>.

В реальных проектах

Примеры

Применение CSS-стилей через JavaScript: три способа задать цвет

// Способ 1: Инлайн-стиль через element.style
const title = document.createElement('h1')
title.textContent = 'Заголовок сайта'
title.style.color = 'purple'
title.style.fontSize = '32px'
title.style.fontFamily = 'Arial, sans-serif'
document.body.appendChild(title)

const computed = window.getComputedStyle(title)
console.log('Цвет заголовка:', computed.color)        // rgb(128, 0, 128)
console.log('Размер шрифта:', computed.fontSize)      // 32px

// Способ 2: Задать целый блок стилей через cssText
const btn = document.createElement('button')
btn.textContent = 'Кнопка Wildberries'
btn.style.cssText = 'background-color: #7b2ff7; color: white; padding: 10px 20px; border: none; border-radius: 8px;'
document.body.appendChild(btn)

const btnStyle = window.getComputedStyle(btn)
console.log('Фон кнопки:', btnStyle.backgroundColor)  // rgb(123, 47, 247)
console.log('Цвет текста:', btnStyle.color)           // rgb(255, 255, 255)

// Способ 3: Класс со стилями (как работает CSS в реальных проектах)
const styleTag = document.createElement('style')
styleTag.textContent = '.card { background: #f5f5f5; padding: 16px; border-radius: 12px; }'
document.head.appendChild(styleTag)

const card = document.createElement('div')
card.className = 'card'
document.body.appendChild(card)

const cardStyle = window.getComputedStyle(card)
console.log('Отступ карточки:', cardStyle.padding)    // 16px
console.log('Скругление:', cardStyle.borderRadius)    // 12px

Что такое CSS?

Зачем нужен CSS?

Это как разница между скелетом здания (стены, перекрытия) и дизайном интерьера (краска, мебель, освещение).

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

<p style="color: red; font-size: 18px;">Красный текст</p>

Плохо: нельзя переиспользовать, трудно читать.

2. Тег `<style>` внутри HTML

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

Подходит для небольших страниц, но стили не переиспользуются между файлами.

3. Внешний файл (стандарт в реальных проектах)

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

Файл styles.css подключается к любому количеству HTML-страниц. Именно так работают все профессиональные сайты.

Как браузер применяет стили

/* Сначала объявляем одно */
p { color: red; }

/* Потом переопределяем */
p { color: blue; }

/* Итог: текст будет синим — последний выигрывает */

Базовый синтаксис CSS

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

Например:

button {
  background-color: #7b2ff7;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

Типичные ошибки

Ошибка 1: Забыть точку с запятой

p {
  color: red   /* ошибка — нет ; */
  font-size: 18px;
}

Ошибка 2: Пробел перед двоеточием в значении

color :red;   /* Некоторые браузеры это не поймут */
color: red;   /* Правильно */

Ошибка 3: Подключить CSS после `</body>`

</body>
<link rel="stylesheet" href="styles.css">  <!-- Слишком поздно! -->
</html>

Стили нужно подключать в <head>.

В реальных проектах

Примеры

Применение CSS-стилей через JavaScript: три способа задать цвет

// Способ 1: Инлайн-стиль через element.style
const title = document.createElement('h1')
title.textContent = 'Заголовок сайта'
title.style.color = 'purple'
title.style.fontSize = '32px'
title.style.fontFamily = 'Arial, sans-serif'
document.body.appendChild(title)

const computed = window.getComputedStyle(title)
console.log('Цвет заголовка:', computed.color)        // rgb(128, 0, 128)
console.log('Размер шрифта:', computed.fontSize)      // 32px

// Способ 2: Задать целый блок стилей через cssText
const btn = document.createElement('button')
btn.textContent = 'Кнопка Wildberries'
btn.style.cssText = 'background-color: #7b2ff7; color: white; padding: 10px 20px; border: none; border-radius: 8px;'
document.body.appendChild(btn)

const btnStyle = window.getComputedStyle(btn)
console.log('Фон кнопки:', btnStyle.backgroundColor)  // rgb(123, 47, 247)
console.log('Цвет текста:', btnStyle.color)           // rgb(255, 255, 255)

// Способ 3: Класс со стилями (как работает CSS в реальных проектах)
const styleTag = document.createElement('style')
styleTag.textContent = '.card { background: #f5f5f5; padding: 16px; border-radius: 12px; }'
document.head.appendChild(styleTag)

const card = document.createElement('div')
card.className = 'card'
document.body.appendChild(card)

const cardStyle = window.getComputedStyle(card)
console.log('Отступ карточки:', cardStyle.padding)    // 16px
console.log('Скругление:', cardStyle.borderRadius)    // 12px

Задание

Подсказка

Загружаем среду выполнения...

Загружаем AI-помощника...

Что такое CSS?

Зачем нужен CSS?

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

2. Тег <style> внутри HTML

3. Внешний файл (стандарт в реальных проектах)

Как браузер применяет стили

Базовый синтаксис CSS

Типичные ошибки

В реальных проектах

Примеры

Что такое CSS?

Зачем нужен CSS?

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

2. Тег <style> внутри HTML

3. Внешний файл (стандарт в реальных проектах)

Как браузер применяет стили

Базовый синтаксис CSS

Типичные ошибки

В реальных проектах

Примеры

Задание

Что такое CSS?

Зачем нужен CSS?

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

2. Тег <style> внутри HTML

3. Внешний файл (стандарт в реальных проектах)

Как браузер применяет стили

Базовый синтаксис CSS

Типичные ошибки

В реальных проектах

Примеры

Что такое CSS?

Зачем нужен CSS?

Три способа подключить CSS

1. Инлайн-стили — прямо в теге

2. Тег <style> внутри HTML

3. Внешний файл (стандарт в реальных проектах)

Как браузер применяет стили

Базовый синтаксис CSS

Типичные ошибки

В реальных проектах

Примеры

Задание

2. Тег `<style>` внутри HTML

2. Тег `<style>` внутри HTML

2. Тег `<style>` внутри HTML

2. Тег `<style>` внутри HTML