XHTML+CSS
красота и удобство
Привет, мой дорогой! Прошу прощения за 48 дней молчания. Сегодня я нарушу тишину рассказом о возможности наделить XHTML-документ красотой и удобством.
Все просто
Вы помните, как выглядел тестовый XHTML-документ из прошлого поста? Красивого мало, да и читать неудобно.
CSS — Cascading Style Sheet
(Каскадная таблица стилей).
Что такое CSS в двух словах: список описаний того, как должны выглядеть и располагаться элементы XHTML-документа.
Главная ценность CSS состоит в отделении содержимого от оформления. То есть к одному XHTML-документу можно применять сколь угодно много разных стилей и один и тот же документ будет выглядеть совсем по-разному. Первый массовый эксперимент, демонстрирующий возможности CSS — CSS Zen Garden. Более 200 дизайнов позволяют одному и тому же документу вызывать совсем разные эмоции 8) В принципе, любая современная блог-платформа построена с учетом того, что многие люди будут делать для нее много разных дизайнов, не заморачиваясь особо с изменением XHTML-страниц.
Приступим!
Итак, чтобы привести документ в порядок, нам нужно применить к нему CSS-стили. Сделать это можно двумя способами: написать код стилей внутри документа (но крутые пацаны и девчонки так не делают) или создать отдельный текстовый файл с расширением .css, записать в него стили и сделать на него ссылку в документе.
Строка подключения css-файла должна размещаться внутри тэга и выглядеть примерно так:
1 | <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> |
Атрибут href содержит ссылку на css-файл, атрибут media указывает прибор, для которого будет применяться именно этот стиль. Кроме монитора компьютера это еще может быть много чего интересного (см. спецификацию).
Простой стиль, например, для абзаца, выглядит так:
1 2 3 4 | p{ /* задаем абзацам зеленый цвет шрифта */ color:green } |
Пример
Возьмем в качестве примера наш документ из прошлого урока, только добавим к нему подключение стилей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Проснитесь в своих снах!</title> <meta name="description" content="осознанные сновидения, сон, книга" /> <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> </head> <body> <h1>Проснитесь в своих снах!</h1> <p> Я брел по сводчатому коридору, уводившему вглубь огромной крепости и я невольно остановился, восхищаясь величественностью архитектуры. Каким-то образом, созерцание великолепного окружения заставило меня понять, что это сновидение! Впечатляющее великолепие замка показалось моему прояснившемуся сознанию еще более удивительным. </p> <p> В состоянии сильнейшего возбуждения я стал исследовать воображаемую реальность своего «воздушного замка». Спускаясь в холл, я чувствовал холод камня под ногами и слышал эхо собственных шагов. Каждый элемент этого зачаровывающего зрелища казался реальным, и несмотря на это я прекрасно осознавал, что вижу сон! </p> <small>Стивен Лаберже. Осознанные сновидения. Глава 1. </small> </body> </html> |
А CSS-файл со стилями будет простым:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | body{ /* стиль для тела документа */ width:500px; /* задаем ширину */ margin:20px; /* задаем отступы снаружи */ font:62.5% Arial,Sans-Serif /* задаем размер и семейство шрифта для всей страницы */ } h1{ /* стиль для главного заголовка */ font:2.4em Georgia,Serif; color:#666 /* задаем цвет шрифта */ } p{ /* стиль для абзацев */ margin-bottom:1.5em; /* задаем отступ снизу от абзаца */ font-size:1.5em; color:#333; line-height:140% /* задаем интерлиньяж — межстрочное расстояние */ } small{ /* стиль для маленьких пометок */ font-size:1.2em; color:#999 } |
Как видишь, все просто: описания стилей идут друг за другом и содержат в себе простые инструкции, задающие те или иные параметры тэгов, к котором применяются.
Ты можешь посмотреть как выглядит стилизованная страница и сам файл стилей.
PS
Особо любознательные могут изучить спецификацию CSS2. Те, кто ищет простые пути, могут просто посмотреть список свойств CSS и простые уроки от Мержевича.
