Блочная модель
Воскресенье, 22 августа 2010 г.Рубрика: Учебник CSS
Метки: блочная модель
Просмотров: 1076
Подписаться на комментарии по RSS
В этом уроке мы создадим стиль для блока, и в html файле создадим два блока и в них какие нибудь текста.
Для начала создадим html файлб в котором пропишем какой нибудь текст:
<html>
<head>
<title>CSS чебник</title>
</head>
<body>
<p>Первый текст<br />
Какое нибудь содержание...</p>
<p>Второй текст<br />
Какое нибудь содержание...</p>
</body>
</html>
Теперь сделаем им фон и какое-то обрамление - рамку:
Для этого создадим файл style.css и в нём пропишем стили для тега P:
p {
background-color: #cccccc;
border: 1px solid #999999;
}
Как мы видим - сначала пишем тег или класс, для которого будем прописывать стиль(классы задаются так - .название класса).
Потом пишем фигурные скобки {}, в которых и будут заключаться параметры для тега или класса.
Внутри тега мы задали сначала цвет фона блока - светло-серый, потом рамку - толщина 1px, спложная рамка - solid(можно сделать и пунктирную(dashed) или точечную(dotted)), и задали цвет рамки тёмно-серый. Так как ширина блока не задана, то он растянется на всю ширину экрана.
Теперь чтобы стили работали, пропишем в голове сайта, после title, подключение стилей:
<html>
<head>
<title>CSS чебник</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p>Первый текст<br />
Какое нибудь содержание...</p>
<p>Второй текст<br />
Какое нибудь содержание...</p>
</body>
</html>
Все файлы должны лежать в одной папке.
Теперь зададим внутренний отступ параметром padding - он делает отступ всему контенту внутри от самого блока. Мы сделаем отступ 10:
p {
background-color: #cccccc;
border: 1px solid #999999;
padding: 10px;
}
Теперь выглядит намного лучше. Давайте рассмотрим подробнее блочную модель:
Снаружи есть рамка - которую можно было бы изменить, внутри рамки есть фон и отступ с текстом.
Давайте теперь зададим стиль и размер шрифта:
p {
background-color: #cccccc;
border: 1px solid #999999;
padding: 10px;
font-size: 0.85em;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Мы задали размер font-size в 0.85em
И задали семейство шрифтов - font-family.
Теперь уберём все стандартные оступы у тегов - p, и т.д.
Для этого обозначим их как * и пропишем в самом верху всей таблицы:
* {
padding: 0px;
margin: 0px;
}
p {
background-color: #cccccc;
border: 1px solid #999999;
padding: 10px;
font-size: 0.85em;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Когда мы убрали все стандартные отступы, создадим свои для нашего блока:
Для оступов будем использовать атрибут margin:
Чтобы понять как задаются отступы сделаем так:
Сначала пишем для верха, потом для правой стороны, потом для низа, ну и для левой стороны:
* {
padding: 0px;
margin: 0px;
}
p {
background-color: #cccccc;
border: 1px solid #999999;
padding: 10px;
font-size: 0.85em;
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 10px 50px 10px 50px;
}
Для верха и низа по - 10, для правой стороны и для левой - по 50.
На этом наш урок можно посчитать законченным.
