Каскадные таблицы стилей (CSS) описывают, как документы представляются на экранах, в печати или, возможно, как они произносятся. W3C активно продвигал использование таблиц стилей в Интернете с момента создания консорциума в 1994 году.
Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов для тегов HTML. Используя CSS, вы можете указать несколько свойств стиля для данного элемента HTML. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявление свойства отделяется точкой с запятой (;).
пример
Сначала давайте рассмотрим пример документа HTML, который использует тег <font> и связанные атрибуты для указания цвета текста и размера шрифта —
Примечание . Тег шрифта устарел и должен быть удален в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же для целей обучения, эта глава будет работать с примером, использующим тег font.
Примечание . Тег шрифта устарел и должен быть удален в будущей версии HTML. Поэтому их не следует использовать, рекомендуется использовать стили CSS для управления шрифтами. Но все же для целей обучения, эта глава будет работать с примером, использующим тег font.
<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p><font color = "green" size = "5">Hello, World!</font></p> </body> </html>
Мы можем переписать приведенный выше пример с помощью таблицы стилей следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
Это даст следующий результат —
Вы можете использовать CSS тремя способами в своем HTML-документе —
-
Внешняя таблица стилей. Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в документ HTML с помощью тега HTML <link>.
-
Внутренняя таблица стилей. Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
-
Встроенная таблица стилей — определяйте правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style .
Внешняя таблица стилей. Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в документ HTML с помощью тега HTML <link>.
Внутренняя таблица стилей. Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
Встроенная таблица стилей — определяйте правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style .
Давайте рассмотрим все три случая один за другим с помощью подходящих примеров.
Внешняя таблица стилей
Если вам нужно использовать таблицу стилей для разных страниц, всегда рекомендуется определять общую таблицу стилей в отдельном файле. Файл каскадной таблицы стилей будет иметь расширение .css и будет включен в файлы HTML с помощью тега <link>.
пример
Предположим, мы определили файл таблицы стилей style.css, который имеет следующие правила:
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Здесь мы определили три правила CSS, которые будут применяться к трем различным классам, определенным для тегов HTML. Я предлагаю вам не беспокоиться о том, как определяются эти правила, потому что вы изучите их во время изучения CSS. Теперь давайте воспользуемся вышеуказанным внешним CSS-файлом в нашем следующем HTML-документе —
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Это даст следующий результат —
Внутренняя таблица стилей
Если вы хотите применить правила таблицы стилей только к одному документу, вы можете включить эти правила в раздел заголовка документа HTML с помощью тега <style>.
Правила, определенные во внутренней таблице стилей, переопределяют правила, определенные во внешнем файле CSS.
пример
Давайте еще раз напишем приведенный выше пример, но здесь мы напишем правила таблицы стилей в том же HTML-документе, используя тег <style> —
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Это даст следующий результат —
Встроенная таблица стилей
Вы можете применять правила таблицы стилей непосредственно к любому элементу HTML, используя атрибут стиля соответствующего тега. Это следует делать только тогда, когда вы заинтересованы в том, чтобы внести определенные изменения только в любой элемент HTML.
Правила, определенные внутри элемента, переопределяют правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
пример
Давайте еще раз напишем приведенный выше пример, но здесь мы напишем правила таблицы стилей вместе с элементами HTML, используя атрибут style этих элементов.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Это даст следующий результат —