Карта сайта

Урок 15: Что такое CSS?

/Уроки по HTML/CSS/Урок 15: Что такое CSS?
Урок 15: Что такое CSS?
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Я рад снова видеть вас на нашем курсе по изучению HTML и CSS для начинающих. В 15-м уроке мы переходим к одному из самых важных и интересных этапов, изучению CSS. Если HTML это скелет веб-страницы, то CSS это её кожа и одежда, которые делают её красивой и привлекательной. В этом уроке мы разберём, что такое CSS, зачем он нужен и как его правильно подключать к вашему HTML-документу.

Что такое CSS?

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

Основные цели CSS:

  1. Отделение содержания от оформления. Благодаря CSS мы можем вынести все стили в отдельный файл, что делает код чище и удобнее для поддержки.
  2. Единообразие стилей. CSS позволяет задавать стили для множества элементов сразу, что упрощает создание единого дизайна для всего сайта.
  3. Гибкость и контроль. С помощью CSS можно легко изменять внешний вид страницы, не затрагивая её структуру.
  4. Адаптивность. CSS позволяет создавать адаптивные дизайны, которые корректно отображаются на устройствах с разными размерами экранов.

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

Существует три основных способа подключения CSS к HTML: внутренний, внешний и встроенный. Давайте разберём каждый из них подробнее.

1. Внутренний CSS (внутри тега <style>)

Внутренний CSS пишется непосредственно внутри HTML-документа, в секции <head>. Этот способ удобен, если у вас небольшая страница и вы хотите быстро задать стили для неё.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример внутреннего CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
        h1 {
            color: #007BFF;
        }
        p {
            font-size: 16px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это пример использования внутреннего CSS.</p>
</body>
</html>

Плюсы:

  • Быстро и просто.
  • Не требует создания отдельного файла.

Минусы:

  • Не подходит для больших проектов.
  • Усложняет поддержку кода, если стилей много.

2. Внешний CSS (подключение через файл)

Внешний CSS это самый распространённый и рекомендуемый способ подключения стилей. Все стили выносятся в отдельный файл с расширением .css, который подключается к HTML-документу с помощью тега <link>.

Пример:

  1. Создайте файл styles.css:
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}
h1 {
    color: #007BFF;
}
p {
    font-size: 16px;
    line-height: 1.6;
}
  1. Подключите этот файл к HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример внешнего CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это пример использования внешнего CSS.</p>
</body>
</html>

Плюсы:

  • Удобство поддержки и масштабирования.
  • Возможность использовать один файл стилей для множества страниц.

Минусы:

  • Требуется создание отдельного файла.

3. Встроенный CSS (через атрибут style)

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример встроенного CSS</title>
</head>
<body>
    <h1 style="color: #007BFF;">Привет, мир!</h1>
    <p style="font-size: 16px; line-height: 1.6;">Это пример использования встроенного CSS.</p>
</body>
</html>

Плюсы:

  • Быстрое применение стилей к конкретному элементу.

Минусы:

  • Усложняет поддержку кода.
  • Нарушает принцип разделения содержания и оформления.

Практические задачи

Чтобы лучше усвоить материал, давайте выполним несколько практических задач.

Задача 1: Создайте страницу с использованием внутреннего CSS

  1. Создайте HTML-документ.
  2. Добавьте заголовок <h1> и абзац <p>.
  3. Используя внутренний CSS, задайте цвет заголовка — синий, а текста абзаца — серый.

Задача 2: Подключите внешний CSS

  1. Создайте файл styles.css.
  2. В этом файле задайте стили для фона страницы (например, светло-серый) и шрифта (например, Arial).
  3. Подключите этот файл к вашему HTML-документу.

Задача 3: Используйте встроенный CSS

  1. Добавьте кнопку на страницу с помощью тега <button>.
  2. Используя встроенный CSS, задайте кнопке зелёный фон и белый текст.

Заключение по уроку 15

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

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

А если вы хотите изучить HTML и CSS более глубоко, переходите по ссылке на полный курс по HTML/CSS для начинающих. Там вас ждёт ещё больше полезной информации, практических заданий и примеров.

Удачи в обучении и до встречи в следующем уроке!