Примеры стилей для CSS

Гораздо проще воспринять всё на практических примерах. Они разбиты на группы, но разумно воспользоваться поиском.

Каждая строка может быть непосредственно перенесена в таблицу стилей.

Между прочим, использованный для выделения стилей тег <pre> индивидуально настроен именно для этого файла.

Документ

Указание цвета фона. Аналог <body bgcolor="цвет">:

 body {background-color: #DDDDFF;}

Указание фоновой картинки. Аналог <body background="URL">:

 body {background-image: url('путь к файлу')}

Символы

Достаточно интересная возможность для определения вида для ВСЕХ символов на сайте:

 * {font-family: sans-serif; font-size: 16 pt;}

Наиболее востребованный вариант задания правил для фрагмента текста:

 span

Уменьшает размеры для маленького текста и индексов до 75% от высоты основного шрифта. Было: H2O, стало: H2O. (Обратите внимание на форму записи числового значения.)

 small, sub, sup {font-size: .75em}








Абзацы

Индивидуальное оформление заголовка второго уровня отступом слева и указанием семейства шрифта:

 h2 {margin-left: 40pt; font-family: Courier;}

Первая строка определяет общее в описании заголовков, а последующие индивидуализируют уровни, цвета заданы тремя разными способами (имя, шестнадцатеричное значение, десятичное RGB). Для h3 font-weight: normal означает снятие полужирного начертания, установленного для всех заголовков по умолчанию. Последняя строка переопределяет цвет букв для h4 по RGB-составляющим. Так как она встретилась позже первой, то и станет доминирующей:

 h1, h2, h3, h4 {color: red; background: #FFFF00;}
 h1 {font-size: 14pt;}
 h2 {font-style: italic; font-size: 11pt;}
 h3 {font-weight: normal; font-size: 11pt;}
 h4 {color: RGB(249, 201, 16);}

У h2 и h3 есть общий размер шрифта, но его вынесение в отдельное правило увеличит их число, замедлит работу ПК и будет ошибкой.

Таблицы

Теперь все таблицы, для которых не указана индивидуальная ширина, будут растягиваться на весь экран:

	table {width: 100%;}

Если описать ячейку тегом <td class="col25">, то она будет занимать 25% ширины экрана:

	td.col25 {width: 25%;}

Во всех таблицах поля ячеек (отступы от рамки до текста) будут 20 пикселей:

	td {padding: 20px;}

Ниже приведен некоторый комплекс стилей для таблицы. По примеру можно и нужно догадаться, что чем оформлено. Не получается – загляните в исходный код.

	table.z {border-color: #0000FF; background: #FFFF00;}
	tr.y {background: #FF9090;}
	td.lg {background: #909090; padding: 20px;}
	td.lg1 {border-left-color: #00FF00; border-left-width: 10;}
wwwwww
qqqq qqqq
qqqqqqqq

Списки

При вложении маркированного списка в нумерованный задает отступы между ними (так они будут компактнее):

 ol ul {margin-top: 0; margin-bottom: 0;}

То же самое, но после маркированного списка появится дополнительный пробел:

 ol ul {margin-top: 0; margin-bottom: 20;}

А здесь описаны нулевое отделение для всех видов вложения списков:

 ol ul, ul ol, ol ol, ul ul {margin-top: 0; margin-bottom: 0;}

Все нумерованные списки будут выводиться строчными римскими (i, ii, ...):

 ol {list-style-type: lower-roman;}

Выступ для формирования последующих уровней списков станет намного меньше, начинаясь примерно на уровне текста предыдущего уровня:

 ol ul {margin-left: 20;}

Нумерованный список со скобкой (Источник: http://comvest.net.ru/school/a62.htm):

OL {
  list-style-type: none; /* Убираем исходные маркеры */
  _list-style-type: decimal; /* Нумерация для браузера Internet Эксплорер */
  counter-reset: item; /* Обнуляем счетчик списка */
}
LI:before {
  content: counter(item) ") "; /* Добавляем к числам скобку */
  counter-increment: item; /* Задаем имя счетчика */
}

Данный пример работает в браузерах Mozilla, Google Chrome и Opera. Про Internet Explorer ясно, что в версиях 6 и 8 оно не работает.

Обратите внимание на то, каким образом в CSS вставляются комментарии.


Copyright © 1993–2020 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.