English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Файлы CSS это просто текстовые файлы, сохраненные с расширением .css.
В данном руководстве вы узнаете, как легко добавлять стили и форматирование в веб-страницы с помощью CSS. Но перед этим убедитесь, что у вас есть базовые знания HTML.
Если вы только начали осваивать веб-разработку, пожалуйстаНачало обучения从这里 ►
Начнем с каскадных таблиц стилей (CSS).
Существует три способа включения CSS в документ HTML:
Встроенные стили -Используяstyleатрибуты в начале тега HTML.
Встроенные стили -Используя<style>элемент в начале документа.
Внешние стилевые таблицы -Используя<link>элементе указывает на внешние файлы CSS.
В данном руководстве мы будем по одному рассмотрим все три способа вставки CSS.
Внимание:И inline стили имеют наивысшую приоритетность, а внешние таблицы стилей - наименьшую. Это означает, что если вВстроенныеиВнешние стилевые таблицыЕсли стили определяются вВстроенныеСтили таблицы стилей заменяют стили внешних таблиц стилей. Встроенные
Встроенные стили используются для применения единственного правила стиля к элементу, вводя правила CSS напрямую в начале тега. Их можно использоватьstyleсвойство добавляет стили к элементу.
ЭтотstyleСвойства включают в себя набор пар свойств и значений CSS. Каждый"property: value"Символами между ними используется точка с запятой (;Разделены запятыми, как если бы вы записывали встроенный или внешние таблицы стилей. Но все должно быть на одной строке, без переноса строки после точек с запятой, как показано ниже:
<h1 стилем="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:22px;">This is a paragraph.</p> <div style="color:blue; font-size:14px;">This is some text content.</div>Проверьте, как это выглядит‹/›
Использование внутрисимвольных стилей обычно считается плохой практикой. Поскольку правила стилей напрямую嵌入 в HTML-теги, это приводит к mieszance демонстрации и контента документа. Это делает код трудным для обслуживания и отменяет цель использования CSS.
Внимание:с помощью внутрисимвольных стилей.пseudoelementsипseudoclassesСтили стали невозможными. Поэтому следует избегать использования стилевых атрибутов в коде. ИспользуйтеВнешние стилевые таблицыявляются предпочтительным методом для добавления стилей в документ HTML.
внутренние стилевые таблицы влияют только на документ, в котором они嵌入. Внутренние стилевые таблицы - это предпочтительный метод добавления стилей в документ HTML.
внутренние стилевые таблицы в<head>внутренние стилевые таблицы в<style>элементах определения. Вы можете использовать<style>Определите любое количество элементов в документе HTML, но они должны出现在<head>и</head>между тегами. Давайте посмотрим на пример:
<!DOCTYPE html><html lang="en"><head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p></body></html>Проверьте, как это выглядит‹/›Совет:и теговтипАтрибут (т.е.) определяет язык стилевой таблицы. Этот атрибут служит только для предоставления информации. Поскольку CSS является стандартным языком стилевых таблиц в HTML5 и языком стилевых таблиц по умолчанию, можно пропустить это настройку.<style><link>тип="text/css"
Когда стили применяются ко многим страницам сайта, внешние стилевые таблицы являются оптимальным выбором.
Внешние стилевые таблицы сохраняют все правила стилей в отдельном документе, и вы можете ссылаться на них из любого HTML-файла на сайте. Внешние стилевые таблицы наиболее гибкие, так как с их помощью можно изменить外观 всего сайта, просто изменив один файл.
Вы можете подключить внешнюю стилевую таблицу двумя способами- СвязываниеиИмпорт.
Прежде чем связать стилевую таблицу, нам нужно сначала создать её. Откройте любимый редактор кода и создайте новый файл. Теперь в этом файле введите следующий код CSS и сохраните его как "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {
color: orange;}можно использовать<link>Маркировка для подключения внешнего стиля к документу HTML. Этот<link>Тег вводит в внутреннюю часть<head>Часть, которую вы можете увидеть в следующем примере:
<!DOCTYPE html><html lang="en"><head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p></body></html>Проверьте, как это выглядит‹/›
Совет:Из этих трех методов, использование внешних таблиц стилей является лучшим способом определения стилей и их применения к документам HTML. Из внешних таблиц стилей можно ясно видеть, что изменению подлежат минимальное количество файлов HTML.
Этот@importПравило является еще одним способом загрузки внешних таблиц стилей.@importУказание браузеру загрузить внешнюю таблицу стилей и использовать её стили.
Вы можете использовать его двумя способами. Самый простой - в заголовке документа. Обратите внимание, что другие правила CSS могут также содержаться в<style>Элементы. Вот пример:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Проверьте, как это выглядит‹/›Таким же образом, вы можете использовать@importПравила импортируют таблицы стилей в другую таблицу стилей.
@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}Проверьте, как это выглядит‹/›Внимание:Все@importВсе правила должны出现在 начале таблицы стилей. Любые стили, определенные в таблице стилей, будут перекрывать конфликтующие правила из импортированной таблицы стилей. Однако, из-за проблем с производительностью не рекомендуется импортировать таблицы стилей в другую таблицу стилей.