Шпаргалка по HTML и CSS
для контент-менеджера

Форматирование текста

Мне надо:	Нужно писать:	Выглядеть будет:
Вставить параграф		Первый параграф Второй параграф
Перенести текст на строку ниже		В отличие от тега p, тег br не создает пустую строку
Разместить заголовок		На странице должен быть только один заголовок первого уровня
Добавить цитату		Я помню чудное мгновенье!
Выделить текст жирным		Визуально, текст идентичен важному.
Выделить важный текст		Но смысл разный.
Выделить текст курсивом		Тоже самое с курсивом
Сделать смысловой акцент		Визуально одиноково, а смысл разный
Вставить ссылку		Кликать сюда
Вставить картинку
Логически связать картинку и подпись		Нет фото
Задать класс тегу		В CSS это выглядит вот так
Задать идентификатор тегу		В CSS это выглядит вот так
Создать маркированный список		Первый пункт Второй пункт Третий пункт
Создать нумерованный список		Первый пункт Второй пункт Третий пункт
Изменить нумерацию в списке		Три Четыре Пять
Создать список определений		Первое определение Расшифровка первого определения Второе определение Расшифровка второго определения
Вложить один список в другой		Пункт списка Пункт вложенного списка

Создание таблицы

<table>

<caption>Таблица 1. Как правильно сверстать таблицу</caption>
`<thead><tr>`	`<th>...</th>`	`<th>...</th>`	`<th>...</th>`	`<th>...</th>`	`<th>...</th>`	`</tr></thead>`
`<tbody><tr>`	`<td rowspan="2"> ... </td>`	`<td colspan="2">...</td>`		`<td>...</td>`	`<td>...</td>`	`</tr>`
`<tr>`	`<td rowspan="2"> ... </td>`	`<td colspan="3" rowspan="3"> ... </td>`			`<td>...</td>`	`</tr>`
`<tr>`	`<td>...</td>`				`<td>...</td>`	`</tr>`
`<tr>`	`<td>...</td>`				`<td>...</td>`	`</tr></tbody>`
`<tfoot><tr>`	`<td>...</td>`	`<td>...</td>`	`<td>...</td>`	`<td>...</td>`	`<td>...</td>`	`</tr></tfoot>`

</table>

Добавление стилей

Селектором может быть:	Запишем как:
Тег	p {...};
Класс	.new {...};
ID	#unique {...}

Основные свойства стилей
Хочу изменить:	Свойства	Что получаем
Текст		Текст на 20px
		Жирный текст
		Наклонный текст
		Красный текст
Маркированный список		disc circle square
Нумерованный список		decimal lower-roman upper-roman lower-alpha upper-alpha
Фон		Светло-синий фон
Фон		Фоновое изображение