- •Учебный Курс по 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-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности
- •Заключение
- •Приложение
Свойства переполнения
Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Допустимые значения: auto, hidden, scroll и visible (значение по умолчанию). Значение visible означает, что содержимое элемента будет отображаться даже за пределами установленной ширины и высоты. В случае hidden содержимое, которое не помещается в установленные размеры элемента, отображаться не будет. Значение auto говорит о том, что в случае, когда содержимое элемента выходит за его пределы, все что не попадает в указанный размер отображаться не будет, однако есть возможность их просмотра при помощи полос прокрутки, которые появятся там, где это необходимо. В случае scroll, полосы прокрутки будут всегда отображаться, вне зависимости от того, выходит ли содержимое за пределы установленного размера элемента.
Порядок применения стилей и приоритеты
Приоритеты CSS-инструкций определяются по нескольким критериям. Этими критериями являются последовательность подключения CSS-файлов в HTML-документе, последовательность определения стилей внутри CSS, критерий веса селектора, наличие инструкций !important и другие. Подробно алгоритм вычисления приоритетов описан в спецификации W3C:
http://www.w3.org/TR/CSS21/cascade.html.
На практике все эти сложности знать ни к чему, достаточно понимать основополагающие идеи установки приоритетов для CSS-стилей.
HTML-атрибуты, отвечающие за стиль отображения, например align, valign, bgcolor и пр., имеют самый низкий приоритет. Самый высокий приоритет имеют инлайновые записи стиля внутри атрибута style. Между ними – стили CSS, встроенные в документ с помощью элемента style и внешних CSS-файлов. В соответствии с современныит требованиями для HTML-документов крайние случаи приоритетов встречаются редко, соответственно, основное поле действия веб-разработчика – CSS файлы, в общем случае – один CSS-файл.
Касательно приоритетов в пределах одного CSS-файла нужно знать следующее:
-
Существует наследование и переопределение свойств.
-
Имеет значение вес селектора.
-
В случае равновесных селекторов побеждает то определение стиля, которое записано последним.
-
Инструкция !important делает свойство высокоприоритетным.
Наследование и переопределение свойств несложно понять, рассмотрев следующий пример:
Наследование и переопределение свойств
div {
color: #000;
background: #0f0;
}
div.particular {color: #fff;}
В примере, первое определение стиля для всех элементов div, говорит о том, что все они имеют черный цвет текста и зеленый цвет фона. Следующая запись определяет стиль для элементов div с классом «particular», к которым также применяется и первая запись. В данном случае, элементы div с классом «particular» будут иметь зеленый цвет фона, так как свойство background будет унаследовано от определения стиля для всех div элементов, а свойство color, т.е. цвет текста, будет переопределено на белый.
Если эти два определения стиля поменять местами, т.е. сперва записать определение для элемента div с классом «particular», а затем общее определение для div, то общий результат не изменится потому, что в силу вступает вес селектора – «div.particular» более специализированный, чем просто «div», поэтому имеет больший вес.
Последующее определение стиля равновесных селекторов имеет больший приоритет. Следующий пример продемонстрирует приоритетность последней записи стиля.
Последняя запись приоритетнее предыдущей
div {color: #000;}
div {color: #fff;}
В данном случае цвет текста div элементов документа будет белый, а не черный, потому, что определение белого цвета стоит ниже, чем определение черного.
Что касается инструкции !important, то ее наличие делает CSS-свойство высокоприоритетным, независимо от позиции и веса селектора.
Использование инструкции !important
div {color: #000 !important;}
div {color: #fff;}
В этом случае цвет текста для элементов div будет черным. Инструкция !important записывается через пробел, после значения CSS-свойства. Инструкцию !important следует использовать в случаях особой необходимости, при решении конфликтов приоритета CSS-свойств.