Взаимодействие CSS и HTML
Как известно, НТМL-документы имеют строгую структуру, которую необходимо учитывать при их визуальном оформлении. Данная проблема не нова - она была знакома разработчикам еще самых первых веб-страниц. В погоне за эффектным внешним видом мы порой забываем, что каждый документ имеет внутреннюю структуру, мало связанную с его видом на экране. Не стоит забывать, что, стараясь получить самую привлекательную веб-страницу в мире, легко нарушить строго выверенный порядок представления информации в НТМL-документах.
Внутренняя структура документа - это то, что в наибольшей степени определяет способ взаимодействия разметок CSS и HTML. Документы, лишенные ее, не подлежат изменению представления с помощью инструментария CSS. Чтобы лучше понять, о чем идет речь, рассмотрим следующий пример и попробуем разбить приведенный ниже НТМL-документ на основные компоненты.
<html>
<head>
<title>Eric's World of Waffles</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="sheetl.css" media="all">
<style type="text/css">
/* Мои собственные стили! */
@import url(sheet2.css);
</style>
</head>
<body>
<hl>Waffles!</hl>
<р style="color: gray;">The most wonderful of all breakfast foods is
the waffle-a ridged and cratered slab of home-cooked, fluf fy goodness
that makes every child's heart soar with joy. And they're so easy to
make! Just а simple waffle-maker and some batter, and you're ready for
а morning of aromatic ecstasy!
</р>
</body>
</html>
Результат разметки документа и применения к нему стилей представлен на рис.
Детально все возможные способы подключения стилей CSS к НТМL-документу описаны в следующих разделах.
Понравился сайт? Поделись с друзьями
