Страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML 1.0 (который, кстати, так никогда и не был “официально” принят и остался в виде черновика для “внутреннего употребления”). За эти 10 лет HTML прошел очень большой путь, завоевал практически все компьютеры в мире и стал одним из самых известных “компьютерных языков” (все-таки отнести его к языкам программирования рука не поднимается)… И одним из весьма заметных этапов развития HTML стало появление CSS - Cascading Style Sheets или, говоря по-русски, каскадных таблиц стилей. Идея CSS очень проста. Если в HTML вы прямо в документе ставили указание на то, как должен выглядеть тот или иной элемент, то при использовании CSS такие указания выносятся в отдельный блок (который может либо включаться в документ, либо читаться из внешнего файла).Такой простой ход стразу дает массу преимуществ вебмастеру. Прежде всего, значительно облегчается изменение внешнего вида сайта или отдельных его элементов - достаточно изменить определение соответствующего стиля в единственном CSS-файле, и эти изменения распространятся на весь сайт. Второе преимущество - сокращение размеров документов, которое особенно заметно на “красивых” страницах.Первая версия CSS - - принятая в 1996 и пересмотренная в 1999 году, позволяла оперировать только цветами, шрифтами, отступами и им подобными относительно простыми и частоиспользуемыми элементами. Принятая в 1998 году, спецификация добавила возможность абсолютного позиционирования элементов, создания стилей для разных типов устройств, использования собственных курсоров, расширила возможности по выбору элементов, к которым должен применяться тот или иной стиль и многое другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в CSS level 1. В настоящее время активно ведет разработку стандарта и , которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров, по созданию современных и удобных сайтов.Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют визуальное представление документа от его содержания - они только позволяет более компактно описать правила визуального представления. И если вы захотите изменить дизайн сайта, то вам все-равно придется переписывать HTML код (правда, сделать это будет проще чем при отсутствии CSS). Значительно больший уровень абстракции можно получить, используя связку языков XML + XSL (из которых, в частности, можно генерировать HTML + CSS), но это намного сложнее, и несколько выпадает из темы данной статьи.Но хватит теории! Давайте попробуем практикой заняться…Есть три способа описать стиль элемента в HTML документе. Самый простой и, практически, не использующий преимуществ CSS способ - это указать стиль внутри тега HTML. Например, написать <H2 STYLE=”COLOR:#AADDAA; FONT-WEIGHT:BOLD; FONT-SIZE:11pt;”>заголовок второго уровня</H2> Единственное преимущество, которое можно получить таким образом - это задание некоторых атрибутов текста, которые не поддерживаются тегами HTML. Зато сохраняются все недостатки HTML - указанный стиль относится только к одному тегу и для изменения внешнего вида документа вам придется изменить описание стиля в каждом теге.Второй способ несколько лучше:надо описания стилей заключить внутри тегов <STYLE TYPE=”text/css”> и </STYLE>. Например, если вы напишете <STYLE TYPE=”text/css”> H2 {COLOR:#AADDAA; FONT-WEIGHT:BOLD; FONT-SIZE:11pt;} </STYLE> а в тексте документа укажете <H2>заголовок второго уровня</H2>, то получите тот же эффект. Однако, в отличие от предыдущего способа, свойства отображения применятся ко всем тегам H2 в документе. И если, скажем, вам потребуется изменить размер шрифта или цвет всех заголовков второго уровня, то изменить потребуется всего одну строчку. Согласитесь, что это намного удобнее!Однако, у предыдущего способа тоже есть свой недостаток:блок STYLE вам придется скопировать в каждую страницу своего сайта. А если страниц там несколько сотен? И вам понадобится что-то поменять? Неудобно… Но можно победить и эту проблему - с помощью тега LINK. Описав требуемые стили в отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете написать в секции HEAD документа <LINK REL=”stylesheet” TYPE=”text/css” href=”style.css”> Эта команда укажет, что таблица стилей находится во внешнем файле. Таким образом, даже для очень большого сайта может использоваться всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще один “хитрый” необязательный параметр тега LINK:MEDIA. Он может указывать для какого типа устройств таблица стилей предназначена и иметь значения, например, “all” (используется по умолчанию), “handheld”, “print” и некоторые другие. Следует только учесть, что (пока еще?) не все браузеры понимают таблицы стилей, подключаемые с использованием этого параметра.В некоторых случаях бывает полезно объединить два предыдущих метода - например, если разные секции должны иметь частично разные стили (скажем, отличаться цветом фона). Внутри тега STYLE можно указать @import url(style.css) и тогда к стилям, описанным внутри STYLE присоединятся стили из внешнего файла.Но у внешних файлов тоже есть недостаток:если соединение с сервером не очень хорошее (что не редкость у модемных пользователей), то файл со стилями может и не скачаться… А страничка без стилей обычно выглядит преотвратнейше… Поэтому тут уж вам придется выбирать как лучше поступить.Практика показывает, что таблицы стилей редко бывают больше 2-3 Кб, даже для очень “раскрашенных” страниц. И если ваш веб-сервер умеет “на лету” сжимать страницы (в Apache, например, этим занимается mod_gzip), то такой объем будет для пользователя практически незаметен. Ну а дальше - дело техники:пишется какая-нибудь команда, которая на сервере читает таблицу стилей из внешнего файла (все-таки один файл намного легче редактировать!) и встраивает ее содержимое в страницу, отдаваемую посетителю. В простейшем случае это может быть инструкция SSI, вроде <!–#include file=”style.css” –> а если ваш сайт написан на php, то можно написать, например, <?php readfile(”style.css”); ?>
Написано для он-лайнового журнала
Автор:Дмитрий Турецкий Источник:
Делаем вывод даты на PHP
Если вам на сайте нужно вывести запись такого содержания:Сегодня:Среда, 24 Октября 2007 г.То пожалуйста читайте эту статью. Итак, для начало создайте файл index.php и вставьте в него следующий код:<htmL><head><title>Делаем вывод даты на ...
Загрузка файлов на сервер с помощью PHP
Если вам нужна форма для загрузки файлов с компьютера к себе на сервер, то этот урок(пример) для вас. Создайте файл index.php и вставьте в него следующий код:<?$path=GetCWD().”/files”;if(!file_exists($path))die(”<b>Пожалуйста, с ...
Скрипт формы отправки сообщения на e-mail с сайта v1.1
В данной версии были исправлены ошибки, которые были допущены в версии 1.0, а именно такие как:Проблемы с кодировкой, в некоторых броузерах отображалось места текста квадратикиПапки examples больше нету, она теперь называется forma(вы можете ее назвать ка ...
Делаем редирект на Html+JS
Если вам нужно переместить пользователя с одной страницы на другую, то прочитать как это сделать можно в этой статье. Пример выполнения данного скрипта вы можете посмотреть здесь.Для начала, создайте файл index.htm и вставьте в него следующий код:<html ...
Прозрачность картинки при наведении на нее курсора мыши через CSS
В этом примере рассказывается о том, что при наведении на картинку курсор мыши, ее прозрачность становилась 80%-ной(чтобы она была потусклее), а на неактивной картинке оставалась 100%-ной. Пример можно посмотреть здесь, не работает в InternetExplorer. Дал ...
