Урок 6

Продолжим разрабатывать самую главную часть кода. Откроем снова лист стилей. Мы остановились на главном правиле для ссылок страницы. Теперь наша задача – красиво оформить текстовое содержание странички.

Для этого мы воспользуемся атрибутом 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. Если его не применить, то весь набранный текст будет выровнен по левому краю, что смотрится некрасиво. Теперь слова в строке выровнены равномерно, что смотрится значительно приятнее.

Далее мы встречаем слово indent, тут увеличенный шрифт, а само понятие означает «красную строку». Теперь разберемся со ссылками – салатовый мы выбрали для ссылок, которые не активны, а активные обозначили красным, еще и с подчеркиванием линией с точек, имеющим толщину в 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;
}
.poloska {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;
}

Тут не предвидится никаких сложностей. Мы определили каждому рисунку свой атрибут - img1, img2, poloska. Кроме этого, в правилах мы четко определили размеры картинок, а также отступы. Сначала картинки можно попробовать подвигать опытным способом, перемещая их в нужное место, меняя параметры. Стоит заметить, что значения позволительно указывать и с минусом. В этом случае картинка будет двигаться в противоположную сторону. Для правильного положения на страничке стоит задать каждой картинке свое обтекание. Так мы можем разместить различные картинки справа и слева от текста. Помните еще об одном. Правила в этом случае начинаются не с сеточки, а с точки. Теперь можно снова сохранить страничку и открыть ее в браузере. Если все сделано правильно, то страничка уже обретет привлекательный вид.

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | Урок 8 | Урок 9