Здравствуйте! Вашему вниманию предлагается популярный справочник по HTML и CSS.
Наша задача - наиболее точно описать все стили и свойства, сопроводив их наглядными примерами.

Справочник «Стили CSS»

!IMPORTANT

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей.

BACKGROUND

Позволяет установить одновременно до пяти атрибутов стиля фона.

BACKGROUND-ATTACHMENT

Определяет, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.

BACKGROUND-COLOR

Устанавливает фоновый цвет элемента.

BACKGROUND-IMAGE

Устанавливает фоновое изображение для элемента.

BACKGROUND-POSITION

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

BACKGROUND-REPEAT

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси.

BORDER

Позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента.

BORDER-BOTTOM

Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

BORDER-BOTTOM-COLOR

Устанавливает цвет границы внизу элемента.

BORDER-BOTTOM-STYLE

Устанавливает стиль границы внизу элемента.

BORDER-BOTTOM-WIDTH

Устанавливает толщину границы внизу элемента.

BORDER-COLLAPSE

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка.

BORDER-COLOR

Устанавливает цвет границы на разных сторонах элемента.

BORDER-LEFT

Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.

BORDER-LEFT-COLOR

Задает цвет границы слева от элемента.

BORDER-LEFT-STYLE

Устанавливает стиль границы слева от элемента.

BORDER-LEFT-WIDTH

Устанавливает толщину границы слева от элемента.

BORDER-RIGHT

Позволяет одновременно установить толщину, стиль и цвет правой границы элемента.

BORDER-RIGHT-COLOR

Задает цвет границы справа от элемента.

BORDER-RIGHT-STYLE

Устанавливает стиль границы справа от элемента.

BORDER-RIGHT-WIDTH

Устанавливает толщину границы справа от элемента.

BORDER-STYLE

Устанавливает стиль рамки вокруг элемента.

BORDER-TOP

Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.

BORDER-TOP-COLOR

Задает цвет границы сверху элемента.

BORDER-TOP-STYLE

Устанавливает стиль границы сверху элемента.

BORDER-TOP-WIDTH

Устанавливает толщину границы сверху элемента.

BORDER-WIDTH

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

BOTTOM

Устанавливает положение нижнего края содержимого элемента.

CLEAR

Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

CLIP

Определяет область позиционированного элемента, в которой будет показано его содержимое.

COLOR

Определяет цвет текста элемента.

CONTENT

Ппозволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

CURSOR

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

DISPLAY

Определяет, как должен быть показан элемент в документе.

FLOAT

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

FONT

Позволяет установить одновременно несколько атрибутов стиля шрифта.

FONT-FAMILY

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

FONT-SIZE

Определяет размер шрифта элемента.

FONT-STYLE

Определяет начертание шрифта - обычное, курсивное или наклонное.

FONT-VARIANT

Определяет, как нужно представлять строчные буквы - делать их все прописными уменьшенного размера или оставить без изменений.

FONT-WEIGHT

Устанавливает насыщенность шрифта.

HEIGHT

Устанавливает высоту блочных или заменяемых элементов.

LEFT

Определяет расстояние от левого края родительского элемента.

LETTER-SPACING

Определяет интервал между символами в пределах элемента.

LINE-HEIGHT

Устанавливает межстрочный интервал текста в блоке.

LIST-STYLE

Позволяет одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

LIST-STYLE-IMAGE

Устанавливает адрес изображения, которое служит в качестве маркера списка.

LIST-STYLE-POSITION

Определяет, как будет размещаться маркер относительно текста.

LIST-STYLE-TYPE

Изменяет вид маркера для каждого элемента списка.

MARGIN

Устанавливает величину отступа от каждого края элемента.

MARGIN-BOTTOM

Устанавливает величину отступа от нижнего края элемента.

MARGIN-LEFT

Устанавливает величину отступа от левого края элемента.

MARGIN-RIGHT

Устанавливает величину отступа от правого края элемента.

MARGIN-TOP

Устанавливает величину отступа от верхнего края элемента.

OVERFLOW

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

PADDING

Устанавливает значение полей вокруг содержимого элемента.

PADDING-BOTTOM

Устанавливает значение поля от нижнего края содержимого элемента.

PADDING-LEFT

Устанавливает значение поля от левого края содержимого элемента.

PADDING-RIGHT

Устанавливает значение поля от правого края содержимого элемента.

PADDING-TOP

