Сегодня: 23 апреля 2024 г., вторник Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 10. Изменение отображения общего вида сайта

Еще несколько лет назад страницы сайта форматировались, главным образом, с помощью обычных таблиц. Но в последнее время на смену простым и не очень гибким механизмам HTML, приходят возможности форматирования сайта посредством CSS. Делается это с помощью элементов margin и padding.

Для начала рассмотрим возможность форматирования тега <body>, определяющего внешний вид сайта.

Любой сайт по своей сути представляет прямоугольник. А каждый прямоугольник имеет четыре стороны: верх, низ, левый край и правый. Соответственно, у тега <body> так же есть четыре стороны, указываемые, как и все в HTML и CSS на английском языке: right, left, top и bottom. С помощью этих свойств мы и будем форматировать поле сайта.

Форматирование сайта в таблице стилей будет выглядеть примерно так:

body {
margin-top: 10px;
margin-right: 350px;
margin-bottom: 350px;
margin-left: 50px;
}

Этот пример сделан исключительно для того, чтобы показать последовательно перечисления сторон в коде. В действительности же, для удобства и минимизации кода, запись будет выглядеть следующим образом:

body {
margin: 10px 350px 350px 50px;
}

Соответственно сайт будет находиться в этих рамках. Они могут быть изменены на любые другие по вашему желанию и вкусу.

Кроме форматирования полей сайта, можно задавать отступы для заголовков, текста, изображений, располагая их на странице в соответствии с вашей задумкой. Для примера, давайте добавим к уже имеющимся полям страницы сайта некий блок, включающий в себя заголовок и небольшую статью. Код страницы будет выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta name="description" content="Учебная страница. Пример форматирования сайта с помощью CSS">
<meta name="keywords" content="css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример форматирования сайта</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="teaching">
<h1>Учимся форматировать сайт с помощью CSS</h1>
<p> Кроме форматирования полей сайта, можно задавать отступы для заголовков, текста, изображений, располагая их на странице в соответствии с вашей задумкой. Для примера, давайте добавим к уже имеющимся полям страницы сайта некий блок, включающий в себя заголовок и небольшую статью. </p>
<h1 align="right">Другой заголовок</h1>
<p>Любой сайт по своей сути представляет прямоугольник. А каждый прямоугольник имеет четыре стороны: верх, низ, левый край и правый. Соответственно, у тега <body> так эе есть четыре стороны, указываемые, как и все в HTML и CSS на английском языке: right, left, top и bottom. С помощью этих свойств мы и будем форматировать поле сайта.</p>
</div>
</body>
</html>

Содержимое файла таблицы стилей:

body {margin: 30px 350px 350px 50px;}
h1 {
margin: 5px 120px 5px 50px;
color: #FF3333;
background-color: #FFFFCC;
}
p {margin: 5px 100px 10px 95px; }
.teaching {
margin: 10px 30px 5px 30px;
padding:10px;
}

Сохраняем HTML-код, как файл index.html, а CSS-код, как styl.css. Помещаем оба файла в одну папку. Дважды жмем мышкой на index.html и смотрим результат. Для наглядности я снял часть экрана с сайта, который получился у меня:

Для того, чтобы как следует разобраться во всем этом, меняйте параметры в файле style.css, экспериментируйте и смотрите на получающиеся результаты. Очень скоро настройка внешнего вида сайта станет для вас простым делом.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментариев к этому уроку пока нет

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.