Каталог статей
| Главная » Статьи » Уроки » Российская школа CSS |
Создание блока
Автор: tester-disru | Дата: 08.02.2012 | Просмотров: 632 |
Открываем новое направление в Российской школе CSS - Уроки вёрстки.
Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части.
Для этого, нам потребуется выполнить ряд простых действий:
Основой нашего блока будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
Пожалуй, начну с простого, и расскажу об одном из способов создания стандартного блока, состоящего из "шапки" и основной части.
Для этого, нам потребуется выполнить ряд простых действий:
Основой нашего блока будет 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
|
| |