Устанавливает значение поля от верхнего края содержимого элемента.

POSITION

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

QUOTES

Устанавливает тип кавычек, который применяется в тексте документа.

RIGHT

Определяет расстояние от правого края родительского элемента.

TABLE-LAYOUT

Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.

TEXT-ALIGN

Определяет горизонтальное выравнивание текста в пределах элемента.

TEXT-DECORATION

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.

TEXT-INDENT

Устанавливает величину отступа первой строки блока текста.

TEXT-TRANSFORM

Управляет преобразованием текста элемента в заглавные или прописные символы.

TOP

Определяет расстояние от верхнего края родительского элемента.

VERTICAL-ALIGN

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

VISIBILITY

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон.

WHITE-SPACE

Устанавливает режим отображения пробелов между словами.

WIDTH

Устанавливает ширину блочных или заменяемых элементов.

WORD-SPACING

Устанавливает интервал между словами.

Z-INDEX

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану.

Справочник «Стили CSS»

Справочник «Теги HTML»

A

Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

ABBR

Тег ABBR указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы.

ACRONYM

Элемент ACRONYM указывает, на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово.

ADDRESS

Тег ADDRESS предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д.

AREA

Каждый элемент AREA определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением.

B

Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

BASE

Элемент BASE определен внутри контейнера HEAD и инструктирует браузер относительно полного базового адреса текущего документа.

BASEFONT

Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега FONT, в котором можно переопределить параметры оформления текста.

BDO

Тег BDO устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево.

BGSOUND

Тег BGSOUND определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии.

BIG

Тег BIG увеличивает размер шрифта на единицу по сравнению с обычным текстом.

BLOCKQUOTE

Тег BLOCKQUOTE предназначен для выделения длинных цитат внутри документа. Текст отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу.

BODY

Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

BR

Тег BR устанавливает перевод строки в месте, где этот тег встречается.

BUTTON

Тег BUTTON создает на веб-странице кнопки различного типа. На таких кнопках может располагаться не только текст, но рисунки и таблицы.

CAPTION

Тег CAPTION предназначен для создания заголовка к таблице. Такой заголовок представляет собой текст, отображаемый перед таблицей и описывающий ее содержание.

CITE

Тег CITE помечает текст как цитату или сноску на другой материал. Браузеры обычно устанавливают текст внутри контейнера CITE курсивом.

CODE

Тег CODE предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д.

COL

Тег COL задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.

COLGROUP

Тег COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.

DD

Тег DD входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

DEL

Тег DEL используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

DFN

Тег DFN применяется для выделения терминов при их первом появлении в тексте.

DIV

Элемент DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.

DL

Тег DL входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

DT

Тег DT входит в тройку элементов DL, DT, DD, предназначенных для создания списка определений.

EM

Тег EM предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

EMBED

Элемент EMBED используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

FIELDSET

Элемент FIELDSET предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащих большое число данных.

FONT

Представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитуры. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

FORM

Тег FORM устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером.

FRAME

Тег FRAME определяет свойства отдельного фрейма, на которые делится окно браузера.

FRAMESET

Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME.

H1...H6

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

HEAD

Тег HEAD предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.

HR

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.

HTML

Тег HTML является контейнером, который заключает в себе все содержимое веб-страницы, включая теги HEAD и BODY.

I

Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.

IFRAME

Тег IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

IMG

Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG.

INPUT

Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

INS

Тег INS предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.

KBD

Тег KBD используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере KBD моноширинным шрифтом.

LABEL

Тег LABEL устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы INPUT.

LEGEND

Тег LEGEND применяется для создания заголовка группы элементов формы, которая определяется с помощью тега FIELDSET.

LI

Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка — маркированный или нумерованный.

LINK

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

MAP

Тег MAP служит контейнером для элементов AREA, которые определяют активные области для карт-изображений.

MARQUEE

Тег MARQUEE создает бегущую строку на странице. На самом деле содержимое контейнера MARQUEE не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.

META

META определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.

NOBR

Уведомляет браузер отображать текст без переносов.

NOEMBED

Тег NOEMBEDпредназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами. Во всех остальных случаях содержимое контейнера NOEMBED будет проигнорировано.

NOFRAMES

Содержимое тега NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES.

NOSCRIPT

Контейнер NOSCRIPT показывает свое содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем.

OBJECT

