Cascad.htm
Css
body {
background-color: bisque;
font-family:"Arial"
}
p {
font-size: 10 pt;
font-style: italic;
}
h1 {
color:teal;
font-size: 16 pt;
font-family: "Times New Roman", Times, serif;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Разные стили</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="1.css" rel="stylesheet" type="text/css">
<style>
<!-- Задаем другой стиль для тега Н1-->\
h1 {font-size: 14 pt; font-family:"Times New Roman"}
<!--Доопределяем свойства тега Р-->
p {font-style: italic}
h2 {font-size: 12 pt}
</style>
</head>
<body>
<h1>Разные стили</h1>
<p>Это web-страница, созданная с использованием таблиц стилей.</p>
<h2>Предупреждение!</h2>
<p style="font-size: 8 pt">Это web-страница, созданная с использованием разных таблиц стилей.</p>
</body>
</html>
Внешний вид в браузере:
Здесь мы подошли к понятию иерархичности (каскадности) стилей. \
1. В таблице 1.css мы установили для тега < body> шрифт Arial. В таблице стилей, встроенной в web-страницу, для тега <h1> мы изменили шрифт на "Times New Roman", и текст, отформатированный этим тегом, отразился шрифтом "Times New Roman". Следовательно, установки встроенной таблицы стилей перекрыли установки внешней таблицы стилей (1.css). Остальнойже текст будет отображаться с использованием шрифта Arial, т.е. для него будет действовать «унаследованный» от родительского тега <body> стиль.
2. В таблице 1.css для тега <p> был задан размер 10 пт. Во встроенной таблице для этого тега задано курсивное начертание. Поэтому текст, отформатированный тегом <p>, будет отражен курсивом 10 пт. Но последний абзац отразится размером 8 пт, т.к. он явно указан в описании (для него задан встроенный стиль).
Таким образом, выстраиваетсяиерархия таблиц стилей. Встроенные в тег стили отменяют установки встроенной в документ таблицы стилей, а та в свою очередь отменяет установки внешней таблицы стилей.
Небольшой совет тем, кто только научился использовать таблицы стилей: не спешите включать их только ради самого включения. Старайтесь использовать их с умом. И обязательно проверяйте, как будут выглядеть ваши html-файлы в браузере без поддержки CSS. Для этого достаточно временно удалить таблицу стилей.