Вы находитесь на странице: 1из 12

Структура HTML

<!DOCTYPE html>
<html>…</html>
Атрибуты
 Lang – язык страницы по умолчанию (re, eng и т.д.)

<head>…</head>
Теги, включаемые в <head>, имеют особый тип содержимого — метасодержимое. Они не отображаются на странице
напрямую, а служат для хранения информации о документе и для взаимосвязи документа с другими документами и
системами.
<title>…</title> - Заголовок вкладки браузера
<meta> - метаинформация
С помощью <meta> можно сообщать браузеру, поисковому роботу или другому устройству различную
служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так
далее.
Атрибуты
 Charset - кодировка текста HTML-страницы (utf-8)
 Name - может быть keywords (для поисковиков) или description (краткое описание, аннотация)
 Content – содержание метаданных, в зависимости от name
 http-equiv
 scheme
<link> - Подключение внешних ресурсов (стили, скрипты и т.д.)

<style>…</style> - подключение стилей прямо в html разметке.


Вариант подключения стилей в теге <style> используется чаще всего для оптимизации загрузки страницы, ведь
в таком случае браузер не будет отправлять дополнительных запросов на сервер.
Атрибуты
 Rel – тип подключаемого элемента
- stylesheet - CSS
 Href – ссылка на файл подключаемого элемента

<body>…</body>
<header>
Я шапка сайта. Могу повторяться на других страницах или разделах на одной странице.
</header>
<main>
Привет, я основной контент! Живу только на этой странице.
Выделяет основное содержание страницы, которое не повторяется на других страницах. И обычно на странице
используется один <main>.
<nav>
Первый пост, второй пост, архив постов (ссылки на другие страницы или навигацию по текущей
странице).
</nav>
<section>
Тег <section> обозначает крупный смысловой (или «логический») раздел (как главы в книге).
</section>
<article>
Я фотка в Инстаграме, смотрюсь отлично где угодно
Обозначает цельный, законченный и самостоятельный фрагмент информации. Тег <article>, в отличие от
<section>, можно вырвать из одного места и вставить в другое (на другую страницу сайта или на другой
сайт), и смысл содержимого тега при этом не потеряется. Примеры: статья, пост в блоге, сообщение на
форуме и так далее.
</article>
<aside>
Я скромный блок с курсами валют на сайте про рыбок.
Включает в себя дополнительное содержание, не связанное напрямую с основным. Такие блоки ещё
часто называют «сайдбарами» или боковыми панелями.
</aside>
</main>
<footer>
Я подвал сайта, я как шапка.
</footer>
<script>…</script> - подключение внешних скриптов
Тег <script> можно использовать в любом месте HTML-документа, но лучше вставлять его в самом конце перед
закрывающим тегом </body>.
<script>
JavaScript-код
</script>

Атрибуты
- src – указывает путь до подключаемого файла скрипта

