Блочная верстка | Урок 6

site2Продолжаем верстать самую Правильную веб-страницу! Здесь опять будет много кода. Однако же не утрашимся! Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text.

Запишем далее в листе стилей CSS:

#text {width: 545px;font-size: .8em; color: #333; margin: 10px auto; float: left;}#text p {text-align: justify;text-indent: 1.5em;margin: 0;padding: 0 15px;}#text a {color: #396;}#text a:hover {color: #f36;border-bottom: #f36 dotted 1px;}

В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в данном правиле ноль можно не писать, .8em — обозначает тоже самое). С отступами понятно — верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста ни где попало, а с левой стороны. Слово float переводится как “обтекание“. Но тут есть одна фишка. Читаем: “обтекание — слева”. Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее.

 

Для чего это нужно? Скопировав (а еще лучше — набрав ручками) приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось — текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей значение right для атрибута float.

В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justify как раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой, и норма эта исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно — весь правый край текста становится будто рваный. Поэтому мы выровняли его по обоим краям. Это не выравнивание по центру! Это скорее равномерное распределение слов в строке. Получилось просто хAрAшO!

Далее. Слово indent означает не что иное как обычную “красную строку“. Размер её также указан в полтора размера шрифта.

Ну и, наконец, ссылочки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной.

А теперь давайте укажем правила для наших картинок. Запишем в листе стилей:

.img1 {width: 200px;height: 287px; margin: 0 0 0 15px; float:right;}.img2 {width: 200px;height: 200px;margin: 10px 10px 0 15px;float: left;}.venzel { width: 300px; height: 23px;margin: 10px 10px 0 15px;float: left;}

 

Здесь также нет ничего сложного. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них. Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них кидаем блоки или картинки на страницу, а потом смотрим, куда все это оно сползло и чуток корректируем, добавляя где надо и убавляя, где не надо. Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана.

Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая — слева, и вензель тоже слева.

И ещё одна вещь. Как видите, данные правила начинаются не с решётки # , а с точки. Это и есть признак того, что правило относится не к id, а к class.

Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом.

В следующий раз мы добавим на страницу список новых учаснегов и блок новостей.

Добавить комментарий


Защитный код
Обновить

Комментарии

Реклама