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

26.08.2019

3689

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

Для удобства введен класс .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

Заголовки

.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

Параграфы

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

CSS

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

.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

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

.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

Таблицы

.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