Элементы HTML
Символы мнемоники (><{}[]#&@ и т.д.) - https://dev.w3.org/html5/html-author/charref

<h1-6>…</h1-6> - Заголовки
<p>…</p> - Параграфы в HTML
<em>…</em> - определяет текст, на который сделан особый акцент, меняющий смысл предложения (курсив).
<i>…</i> - для обозначения текста, который отличается от окружающего текста, но не является более важным
(курсив).
<strong>…</strong> - указывает на важность отмеченного текста (жирный шрифт).
<b>…</b> - предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой
важности (жирный шрифт).
<mark>…</mark> - выделение желтым маркером
<del>…</del> - выделяет текст, который был удалён в новой версии документа. В браузере этот текст
ПЕРЕчёркивается. Имеет атрибут datetime.
<ins>…</ins> - Тег выделяет текст, который был добавлен в новой версии документа. В браузере этот текст
ПОДчёркивается. Имеет атрибут datetime.
<pre>…</pre> - преформатированный текст
<br> - перенос стороки
<hr> - разделитель
<sup>…</sup> - надстрочный текст
<sub>…</sub> - подстрочный текст
<div>…</div> - пустой контейнер. Подходит для стилизации структурных элементов.
<span>…</span> - пустой контейнер. Подходит для стилизации текстовых элементов (слов, фраз, абзацев и т.д.).
<img> - вставка картинки
Атрибуты
 Src – основной атрибут, указывает путь до картинки (<img src="logo.png">)
 Width/height – ширина и высота картинки. Если задать только один из размеров, ширину или высоту, то
вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения.
 Alt – задает альтернативный текст картинке (например, когда картинка не может прогрузиться, будет виден
этот текст)
<video>…</video> - тег для вставки видео
Атрибуты
width\height - задают ширину и высоту видео
controls - пустой атрибут, при наличии которого отображается панель управления видео
preload - задаёт режим предзагрузки видео, имеет 3 значения (значение по умолчанию зависит от
браузера):
- none — не загружать ничего;
- metadata — загрузить служебную мета-информацию (длительность, первый кадр и так далее);
- auto — можно загрузить всё видео.
src - задаёт адрес видеофайла
autoplay - пустой атрибут, при наличии которого воспроизведение видео начинается автоматически
poster - задаёт адрес картинки-обложки, которая отображается, когда видео ещё не загрузилось или не
воспроизводится
type – указывает на тип видеофайла (и кодеки) не является обязательным, так как браузер умеет сам определять
тип и кодеки, но указывая тип явно, мы помогаем ему не ошибиться.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>

<audio>…</audio> - тег для вставки аудио


Атрибуты
Controls - пустой атрибут, при наличии которого отображается панель управления проигрывателем
Preload - задаёт режим предзагрузки аудио, имеет 3 значения (значение по умолчанию зависит от браузера):
- none — не загружать ничего;
- metadata — загрузить служебную мета-информацию;
- auto — можно загрузить весь файл.
src - задаёт адрес аудиофайла
autoplay - пустой атрибут, при наличии которого воспроизведение звука начинается автоматически
type – указывает на тип аудиофайла (и кодеки) не является обязательным, так как браузер умеет сам определять
тип и кодеки, но указывая тип явно, мы помогаем ему не ошибиться.
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.oga" type="audio/ogg">
</audio>
<form>…</form> - создание формы
Атрибуты
action - задаёт адрес, URL, отправки формы;
method - задаёт метод отправки формы (по умолчанию get). Метод get посылает данные формы в строке
запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Например:
https://www.google.com/search?q=htmlacademy
Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты
поиска и передать её кому-то.
Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и
ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.
<fieldset>… </fieldset> - объединять поля в группы
По умолчанию браузеры отображают результат в виде рамки вокруг этой группы полей, но при помощи CSS
можно изменить его внешний вид. Также для каждой группы можно добавить её заголовок. Для этого внутрь тега
fieldset надо поместить тег legend:
<fieldset>
<legend>Заголовок группы</legend>
<input type="text">
<input type="text">
<input type="text">
</fieldset>
<fieldset>
<textarea></textarea>
</fieldset>
<input> - создает поле формы
Атрибуты
type - задаёт тип поля (обязательный)
- text – простой текст
- password – для ввода пароля (закрыто звездочками)
- submit – кнопка (надпись на кнопке задается с помощью атрибута value)
- checkbox – кнопка с галочкой (Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут
checked)
- radio – поле-переглючатель (атрибут value обязательный, у переключателей одной группы должно быть
одинаковое имя, атрибут checked ставит переключатель выбранным по умолчанию)
- file – поле для загрузки файлов (Чтобы поле заработало и браузер смог передать выбранный файл на
сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.)
- hidden – скрытое поле
- reset – добавляет кнопку сброса введенных в форму данных к значею по умолчанию
- button – создает просто кнопку, при нажатии на которую ничего не происходит (действия задаются
например в JavaScript)
- image – изображение в качестве кнопки (нужно еще дописывать атрибуты src и alt). Кнопка-изображение
работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой
был произведен щелчок.
- date – поле для даты, при клике на которое всплывает календарик
- time – воле для выбора времени (часы\минуты)
- datetime-local - выбор даты с указанием времени (без учета временной зоны)
- week - выбор порядкового номера недели в году и года
- month - выбор месяца и года
- number – поле для ввода числовых значений. При помощи вспомогательных атрибутов min и max можно
установить верхнюю и нижнюю границу допустимых значений. А атрибут step устанавливает величину
шага изменения значения.
- range – поле, позволяющее выбрать из определенного диапазона чисел (такое поле выглядит как шкала
с ползунком и позволяет выбрать число из некоторого интервала значений).
Атрибуты min и max устанавливают нижнюю и верхнюю границу допустимых значений.
А атрибут step устанавливает величину шага изменения значения.
- search – поле для поиска
- tel – поле для ввода номера телефона
- email – поле для ввода email (автоматически проверяет формат введённых данных)
- url – поле для ввода адреса сайта (автоматически проверяет формат введённых данных)
- color – добавляет поле выбора цвета из палитры
name - задаёт имя поля (обязательный)
value - задаёт значение поля ввода по умолчанию.
required – помечает поле, как обязательное к заполнению
pattern – автоматическая проверка формата ввода в поле.Формат задается регулярными выражениями,
например [0-9]{3}-[0-7]{5} – три цифры от 0 до 9 включительно и пять цифр от 0 до 7 включительно. (дефис «-»
вводить тоже нужно)
autofocus – при загрузке страницы фокус по умолчанию будет на этом поле (используется один раз на странице)
placeholder – выводит подсказку в текстовых полях (text, textarea и т.д.). Текст подсказки выводится внутри
текстового поля, а при вводе значения — автоматически убирается.
readonly - Атрибут readonly не дает пользователю изменять поле (вводить новый текст, модифицировать
существующий). Введенное значение можно выделить и скопировать. Данные из этого поля отправляются
на сервер.
disabled - Атрибут disabled не дает пользователю изменять поле (вводить новый текст, модифицировать
существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные
из этого поля НЕ отправляются на сервер.
autocomplete – автозаполнение полей (on\off). При вводе первых букв текста выводится список сохранённых
ранее значений, из которого можно выбрать подходящее.
tabindex – управление порядка переключения между полями при нажатии клавиши TAB (от метьшего к
большему). <input type="text" tabindex="3">
Если представлено отрицательное значение — элемент может быть выделен, однако не участвует
в последовательной навигации
Если представлен 0 — элемент может быть выделен и достигнут с помощью последовательной навигации,
однако порядок навигации определён платформой

<form action="https://echo.htmlacademy.ru/courses" method="get">


<input type="text" name="search">
</form>
<output>… </output> - область, отображающая результаты вычислений, обычно полученные при помощи
JavaScript.
При использовании <output> тегу <form> нужно добавить атрибут oninput со значением name-output.value=name-
input.value.
Пример использования:
<form action="https://echo.htmlacademy.ru/courses" method="post"
oninput="daysoutput.value=dayscount.value">
<input type="range" name="dayscount">
<output name="daysoutput"></output>
</form>

<label> Подпись <input> </label> - подпись к полю <input> (связывает их логически)


Атрибуты
For – логически связывает подпись и поле по id.
<label for="user-field-id">Имя пользователя</label>
...
<input id="user-field-id" type="text" name="username">
<textarea>…</textarea> - многострочное поле
Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по
умолчанию.
Атрибуты
rows – высота многострочного поля (в строках)
cols – ширина многострочного поля (в символах)
name – имя текстового поля

<select>…</select> - раскрывающийся список


Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега
<select>.
Для формирования группы используется тег optgroup. Атрибут label этого тега определяет заголовок группы.
Можно использовать атрибуты readonly, disabled, tabindex (см. атрибуты тега <input>).
Пример использования:
<select name="theme">
<optgroup label="Группа вариантов 1">
<option value="light">Светлая тема</option>
<option value="dark">Тёмная тема</option>
...
</optgroup>
<optgroup label="Группа вариантов 1">
<option value="light">Светлая тема</option>
<option value="dark">Тёмная тема</option>
...
</optgroup>
</select>
В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта
ответа.
Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В
противном случае будет отправлен текст подписи.
Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option>
добавить атрибут selected.
Атрибуты
Multiple – мултиселект (с зажатой Ctrl можно выбрать несколько пунктов)
Size – высота мультиселекта
<figure>…</figure> - иллюстративный\демонстрационный материал (схемы, графики, код, таблицы).
По умолчанию у тега <figure> есть отступы.
<figcaption>…</figcaption> - разъясняющий комментарий, или «легенда» для контента в <figure>.
<figure>
Схема, график, диаграмма или код
<figcaption>Подпись к содержимому</figcaption>
</figure>
<datalist>…</datalist> - заранее определенный список значений, отображаемый при вводе текста в поле.
Связывание текстового поля и списка осуществляется при помощи атрибута list у тега input — значение list должно
быть таким же, как значение атрибута id у списка.
Пример использования:
<input type="text" list="browsers" name="browser">
<datalist id="browsers">
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Safari"></option>
</datalist>
<a>…</a> - создание ссылки
Тег <a> можно использовать вообще без адреса, то есть без href. Такой тег обозначает «ссылку-заглушку», которая в
других условиях может стать обычной ссылкой (например, когда мы с последней фотки перейдём в середину галереи).
Атрибуты
 Href – тут указывается адрес для ссылки (<a href="https://htmlacademy.ru">HTML Academy</a>). # -
якорь, привязывется к элементу по ID.
 Download – для скачивания файла (<a href="file.pdf" download>Браузер скачает меня, а не прочитает</a>)
 Title – подсказка. Появляется, когда курсор задерживается над ссылкой некоторое время.
<button>…</button> - создает кнопку
Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения.
Атрибуты
Type – основной атрибут, указывающий на функционал кнопки
- button – просто ничего по умолчанию не делающая кнопка (аналогично <input type=”button”>)
- reset – сбрасывет введенные в форму данные к значею по умолчанию (аналогично <input
type=”reset”>)
- submit – по нажатию кнопка будет отправлять данные на сервер (аналогично <input type=”submit”>)

<time>…</time> - тег для даты


С помощью <time> можно описывать даты одновременно и для человека, и для машины. Дата для человека
описывается внутри тега, а дата для машины — внутри атрибута datetime в формате ISO 8601:
- <time datetime="2016-11-18T09:54">09:54 утра</time>
- <time datetime="2015-11-18">18 ноября 2015</time>
- <time datetime="2018-09-23">в прошлую субботу</time>
- <time datetime="2017-04-20">вчера</time>
<code>…</code> - тег для обозначения фрагментов кода.
<q>…</q> - цитата (атрибутом cite=”http://....” можно указывать адрес цитаты)
<cite>…</cite> - название источника цитаты
«расширенная версия» атрибута cite. В нём можно указывать помимо адреса источника цитаты ещё и название
произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется.
Содержимое <cite> в браузере выделяется курсивом.
<p>Какой доктор ваш любимый (в сериале <cite>Доктор Кто</cite>)?</p>
<blockquote>…</blockquote> - длинная цитата
Тег для выделения длинных цитат, которые могут состоять из нескольких абзацев. Он выделяет цитату не как
фрагмент текста в предложении, а как отдельный блок текста с отступами.
</blockquote>
<p>Ум ценится дорого, когда дешевеет сила.</p>
<cite>Джейсон Стэтхэм</cite>
</blockquote>
<ul>…</ul> - НЕупорядоченный список
<li>…</li> - элемент списка
<ol>…</ol> - упорядоченный список
<li>…</li> - элемент списка
Атрибуты
 Start - меняет стартовое число. Нумерация пунктов списка может также быть отрицательной.
<ol start="3">
 Reversed - меняет направление нумерации на противоположный. Этот атрибут не требует значения.
 Type - различные типы маркеров, вместо обычных арабских цифр: строчные и заглавные латинские буквы или
римские цифры. Возможные значения этого атрибута:
- 1: десятичное число;
- a: буквы латинского алфавита в нижнем регистре;
- A: буквы латинского алфавита в верхнем регистре;
- i: римские цифры в нижнем регистре;
- I: римские цифры в верхнем регистре.
<dl>…</dl> - список описаний
<dt>…</dt> - термин
<dd>…</dd> - описание термина

<table>…</table> - таблица
<caption>… </caption> - Заголовок таблицы. Должен размещаться до остальных вложенных тегов (первым).
- По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom,
которые обозначают до и после таблицы соответственно.
- По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и
center.
<tr>…</tr> - ячейка-заголовок. Текст внутри <th> выделяется жирным и выравнивается по центру ячейки.
<tr>…</tr> - расшифровывается как «table row», обозначает строку таблицы.
<td>…</td> - расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Атрибуты
Cellpadding (для <table>) – внутренний отступ у ячеек таблицы (лучше это настраивать с помощью CSS)
colspan (для <th> и <td>) - объединение ячеек по горизонтали. Когда вы задаёте ячейке атрибут colspan со
значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в
таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от
«растянутой».
rowspan (для <th> и <td>) - объединение ячеек по вертикали. Когда вы задаёте ячейке атрибут rowspan со
значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под
«растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку,
которая была под «растянутой», мы избавимся от этого столбца.

CSS
Перечень всех абсолютных единиц измерения и их соотношений есть в спецификации. Там же, в спецификации, есть
перечень всех относительных единиц измерения и описание правил расчёта.

Селекторы
селектор {
свойство: значение;
свойство: значение;
}
Селектор по ID
Cелектор записывается с помощью символа #, например, #some-id.
На значение id распространяются те же ограничения, что и на имя класса. id должен быть уникальным на странице.
Пример:
HTML
<p id="greeting">Приветствие!</p>
CSS
#greeting {
...
}
Селекторы атрибутов
Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут].
Примеры селекторов:
- input[checked] { ... } - выберет поля формы, у которых есть атрибут checked
- input[type="text"] { ... } - выберет поля формы, у которых атрибут type имеет значение text
Вложенные или контекстные селекторы
nav a {…} /* выберет теги a внутри тегов nav */
.menu ul {…} /* теги ul внутри тегов с классом menu */
.post .title {…} /* теги с классом title внутри тегов с классом post */
ul.target {...} /* выбор всех тегов ul с классом target */ (<ul class="target"></ul>)
.text.green {...} /* выбор элементов с двумя классами: text и green */ (<p class="green text"></p>)
Селектор по классу более специфичен, чем селектор по тегу.

Соседние селекторы
селектор1 + селектор2 - Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2.
Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент,
подходящий под селектор1.
Cелектор последующих элементов
селектор1 ~ селектор2 - стили применятся к элементу, подходящему под селектор2, только если перед ним
расположен элемент, подходящий под селектор1.
HTML
<ul class="cards">
<li class="king diamond">
<li class="queen heart">
<li class="jack spade">
<li class="ace heart">
<li class="king club">
</ul>
CSS
.queen.heart + li {
background-color: #ffff99;
}

.king.diamond ~ li {
background-color: #99ddff;
}
1. В первом случае выделится одна карта, расположенная сразу за червовой дамой, то есть пиковый валет.
2. Во втором случае выделятся все карты, которые стоят за бубновым королем, то есть червовая дама, пиковый
валет, червовый туз и трефовый король.
Наследование
Наследование на один уровень задается знаком «>» (body > header – сработает только для первого header в body)
Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том
случае, если они где-то явно не переопределены.
Весь список наследуемых и НЕнаследуемых свойств вы можете найти в стандарте CSS. Если в колонке Inherited?
напротив свойства стоит yes, то свойство наследуемое, если no - ненаследуемое.
Псевдоклассы
Псевдокласс добавляется к селектору c помощью символа :, вот так селектор:псевдокласс.
Например:
a:visited { ... }
li:last-child { ... }
.alert:hover { ... }
:first-child - позволяет выбрать первый дочерний элемент родителя
:last-child - позволяет выбрать последний дочерний элемент родителя
:nth-child - можно выбирать теги по порядковому номеру. селектор:nth-child(выражение). Выражением может быть
число или формула. Например:
- li:nth-child(2) { ... } /*второй элемент списка*/
- li:nth-child(4) { ... } /*четвёртый элемент списка*/
- li:nth-child(2n) { ... } /*все чётные элементы*/
:nth-last-child – то же самое, что :nth-child, только нумерация ведется с конца
:first-of-type - выбирает первый дочерний элемент родителя (с учетом типа элементов).
:last-of-type - выбирает последний дочерний элемент родителя (с учетом типа элементов).
:nth-of-type – работает так же как :nth-child, только учитывает тип элемента.
:nth-last-of-type - то же самое, что :nth-of-type, только нумерация ведется с конца
:hover – выбирает элемент, когда на него навелен курсор.
:link - выбирает ещё не посещённые ссылки.
:visited - выбирает посещённые ссылки.
:active - выбирает активные ссылки (кнопка мыши зажата на ссылке).
:focus - позволяет выбрать элемент, который в данный момент в фокусе (текстовое поле, в которое установлен курсор).
:empty - выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов)
:only-child - выбирает только тот тег, который является единственным дочерним элементом внутри родительского
контейнера.
:only-of-type – работает так же как и :only-child, только учитывает тип элемента
:not - выбрать элементы, которые НЕ содержат указанный селектор: li:not(:last-child) { }
В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя
использовать двойной псевдокласс :not, то есть конструкция :not(:not(...)) не сработает.
Также в комбинации с :not не применяются:
- объединение селекторов: например, li:not(.heart.jack) — некорректный селектор;
- псевдоэлементы: li:not(::after) — неправильная запись
- селекторы-потомки, групповые селекторы или комбинации: например, нельзя писать li:not(a span) или
li:not(a + span).

