Каскадные таблицы стилей (CSS) описывают, как документы представляются на экране, в печати или, возможно, как они произносятся. W3C активно продвигает использование таблиц стилей в Интернете с момента основания консорциума в 1994 году.
Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов тегов HTML. Используя CSS, вы можете указать ряд свойств стиля для данного элемента HTML. Каждое свойство имеет имя и значение, разделенные двоеточием.
:
Каждое объявление свойства отделяется точкой с запятой
;
Сначала рассмотрим пример HTML-документа, в котором используется тег
<font>
и связанные атрибуты для указания цвета текста и размера шрифта:
Примечание. Тег
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 с помощью тега
<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>
Пример HTML-кода:
<!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, используя атрибут style
соответствующего тега. Это следует делать только в том случае, если вы хотите внести определенные изменения только в какой-либо элемент 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>
Это даст следующий результат: