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.
☛ Ссылки HTML
Цвета HTML HSL и HSLA ☚