Псевдоэлементы
::before – добавляет тег перед элементом
Позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Cодержимое псевдотега
задаётся с помощью свойства content.
<div class="queen heart">
<em>Дама</em>
</div>
Добавим CSS-правило с необычным селектором с двойным двоеточием:
.heart::before { content: "Черви"; }
И HTML изменится вот так:
<div class="queen heart">
<before>Черви</before>
<em>Дама</em>
</div>
Но! Исходный HTML-код не изменится, тег <before> не попадёт в код страницы, а будет «виртуально» существовать
где-то в браузере.
Ведёт себя псевдотег так же, как обычный <span> с текстом. Ему можно задавать дополнительные стили, например:
.heart::before {
content: "Черви";
color: red;
}
Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении
свойства — content: "";
::after – добавляет тег после элемента
Работает аналогично ::before.
:first-line – стиль первой строки
Задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как
используемый шрифт, размер окна браузера, ширина блока, языка и так далее. В правилах стиля допустимо
использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
:first-letter – стиль первой буквы в строке
Определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут
применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом
и фоном.
Текст, шрифт:
text-indent
font – составное свойство шрифта
Например, font: 16px/26px "Arial", sans-serif; браузер «расшифрует» в такой набор обычных свойств и их
значений:
font-size: 16px; /* было задано в font */
line-height: 26px; /* было задано в font */
font-family: "Arial", sans-serif; /* было задано в font */
font-weight: normal; /* не было задано в font */
font-style: normal; /* не было задано в font */
font-variant: normal; /* не было задано в font */
font-family – задает шрифт
В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка —
общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или
на сайте шрифт.
font-family: "PT Sans", "Arial", sans-serif;
font-style – начертание шрифта
- normal — обычное начертание;
- italic — курсивное начертание.
- oblique — наклонное начертание.
font-size – размер шрифта
font-size: 20px\xx-small\ x-small\ small\ medium\ large\ x-large\xx-large\em\pt;
Подробно о ключевых словах можно узнать в спецификации.
Единицы измерения
 em - это такой же размер шрифта, что и у родителя. Соответственно, если мы хотим, чтобы шрифт
