- •Учебный Курс по 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-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Псевдоклассы и псевдоэлементы
Псевдокласс (англ. pseudo-class) – класс, который существует не зависимо от того, объявлен атрибут class для элемента или нет. Такие классы существуют всегда и предусмотрены для некоторых элементов и их состояний. Самые часто используемые псевдоклассы это псевдоклассы элемента a. Для него существует четыре псевдокласса, в соответствии с состоянием этого элемента: hover, link, visited и active.
Псевдокласс hover позволяет определить стиль для гиперссылок, находящихся под курсором мыши в текущий момент времени; link – это еще не посещенные гиперссылки, visited – уже посещенные гиперссылки; active – активные или открываемые в данный момент ссылки. Чаще всех используется псевдокласс hover.
Синтаксически, псевдокласс указывается в селекторе после знака двоеточия.
Псевдокласс
a:hover {text-decoration: underline;}
Такая запись добавит эффект подчеркивания ссылки при наведении на нее мышкой. Разумеется это имеет смысл только когда эффект подчеркивания для ссылок отменен по умолчанию.
Псевдокласс может быть использован в комбинации с обычным классом. При этом порядок записи названий классов особой роли не играет, но принято псевдоклассы писать в самом конце простого селектора.
Комбинация класса и псевдокласса
a.nav-link:hover {color: #000;}
Многие современные браузеры имеют псевдокласс hover, предопределенный для всех HTML-элементов, в то время как, например браузер Internet Explorer 6.0 понимает псевдокласс hover только для элементов a. Использование псевдокласса hover позволяет делать некоторые интересные эффекты, вроде многоуровневого меню на основе CSS без использования JavaScript.
Кроме упомянутых здесь псевдоклассов, существуют также и другие, но поскольку они поддерживаются не всеми браузерами, на данном этапе мы их рассматривать не будем.
Псевдоэлемент (англ. pseudo-element) – это элемент или мнимый элемент, характеризующийся определенным критерием, и к которому могут быть отдельно применены CSS-свойства. Псевдоэлементы редко используются по причине плохой их поддержки различными браузерами, поэтому на данном этапе рассматриваться не будут.
Единицы измерения
Рассмотрим, какие бывают единицы измерения для указания размера объектов HTML-документа.
Формат представления размера предполагает необязательное использование знака числа. Если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой. И затем, опять без разрыва, двухбуквенная аббревиатура единицы измерения. Указание аббревиатуры необязательно, если значение размера равно нулю.
Существует два типа представления длины: относительное и абсолютное.
Относительное представление задает длину относительно другого свойства длины. Существуют следующие относительные размеры длины:
-
em – высота шрифта
-
ex – высота символа X
-
px – пиксели (относится к разрешению устройства вывода)
Единицы длины em и ex относятся к характеристикам шрифта самого элемента, за исключением свойства font-size, для которого за основу берутся характеристики шрифта родительского элемента.
Единицы измерения px (пиксели) относятся к разрешению устройства вывода, т.е. обычно к дисплею компьютера. Если плотность пикселей устройства вывода очень сильно отличается от плотности пикселей компьютерного дисплея, браузер вынужден масштабировать значения пикселей. Это происходит, например, при выводе веб-страницы на принтер.
Относительный размер может быть также задан в виде процентного соотношения, обычно по сравнению с величиной родительского элемента. В этом случае, после значения указывается знак «%».
Абсолютные значения применимы в том случае, когда заранее известны параметры устройства вывода. Поддерживаются следующие абсолютные единицы измерения:
-
in – дюймы
-
cm – сантиметры
-
mm – миллиметры
-
pt – пункты (1/72 дюйма)
-
pc – пика (12 пунктов)
Абсолютные значения используются очень редко в профессиональном веб-дизайне.