Делаем самый простой сайт с CSS.
В предыдущей статье мы познакомились с табличным методом создания сайта.Разберем как создать сайт с помощью блочного метода CSS.CSS имеет свой синтаксис ,или правило описания стилей для элементов HTML.Эти стили CSS могут записываться прямо на странице, но в большинстве случаев они записываются в отдельном документе, а на странице дается ссылка на этот документ.
Это одно из основных преимуществ CSS перед таблицами HTML ,так как изменив какой нибудь параметр в стиле CSS ,этот параметр сразу изменится на всех страницах сайта.В большинстве случаев на сайте используется и CSS и таблицы HTML. Возьмём тот же простейший сайт,который мы рассматривали на главной странице.
Его уменьшенный вид:
Создание собственного сайта..gif) |
Это код данного сайта.
<html>
<head>
<title>Создание сайта
</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Создание собственного сайта.
<img src="images/com (8).gif" width=213 height=170 border=0>
</body>
</html>
Напишем стили CSS прямо на странице сразу после тега <body> и разобьем нашу страницу на 2 блока,что бы поместить текст в один блок , а рисунок во второй .
<style type="text/css">
.content{ /* Создаем класс "content" */
margin: 10px 15px 5px 15px;
}
.pic{ /* Создаем класс "pic" */
margin: 10px 15px 5px 15px;
}
</style>
Вставляем класс "content" перед текстом и после текста закрываем его. Так же вставляем класс "pic" перед рисунком и также после закрываем.
|
Создание собственного сайта.
|
Полностью код этой страницы с CSS выглядит так:
<html>
<head>
<title>Создание сайта </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<style type="text/css">
.content{
margin: 10px 15px 5px 15px;
font: 150% Georgia; }
.pic{
margin: 10px 15px 5px 15px;
}
</style>
<div class="content">
Создание собственного сайта.</div>
<div class="pic"><img src="images/com (8).gif" width=213 height=170 border=0></div>
</body>
</html>
Посмотрите стили CSS здесь
