Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Урок CSS вёрстки 1. Создание блока
Не нравится(-) 79 Нравится(+)
Урок CSS вёрстки 1. Создание блока

Открываем новое направление в Российской школе CSS - Уроки вёрстки.
Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части.
Для этого, нам потребуется выполнить ряд простых действий:

Основой нашего блока будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №1 Создание блока
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей всего блока */

#block{
     width: 250px; /* Задание ширины блока */
}

/* Задание стилей заголовка */
.head {
     text-align:center; /* Выравнивание заголовка по центру блока */
     color: #fff; /* Задание цвета заголовка (тут - белый) */
     background-color: #0274b0; /* Задание цвета фона (тут - синий) */
     border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
     font-size: 15px; /* Задание размера шрифта заголовка */
     font-weight:bold; /* Задание полужирного начертания шрифта */
     padding: 7px 0 7px 0; */ Задание верхнего и нижнего отступов текста заголовка от границ блока */
}

/* Задание стилей основного блока */
.body {
     color:#333; /* Задание цвета текста */
     background-color: #d2efff; /* Задание цвета фона */
     border: 2px solid #ffba00; /* Задание сплошной границы блока шириной в 2 пикселя и её цвета */
     border-top-style: none; /* Удаление верхней границы блока */
     font-size: 12px;  /* Задание размера шрифта */
     padding: 5px; /* Задание отступа в 5 пикселей со всех сторон */
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="block">
<div class="head">
ПРОСТОЙ БЛОК
</div>
<div class="body">
Открываем новое направление в Российской школе CSS - Уроки вёрстки.<br>
Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части...
</div>
</div>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.x; Oprea 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 1 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 33218 раз(а) и написали 15 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!