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

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

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

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

Документ

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

 body {background-color: #DDDDFF;}

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

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

Символы

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

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

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

Доступ к этим материалам предоставляется только зарегистри­рован­ным пользователям!

Абзацы

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

 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 Explorer */
  counter-reset: item; /* Обнуляем счетчик списка */
}
LI:before {
  content: counter(item) ") "; /* Добавляем к числам скобку */
  counter-increment: item; /* Задаем имя счетчика */
}

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

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

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