дочернего элемента был всегда в 2 раза больше родительского, то зададим значение 2em:
font-weight - толщина шрифта
Может принимать одно из девяти числовых вариантов насыщенности (+bolder и lighter):
- 100: Thin;
- 200: Extra Light (Ultra Light);
- 300: Light;
- 400: Normal;
- 500: Medium;
- 600: Semi Bold (Demi Bold);
- 700: Bold;
- 800: Extra Bold (Ultra Bold);
- 900: Black (Heavy).
font-weight: 400; /* то же самое что и normal */
font-weight: bold; /* то же самое что и 700 */
@font-face – подключение внешних шрифтов
@font-face {
font-family: "Roboto";
src:
local("Roboto Regular"),
url("roboto.woff") format("woff");
}
line-height – межстрочный интервал (высота строки)
По умолчанию это свойство имеет значение normal. Оно указывает браузеру, что межстрочный интервал нужно
подобрать автоматически, исходя из размера шрифта. Спецификация рекомендует устанавливать его в
пределах 100-120% от размера шрифта.
font-size: 10px;
line-height: normal; /* значение будет примерно 12px */
Можно задавать относительное значение
font-size: 10px;
line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
line-height: 2; /* вычисленное значение: 10px * 2 = 20px */
color – цвет текста
Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации).
- color: black \ #0000 \ rgb(0, 0, 0); /* чёрный цвет */
- color: red \ #f00 \ rgb(255, 0, 0); /* красный цвет, то же что #ff0000 */
- color: white \ #fff \ rgb(255, 255, 255); /* белый цвет, то же что #ffffff */
Расширенная версия rgb — rgba (помимо цвета последним значением указывается степень непрозрачности
цвета. Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
- color: rgba(0, 0, 0, 0.5) /* чёрный, непрозрачный на 50% */
- color: rgba(255, 0, 0, 0.3) /* красный, непрозрачный на 30% */
- color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */
letter-spacing
word-spacing
white-space – управление пробелами
- nowrap — схлопывает лишние пробелы и отображает весь текст одной строкой без переносов;
- pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
- pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не
помещается в контейнер;
- normal — режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится,
пробелы в конце строк удаляются.
text-decoration - дополнительное оформление текста
К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел
- underline — подчёркивание;
- line-through — зачёркивание;
- overline — надчёркивание;
- none — убирает вышеперечисленные эффекты.
Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:
- text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
- text-decoration-style — стиль линии, может принимать значения:
- solid — сплошная линия;
- double — двойная линия;
- dotted — точечная линия;
- dashed — пунктирная линия;
- wavy — волнистая линия.
- text-decoration-color — цвет линии.
text-transform - управлять регистром символов (строчные (маленькие)\заглавные)
- lowercase — все строчные;
- uppercase — все заглавные;
- capitalize — каждое слово начинается с большой буквы;
- none — отменяет изменение регистра.

Позиционирование элементов
position – управление позиционированием элементов
- fixed
- relative
- absolute
- static
- inherit
text-align – выравнивание текста внутри блока по горизонтали
- left — выравнивание по левому краю блока, это значение по умолчанию;
- right — по правому краю блока;
- center — по центру блока;
- justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё
пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер
«растягивает» слова в строке).
Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого
находится текстовый контент, он должен быть инлайновым (изображения, инлайн-блоки, инлайн-таблицы и
др.)
z-index – управляет порядком слоев
vertical-align - выравнивание текста внутри блока по вертикали
Этим свойством можно выравнивать инлайновые элементы относительно содержащей его строки.
- top — выравнивание по верхнему краю строки;
- middle — по середине строки;
- bottom — по нижнему краю строки;
- baseline — по базовой линии строки (значение по умолчанию).
В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру.
Помимо ключевых слов для vertical-align ещё есть возможность задавать значения в пикселях и процентах.
Процентное значение (например, vertical-align: 100%) вычисляется относительно заданной высоты строки line-
height. Значение 0% — это то же самое, что и baseline, а ещё оно может быть как положительным, так и
отрицательным.
Значение в пикселях (например, vertical-align: 10px) работает аналогично процентному, только отсчитывается в
пикселях в большую или меньшую сторону. Значение 0px эквивалентно baseline.

