- •Учебный Курс по html Содержание
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль Правила именования папок и файлов
- •Правила для html-кода
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css-кода
- •Основные правила для кода JavaScript
- •Основные элементы html
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойства таблицы
- •Свойства отображения
- •Свойства размера
- •Свойства позиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Ie 6 и ниже
- •Ie 7 и все современные браузеры
- •Практическая верстка с чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Проверка документов на соответствие спецификациям
- •Тело документа
- •Основные виды веб-страниц
- •Страница с фиксированной шириной
- •Страница с плавающей шириной
- •Основные элементы страницы
- •Логотип
- •Способы использования png
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Немного о стандартах
На текущий момент существуют следующие спецификации: CSS 1 и CSS 2 (точнее CSS 2.1). Новая спецификация CSS 3 находится на стадии разработки.
CSS 1 вышла 17 декабря 1996 года с последующей ревизией 11 января 1999 года. Она содержит основные свойства CSS, известные с тех времен, такие как свойства шрифта, отступов, цвета и т.д.
Спецификация CSS 2 начала свое существование с 1998 года. Помимо свойств CSS 1, она содержит свойства абсолютного позиционирования элементов, автоматической нумерации элементов списка, разрыва страниц, направления текста справа налево и другие.
Не рекомендуется использовать CSS-свойства, являющиеся специфическими для конкретного браузера и не входящие в число допустимых стандартом CSS 1 или CSS 2. Далеко не все браузеры имеют полную реализацию стандартов W3C. Более того, одни и те же свойства могут иметь существенные различия их реализации в разных браузерах. Приоритеты обработки CSS инструкций, точнее некоторые ее особенности, также могут отличаться.
Вывод прост – необходимо придерживаться использования стандартных CSS-свойств, реализация которых одинакова в разных браузерах. Специфические и нестандартные CSS-свойства необходимо использовать только в крайних случаях. Не забывайте также о правильном форматировании CSS-кода, описанном в разделе .
Более полную информацию о стандартах CSS можно найти по адресу http://www.w3.org/Style/CSS/ .
Селекторы
Селектор (англ. selector) – это та часть записи в CSS, которая отвечает за селекцию узлов HTML-документа, к которым будет применен указанный стиль. Например:
Селектор CSS и указание стиля
ul.navigation a {text-decoration: none;}
В примере, селектором является строка «ul.navigation a», который говорит о том, что стиль (в данном случае «text-decoration: none;»), будет применяться ко всем элементам a, которые находятся внутри элемента ul с классом «navigation», например, для всех ссылок следующей структуры:
Фрагмент HTML, к которому будет применен CSS
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">About Us</a></li>
</ul>
Селекторы бывают разных видов. Давайте их рассмотрим.
Начнем с самого простого, а именно с селектора элемента.
Селектор элемента
div {font-size: 12px;}
Название любого HTML-элемента может являться селектором. В примере выше, это «div», который означает, что стиль «font-size: 12px» будет применен ко всем элементам div документа.
Селекторы класса предназначены для определения стиля для элементов с предопределенным классом, т.е. значением атрибута «class»:
Селекторы класса
table.details {table-layout: fixed;}
.heading {color: #0f0;}
Как видно из примера, имя класса следует после точки, при этом имя элемента может быть не указано, что в свою очередь означает, что стиль будет применен к любым элементам с заданным классом.
Напомню, что в соответствии со стандартом W3C, имя класса чувствительно к регистру. В любом случае, при написании имени класса, рекомендуется придерживаться правил, описанных в .
Еще одно замечание касается того, что в качестве значения атрибута class допускается перечисление нескольких классов, разделенных пробелом. Например:
Указание нескольких классов для элемента
<strong class="temperature critical">359</strong>
В данном случае к элементу strong будут применены значения стилей обоих классов: «temperature» и «critical». Приоритеты стилей будут соблюдены согласно стандартным правилам приоритетов (см.). Последовательность классов в атрибуте значения не имеет.
Селектор по идентификатору, т.е. по значению атрибута id, выглядит схожим образом, что и селектор класса, за исключением символа разделителя. В этом случае это – «#». Селекторы по идентификатору можно использовать с тем же успехом, что и селекторы класса, однако следует помнить, что значение id должно быть уникальным в пределах одного HTML-документа. В документе не должно встречаться более одного элемента с одинаковым идентификатором. В отличие от класса, нельзя также указывать несколько идентификаторов для элемента через пробел.
Селектор по идентификатору
ul#navigation {background: #f0f0f0;}
#footer {border: 1px solid #f00;}
По аналогии с классом, имя элемента в селекторе указывать не обязательно.
Контекстный селектор синтаксически представляет собой несколько простых селекторов, разделенных символом пробела.
Контекстный селектор
#content div ul {list-style: none;}
Такая запись отменяет стиль отображения элементов списка по умолчанию для всех ненумерованных списков, которые находятся внутри контейнера div, которые, в свою очередь находятся внутри элемента с идентификатором «content».
Контекстные селекторы используются для получения более компактного HTML-кода, для избежания указания одинаковых классов для элементов с неким общим родительским элементом. Например, код приведенный ниже:
HTML-фрагмент с повторяющимися классами
<ul id="navigation">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Catalog</a></li>
<li><a class="nav-link" href="#">About Us</a></li>
</ul>
Может быть преобразован в код, вида:
Оптимизированный HTML-фрагмент
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">About Us</a></li>
</ul>
Используя при этом контекстный селектор следующего вида:
Контекстный селектор
#navigation a {
/* styles go here */
}
В случае, когда нескольким селекторам должен соответствовать один и тот же стиль, можно воспользоваться группировкой селекторов, разделяя их запятой.
Группировка селекторов
ul.navigation a,
a.cross-link {
/* styles go here */
}
Также необходимо иметь ввиду, что в CSS имеет место наследование, когда свойства, определенные для родительского элемента влияют на свойства элементов ему принадлежащих. Например, если мы определим цвет текста для элемента body, то такой же цвет текста будут иметь все элементы p в него входящие, до тех пор, пока эти свойства не будут переопределены другими селекторами.
W3C также предусматривает другие виды селекторов для CSS, помимо перечисленных, однако ввиду того, что на данный момент они поддерживаются не всеми браузерами, мы их рассматривать не будем.
Иногда возникает необходимость определить различные стили для разных типов браузеров. В связи с этим существует несколько решений, которые помогают сделать это без применения JavaScript. Эти решения рассмотрены в разделе .