Подготовка проекта
Создадим папку 3w для хранения веб-сайта. В текстовом редакторе (например, Atom) создадим файл index.html. Вставим базовый HTML-синтаксис (можно использовать сокращение ! и нажать Tab для автоматической генерации). Заменим текст в теге <title> на «HTML + CSS». Добавим тег <p> для абзаца и вставим в него заполнитель текста, используя lorem и Tab. Сохраним файл и откроем его в браузере.
Способы подключения стилей
Существует три способа подключения CSS-стилей:
Атрибут style
К любому HTML-тегу можно добавить атрибут style. Внутри него прописывается CSS-код, применяемый только к этому тегу. Например: <p style=»color: red;»>Текст</p>. Можно использовать другие цвета, например, blue. Можно указать несколько свойств через точку с запятой. Стиль наследуется вложенными тегами (например, если внутри <p> находится <b>, стиль color: red; будет применён и к <b>). Этот способ подходит для одного-двух стилей к одному объекту. Для большего количества стилей лучше использовать другие методы.
Внутренний стиль в <style>
CSS-стили можно подключать внутри HTML-документа с помощью тега <style> внутри <head>. Например:
<style>
b { color: red; }
</style>
Этот код добавит красный цвет ко всем тегам <b>. Этот способ лучше, чем атрибут style, так как позволяет указать множество свойств, но HTML и CSS остаются в одном файле.
Внешний файл CSS
Наиболее удобный способ – использовать отдельный CSS-файл. Создадим папку css и файл main.css с кодом:
b { color: red; }
Подключим его к HTML с помощью тега <link>:
<link rel="stylesheet" href="css/main.css">
Атрибут href указывает путь к CSS-файлу. Этот метод разделяет HTML и CSS, улучшая структуру и читаемость кода.
Рассмотрены три способа подключения CSS-стилей: атрибут style, внутренний стиль в <style> и внешний CSS-файл. Третий способ предпочтительнее для больших проектов, обеспечивая лучшую организацию и удобство обслуживания кода. В следующих уроках изучим CSS-свойства и селекторы.