| Главная » Статьи » CSS |
 Прежде всего, хочу вас предупредить: если вы не знаете HTML, то из этой статьи ничего нового вы не узнаете. Просто потому, что не поймете. CSS придуманы специально для расширения возможностей HTML, поэтому прежде чем браться за каскадные таблицы, я советовал бы вам изучить язык маркировки гипертекстов (то бишь HTML). Тем более что много времени это не займет, а учебников по HTML вы сможете найти великое множество.Но вернемся к нашим баранам :) . Все, кто делал веб-страницы, так сказать, вручную (на HTML, а не в WYSIWYG-редакторах), знают, как мало возможностей предоставляет этот язык, когда он используется "в чистом виде" (я имею в виду, без каких-либо вспомогательных средств). К примеру, позиционирование элементов, форматирование списков, работа с фоновыми изображениями - это далеко не полный список того, что может принести головную боль программистам на HTML. И действительно, гипертекстовый язык настолько несовершенен, что порой несложные странички могут иметь огромный нечитаемый код. К тому же, автор страницы не может заранее определить настроек браузера пользователя, что существенно ограничивает число вариантов представления информации на странице. Нельзя сказать, что разработчики браузеров не предпринимали попыток изменить данную ситуацию. В ранних версиях браузеров CERN для платформы NEXT автору страницы давалась возможность переопределять настройки умолчания браузера через HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах и постепенно "завял". Другой способ управления настройками браузера - программирование на JavaScript. Этот язык сейчас становится все более и более популярным, однако имеет один недостаток - большой объем кода, что делает его не самым оптимальным средством. По крайней мере, на ближайшие несколько лет. Но выход все же есть. И имя ему - CSS (Cascading Style Sheets). Или, по-русски, каскадные таблицы стилей. Разработала спецификации каскадных таблиц небезызвестная фирма Microsoft. Наверно поэтому, кстати, Internet Explorer поддерживает CSS в несколько большей степени, чем Netscape (хотя NN6 сделал в этой области огромнейший шаг вперед). Да, кстати, неплохо поддерживает каскадные таблицы браузер Opera (хотя и хуже, чем ее "старшие братья"). Посему советую всем, кто будет использовать на своих страницах CSS, обзавестись хотя бы Нетскейпом и Эксплорером и проверять свои творения и там, и там. Изначально CSS создавались для того, чтобы отделить содержание страницы от сопутствующих дополнительных тэгов описания. Предположим, нам надо писать некое выражение, часто повторяющееся в тексте, зеленым цветом, шрифтом отличным от шрифта текста и, к тому же, выделять курсивом. Если вы хотите обойтись только средствами HTML, то вам необходимо будет каждый раз писать что-то типа: <font color=green face="ваш_шрифт"><i>текст</i></font> Не слишком трудно, но если эту запись приходится повторять десятки раз, то это уже не очень удобно. CSS дает возможность задать описание объекта только однажды. Мало того, можно описать все стили для нескольких страниц или всего сайта в одном отдельном файле и все ваши странички будут иметь совершенно одинаковый вид - одинаковые шрифты, таблицы, рамки. При этом, если вы что-либо захотите изменить в оформлении своего сайта, вам нужно будет поменять только один файл - тот, в котором содержаться соответствующие стили описания. Кроме того, CSS позволяет использовать множество дополнительных эффектов для оформления страниц. Что тоже важно. <P STYLE="font-size: 14pt; font-style: italic; background-color: lime">Этот абзац будет напечатан курсивом, шрифтом с размером 14 пунктов, и на светло-зеленом фоне.</P> Таким образом, к тексту, заключенному между тегами <P> и </P>, были применены соответствующие стили, описанные за атрибутом STYLE. Этот атрибут можно применить внутри любого элемента разметки. Однако допустимый набор пар "свойство: значение" в каждом конкретном случае будут несколько различаться (об этом мы поговорим в дальнейшем). <HEAD> Теперь во всем документе элемент, описанный с помощью 'STYLE' в заголовке, будет форматироваться и представляться на экране в соответствии с установленным для него стилем, если только он не будет переопределен с помощью атрибута STYLE (см. пункт 1) или средствами обычного HTML. Кстати, параметр TYPE="text/css" является обязательным и служит для указания браузеру использовать CSS. Приведу приме <HEAD> Чтобы определить несколько элементов одинаковыми стилями, можно использовать группирование. Тогда все элементы нужно перечислить друг за другом через запятую, вот так: H1, H2, H3 {text-decoration: line-though} Такая запись означает, что заголовки первого, второго и третьего уровней будут отображаться перечеркнутыми. <HEAD> <элемент CLASS="имя класса">что-то, что будет форматироваться в соответствии с заданными в классе стилями</элемент> ... </BODY> Вот пример: <HEAD> В этом примере Ячейка2 отформатирована в соответствии с классом "x", для элементов которого установлена ширина в 160 пикселей, а Ячейка3 - в соответствии с классом "y", для всех элементов которого устанавливается внутренний отступ ("набивка") в 15 пикселей. Ячейке1 ни один из классов не присваивается, поэтому она форматируется в соответствии с общепринятыми стандартами HTML, а также согласно описанным в теге <TABLE> атрибутам. Допустим, что по замыслу автора все элементы 'CITE' (логическая разметка, используется обычно для выделения названия какой-либо книги или статьи и отображается курсивом), расположенные внутри заголовков 'H3', должны быть выведены фиолетовым цветом. При этом все элементы 'CITE' вне заголовка 'H3' должны иметь цвет по умолчанию (то бишь черный). Для удобного использования каскадных таблиц в этом случае существует так называемые контекстные селекторы. Например, в нашем случае необходимого результата можно достигнуть так: H3 CITE {color: purple} Здесь элемент 'H3' является как бы маской поиска. Описанный стиль (color: purple) применяется только к последнему элементу (в данном случае 'CITE'), и только тогда, когда результат поиска является положительным. Продемонстрируем работу контекстного селектора на данном примере: <BODY> 3. Ссылка на внешний файл описания стилей. В любую страничку описание стилей можно импортировать из внешнего файла, который необходимо создать заранее и присвоить ему расширение .css. Содержанием этого файла должны быть описания стилей, построенные с синтаксисом, рассмотренным в пункте 2. Подключение внешнего файла осуществляется с помощью элемента 'LINK', который может располагаться как в заголовке, так и в теле документа: <LINK TYPE="text/css" REL="stylesheet" HREF="http://path/to/your/css"> Значение атрибута REL обязательно должно быть "stylesheet". 4. Импорт описания стилей. Это аналог описанному выше способу задания описаний. С его помощью также можно ссылаться на внешние файлы каскадных таблиц: <STYLE type="text/cs"> @import: url (http://path/to/your/css) </STYLE> Импортируемый стиль можно переопределить с помощью любых перечисленных ранее методов. Однако такой способ подключения внешних файлов не рекомендуется по той причине, что он поддерживается далеко не всеми браузерами. На сегодня, пожалуй, все. Удачи! | |
| Просмотров: 652 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
