Главная » Руководство по HTML — HTML5 введение » Стили HTML CSS

Стили HTML CSS

CSS - "Cascading Style Sheets" что в переводе означает каскадные таблицы стилей.

CSS экономит много работы так как может управлять макетом нескольких веб-страниц одновременно.

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

★ Примечание: слово "каскадный" означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам внутри родителя. Итак, если вы установите цвет основного текста на "синий", все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то еще)!

Использование CSS

CSS можно добавить в документы HTML тремя способами:

Встроенный — с использованием атрибута style внутри HTML-элементов.
Внутренний — с помощью элемента <style> в разделе <head>.
Внешний — с помощью элемента <link> для ссылки на внешний файл CSS.

Самый распространенный способ добавить CSS — сохранить стили во внешних файлах CSS. Однако здесь мы будем использовать встроенные и внутренние стили, потому что это легче продемонстрировать, и вам проще попробовать это самостоятельно.

Встроенные CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут стиля HTML -элемента.

Следующий пример устанавливает цвет текста элемента <h1> синий, а цвет текста элемента <p> на красный:

<h1 style="color:blue;">Синий заголовок</h1>
<p style="color:red;">Красный параграф.</p>

Внутренний CSS

Внутренний CSS используется для определения стиля отдельной HTML-страницы.

Внутренний CSS определяется в разделе <head> HTML-страницы внутри элемента <style>.

В следующем примере цвет текста ВСЕХ элементов <h1> (на этой странице) устанавливается синим, а цвет текста ВСЕХ элементов <p> — красным. Кроме того, страница будет отображаться с фоновым цветом "голубой":

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

  <h1>Это заголовок</h1>
  <p>Это параграф.</p>

</body>
</html>

Внешний CSS

Внешняя таблица стилей используется для определения стиля нескольких HTML-страниц.

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> для каждой HTML-страницы:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>Это заголовок</h1>
  <p>Это параграф.</p>

</body>
</html>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.

Вот как выглядит файл "styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

★ Примечание: с помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив всего один файл!

Цвета, шрифты и размеры CSS

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

Свойство CSS color определяет цвет текста, который будет использоваться;
Свойство CSS font-family определяет используемый шрифт;
Свойство CSS font-size определяет используемый размер текста.

Использование свойств CSS color, font-family и font-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

  <h1>Это параграф</h1>
  <p>Это заголовок.</p>

</body>
</html>

Граница CSS

Свойство CSS border определяет границу вокруг HTML-элемента.

Вы можете определить границу практически для всех элементов HTML.

Использование свойства границы CSS:

p {
  border: 2px solid powderblue;
}

CSS - внутренние отступы (padding)

Свойство CSS padding определяет отступ (пробел) между текстом и границей.

Использование свойств CSS border и padding:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS - внешние отступы (margin)

Свойство CSS margin определяет поле (пробел) за пределами границы.

Использование свойств CSS border и margin:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Ссылка на внешний CSS

На внешние таблицы стилей можно ссылаться по полному URL-адресу или по пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на таблицу стилей:

<link rel="stylesheet" href="https://www.appnet.club/htm/styles.css">

Этот пример ссылается на таблицу стилей, расположенную в папке htm на текущем веб-сайте:

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

Этот пример ссылается на таблицу стилей, расположенную в той же папке, что и текущая страница:

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

🔗 Вы можете прочитать больше о путях к файлам в главе Пути к файлам HTML.

Использование атрибутов, элементов HTML и свойств CSS:

style HTML атрибут для встроенного стиля;
<style> HTML элемент для определения внутреннего CSS;
<link> HTML элемент для ссылки на внешний файл CSS;
<head> HTML элемент для хранения элементов <style> и <link>;
color CSS свойство для цвета текста;
font-family CSS свойство для текстовых шрифтов;
font-size CSS свойство для размеров текста;
border CSS свойство для границ;
padding CSS свойство для пространства внутри границы;
margin CSS свойство для пространства за границей.

Связанные HTML Теги

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

Тег	Описание
<style>	Определяет информацию о стиле для документа HTML.
<link>	Определяет связь между документом и внешним ресурсом.Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Каким методом можно добавить CSS в HTML документ?

Проверьте себя, насколько хорошо вы запомнили материал.

☛ Ссылки HTML

Цвета HTML HSL и HSLA ☚

Поделиться ссылкой