Зачем нужен CSS

04.05.2022

По мере роста популярности веба в девяностых годах, также росло намерение применять к сайту определённый дизайн. Веб-разработчики полагались на конкретные теги HTML для улучшения веб-страниц:

<basefont> определял шрифт всего HTML-документа;
<font> определял гарнитуру, цвет и размер текста, который находится внутри;
<center> выравнивал по центру всё своё содержимое;
<big> увеличивал размер текста;
<strike> отображал текст перечёркнутым.

Также могли быть использованы несколько атрибутов HTML:

bgcolor определял цвет фона элемента;
text определял цвет текста;
атрибуты margin могли быть использованы для добавления пространства с любой стороны элемента.

Зачем избегать таблиц?

Но прежде всего, для создания колонок, визуального выравнивания элементов и, в целом, позиционирования элементов относительно друг друга, веб-разработчики использовали элемент <table> для дизайна своих веб-страниц, потому что он естественным образом обеспечивал визуальную сетку.Тёмная тема

<table>
  <thead>
    <tr>
      <th>Логотип</th>
      <th colspan="2">Слоган</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="3">Copyright 2015</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Левое меню</td>
      <td>Основное содержимое</td>
      <td>Правый сайдбар</td>
    </tr>
  </tbody>
</table>

Такой подход был громоздким по нескольким причинам:

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

Именно поэтому от применения таблиц в качестве инструмента вёрстки медленно отказались и вместо них был использован CSS.

Что такое CSS

CSS (Cascading Style Sheets) означает каскадные таблицы стилей и представляет собой язык разметки стилей (как HTML или XML). Таким образом, CSS ничего не представляет сам по себе, если не связан с HTML-документом.

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

Как работает CSS

CSS выбирает элемент HTML (например, абзац), задаёт свойство для изменения (такое как цвет) и применяет определённое значение(например, красный):

p { color: red;}

Слово «стиль» может быть обманчивым. Можно подумать, CSS используется только для изменения цвета текста, размера и типа шрифта. Но CSS может задать компоновку HTML-документа, определяя высоту, ширину, внутренние и внешние поля, положение, колонки и др.

Где я могу писать CSS?

CSS как атрибут

Вы можете писать CSS непосредственно в элементах HTML с помощью атрибута style:

<p style="color: red;">Это важный текст.</p>

CSS в <head>

Вы можете использовать тег <style> внутри <head> вашего HTML-документа:Тёмная тема

<!DOCTYPE html>
<html>
 <head>
  <title>Привет, мир</title>
  <style>
   p { color: red;}
  </style>
 </head>
 <body>
  <p>Этот абзац будет красным.</p>
 </body>
</html>

CSS в отдельном файле

Вы можете писать свой CSS в отдельном файле с расширением .css, а затем связать его с HTML с помощью тега <link>.

CSS

p { color: red; }

HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Привет, мир</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>Этот абзац будет красным.</p>
 </body>
</html>

Данный HTML-документ, который «вызывает» файл CSS, в нашем случае файл с именем style.css, расположен в той же папке, что и CSS-файл.

Этот третий метод, использующий отдельный CSS-файл, является предпочтительным.

Почему бы не размещать стиль прямо в HTML?

Потому что мы хотим отделить содержимое (HTML) от его представления (CSS). Если вы хотите представить замысел этого различия, присмотритесь к замечательному CSS Zen Garden: каждый дизайн использует один и тот же HTML, но каждый раз другой CSS.

Это делает обслуживание проще: тот же CSS-файл может быть использован на всём сайте. А также обеспечивает гибкость: сосредоточьтесь на содержании с одной стороны и стилизации с другой.

Lesson Content

Зачем нужен CSS

Основы CSS

Participants 286

Зачем нужен CSS

04.05.2022

Зачем избегать таблиц?

Что такое CSS

Как работает CSS

Где я могу писать CSS?

CSS как атрибут

CSS в <head>

CSS в отдельном файле

Почему бы не размещать стиль прямо в HTML?