Оформление контента
Автор: Евгений Рыжков Дата публикации:
Для кроссбраузерного отображения контента используйте сброс стилей вначале CSS файла (или первым подключайте в head).
HTML код (вставлять нужно в контейнер <div class="content">):
Заголовки: <h1>Заголовок первого уровня (h1)</h1> <h2>Заголовок второго уровня (h2)</h2> <h3>Заголовок третьего уровня (h3)</h3> <h4>Заголовок четвертого уровня (h4)</h4> <h5>Заголовок пятого уровня (h5)</h5> <h6>Заголовок шестого уровня (h6)</h6> Абзац с рисунком слева(p): <p><img align="left" src="" alt="" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей. </p> <hr /> Абзац с рисунком справа(p): <p><img align="right" src="" alt="" width="129" height="90" />Абзац — <a href="#">малоисследованный компонент</a> литературной формы, имеющий композиционное, сюжетно-тематическое, ритмическое значение и связанный со стилем автора. Характерны, например, краткие абзацы в импрессионистической прозе — симптомы раздробленности, афористичности мысли; или например возвращение к длинному абзацу в несколько страниц у М. Пруста, связанное со стернианской, так называемой «спиралевидной цикличностью» его изложения. Особенно выразителен абзац у А. Белого, который выделяет в особые абзацы даже отдельные части фразы, подчёркивая этим тематическую значимость, ритмическое развитие выделяемых частей. </p> Ненумерованный список: (ul) <ul> <li>первый элемент</li> <li>второй элемент <ul> <li>первый элемент вложенного списка</li> <li>второй элемент вложенного списка</li> </ul> </li> <li>элемент в <br/>две строки</li> <li>элемент N</li> </ul> Нумерованный список: (ol) <ol> <li>первый элемент</li> <li>второй элемент <ol> <li>первый элемент вложенного списка</li> <li>второй элемент вложенного списка</li> </ol> </li> <li>элемент в <br/>две строки</li> <li>элемент N</li> </ol> Список определений: (dl) <dl> <dt>первое определение</dt> <dd>описание первого определения</dd> <dt>второе определение</dt> <dd>описание второго определения</dd> </dl> Таблица: (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</td><td>Ячейка 5</td><td>Ячейка 6</td> </tr> </tbody> </table> Теги форматирования: <p>Тег <strong>strong — выделение жирным</strong>, повышает вес слова для поисковых систем.</p> <p>Тег <b>b — выделение жирным</b>, не повышает вес слова для поисковых систем.</p> <p>Тег <em>em — выделение курсивом</em>, повышает вес слова для поисковых систем.</p> <p>Тег <i>i — выделение курсивом</i>, не повышает вес слова для поисковых систем.</p>
CSS код:
/* content -----------------------*/ .content { padding: 10px; } .content h1 { font-size: 150%; margin-bottom: 20px; } .content h2 { font-size: 140%; margin-bottom: 15px; } .content h3 { font-size: 130%; margin-bottom: 12px; } .content h4 { font-size: 120%; margin-bottom: 10px; } .content h5 { font-size: 110%; 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 ul ul { margin: 10px 0 10px 25px; } .content ol { list-style: decimal; margin: 0 15px 10px 20px; } .content ol ol { margin: 10px 0 10px 25px; } .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:visited, .content a:visited font { color: #0000aa; } .content a:hover, .content a:hover font { color: #0000ff; text-decoration: none; } .content a:active, .content a:active font { color: #ff0000; } .content img[align=left] { margin: 0 10px 10px 0; float: left; } .content img[align=right] { margin: 0 0 10px 10px; float: right; } .content dl { margin: 0 0 15px 0; } .content dt { font-weight: bold; margin-bottom: 2px; } .content dd { margin-bottom: 5px; } .content hr { height: 1px; border: none; color: #aaa; background: #aaa; margin: 10px 0; clear: both; }
CSS код для ie6.css
.content hr { float: left; width: 100%; } .content img { z-index: expression(runtimeStyle.zIndex = 1, align && "left" == align.toLowerCase() ? (className += " imgLeft") : (align && "right" == align.toLowerCase() ? (className += " imgRight") : 0 ) ) } .content .imgLeft { margin: 0 10px 10px 0; float: left; } .content .imgRight { margin: 0 0 10px 10px; float: right; }