Сайт о правильных сайтах







Введение

В 1996 г. Консорциумом W3C была утверждена спецификация CSS (Cascading Style Sheets).

Каскадные листы стилей отделены от содержания веб-страниц и потому не вредят внутренней логике последних. К тому же они, в отличие от встроенных в HTML возможностей визуального форматирования, явно предписывают агенту пользователя, каким образом должны интерпретироваться те или иные свойства. Полузабытый принцип разделения содержания и представления, заложенный разработчиками SGML, стал возрождаться.

Любой технологии, однако, нужны многие годы на обкатку. Первая версия CSS, CSS level 1 (или просто CSS1) оказалась почти не замеченной разработчиками, ибо не смогла заменить собой все визуальные средства, насильственно втиснутые в HTML. К тому же, качество поддержки CSS в браузерах тех лет не выдерживало никакой критики.

Спецификация CSS2, утвержденная в качестве официальной рекомендации в 1998 г., обладает намного более серьезными возможностями. Ее конек — блочная модель, позволяющая представить любую веб-страницу как набор прямоугольных областей с различными свойствами и тем самым избавиться от верстки шаблонов страниц при помощи таблиц. Кроме того, CSS2 позволяет определять индивидуальные и прозрачные для пользователя правила представления информации для различных сред и устройств вывода, в частности, для экрана настольного компьютера или ноутбука, для меньшего по размерам экрана «наладонника» или смартфона, для речевых браузеров, для механических строк Брайля, для принтера и т. д.

Основные понятия

Стиль — это набор параметров, задающий внешнее представление некоего объекта в той или иной среде. Например, если нужно поместить параграф текста на Web-страницу, то нужно подумать о том, как он будет выглядеть: какой гарнитурой и размером шрифта он должен быть набран, как выровнен на странице, какого цвета должны быть буквы и. т. д.

В одном документе может встречаться множество различных элементов, каждый из которых может иметь свой стиль оформления, набор стилей для всех элементов одного документа назы вается таблицей стилей.

Таким образм, любой документ можно разметить при помощи некоторого языка разметки, а затем дополнительно к этому создать несколько таблиц стилей для представления этого документа на любом воспроизводящем устройстве — визуальном или голосовом браузере, на экране карманного компьютера или мобильного телефона. В результате получается универсальный документ, который можно будет "просмотреть" на любом устройстве, для которого создана соответствующая таблица стилей.

Каскадными таблицы стилей называют из-за особых правил, согласно которым каждому стилю придаётся вес и значимость. Каскадирование применяется в том случае, если для одного элемента разными способами задано несколько разных стилей.

Принципы каскадирования определяют приоритеты применения стилей и тем самым решают конфликтные ситуации.

История развития CSS

CSS — каскадные таблицы стилей

Это технология оформления веб-страниц, элемент концепции DHTML. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере «Mozilla» для оформления элементов графического интерфейса, XUL).

CSS используется создателями и посетителями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основное назначение, для которого технология CSS была разработана, это разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.

Таблица стилей может быть написана не только на языке CSS, но и на каком-либо другом языке, например XSL. Для установки языка таблицы стилей по умолчанию используется элемент META. Этот элемент задаёт различного рода служебную информацию и располагается в секции HEAD. Атрибут элемента META content показывает с помощью какого языка будет написана таблица стилей.

CSS при отображении страницы может быть взята из различных источников:


Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

С точки зрения наиболее полной реализации принципа разделения содержания и представления предподчтительнее внешние листы стилей. Только в этом случае один лист стилей сможет распространять своё влияние на множество документов. Если для всех страниц сайта используется единый лист стилей, это позволяет заметно сократить время загрузки страниц, поскольку обычно файл стилей, единожды загрузившись, кэшируется браузером, не требуя повторной передачи с каждым вновь открываемым документом. Но, к сожалению, бывает, например, из-за плохой связи, что CSS-файлы не загружаются, приводя к тому, что страница отображается не так, как задумано.

При наличии нескольких правил для одного и того же документа преимущество имеет правило с наибольшим приоритетом. По умолчанию, правила в таблицах стилей, созданных разработчиком страницы, имеют больший приоритет, чем правила, созданные пользователем. И все правила разработчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузера. используемой по умолчанию.

Таким образом, наименее приоритетна — таблица стилей браузера, затем идёт таблица стилей пользователя, и самой приоритетной является таблица стилей, созданная разработчиком.

Этот порядок можно изменить, указав директиву !important, для какого-то отдельного правила, тогда правило с такой директивой становится более приоритетным, например, в таблице стилей пользователя написано:


 p{

  color: blue !important;

   },

а в таблице разработчика указано:


 p{

  color: red

   },

то более приоритетным будет первое правило, т.е. цвет текста абзацев будет синим.

Таблицы стилий, подключаемые из внешних источников, также каскадируются, и их приоритетность определяется порядком подключения таблиц. Сначала применяется таблица стилей по умолчанию, затем её правила переопределяются первой подключённой таблицей, потом подключается следующая, которая переопределяет правила предыдущей. и т.д. Поэтому подключайте таблицы стилей в порядке возрастания их важности. Тоже относится и к правилам, записанным внутри одной таблицы стилей. Каждое следующее правило переопределяет предыдущее, написанное для одного селектора.