Отступы
Padding - внутренние отступы в блоке
Margin - внешние отступы в блоке

Ненаследуемые свойства
background-image - фоновое изображение для блока
background-image: url("путь_к_файлу_изображения.png");

background-color - фоновый цвет


background-color: #cccccc;

border-collapse – управление поведением рамки в таблице


Атрибуты
- Collapse - убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя
рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить
её ширину.
- Separate - «расклеивает» ячейки (значение по умолчанию)
border – управление рамками элемента
Простые свойства
border-top – верхняя граница
border-right – правая граница
border-bottom – нижняя граница
border-left – левая рамка

Другие действия с рамками


border-radius - радиус скругления углов границы.
border-spacing – отступы между ячейками (задается для таблицы <table>…</table>)
padding – внутренний отступ элемента
Простые свойства
padding-top – отступ сверху
padding-right – отступ справа
padding-bottom – отступ снизу
padding-left – отступ слева
list-style-type – стиль маркеров в списке
Маркированный список
- Circle - Маркер в виде кружка.
- Disc - Маркер в виде точки.
- Square - Маркер в виде квадрата.
Нумерованный список
- Armenian - Традиционная армянская нумерация.
- Decimal - Арабские числа (1, 2, 3, 4,...).
- decimal - leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
- georgian - Традиционная грузинская нумерация.
- lower-alpha - Строчные латинские буквы (a, b, c, d,...).
- lower-greek - Строчные греческие буквы (α, β, γ, δ,...).
- lower-latin - Это значение аналогично lower-alpha.
- lower-roman - Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
- upper-alpha - Заглавные латинские буквы (A, B, C, D,...).
- upper-latin - Это значение аналогично upper-alpha.
- upper-roman - Римские числа в верхнем регистре (I, II, III, IV, V,...).
- none - Отменяет маркеры для списка.
- inherit - Наследует значение родителя.

Скрипт localstorage
<script>
if (window.localStorage) {
var elements = document.querySelectorAll('[name]');

for (var i = 0, length = elements.length; i < length; i++) {


(function(element) {
var name = element.getAttribute('name');

element.value = localStorage.getItem(name) || element.value;

element.onkeyup = function() {
localStorage.setItem(name, element.value);
};
})(elements[i]);
}
}
</script>