Урок 3. Задаём цвет фона для слоёвРанее мы сделали два файла index.html и style.css, теперь будем разбираться как задать цвет фона для каждого слоя. Сейчас наша страница index.html выглядит так:
На странице не видно ничего кроме текста, поэтому для наглядности мы раскрасим слои (блоки) в разные цвета. Откройте файл style.css и впишите туда такую строку: /* таблица стилей */
Сохраните изменения!/* задаем размещение блоков */ div { background:red } Теперь в браузере видно, что все слои закрасились в красный цвет:
Всё это конечно хорошо, но нам нужно чтобы все слои были разного цвета, для решения этой задачи существует два атрибута: id - идентификатор; class - класс; Эти атрибуты используются для распознавания объектов на HTML-странице. Рассмотрим способ применения атрибута id на примере. Откройте файл index.html и допишите к первому слою: <html>
<head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="1">Первый блок</div> <div>Второй блок</div> <div>Третий блок</div> </body> </html> В таблице стилей измените строку: /* таблица стилей */
Сохраните изменения и проверьте что получилось./* задаем размещение блоков */ #1 { background:red }
Отлично! Первый слой мы "покрасили", теперь покрасим остальные:
<html>
Для таблицы
style.css строки будут такие:
<head> <title>Дивный дизайн</title> <meta http-equiv="Content-Type" content="text/html; charset="windows-1251"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="1">Первый блок</div> <div id="2">Второй блок</div> <div id="3">Третий блок</div> </body> </html> /* таблица стилей */
Для справки: в таблице стилей мы постоянно прописываем строки:/* задаем размещение блоков */ #1 { background:red } #2 { background:gray } #3 { background:blue }
/* таблица стилей */ Писать эти строки вовсе не обязательно, это просто поясняющие подписи и если таблица стилей вырастает до большого размера, то с помощью этих подписей удобно разделять определённые части кода. Итак, теперь у нас все три слоя раскрашены в разные цвета и теперь мы будем задавать размеры по ширине и высоте. Уроки по CSS (дивный дизайн) Урок 1. Делаем сайт на div-ах
|
