Вновь о простом стиле CSS для сайта

Всплывает регулярно этот вопрос.

В свете всеобщего избавления от вырвиглазных макетов, ярких цветов и фоновых рисунков, бывают нужны и вовсе элементарные макеты в 2-3 Кб, под которые потом легко написать скрипт для добавления контента, пользующийся только указанными в стиле тегами и не позволяющий юзеру баловаться с казуальными стилями.

Сейчас я бы в простых случаях точно вот так не делал и даже не стал бы заморачиваться с "правильным" сбросом стиля :) Но я и не считаю себя знатоком CSS3, хотя если нужно сделать "на коленке", применяю.

Цель очень проста, сделать короткий стиль CSS, который должен:

• позволять сайту иметь простую и логичную структуру (как этот блог :);
• позволять иметь примитивный одноколоночный макет, впрочем, ограниченный по ширине в процентах и имеющий минимальную ширину в пикселях, что заменит адаптивную вёрстку;
• иметь высоту страницы всегда примерно не меньше полного экрана, даже если контента на ней недостаточно;
• публиковать тексты с цитированием, листингами, произвольными выделениями физическими и логическими тегами разметки;
• обходиться без устаревших тегов и атрибутов, проходить валидацию (наш тест её не пройдёт из-за font face, но это мы в учебных целях), иметь возможность добавлять списки, таблицы (как с автошириной, так и занимающие всю ширину экрана), цитаты, листинги;
• добавлять картинки, хотя бы просто отцентрированные и с подписями внизу;
• добавлять внизу "подвал" сайта с нужной информацией;
• может, ещё какое баловство с горизонтальной лентой ссылок или тегов в любом нужном месте страницы.

В любом случае, "танцевать" в таких случаях проще от структуры будущего контента.

Для начала установим высоту страницы, шрифт (не нужно конкретный, есть семейства), "неубиваемые" полосы прокрутки, основные цвета, отступы и класс-обёртку для контента.

/* общий макет */
html {
 height: 98%;
}
body {
 height: 98%;
 font-family: sans-serif;
 background-color: #f0f0f0;
 color: #111111;
 font-size : 100%;
 overflow: scroll;
}
body, div, p,
ul, ol, dl, li, dt, dd, 
table, tbody, tr, th, td, 
blockquote, pre,
h1, h2, h3, 
figure, figcaption, 
footer, nav {
 margin: 0.2em;
 padding: 0.2em;
}
.wrapper {
 margin: 0 5%;
 min-width: 400px;
 min-height: 98%;
}

С цветами всё понятно - я всегда за то, чтобы фон делать чуть темнее белого, типа #eee, а основной цвет текста - чуть светлее чёрного, например, #111.

Основные виды списков просто сделаем с небольшими отступами. Все единицы постараемся оставлять только "долями буквы" em или процентами, разве что "минимальную ширину сайта" выше мы указали в пикселях px.

/* списки */
ul,ol,dl,li,dt,dd {
 padding: 0;
 margin-left: 0.6em;
 list-style-position: outside;
}
dt { margin-left: 0; }
dd { margin-left: 1em; }

Для таблиц укажем "сворачивание" границ и обрамление ячеек. Отдельным классом предусмотрим таблицу с шириной контента 100%.

/* таблицы */
table {
 border-collapse: collapse;
 margin: auto;
}
th, td {
 border: 1px solid #000;
 word-wrap: break-word; 
}
.w100 {
 width: 100%;
}

Цитаты должны быть выведены шрифтом с засечками, наводящим на мысли о бумажной книге, а листинги и текстовые фрагменты кода (имена переменных, файлов и т.п.) - моноширинным. Блочные варианты цитат и кода, конечно, неплохо взять в не-вызывающую по цветам рамочку.

/* цитаты, код, листинг */
blockquote {
 margin: 0;
 padding: 0.2em;
 font-family: serif; 
 color: #444444; 
 border: 1px solid #ddd; 
}
q {
 font-family: serif; 
 quotes: none;
}
pre {
 font-family: monospace; 
 color: #003300;
 border: 1px solid #ddd;
}
code {
 font-family: monospace; 
 color: #003300;
}

Стандартные заголовки HTML слишком велики и имеют слишком большие отступы, немного поправим 3 первых уровня заголовков.

/* заголовки */
h1, h2, h3 { color: #000; }
h1 { font-size: 130%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }

Ссылки, открываемые в новом и текущем окне, а также посещённые и активные должны отличаться по оформлению, предусмотрим это. Лучше всего, если ссылка, открывающая новое окно/вкладку видна до клика, например, выделена фоном.

/* ссылки */
a[target="_blank"] { 
 background-color: #FFFFCC;
}
a {
 background-color: expression((this.getAttribute("target") && this.getAttribute("target")=="_blank") ? "#FFFFCC" : "transparent");
}
a:link, a:active { 
 text-decoration: none; color : #006699; 
}
a:visited {
 text-decoration: none; color : #003399; 
}
a:hover	{ 
 text-decoration: underline; color : #DD6900; 
}

Картинки достаточно добавлять в отдельном блоке с помощью новых тегов <figure> и <figcaption>. Так же могут выводиться и математические формулы, а для простых эффектов вроде верхних и нижних индексов есть соответствующие теги.

/* картинки в отдельном блоке */
figure {
 display: table;
 margin: 0 auto;
}
figure img {
 display: block;
}
figcaption {
 display: table-caption;
 caption-side: bottom;
 text-align: center;
 font-size: small;
}

Низ страницы не будет вкладываться в раздел-обёртку, при этом он должен быть готов выполнить свою функцию - вывести некий повторяющийся футер страниц.

/* низ страниц */
footer {
 margin: 0 5%;
 border: 1px dotted #999;
}

Дальше можно побаловаться, скажем, предусмотрев дополнительные горизонтальные навигационные блоки со ссылками, которые могут ссылаться на другие статьи по теме, теги и т.п.

/* дополнительная горизонтальная навигация */
nav {
 background: #ddd;
 position: relative;
 overflow: hidden;
 margin: 10px 0;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 position: relative;
 left: 50%;
 float: left;
}
nav ul li {
 position: relative;
 left: -50%;
 float: left;
 margin: 0 10px;
}
nav ul li a {
 color: #fff;
 display: block;
 text-decoration: none;
 padding: 0 10px;
}
nav ul li a:hover {
 background-color: #CCF;
}

Вот какой стилевой файл вышел, он прикреплён непосредственно как .css в кодировке Юникода utf-8.

 style.css, открыть в текущем окне/ссылке (utf-8) (2 Кб)

Вот простая разметка с этим стилем, не забудьте поменять ссылку на стиль в заголовке документа, если скачаете его (это легко сделать, открыв исходный код страницы).

 index.html, открыть в текущем окне/ссылке (utf-8) (5 Кб)

20.02.2020, 00:40 [1324 просмотра]