Кроме этого, CSS2 позволяет управлять представлением данных, учитывая специфику среды или устройства вывода информации. При условии, что разработчик предусмотрел индивидуальные листы стилей для представления содержимого страниц сайта не только на экране настольного ПК, но и для ноутбука, карманного компьютера. Можно также предусмотреть версию для печати.

Синтаксис CSS

У CSS достаточно простой синтаксис.

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделенных запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.

Схематически это можно показать так:


селектор, селектор {

свойство: значение;

свойство: значение;

свойство: значение;

  }


Например:


p {

font-family: "Garamond", serif;

  }

h2 {

font-size: 110 %;

color: red;

background: white;

  }

.note {

color: red;

background: yellow;

font-weight: bold;

  }

p#paragraph1 {

margin: 0;

  }

a:hover {

text-decoration: none;

  }

#news p {

color: blue;

  }

Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например: <p class="note"> этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.

Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберет подчеркивание, когда курсор мыши находится над этими элементами.

Последнее, шестое правило применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

Селектор определяет, к каким элементам HTML-документа будет применено данное правило. В самом простейшем случае селекторы совпадают с именами тегов. Кроме этого, бывают селекторы атрибутов, уникальных элементов, классов, псевдоэлементов, псевдоклассов, такие селекторы называются комбинированными. Например,

p a, li a

Этот селектор указывает на элементы <a>...</a>, но не на все подряд, а только на такие, которые заключены в контейнерах <p>...</p> и <li>...</li>.

При помощи CSS можно переопределить внешний вид маркеров списков, в том числе и путём назначения графического изображения в качестве маркера. Кроме того, CSS позволяет определить, каким образом должны располагаться маркеры списка относительно его содержания. Для задания внешнего вида маркера используется свойство list-style-type. Значение этого свойства применимы как к спискам, заданным тегом <ul>, так и к спискам, определённым при помощи тега <ol>.

Использование в качестве маркера графического изображения позволяет свойство list-style-image. В качестве значения этого свойства выступает URL картинки.

Свойство list-style-position указывает, где по отношению к содержимому списка должны находиться маркеры — внутри содержимого элементов (значение inside) или за его пределами (значение outside, используемое по умолчанию). Ниже приводится пример с использованием свойства list-style для управления внешним видом элементов списка.


<?xml version="1.0" encoding="windows-1251"?>

<!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" lang="ru" xml:lang="ru">

<head>

  <title>Управление внешним видом элементов списков</title>

<style type="text/css">

<!--

 body {

  color: #000;

  background-color: #fff;

   }

 ul {

  list-style: url(bullet.png) square inside;

   }

 ol {

  ist-style-type: lower-roman;

   }

-->

</style>

</head>

<body>

<p>Хороший сайт отличают как минимум следующие черты:</p>

<ul>

  <li>высокое качество информационного наполнения и грамотность его подачи;</li>

  <li>оригинальность и эстетическая привлекательность внешнего облика страниц;</li>

  <li>доступность содержания сайта для максимально широкого круга пользователей вне зависимости от применяемых ими типов устройств и версий браузеров, а также от ограничений по состоянию здоровья;</li>

  <li>эргономичность элементов пользовательского интерфейса сайта, обеспечивающая высокую эффективность, но в то же время легкость и непринужденность взаимодействия посетителя с веб-ресурсом;</li>

  <li>надежность и безопасность используемых технологических решений, четкая согласованность работы всех компонентов;</li>

  <li>безупречная проработка всех деталей и нюансов.</li>

</ul>

<p>Технологическая цепочка создания сайта состоит из следующих шагов:</p>

<ol>

 <li>постановка задачи, включающая в себя:

  <ul>

   <li>анализ существующих конкурирующих и/или родственных проектов;</li>

   <li>выработку концепции;

  </ul>

 </li>

 <li>подготовка первоначального информационного наполнения;</li>

 <li>разработка макетов страниц;</li>

 <li>подготовка шаблонов страниц;</li>

 <li>проектирование и реализация сервисов;</li>

 <li>сборка всех компонентов воедино;</li>

 <li>тестирование;</li>

 <li>ввод в эксплуатацию;</li>

 <li>пожизненное сопровождение — информационное наполнение и техническая поддержка.</li>

</ol>

</body>

</html>

управление внешним видом маркера

Ниже приводится пример использования CSS свойств, управляющих фоновым изображением. Используя свойство background-repeat, мы запретили размножение фонового рисунка. В значении свойства background-attachment мы указали, чтобы картинка прокручивалась вместе с текстом страницы. Изображение смещено на 50 пикселов вправо и на 150 пикселов вниз относительно левого верхнего угла страницы благодаря применению свойства background-position.


<?xml version="1.0" encoding="windows-1251"?>

<!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" lang="ru" xml:lang="ru">

<head>

  <title>Вставка фонового изображения</title>

<style type="text/css">

<!--

body {

 color: #000;

 background-color: #fff;

 background-image: url(fortress.jpg);

 background-repeat: no-repeat;

 background-attachment: scroll;

 background-position: 50px 150px;

  }

-->

</style>

</head>

<body>

<h1>Вставка фонового изображения</h1>

<p>В эпоху, когда каскадные листы стилей были еще в диковинку, существовал лишь один алгоритм рендеринга фона — размножение фонового изображения от верхнего левого угла того или иного элемента страницы по всей площади последнего.</p>

<p>Благодаря CSS арсенал средств по управлению фоновыми изображениями существенно расширился.</p>

<p>За отображение фонового рисунка отвечают четыре свойства: background-image, background-repeat, background-attachment и background-position.</p>

</body>

</html>

стили и фоновое изображение

Преимущества CSS верстки

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Можно выделить следующие основные преимущества CSS:

Включение CSS в HTML

CSS можно включать в HTML тремя способами:


Ниже приводится пример применения внешнего и внутреннего листа стилей


<?xml version="1.0" encoding="windows-1251"?>

<!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" lang="ru" xml:lang="ru">

<head>

  <title>Связь листов стилей с HTML-документом</title>

<!-- Подключение внешнего листа стилей style1.css -->

<link rel="stylesheet" href="style1.css" type="text/css" />

<!-- Определение внутреннего листа стилей -->

<style type="text/css">

<!--

/* Подключение внешнего листа стилей style2.css */

@import url(style2.css);

/* Правила внутреннего листа стилей */

 h1 {

  background-color: rgb(0, 102, 0); /* Темно-зеленый цвет фона для всех заголовков первого уровня */

  }

-->

</style>

</head>

<body>

<h1>Элементы логической разметки HTML</h1>

<p>Все элементы логической разметки можно подразделить на два типа: блочные (block) и внутристрочные (inline).</p>

<p>Разница между ними заключается в том, что при визуальном отображении страницы следующие друг за другом блочные элементы располагаются вертикально, а внутристрочные — горизонтально.</p>

<p>Иными словами, любой блочный элемент всегда разрывает строку, а внутристрочный — нет.</p>

<!-- Для последнего абзаца используется полужирное начертание -->

<p><style="font-weight: bold">Абзац является примером блочного элемента — он всегда начинается с новой строки. Любой элемент, который следует за абзацем, будет также перенесен на новую строку.</p>

</body>

</html>

использование внешних и внутренних листов стилей

DHTML

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, используя сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Язык программирования Java, разработанный в 1993 году компанией Sun Microsystems и напоминающий по структуре и синтаксису язык С, существует сегодня в двух вариантах: JavaScript и собственно Java. JavasScript является надстройкой стандарта HTML и значительно расширяет возможности документа, созданного в этом формате. Модуль написанный на JavaScript, интегрируется в файл HTML как подпрограмма и вызывается на исполнение из соответствующей строки HTML-кода стандартной командой. Встроенный в браузер интерпретатор языка воспринимает и скрипт, и сам код гипертекста как единый документ, обрабатывая те и другие данные одновременно.

Модуль Java в отличии от JavaScript не интегрируется в использующую его страницу, а существует как самостоятельное приложение с расширением .class, т.е. апплет. При использовании этого варианта языка апплет также вызывается из html-файла соответствующей командой, но загружается, инициализируется и запускается на исполнение в виде отдельной программы, в фоновом режиме. С помощью технологии Java можно придать своей странице элементы интерактивности, формировать, компоновать и полностью контролировать формат всплывающих окон и встроенных фреймов, организовать такие активные элементы, как «часы», «бегущие строки» и иную анимацию, создать чат. Большинство web-камер, передающих на сайт «живое» изображение, также работают на базе соответствующих приложений Java.

Среди достоинств этой технологии следует отметить отсутствие необходимости устанавливать и настраивать на сервере какие-либо дополнительные модули, обеспечивающие работу Java-программ. Главный недостаток Java заключается в том, что пользователи броузеров старых версий, не поддерживающих компиляцию данного языка, воспринимать объекты, созданные при помощи Java и JavaScript, не смогут.

Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видео-игр.

DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA. Смотри Comparison of layout engines (DOM) , чтобы узнать больше о списке API-функций, доступных в каждом браузере для использования в DHTML-приложении.

Одно из неудобств DHTML — это сложность разработки и отладки, из-за различной степени поддержки среди web-браузеров вышеупомянутой технологии, а также разнообразие размеров экрана означает, что правильно отображаться будет только в ограниченном количестве браузеров и комбинаций размера экрана. Развитию последних браузеров таких как Internet Explorer 6.0, Netscape 6.0+ и Opera 7.0+, помогает общая DOM.

DOM (от англ. Document Object Model — «объектная модель документов») — это платформенно-независимый программный интерфейс, позволяющий программам и скриптам управлять содержимым документов HTML и XML, а также изменять их структуру и оформление.

Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого содержит элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями родитель-потомок.

Изначально различные браузеры имели собственную модель DOM, не совместимую с остальными. Для того, чтобы обеспечить взаимную и обратную совместимость, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.




Обновить страницу