Применение стилей шрифта и текста
Используя разметку, созданную в главе 1, посмотрим, как можно преобразовать ее в более профессиональную.
Применив только свойства, рассмотренные в этой главе, мы можем сделать страницу более привлекательной.
Вот что мы добавили.
1. body {font-fami1y: verdana, arial, sans-serif; font-size:100%; margin: 1em 2em;} - здесь мы задаем базовые стили для шрифта и указываем поля страницы. Свойство font-family наследуется всеми последующими элементами, и поля отодвигают содержимое от краев страницы.
2. * {margin: 0; padding; 0;} - мы «нейтрализуем» все поля по умолчанию для всех элементов, съедающих слишком много места по вертикали в версии разметки без стилей. Мы также обнуляем все отступы, что позволит создать единый облик списков для всех браузеров. Удалив все поля и отступы по умолчанию, мы добавим их только к нужным элементам.
3. h3 {font-size:.7em; word-spacing:1em; letter-spacing:-.05em; margin:.5em 0;} - этим правилом мы задаем меньшее межбуквенное пространство и увеличиваем пробелы между словами.
4. h1 {font-size:1.1em; text-transform:uppercase; text-align: center; letter-spacing:.2em; margin: .5em 0;} - выравниваем заголовок по центру и увеличиваем расстояние между буквами, которые делаем заглавными.
5. p {font-size:.75em; line-height:1.5em; text-indent:-1.75em; margin:0.5em 0 .75 em 1.75 em;} - слегка уменьшаем размер шрифта, повышаем высоту строки и задаем отрицательный отступ для первой строки.
6. ol (margin-left:6em; font-sizr:.75em; line-height:1.5; font-style:italic;} - задаем большое поле слева для смещения списка. Для текста списка указываем курсив и увеличиваем междустрочное расстояние.
7. a {margin-left:б.5em; font-size:.7em;} - задаем левое поле, чтобы ссылка под списком располагалась точно под ним.
8. a:hover {text-decoration:overline underline;} - при наведении указателя мыши на ссылку она выделяется надчеркиванием.
9. ul {margin-left: 6em; font-size:.75em; line-height: 1.75; font-style:italic;} - этот список также смещен и выделен курсивом.
10. ul a {font-size:1em; margin: 0;} - пунктами списка являются ссылки, поэтому для них мы с помощью контекстного селектора задаем стиль, отличающийся от стиля ссылок, не входящих в список.
11. sup {vertical-align: 35%; font-size: 90%;} - доработка тега sup.
12. div#homepagefooter p {font-size:.7em; font-weight:bold;} -создаем мелкий жирный шрифт для области нижнего колонтитула.
Помните, что при размещении этих стилей в отдельном файле они будут применяться ко всем страницам, содержащим ссылку на этот файл, то есть вы сможете применить единый стиль ко всему сайту, указав стили лишь единожды во внешнем CSS-файле.