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