HTML код (вставлять нужно в контейнер <div class=»content»>):
Выделить код
Заголовки:
<h1>Заголовок первого уровня (h1)</h1>
<h2>Заголовок второго уровня (h2)</h2>
<h3>Заголовок третьего уровня (h3)</h3>
<h4>Заголовок четвертого уровня (h4)</h4>
<h5>Заголовок пятого уровня (h5)</h5>
<h6>Заголовок шестого уровня (h6)</h6>
Абзац (p):
<p>Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей.
</p>
Ненумерованный список: (ul)
<ul>
<li>первый элемент</li>
<li>второй элемент</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>
</ul>
Нумерованный список: (ol)
<ol>
<li>первый элемент</li>
<li>второй элемент</li>
<li>элемент в <br/>две строки</li>
<li>элемент N</li>
</ol>
Таблица: (table)
<table>
<thead>
<tr>
<th>Заголовок столбца 1</th><th>Заголовок столбца 2</th><th>Заголовок столбца 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td><td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</th><td>Ячейка 5</td><td>Ячейка 6</td>
</tr>
</tbody>
</table>
CSS код:
Выделить код
.content {
padding: 10px;
}
.content h1 {
font-size: 200%;
margin-bottom: 20px;
}
.content h2 {
font-size: 160%;
margin-bottom: 15px;
}
.content h3 {
font-size: 140%;
margin-bottom: 12px;
}
.content h4 {
font-size: 120%;
margin-bottom: 10px;
}
.content h5 {
font-size: 100%;
margin-bottom: 10px;
}
.content h6 {
font-size: 100%;
margin-bottom: 10px;
}
.content p {
margin-bottom: 15px;
}
.content ul {
list-style: disc;
margin: 0 15px 10px 15px;
}
.content ol {
list-style: decimal;
margin: 0 15px 10px 20px;
}
.content li {
margin-bottom: 5px;
}
.content table {
margin-bottom: 15px;
font-size: 100%;
width: auto;
border: 1px solid #000;
}
.content th, .content td {
border: 1px solid #000;
padding: 4px;
text-align: left;
}
.content th {
font-weight: bold;
text-align: center;
}
.content a, .content a font {
color: #0000ff;
text-decoration: underline;
}
.content a:hover, .content a:hover font {
color: #0000ff;
text-decoration: none;
}
.content a:visited, .content a:visited font {
color: #0000aa;
}
.content a:active, .content a:active font {
color: #ff0000;
}
.content img {
margin: 0 10px 10px 10px;
}
Теги: оформление контента, контент