Стили HTML — CSS
CSS означает каскадные таблицы стилей.
CSS экономит много работы. Он может управлять макетом нескольких веб-страниц одновременно.
CSS = стили и цвета
Что такое CSS?
Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.
С помощью CSS вы можете управлять цветом, шрифтом, размером текста, расстоянием между элементами, расположением и размещением элементов, используемыми фоновыми изображениями или фоновыми цветами, различными дисплеями для разных устройств и размеров экрана и т. д. намного больше!
Совет: слово « каскадный » означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам в родительском элементе. Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то еще)!
Использование CSS
CSS можно добавить в документы HTML тремя способами:
- Встроенный — с помощью
styleатрибута внутри HTML-элементов . - Внутренний - с помощью
<style>элемента в<head>разделе - Внешний — с помощью
<link>элемента для ссылки на внешний файл CSS.
Самый распространенный способ добавить CSS — сохранить стили во внешних файлах CSS. Однако в этом уроке мы будем использовать встроенные и внутренние стили, потому что это легче продемонстрировать, и вам проще попробовать это самостоятельно.
Встроенный CSS
Встроенный CSS используется для применения уникального стиля к одному элементу HTML.
Встроенный CSS использует styleатрибут элемента HTML.
В следующем примере цвет текста <h1>элемента задается синим, а цвет текста <p>элемента — красным:
Пример
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</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>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Внешний CSS
Внешняя таблица стилей используется для определения стиля многих HTML-страниц.
Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в <head>разделе каждой HTML-страницы:
Пример
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.
Вот как выглядит файл «styles.css»:
"стили.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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Граница CSS
Свойство CSS borderопределяет границу вокруг элемента HTML.
Совет: Вы можете определить границу практически для всех элементов HTML.
Пример
Использование свойства границы CSS:
p {
border: 2px
solid powderblue;
}
CSS-заполнение
Свойство CSS paddingопределяет отступ (пробел) между текстом и границей.
Пример
Использование свойств CSS border и padding:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS-маржа
Свойство 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>элемент HTML для определения внутреннего CSS - Используйте
<link>элемент HTML для ссылки на внешний файл CSS - Используйте
<head>элемент HTML для хранения элементов <style> и <link> - Используйте
colorсвойство CSS для цветов текста - Используйте
font-familyсвойство CSS для текстовых шрифтов - Используйте свойство CSS
font-sizeдля размеров текста - Используйте
borderсвойство CSS для границ - Используйте
paddingсвойство CSS для пространства внутри границы - Используйте свойство CSS
marginдля пространства за границей
Совет: вы можете узнать больше о CSS в нашем Учебнике по CSS .
HTML-упражнения
Теги стиля HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .