Лекция 3. Создание статического содержания. CSS

Лекция 3. Создание статического содержания. CSS

3.1. Таблицы стилей CSS

3.1.1. Общее описание

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

CSS – одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01, XHTML и стандарт CSS.

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

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera. Что касается Internet Explorer, то только 8-ая его версия полностью поддерживает CSS 2.1 и частично – CSS 3.

Основными преимуществами использования CSS являются:

·       несколько дизайнов страницы для разных устройств просмотра;

·       уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл;

·       простота последующего изменения дизайна;

·       дополнительные возможности оформления (например, можно сделать так, чтобы меню было всегда видно при прокрутке страницы).

Недостатками использования CSS являются:

·       различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;

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

Термин «Каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Рекомендация W3C по CSS1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:

·       Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля – обычного, курсивного или полужирного.

·       Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

·       Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)

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

·       Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.

Рекомендация W3C по CSS2, принята 12 мая 1998 года. Она построена на CSS1 с сохранением обратной совместимости. В данной CSS2 добавлены следующие возможности:

·       Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.

·       Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК).

·       Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта).

·       Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.

·       Расширенный механизм селекторов.

·       Указатели.

·       Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.

Рабочая версия CSS2.1 W3C от 8 сентября 2009 года. Она построена на CSS2 и содержит исправления ошибок.

Рабочая версия CSS3 cильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и введением переменных.

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

·       Авторские стили в виде:

o   внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе;

o   встроенных стилей – блоков CSS внутри самого HTML-документа;

o   inline -стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style;

·       Пользовательские стили:

o   локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;

·       Стиль браузера:

o   стандартный стиль, используемый браузером по умолчанию для представления элементов.

Пример таблицы стилей:

h2 {

               font-size: 1.75em;

               color: #469;

}

#container {

               padding: 0;

}

#column_r_content, #column_l_content {

               margin: 10px;

}

p#paragraph1 {

  margin: 0;

}

#masthead img {

               float: left;

               margin: 0;

               padding: 0;

}

#navigation a:hover {

               color: #000;

               text-decoration: none;

               border: 1px solid #ed9;

               background-color: #ed9;

}

.style_italic {

               font-style: italic;

}

Здесь приведено семь правил с селекторами h2, #container, #column_r_content, #column_l_content, p#paragraph1, #mastheadimg, #navigation a:hover, .style_italic.

В первом правиле HTML-элементу h2 (заголовку второго уровня) назначаются стиль, согласно которому, заголовок второго уровня будет отображаться темно-синим цветом увеличенным кеглем.

Второе правило будет применяться к элементам, идентификатор которых равен container. Аналогично ему, третье правило будет применяться к элементам, идентификатор которых равен либо column_r_content, либо column_l_content. Эти элементы будут иметь внешний отступ, равный 10 пикселям.

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

Пятое правило будет применяться только к элементам img, которые находятся внутри элемента, атрибут id которых равен masthead. Такие элементы не будут иметь внешних и внутренних отступов и будут прижиматься к левой границе экрана (но внутри своего контейнера).

Шестое правило определяет стиль hover для элементов a, находящихся в элементе с атрибутом id равным navigation. Это правило, в частности, изменить цвет и задний фон ссылки, когда указатель мыши находится над этими элементами.

Седьмое правило будет применено к элементам, атрибут class которых содержит слово ' style_italic '. Например:

<p class="style_italic">

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

</p>

3.1.2. Добавление CSS

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.

3.1.2.1. Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>.

Пример подключения таблицы связанных стилей:

…

<head>

…

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

  <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">

…

 </head>

…

Значения параметров тега <LINK> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

3.1.2.2. Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>.

Пример использования таблицы глобальных стилей:

…

 <head>

 …

  <style type="text/css">

   p { 

    font-size: 110%; 

    font-family: Verdana, Arial, Helvetica, sans-serif; 

   }

  </style>

 </head>

…

Замечание. Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.

3.1.2.3. Внутренние стили

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей.

Пример использования внутренних стилей:

…

 <body>

  <p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</p>

 </body>

…

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

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

3.1.3. Базовый синтаксис

Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис:

Селектор { свойство1: значение; свойство2: значение; ... }

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Замечание. Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры.

3.1.4. Селекторы тегов

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

Тег { свойство1: значение; свойство2: значение; ... }

Пример изменения стиля тега параграфа:

…

 <head>

 …

  <style type="text/css">

   p { 

    font-size: 110%; 

    font-family: Verdana, Arial, Helvetica, sans-serif; 

   }

  </style>

 </head>

…

В данном примере изменяется размер шрифта и семейство шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P>.

3.1.4.1. Классы

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

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса".

Пример использования классов c тегами:

…

 <head>

 …

  <style type="text/css">

   p { 

    font-size: 110%; 

    font-family: Verdana, Arial, Helvetica, sans-serif; 

   }

   p.Color { 

    color: navy; 

   }

  </style>

 </head>

<body>

   <p>Пример использования селектора тегов.</p>

   <p class="Color">Пример использования класса.</p>

</body>

…

Результат данного примера показан на рис. 1.

Рисунок 1 - Результат использования классов c тегами

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий:

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу.

Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>.

3.1.4.2. Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий:

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

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

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример). Символ решетки при этом уже не указывается.

Пример использования идентификатора:

…

 <head>

 …

  <style type="text/css">

   #help { 

    position: absolute; 

    left: 160px; 

    top: 50px; 

    width: 225px;

    height: 180px; 

    background: #f0f0f0;  

   }

  </style> 

</head>

<body>

  <div id="help">Пример использования Идентификаторов</div>

</body>

…

В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id.

Результат данного примера показан на рис. 2.

Рисунок 2 - Результат использования идентификатора

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий:

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.

3.1.4.3. Контекстные селекторы

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

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий:

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.

Пример использования контекстных селекторов:

…

 <head>

 …

  <style type="text/css">

   P B { 

    font-weight: bold; 

    color: navy;

   }

  </style> 

</head>

<body>

   <div><b>Жирное начертание текста</b></div>

   <p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>

</body>

…

В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста, как показано на рис. 3.

Рисунок 3 - Результат использования контекстных селекторов

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

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.

3.1.4.4. Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим пример отношения элементов:

<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>

Теги <VAR> и <B> представляют собой соседние элементы.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий:

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.

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

3.1.4.5. Дочерние селекторы

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий:

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

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

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

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

3.1.4.6. Селекторы атрибутов

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

Замечание. Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>.

Рассмотрим один вариант применения таких селекторов – Селектор атрибута со значением.

Данный селектор устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис применения следующий.

[атрибут="значение"] { Описание правил стиля } 

Селектор[атрибут="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, которые содержат указанное значение атрибута. А во втором – только к определенным селекторам.

3.1.4.7. Универсальный селектор

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

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий:

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

Вообще, этот тип селекторов применяется в основном в структурных языках вроде XML, для обозначения имен элементов, которые в стилях неизвестны.

3.1.4.8. Группирование

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

Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий:

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.

3.1.5. Наследование

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE>, внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере.

Пример наследования параметров цвета:

…

 <head>

 …

  <style type="text/css">

   TABLE {

    color: red; 

    background: #333;

   }

  </style> 

</head>

<body>

  <table>

   <tr>

    <td>Ячейка 1</td>

    <td>Ячейка 2</td>

   </tr>

   <tr>

    <td>Ячейка 3</td>

    <td>Ячейка 4</td>

   </tr>

  </table>

</body>

…

В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. При этом цвет фона у ячеек в данном примере черный, хотя он не наследуется, так как у атрибута background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.

Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня.

3.1.6. Псевдоклассы

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

Синтаксис применения псевдоклассов следующий:

Элемент:Псевдокласс { Описание правил стиля }

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).

Условно все псевдоклассы делятся на группы, которые перечислены далее.

3.1.6.1. Псевдоклассы, определяющие состояние элементов

К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае.

·       Active – происходит при активации пользователем элемента (например, при наведении курсора на ссылку и нажатии левой кнопки мыши).

·       Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.

Замечание. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.

·       Focus – применяется к элементу при получении им фокуса.

Замечание. Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.

·       Hover – псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

·       Visited – данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно

Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.

Замечание. Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.

3.1.6.2. Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе. Примером такого псевдокласса является first-child (применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа).

3.1.7. Псевдоэлементы

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

Синтаксис использования псевдоэлементов следующий:

Селектор:Псевдоэлемент { Описание правил стиля }

Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже:

.foo:first-letter { color: red }

.foo:first-line { font-style: italic }

Замечание: Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.

Далее перечислены все псевдоэлементы, их описание и свойства:

·       after – применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки.

Замечание. Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии.

·       before – по своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента.

·       first-letter – определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.

Замечание. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал – увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.

·       first-line – определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.

Замечание. К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.

3.1.8. Элементы CSS

3.1.8.1. Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <FONT>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в табл. 1.

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 2.

3.1.8.2. Цвет

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

В табл. 3 перечислены свойства элементов, предназначенных для задания цвета.

Цвет, используя CSS, можно задавать тремя способами:

1.    По его названию. Браузеры поддерживают некоторые цвета по их названию.

2.    По шестнадцатеричному значению. Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML. Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.

3.    С помощью RGB. Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

3.1.8.4. Ссылки

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 4 приведены допустимые псевдоклассы и их описания.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдоклассможно опустить.

3.1.8.5. Списки

С помощью CSS можно создать маркированные и нумерованные списки, а также использовать в качестве маркера подходящее изображение.

В табл. 5 перечислены свойства элементов, предназначенных для создания и изменения списков.

Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL, так и для селектора LI.

3.1.8.6. Единицы измерения

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы обычно используют для работы с текстом, либо когда надо вычислить процентное соотношение между элементами. В табл. 6 перечислены основные относительные единицы.

Изменяемое значение, которое зависит от размера шрифта текущего элемента (он устанавливается через стилевой атрибут font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1 em равен размеру шрифта, заданного в браузере по умолчанию. Соответственно, устанавливая размер текста для всей страницы в em, работа происходит именно с этим параметром. В том случае, когда em используется для определенного элемента, за 1 em принимается размер шрифта его родителя.

Аргумент ex определяется как высота символа "x" в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Пиксел это элементарная точка, отображаемая монитором или другим подобным устройством, например, смартфоном. Размер пиксела зависит от разрешения устройства и его технических характеристик.

Абсолютные единицы применяются реже, чем относительные и, как правило, при работе с текстом. В табл. 7 перечислены основные такие единицы.

Самой, пожалуй, распространенной единицей является пункт, который используется для указания размера шрифта.

3.1.9. Пример использования CSS

Рассмотрим пример описанный в разделе 1.

Без использования CSS браузер будет отображать данный код, как показано на рис. 4.

Рисунок 4 - Пример HTML-страницы без использования CSS

Если применить следующий CSS, описанный в файле main.css:

/************************** General ******************************/

body

{

    font-family:Arial, Sans-Serif;

}

.container

{

    overflow:visible;

    width: 980px;

    margin: 0  auto;

    position:relative;

}

h1

{

    font-size:200%;

    color: #3A9C20;

    font-weight:normal;

}

h2

{

    font-size:145%;

    color: #8f8f8f;

    font-weight:normal;

    padding-top:10px;

    padding-bottom:5px;

    text-align:right;

    font-style:italic;

}

p

{

    padding-top:5px;

    padding-bottom:5px;

}

a, a:link

{

    color: #537ABC;

}

a:visited

{

}

a:hover

{

    color: #DB762A;    

}

/*****************************************************************/

/************************** Header *******************************/

.header

{

    padding-top:10px;

    float:left;

    width:100%;

    position:relative;

}

.header h1

{

    float:left;

    left: -70px;

    position:relative;

    height:72px;

    width:86px;

}

.header h1 a

{

    padding:10px;

}

.navArea

{

    overflow:visible;

}

.navArea a, .navArea a:link, .navArea a:visited

{

    text-decoration:none;

    color: #537ABC;

}

.navArea a:hover

{

    color: #DB762A;

}

.navArea table

{

    width:100%;

}

.navArea td

{

    vertical-align:bottom;

    height:72px;

    text-align: left;

}

/********************************************************************/

/******************* Main text area ********************************/

.textArea

{

    position:relative;

    font-size:90%;

    width:980px;

}

.mainText

{

    position:relative;

    float:right;

    width:780px;

    line-height:1.2em;

}

.leftMenu

{

    position:relative;

    float:left;

    width: 200px;

}

.leftMenu ul

{

    padding-right:10px;

}

.leftMenu ul li

{

    padding-bottom: 10px;

}

/*******************************************************************/

/*********************** footer ************************************/

.footer

{

    position:relative;

    float:left;

    border-top: 1px solid #7383C0;

    margin-top: 20px;

    padding-top:5px;

    width:100%;

}

.downMenu

{

    float:left;

    width: 652px;

    font-size:10pt;

    color:#777777;

    vertical-align: bottom;

}

/*******************************************************************/

Браузер будет отображать наш пример, как показано на рис. 5.

Рисунок 5 - Пример HTML-страницы с использованием CSS

3.2. Дополнительная тема: регистрация доменов

3.2.1. Общие сведения

Домен – область (ветвь) иерархического пространства доменных имен сети Интернет, которая обозначается уникальным доменным именем.

Доменное имя – символьное имя домена. Должно быть уникальным в рамках одного домена. Полное имя домена состоит из имен всех доменов, в которые он входит, разделенных точками. Например, полное имя test.example.com обозначает домен третьего уровня test, который входит в домен второго уровня example, который входит в домен com, который входит в корневой домен. Доменное имя служит для адресации узлов сети Интернет и расположенных на них сетевых ресурсов (веб-сайтов, серверов электронной почты, других служб) в удобной для человека форме.

Доменная зона – совокупность доменных имен определенного уровня, входящих в конкретный домен. Термин «доменная зона» в основном применяется в технической сфере, при настройке DNS-серверов (поддержание зоны, делегирование зоны, трансфер зоны).

Для разрешения доменного имени в IP-адрес и наоборот служит система DNS.

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

DNS обладает следующими характеристиками:

·       Распределенность администрирования. Ответственность за разные части иерархической структуры несут разные люди или организации.

·       Распределенность хранения информации. Каждый узел сети в обязательном порядке должен хранить только те данные, которые входят в его зону ответственности и (возможно) адреса корневых DNS-серверов.

·       Кеширование информации. Узел может хранить некоторое количество данных не из своей зоны ответственности для уменьшения нагрузки на сеть.

·       Иерархическая структура, в которой все узлы объединены в дерево, и каждый узел может или самостоятельно определять работу нижестоящих узлов, или делегировать (передавать) их другим узлам.

·       Резервирование. За хранение и обслуживание своих узлов (зон) обычно отвечают несколько серверов, разделенные как физически, так и логически, что обеспечивает сохранность данных и продолжение работы даже в случае сбоя одного из узлов.

DNS была разработана Полом Мокапетрисом в 1983 году; оригинальное описание механизмов работы описано в RFC 882 и RFC 883. В 1987 публикация RFC 1034 и RFC 1035 изменили спецификацию DNS и отменили RFC 882 и RFC 883 как устаревшие. Некоторые новые RFC дополнили и расширили возможности базовых протоколов.

Для обеспечения уникальности и защиты прав владельцев доменные имена 1-го и 2-го (в отдельных случаях и 3-го) уровней можно использовать только после их регистрации, которая производится уполномоченными на то регистраторами. Сведения о владельце (администраторе) того или иного регистрируемого домена общедоступны. Их можно узнать, воспользовавшись службой WHOIS. Однако некоторые регистраторы предоставляют возможность скрыть эту информацию.

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

В настоящее время доменное имя почти во всех странах рассматривается как средство индивидуализации и объект интеллектуальной собственности. Также оно может быть объектом сделок и входить в состав нематериальных активов предприятия.

В России доменное имя упоминается в Гражданском кодексе (статьи 1483, 1484, 1519 ГК РФ). Как в России, так и в других странах состоялось немало судебных процессов, где доменное имя являлось предметом спора. Для некоторых доменных зон доменные споры могут разрешаться не только в судебном порядке, но также по процедуре UDRP, напоминающей третейский суд.

Internet Corporation for Assigned Names and Numbers, или ICANN – международная некоммерческая организация, созданная 18 сентября 1998 года при участии правительства США для регулирования вопросов, связанных с доменными именами, IP-адресами и прочими аспектами функционирования Интернета.

Доменные имена бывают следующих видов:

·  Международные домены (gTLD – generic Top-Level Domain – Общий домен верхнего уровня) – так называемые общие или международные домены верхнего уровня управляются организацией ICANN.

Понятие gTLD было впервые определено в RFC 920. Сами домены появились в январе 1985 года, тогда таковых было 7:

o   .com – для коммерческих сайтов;

o   .edu – для образовательных сайтов;

o   .gov – для сайтов государственных организаций США;

o   .mil – для военных организаций США;

o   .net – для сайтов, чья деятельность связана с Сетью;

o   .org – для некоммерческих организаций;

o   .int – для международных организаций.

В настоящее время существуют 6 доменов gTLD без регистрационных ограничений – .com, .net, .org, .info, .biz и .name.

·       Интернационализованные домены (IDN – Internationalized Domain Names – Интернационализованные Доменные Имена)

Доменные имена, которые содержат символы национальных алфавитов, например, сайт.com. IDN верхнего уровня управляются организацией ICANN.

По техническим ограничениям доменные имена не могут содержать нелатинские символы, поэтому для обхода этого ограничения разработаны специальные стандарты RFC 3490, RFC 3491, RFC 3492 и RFC 3454, согласно которым такие имена в обязательном порядке преобразовываются в набор латинских букв, арабских цифр и дефисы, а перед таким преобразованным именем пишется префикс «xn--2 (так называемый Punycode), чтобы его можно было отличить от обычного имени. Процесс преобразования берет на себя браузер клиента.

·       Национальные домены (ccTLD) – национальные домены верхнего уровня делегированы соответствующим национальным регистраторам (к примеру .ru для России, .ua для Украины, .de для Германии), которые устанавливают правила регистрации в них либо сами, либо согласно указаниям правительства. Управляющей организацией является IANA.

·       Зарезервированные доменные имена – документ RFC 2606 (Reserved Top Level DNS Names – Зарезервированные имена доменовверхнего уровня) определяет названия доменов, которые следует использовать в качестве примеров (например, в документации), а также для тестирования. Кроме example.com, example.org и example.net, в эту группу также входят .test, .invalid и др.

3.2.2. Регистрация домена

Размещение сайта в Интернете начинается с регистрации доменного имени.

Домен в зоне RU (вида my-domain.ru) может состоять из букв латинского алфавита, цифр и знака дефиса «-» и не должен содержать более 63 символов. Минимальная длина домена в зоне RU (без учета разделительной точки и имени зоны) равна 2 символам.

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

Если домен не занят, то его можно зарегистрировать.

С 1 июня 2006 года изменились Правила регистрации доменных имен в национальном домене RU. Для регистрации домена требуется обязательно предъявить паспорт. Домены регистрируются на основании договора, заключенного в форме оферты. То есть подписание бумажной версии договора необязательно – достаточно принять условия договора, расположенного на сайте регистратора. Для регистрации домена надо просто зайти в Интернет, заполнить анкету на сайте регистратора и оплатить счет любым удобным способом из предложенных регистратором.

Регистрация домена производится в соответствии с Правилами регистрации доменных имен в домене RU.

Типичная процедура регистрации домена состоит из нескольких шагов (на примере R01):

1.    Проверить, свободно ли доменное имя, используя сервис Whois.

2.    Заключить договор оферты на сайте или приехать в офис.

3.    Пополнить лицевой счет одним из доступных способов.

4.    Заполнить и отправить заявку на регистрацию домена в личном кабинете R01, в разделе «Домены» по ссылке «Зарегистрировать домены».

5.    Настроить DNS-сервера

3.2.4. Управление доменной зоной

Записи DNS, или Ресурсные записи (Resource Records, RR) – единицы хранения и передачи информации в DNS. Каждая ресурсная записьсостоит из следующих полей:

·       имя (NAME) – доменное имя, к которому привязана или которому «принадлежит» данная ресурсная запись;

·       TTL (Time To Live) – допустимое время хранения данной ресурсной записи в кэше неответственного DNS-сервера;

·       Тип (TYPE) ресурсной записи – определяет формат и назначение данной ресурсной записи;

·       Класс (CLASS) ресурсной записи – определяет тип сети (теоретически считается, что DNS может использоваться не только с TCP/IP);

·       длина поля данных (RDLEN);

·       поле данных (RDATA), формат и содержание которого зависит от типа записи.

Наиболее важные типы DNS -записей:

·       Запись A (address record) или запись адреса связывает имя хоста с адресом IP. Например, запрос A-записи на имя referrals.icann.org вернет его IP адрес – 192.0.34.164

·       Запись AAAA (IPv6 address record) связывает имя хоста с адресом протокола IPv6. Например, запрос AAAA-записи на имя K.ROOT-SERVERS.NET вернет его IPv6 адрес – 2001:7fd::1

·       Запись CNAME (canonical name record) или каноническая запись имени (псевдоним) используется для перенаправления на другое имя

·       Запись MX (mail exchange) или почтовый обменник указывает сервер(ы) обмена почтой для данного домена.

·       Запись NS (name server) указывает на DNS-сервер для данного домена.

·       Запись PTR (pointer) или запись указателя связывает IP хоста с его каноническим именем. Запрос в домене in-addr.arpa на IP хоста в reverse форме вернет имя (FQDN) данного хоста (см. Обратный DNS-запрос). Например, (на момент написания), для IP адреса 192.0.34.164: запрос записи PTR 164.34.0.192.in-addr.arpa вернет его каноническое имя referrals.icann.org. В целях уменьшения объема нежелательной корреспонденции (спама) многие серверы-получатели электронной почты могут проверять наличие PTR записи для хоста, с которого происходит отправка. В этом случае PTR запись для IP адреса должна соответствовать имени отправляющего почтового сервера, которым он представляется в процессе SMTP сессии.

·       Запись SOA (Start of Authority) или начальная запись зоны указывает, на каком сервере хранится эталонная информация о данном домене, содержит контактную информацию лица, ответственного за данную зону, тайминги (параметры времени) кеширования зонной информации и взаимодействия DNS-серверов.

·       Запись SRV (server selection) указывает на серверы для сервисов, используется, в частности, для Jabber и Active Directory.

Пример настроенных DNS - записей приведен на рис. 6.

Рисунок 6 - Пример DNS-записей

3.3. Дополнительная тема: хостинг сайтов

3.3.1. Общие сведения

Хостинг (hosting) – услуга по предоставлению дискового пространства для физического размещения информации на сервере, постоянно находящемся в сети (обычно Интернет). Хостингом также называется услуга по размещению оборудования клиента на территории провайдера с обеспечением подключения его к каналам связи с высокой пропускной способностью.

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

Хостинг баз данных, размещение файлов, хостинг электронной почты, услуги DNS могут предоставляться отдельно как самостоятельная услуга, либо входить в понятие услуги.

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

·       поддержка CGI/Perl, PHP, Python, ASP, Ruby;

·       поддержка .htaccess (для Apache);

·       поддержка баз данных.

Хостинг как услугу сравнивают и описывают по количественным ограничениям:

·       размер дискового пространства;

·       количество месячного трафика;

·       количество сайтов, которые можно разместить в рамках одной учетной записи;

·       количество FTP пользователей;

·       количество E-Mail ящиков и объем места, предназначенного для почты;

·       количество баз данных и количество места под базы данных;

·       количество одновременных процессов на пользователя;

·       количество ОЗУ и максимальное время исполнения выделяемое каждому процессу пользователя;

и качественным ограничениям:

·       свободные ресурсы CPU, оперативной памяти, которые влияют на быстродействие сервера;

·       пропускная способность каналов, которая влияет на загрузку информации;

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

Также можно разделить услуги хостинга по типу предоставляемого ресурса:

·  виртуальный сервер – предоставляется место на диске для размещения веб-сайтов, среда исполнения веб-сервисов единая для многих пользователей, ресурсы распределены между всеми пользователями на одном сервере, где может размещаться от 50 до 1000 пользователей. Небольшие дешевые хостинг - провайдеры часто пренебрегают безопасностью и вообще не разграничивают привилегий пользователей, что позволяет одному пользователю на сервере иметь доступ к сайтам сотен других пользователей. У более крупных и дорогих провайдеров эта проблема, как правило, решена.

·  виртуальный выделенный сервер (VPS или VDS) – предоставляется место на диске, часть общей памяти, процессорное время сервера. Выглядит для пользователя так же, как и выделенный сервер, но физически на одном реальном сервере располагается несколько виртуальных серверов. Услуга предназначена для проектов средней тяжести. В связи с тем, что четко разделить все ресурсы сервера невозможно (в частности I/O операции, ресурсы сетевой карты и др.), а многие провайдеры VPS продают ресурсов больше, чем есть на сервере, надеясь на то, что клиент задействует выделенный ему потенциал не полностью (оверселлинг), часто заявленная мощность VPS сервера не соответствует реальной.

·  выделенный сервер – предоставляется сервер целиком. Используется для реализации нестандартных задач (сервисов), а также размещения «тяжелых» веб-проектов, которые не могут сосуществовать на одном сервере с другими проектами и требуют под себя все ресурсы сервера.

·  колокация (Collocation) – предоставление места в датацентре провайдера для оборудования клиента (обычно путем монтажа в стойке) и подключение его к интернету.

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

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

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

·       небольшое дисковое пространство;

·       ограничение размера отдельного файла;

·       ограничение допустимых расширений имен файлов, например, запрещается *.jfif, *.exe и другие;

·       ограничение на размещаемую информацию;

·       отсутствие поддержки серверных скриптов и систем управления базами данных или ограничение их использования;

·       домен только третьего уровня;

·       наличие рекламы.

Скачано с www.znanio.ru