Восстановление стилей текста после CSS reset

При вёрстки сайта «сброс стилей» помогает и уменьшает объем кода, но когда дело доходит до оформления текстов начинаются проблемы и приходится прописывать стили для всей типографики. Далее представлены готовые стили которые вернут обычный вид текста.

Для удобства введен класс .text у контейнера с текстом, чтобы стили не применялись к другим блокам сайта.

<div class="text">
	<h1>H1 heading</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<p>
</div>
HTML
1

Заголовки

.text h1 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 28px;     
}
.text h2 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 26px;     
}
.text h3 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 24px;     
}
.text h4 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 22px;     
}
.text h5 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 20px;     
}
.text h6 {
	margin-bottom: 15px;
	font-weight: 900;
	font-size: 18px;     
}
CSS
2

Параграфы

.text p {
	margin: 0 0 15px 0;
}
CSS
3

Маркированные списки

.text ul {
	display: block;
	margin: 0 0 15px 25px;
	padding: 0;
}
.text ul ul {
	margin-top: 15px;
}
.text ul li {
	list-style: outside disc;
	margin: 0 0 10px 0;
}
CSS
4

Нумерованные списки

.text ol {
	display: block;
	margin: 0 0 15px 25px;
	padding: 0;
}
.text ol ol {
	margin-top: 15px;
}
.text ol li {
	list-style: outside decimal;
	margin: 0 0 10px 0;
}
CSS
5

Таблицы

.text table {
	width: 100%;
	margin-bottom: 15px;
	table-layout: fixed;
}
.text th {
	font-weight: 900;
	padding: 10px;
}
.text thead th {
	background-color: #f1f1f1;
	border: 1px solid #ddd;
	text-align: center;
}
.text td {
	border: 1px solid #ddd;
	background-color: #fff;
	padding: 10px;
}
CSS
26.08.2019, обновлено 29.08.2019 27
Предыдущая запись Сброс стилей (CSS reset)

Поделится

Другие публикации

При переносе сайта на другую CMS возникают проблемы c миграцией дынных в БД, структура как правило разная,...
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
Сборник советов как поднять оценку в PageSpeed Insights.