- •Учебный Курс по html
- •1. Введение 3
- •2. Понимание html 4
- •3. Используемые средства и программы 21
- •4. Оформление документов – корпоративный стиль 27
- •6. Практическая верстка 48
- •7. Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов) 92
- •8. Заключение 97
- •9. Приложение 98
- •Введение
- •Понимание html
- •Предназначение и цели современного html
- •Древообразная структура html
- •Понятие dtd
- •Объектная модель документа
- •Содержание и отображение
- •Пример современного html
- •Пример html старого типа
- •Используемые средства и программы
- •Редактор для html – текстовый редактор
- •Редактор для css
- •Настройка рабочего места в Photoshop
- •Слои (Layers)
- •Принятие решения: текст – картинка
- •Формат изображений (gif, jpeg, png)
- •Вспомогательные средства.
- •Полезные plug-in’ы.
- •Оформление документов – корпоративный стиль
- •Правила именования папок и файлов
- •Правила для html
- •Отступы
- •Элементы и атрибуты
- •Переносы
- •Перенос элемента
- •Перенос внутри элемента
- •Вставка специальных символов
- •Комментарии
- •Правила для css
- •Основные правила для JavaScript
- •Немного о стандартах
- •Селекторы
- •Псевдоклассы и псевдоэлементы
- •Единицы измерения
- •Основные css-свойства
- •Свойства шрифта
- •Свойства эффектов текста
- •Свойства выравнивания
- •Свойства переноса
- •Свойства фона
- •Свойства цвета текста
- •Свойства границ элемента
- •Свойства обтекания
- •Свойства внешнего отступа
- •Свойства внутреннего отступа
- •Свойстватаблицы
- •Свойства отображения
- •Свойства размера
- •Свойствапозиции
- •Свойства переполнения
- •Порядок применения стилей и приоритеты
- •Основные способы персонализации стилей для браузеров
- •Общие правила и рекомендации при написании html/xhtml кода
- •С чего начинается документ
- •Модели отображения блочных элементов
- •Заголовок документа
- •Xml заголовок в xhtml документе
- •Часто используемые элементы и атрибуты
- •Изображение: width, height, alt, border
- •Элемент div
- •Атрибуты class и id
- •Неиспользуемые или редко используемые элементы и атрибуты
- •Элемент font
- •Элемент hr
- •Элемент map
- •Элемент frame
- •Атрибут nowrap
- •Атрибут rowspan
- •Использование однопиксельного прозрачного giFа
- •Использование css свойств
- •Проверка документов на соответствие спецификациям
- •Основные виды layout веб-страниц
- •Основные элементы страниц: логотип, меню, табы, формы; применение готовых js решений
- •Логотип
- •Способы использования png, в том числе для отображения теней
- •Способы и особенности создания страниц с изменяемым размером шрифта
- •Создание страниц с использованием em для указания размеров элементов страницы
- •Особенности табличной верстки
- •Создание email-шаблонов
- •Особенности создания принт-версии страницы
- •Особенности создания страниц с использованием правостороннего ввода текста (арабский, иврит и т.П.)
- •Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов)
- •Заключение
- •Приложение
- •Краткая таблица css- фильтров.
Свойства эффектов текста
Свойство text-decoration отвечает за эффекты текста. Оно часто используется для выключения или включения подчеркивания текста гиперссылок. Поэтому наиболее часто используемые для него значения это none и underline, соответственно. Свойство text-decoration может принимать и другие значения, с которыми читатель может ознакомиться в любом справочнике по CSS.
Свойства выравнивания
К свойствам выравнивания относятся: text-align и vertical-align.
Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента. Оно может принимать одно их четырех значений: left, right, center и justify. Последнее выравнивает текст одновременно по левому и правому краю.
Свойство vertical-align, как и следует из названия, отвечает за вертикальное выравнивание элемента или текста. Из всего множества допустимых значений практичных только три: top, middle и bottom. Обратите внимание, что значение, означающее выравнивание посередине называется middle, а не center.
Свойства переноса
Свойство white-space со значением nowrap запрещает перенос строк внутри текста, заключенного внутрь элемента. Помимо значения nowrap, стандарт CSS 2.1 предусматривает также normal, pre, pre-wrap и pre-line. В настоящий момент, на практике используются только два значения: normal и nowrap.
Свойства фона
ВэтомразделебудутрассмотреныCSS-свойствафонаэлемента,аименноbackground,background-color,background-image,background-repeat,background-position,background-attachment.
Цвет фона устанавливается с помощью background-color. В качестве значения свойство принимает код цвета или значение «transparent», что означает «прозрачный». Правила указания цвета рассмотрены в разделе 4.2.5.
В случае, когда в качестве фона необходимо использовать изображение, применяется свойство background-image. Пример его использования показан в примере ниже.
Использование background-image
background-image: url(../images/mypic.jpg);
Путь к файлу изображения указывается в скобках параметра url. Путь указывается относительно расположения CSS файла, а не HTML документа.
По умолчанию, изображение фона будет повторяться по горизонтали и вертикали, пока не заполнит собой весь элемент, к которому применили данное свойство. В случае, когда необходимо ограничить повторение изображения по горизонтали или по вертикали или предотвратить его повторение, используется CSS-свойство background-repeat. Оно принимает одно из следующих значений: repeat (значение по умолчанию), repeat-x, repeat-y, no-repeat. Смысл этих значений понятен по их названиям.
Еще одно немаловажное свойство, которое помогает при манипуляциях изображением фона, называется background-position. Оно предназначено для установки позиции изображения фона внутри элемента. В качестве значения, это свойство принимает один или комбинацию двух параметров. Это может быть пара числовых значений, разделенных пробелом и выраженных в каких- либо единицах измерения (см. 5.4) или процентах (со знаком «%») смещения относительно верхнего левого угла. Еще это может быть одно или комбинация двух значений, разделенных пробелом, из следующих допустимых: top, bottom, center, left, right. Немного поэкспериментировав на практике, можно легко понять, что означает каждое из этих значений. Ввиду хорошей поддержки этого свойства современными браузерами, оно является весьма полезным во многих случаях. Рассмотрим несколько примеров:
Примеры использования background-position
background-position: 20px 70px;
background-position: 50% 100%;
background-position: bottom right;
background-position: top center;
background-position: left;
Cвойство background-attachment определяет, будет ли изображение фона фиксироваться относительно окна просмотра (значение fixed) или будет перемещаться вместе с документом (значение scroll) в процессе его прокрутки.
Рассмотрим сокращенный (shorthand) способ записи вышеупомянутых свойств фона. Это делается при помощи CSS-свойства background. Рассмотрим несколько примеров:
Сокращенная запись свойств фона
background: #c8eeff url(../images/bg-body.png) repeat-x scroll top;
Из примера видно, что значения свойств фона идут в следующем порядке: background-color, background-image, background-repeat, background-attachment и background-position.
В случае, когда необходимо задать одновременно несколько свойств фона в пределах одного селектора, предпочтение следует отдавать сокращенной записи.
Если изображение фона выступает в качестве текстуры элемента, а не визуала, то помимо изображения желательно также указывать цвет фона. Это сделает загрузку документа более привлекательной, а также придаст стиль документу даже в случае отключенной опции загрузки изображений.
Никогда не следует применять прием использования однопиксельного цветного изображения в качестве картинки фона, по причине того, что такой цвет браузер не в состоянии отобразить при помощи background-color. Такой подход может оказаться неожиданным для другого разработчика, что наверняка приведет к дополнительным затратам времени при модификации документа. Это предостережение касается новичков, потому, что, к сожалению, многие учебные пособия по HTML изобилуют подобными «полезными советами».