Элемент OBJECT сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.

OL

Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI.

OPTGROUP

Тег OPTGROUP представляет собой контейнер, внутри которого располагаются теги OPTION объединенные в одну группу.

OPTION

Тег OPTION определяет отдельные пункты списка, создаваемого с помощью контейнера SELECT. Ширина списка определяется самым широким текстом, указанным в теге OPTION.

P

Определяет текстовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.

PARAM

Тег PARAM предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов APPLET или OBJECT.

PRE

Элемент PRE определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.

Q

Тег Q используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

SAMP

Элемент SAMP используется для отображения текста, который является результатом вывода компьютерной программы или скрипта.

SCRIPT

Тег SCRIPT предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке.

SELECT

Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

SMALL

Тег SMALL уменьшает размер шрифта на единицу по сравнению с обычным текстом.

SPAN

Тег SPAN предназначен для определения встроенных элементов документа.

STRIKE

Тег STRIKE отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи.

STRONG

Тег STRONG предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

STYLE

Тег STYLE применяется для определения стилей элементов веб-страницы.

SUB

Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

SUP

Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

TABLE

Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

TBODY

Элемент TBODY предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили.

TD

Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

TEXTAREA

Поле TEXTAREA представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста.

TFOOT

Элемент TFOOT предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы.

TH

Тег TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

THEAD

Элемент THEAD предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы.

TITLE

Определяет заголовок документа. Элемент TITLE не является частью документа и не показывается напрямую на веб-странице. Обычно текст заголовка отображается в левом верхнем углу окна браузера.

TR

Тег TR служит контейнером для создания строки таблицы.

TT

Контейнер TT отображает текст моноширинным текстом. Этот тег относится к группе тегов физического форматирования.

UL

Тег UL устанавливает маркированный список. Каждый элемент списка должен начинаться с тега LI.

VAR

Тег VAR используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере VAR курсивным начертанием.

Справочник «Теги HTML»

Самоучитель по созданию сайтов

1. Как создают веб-страницы


1.1 Как создают веб-страницы
1.2. Как разместить веб-страничку на сервере
1.3. Как написать веб-страницу
1.4. Обзор программ для просмотра веб-страниц
1.5. Обзор программ для создания веб-страниц
1.6.(Часть-I) Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion
1.6.(Часть-II)Автоматизация ввода

2. Основные средства языка html


2.1. Простейшее форматирование текста
2.2. Самое главное на любой веб-странице — гиперссылки
2.3. Как создать списки на веб-странице
2.4. Создание таблиц

3. Графика на веб-странице


3.1.(Часть-I) Основные способы применения графики
3.1.(Часть-II)Изображение-карта
3.2. Графические форматы Интернета
3.3. Графические элементы оформления веб-страниц
3.4. Графические маркеры
3.5. Подготовка рисунков в программе Xara Webstyle
3.6.(Часть-I)Подготовка рисунков в программе Adobe Photoshop
3.6.(Часть-II)Украшение изображения мелкими деталями

4. Оформление веб-страницы с использованием стилей

4.1. Оформление с помощью атрибута STYLE
4.2. Определение стилей в специальной таблице
4.3. Обзор других возможностей стилевых таблиц

5. Использование звука на веб-странице


5.1. Добавление звукового оформления
5.2. Программы для сжатия звуковых фрагментов
5.3. Маленькие хитрости

6. Динамические веб-страницы на основе JavaScript

6.1. Простейшие примеры
6.2. Как писать собственные функции
6.3. Динамическое изменение внешнего вида страницы 6.4. Другие возможности языка JavaScript

7. Веб-страницы, реагирующие на действия пользователя


7.1. Ввод данных пользователем в формы htmL
7.2.(Часть-I)Страница, управляемая при помощи мыши
7.2.(Часть-II)Динамическое управление позиционированием элементов
7.3. Страница, управляемая с клавиатуры
7.4.(Часть-I)Динамическое отображение текста веб-страницы
7.4.(Часть-II)Использование других свойств при работе с текстом
7.5. Динамическое изменение графических элементов веб-страницы

8. Размещение элементов на веб-странице и навигация по сайту


8.1. Использование структуры фреймов
8.2. Управление расположением элементов веб-страницы с помощью таблиц

9. Дополнительные возможности формирования веб-страниц


9.1. Пример использования элемента управления Tabular Data
9.2. Пример простейшего серверного сценария