HTML Стили — CSS

CSS означает каскадные таблицы стилей.

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

CSS = Стили и Цвета

Манпуляции Текстом

Цветам, Блоками

Что такое CSS?

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

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

Совет: Слово каскадный означает, что стиль, применённый к родительскому элементу, также будет применяться ко всем дочерним элементам внутри родителя. Таким образом, если задать цвет основного текста страницы как «синий», все заголовки, абзацы и другие текстовые элементы внутри тела документа получат тот же самый цвет (если специально не указать иное)!

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

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

Встроенный (inline) — путем использования атрибута style внутри элементов HTML
Внутренний (internal) — с помощью элемента <style> в секции <head>
Внешний (external) — через элемент <link>, ссылающийся на внешний файл CSS

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

Встроенный CSS

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

Для встроенного стиля используется атрибут style элемента HTML.

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

Пример:

<h1 style="color:blue;">Синий заголовок</h1>

<p style="color:red;">Красный параграф.</p>

Внутренний CSS

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

Внутренний CSS задаётся в разделе <head> документа HTML, внутри элемента <style>.

Пример ниже задает синий цвет всех заголовков <h1> и красный цвет всех абзацев <p> на странице, кроме того, фон страницы отображается цветом «powderblue»:

Пример:

<!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

Внешний 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 border:

p {
  border: 2px solid powderblue;
}

Внутренний отступ

Свойство CSS padding задаёт внутренний отступ между текстом и границей элемента.

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

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

Внешний отступ

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

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

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

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

Внешние таблицы стилей могут быть подключены с помощью полного URL или относительного пути к текущей веб-странице.

Пример

Этот пример использует полный URL для подключения таблицы стилей:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Пример

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

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

Пример

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

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

Краткое содержание главы

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