|
|
||||
История про CSS (часть I)
Поговорим о каскадных таблицах стилей. Их применение позволяет перейти на новый уровень создания сайтов и добиваться нужных эффектов оформления более простыми и логичными способами. Для чего нужны таблицы стилей? Как мы помним, в первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. - то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала. Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации. Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера. В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве - будь это 21" монитор или маленький черно-белый экран сотового телефона. Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается революционность подхода. Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили. При показе странички конкретному устройству должна быть задействована соответствующая случаю таблица стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае мы используем минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае в нашем распоряжении имеется все богатство шрифтового и цветового оформления. Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц. Размещение всей стилевой информации в одном внешнем файле открывает нам и другие полезные возможности - ведь изменив содержимое только одного (!) стилевого файла, мы можем в считанные секунды сменить весь дизайн сайта. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован верно. Разобравшись немного с теорией, давайте переходить к практике, и начнем мы с вопроса подключения таблицы стилей к HTML-файлу. Подключение таблиц стилей
Начнем с самого простого, с так называемого inline-описания
или описания, встроенного в тег: При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>. Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам. Это будет второй способ - описание в секции заголовка. Его действие распространяется на всю страничку. Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления. При использовании этого метода описание стилей
необходимо разместить в секции заголовка: Теперь эти стили можно применять в любом месте
html-кода. Для этого используется следующая
конструкция: Как видите, все не так уж сложно. Главное понять
основные принципы. Кроме определения новых
классов мы также имеем возможность
переопределять стандартные теги. Например, тег
<p>: Теперь весь текст, заключенный в теги <p></p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объем файла за счет отсутствия лишних атрибутов class. И наконец, третий способ - вынесение описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет. Каким же образом производится внедрение
внешнего файла? Для начала создается стилевой
файл с описанием всех нужных нам классов (mystyle.css): А потом ссылка на него внедряется в документ
при помощи тега <link>: Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им. Почему я сказал "основной"? Дело в том, что на практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей. Но об этом мы поговорим уже в следующий раз. История про CSS (часть II)
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей. Каскадность стилей
Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный. Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле. Для чего это нужно? О, это очень полезная вещь. И
сейчас я покажу это на конкретном примере.
Предположим, что для всех ссылок в заголовке на
нашей страничке определен следующий стиль: И, следовательно, любой текст, который является
гиперссылкой, автоматически становится красным
и перестает быть подчеркнутым. И вот мы решили в
конце странички указать копирайт, но сделать это
не сильно заметно, чтобы не акцентировать на этом
внимание. Но, тем не менее, мы хотим, чтобы
копирайт также был ссылкой. Сделать это нам нужно
всего лишь в одном месте странички и определять
для этого дополнительный класс нецелесообразно.
В этом случае нам на помощь придет каскадность
стилей. Достаточно локально переопределить цвет
ссылки: Сделали мы это при помощи параметр style, а он, как Вы помните, действует лишь в пределах того тега, в котором был определен. Что нам и нужно. Вы наверняка обратили внимание, что в вышеприведенном примере я ввел в обращение новый тег <span></span>. Он предназначен специально для таких случаев. Все, что он делает - это определяет некую область, к которой мы можем применить стиль. Это очень удобный тег, т.к. не вставляет ни до, ни после себя ненужных отбивок (т.е. пустое вертикальное пространство), как это делает тег <p>. В каких тегах лучше определять стили
посредством класса? Чаще всего для этого
используется одна из следующих конструкций: Тег <div> подобен <span>, но только с тем отличием, что делает до и после себя отбивку (точно так же, как и <p>). А вот стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега <p>, а не определением отдельного класса. И небольшое дополнение, связанное с корректным показом в обоих броузерах - если Вы используете табличную верстку для дизайна сайта, то определять стиль основного текста нужно не только в теге <p>, но и в <td>, т.к. Netscape категорически отказывается наследовать стили, присвоенные до таблицы. Разобравшись с каскадностью, давайте поговорим о синтаксисе.
Синтаксис
CSS Сначала указывается имя класса - оно может быть
произвольным, но желательно все-таки давать
осмысленное название. Далее, в фигурных скобках {}
перечисляются все необходимые параметры для
данного класса. Параметры отделяются друг от
друга точкой с запятой. Вот еще один пример, в
котором используется более длинное описание: Заметьте, что в обеих конструкциях я начал имя
класса с точки и таким образом определил
универсальный класс, т.е. такой, который может
быть применен к любому тегу. И делается это при
помощи следующей конструкции: Раз есть универсальные классы, то, вероятно,
существуют и какие-то другие? Все правильно, еще
бывают так называемые теговые классы: Класс, определенный таким образом, сработает
только в том теге, для которого он предназначен, а
для всех остальных будет проигнорирован: Мы можем определять параметры не только для
одного тега, но и сразу для нескольких. Для этого
в определении стиля достаточно перечислить их
через запятую: Такой прием называется группировкой, и в данном случае мы определили и для <p>, и для <td> одинаковый размер и цвет текста. В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны. Псевдоклассы Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней. А вот и другой пример псевдокласса -
определение буквицы вначале абзаца: Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов. Комментарии Для небольших сайтов эта возможность Вам вряд ли понадобится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо. Основные параметры CSS Все параметры, используемые для определении стиля, условно можно разделить на несколько больших групп:
Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев - как наиболее часто употребляемые. Основные параметры шрифта Основные параметры абзаца Единицы измерения в CSS
Задание цвета в CSS
И закончим эту статью несколькими примерами
описания таблицы стилей: Надеюсь, что этот небольшой справочник поможет Вам на первых порах, а для написания более сложных стилевых таблиц лучше всего воспользоваться специальными программами - например, входящим в состав HomeSite редактором TopStyle, который, кстати, содержит и прекрасный справочник свойств.
|
|
|||||||||||||||
| Нам весьма интересны любые Ваши предложения о сотрудничестве. |
|
|
|
