- •Учебный Курс по 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- фильтров.
Свойства внутреннего отступа
Свойство padding определяет отступ внутри элемента по четырем сторонам: вверху, внизу, слева и справа. Аналогично свойству margin (см. 5.5.9), CSS-свойство padding может быть задано по частям, используя padding-top, padding-bottom, padding-left и padding-right. Сокращенная запись внутренних отступов по сторонам также похожа на аналогичную для свойства margin.
Внутренний отступ
padding: 10px;
padding-top: 10px;
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px;
padding: 10px 20px;
Первая запись в примере определяет отступ внутри элемента, равный 10 пикселям по всем четырем сторонам. Вторая запись определяет внутренний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу, а затем слева. Четвертая запись определяет внутренний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись задает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей.
О том, как влияет величина внутреннего отступа на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2.
Свойстватаблицы
В данном разделе мы перечислим некоторые свойства таблицы, а именно table-layout и border-collapse.
Свойство table-layout определяет каким образом браузер должен вычислять размер ячеек таблицы. Оно принимает одно из двух допустимых значений: auto (значение по умолчанию) и fixed. Режим auto работает по умолчанию.
Если свойство table-layout таблицы имеет значение fixed, то ширина колонок в этом случае определяется либо с помощью элемента col (крайне редкий вариант), либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы, по каким-либо причинам, получить невозможно, в этом случае, таблица делится на колонки равной ширины. Причем размер ячеек такой таблицы никогда не будет превышать установленные размеры, в отличие от таблицы со значением auto, когда в ячейку помещен какой либо элемент превышающий установленный размер ячейки, например большое изображение или длинный неразрывный текст. Другим преимуществом таблицы со значением fixed является более быстрая скорость отображения таблицы, так как в этом случае браузеру нет нобходимости ждать догрузки других элементов документа, входящих в таблицу, для определения ее размеров. Тем не менее, не стоит злоупотреблять использованием значения fixed для table-layout. Его нужно применять только в случаях необходимости.
Свойство border-collapse может принимать одно из следующих значений: separate (значение по умолчанию) и collapse. Это свойство определяет, как браузер должен отображать границы вокруг ячеек таблицы. Значение separate говорит о том, что вокруг каждой ячейки отображается своя собственная рамка, соответственно в местах соприкосновения ячеек показываются сразу две линии. Значение collapse объединяет границы между ячейками в одну, что позволяет отобразить равномерную сетку для таблицы. Пример, приведенный ниже, показывает, как может быть получена такая сетка для всех таблиц документа.
Отображение сетки для таблицы
table {
border-collapse: collapse;
}
td {
border: 1px solid #000;
}