Стили таблицы css – Урок 2. Внешние таблицы стилей CSS. Как подключить стили. Уроки CSS | Уроки CSS Внешние таблицы стилей CSS | Уроки MODx Evo

Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.

1. Базовые вещи

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

Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал смурфика на css, если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.

Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.

У меня на сайте есть очень много примеров в которых используется CSS. Только категория CSS и категория CSS3 вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.

Мои уроки об основах каскадных стилей CSS

2. Шпаргалки CSS и CSS3

Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?

Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.

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

Шпаргалки CSS и CSS3

Краткая шпаргалка для CSS (v2), где можно найти все самые основные свойства. Отлично подойдет для начинающих.

СКАЧАТЬ ШПАРГАЛКУ CSS

Подробная шпаргалка для всех свойств CSS3. Подойдет как для начинающих, так и для опытных веб-мастеров и веб-дизайнеров.

СКАЧАТЬ ШПАРГАЛКУ CSS3

Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.

Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.

Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .

Дополнение к уроку — HTML шпаргалки

Помимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.

Вывод

Если Вы начинающий, и только осваиваете азы CSS, то Вам отлично подойдут мои уроки по CSS. Материал в них изложен кратко и Вам нужно лишь повторить своими руками то, что о чем урок. А также более опытные веб-мастера смогут освежить свои знания быстро просмотрев все уроки. Также Вы можете скачать шпаргалки CSS и CSS3, которые помогут Вам не забыть основные свойства и всегда будут под рукой, в случае чего Вы можете быстро посмотреть и вспомнить необходимую информацию.

Ну и конечно же, основные пункты статьи:

1. Базовые вещи или основы CSS
2. Шпаргалки CSS и CSS3
3. Дополнение к уроку — HTML шпаргалки

Успехов!

С Уважением, Юрий Немец

Стили CSS для таблицы | CSS

Часто таблицы на сайте выглядят ужасным образом и многие владельцы сайтов, хотят привести их в порядок, то есть стилизовать…для того чтобы воспользоваться данным мануалом вам необходимо знать хотя бы место где находится файл CSS для вашего сайта…если знаете поехали…

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

Давайте разбираться в стилях таблицы, что же с ними не так:

1) отступы между границами ячеек и содержимым (раньше к тегу table применялось свойство cellpadding — сейчас можно или даже лучше так не делать).

Лучше сделать так : td, th { padding: 5px; } — сразу идет применение стиля для заголовка таблицы и ячеек.

Отдельно для ячеек можно и для каждой стороны:

td {
padding-top: 7px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
}

или более прогрессивно td {padding: 7px 5px 4px 5px} — это тоже самое, краткая запись.

При td, th { padding: 10px; } наша таблица приобретет вид:

Как видим таблица стала больше — в результате увеличения отступов, но красивее она пока так и не стала. А мы переходим к второму свойству:

2) Стандартные text-align и vertical-align.

text-align — применяется для выравнивания содержимого ячеек по горизонтали — а конкретно: center — центрирует содержимое, left — выровнит по левому краю, right — по правому, justify — распределит содержимое по всей ширине.

Для того, чтобы выровнить все содержимое ячеек по центру — назначим это — table {text-align: center;}

vertical-align — выровнит содержимое по вертикали: top — по верхнему краю, middle — по середине, bottom — по нижнему краю, baseline — выравнивание первой строки по верхнему краю.

Раньше вместо этих тегов применялся — тег align — сейчас его не считают правильным для применения, но все же он еще работает, поэтому старые сайты, «с которых давно не смахивали пыль» — они не стали одновременно выравниваться неправильно, все работает, но веб-дизайнеры уже переходят на другие стандарты.

Применим к нашей таблице это table {text-align: center;} и vertical-align в значении middle для ячеек 1 колонки;

Обратите внимание: vertical-align не наследуется — и поэтому его необходимо применять к th и td !!!

Не стоит паниковать, если вы сразу не видите результат, сверху в таблице мы видим, что центрирование применилось, а вот вертикальное выравнивание не видим, это потому что мало текста. Вертикальное выравнивание обычно применят в значении ещз — когда хотят «прибить»  содержимое ячеек к верху, остальные — реже

3) Свойство border-spacing — указывает пространство между ячейками (именно потому что у меня по умолчанию его создатели шаблона указали в 0, поэтому мы с вами и не видим границ)

Необходимо применять к таблице:

table {
border-spacing: 8px;
}

 Но разницы все равно сильно не увидим(но она на самом деле есть), и только лишь прописав границы:

td {
border: 1px solid black; }

 4) Почему мы не увидели расстояний между ячейками, кто знает? Мы же его задали в 5px. Причина все та же — что-то в шаблоне уже выставлено по-умолчанию. И мы переходим к следующему свойству — это border-collapse (может принимать 2 значения : separate — отображать 2 границы и collapse — «схлопнуть»). Оно «схлопывает» границы между ячейками — к примеру, в примере выше, мы задали границу по 1px, тогда на граница между ячейками должна выглядеть как сдвоенная (1px + 1px), но этого не происходит, потому что по умолчанию у нас выставлено значение collapse.

Давайте попробуем выставить border-collapse в значение separate для нашей таблицы:

Как видим таблицы приобретает должные очертания, при этом конечно же, можно менять цвета границ таблицы, внутренний background (внутренний фон: цвет или картинку).

 5) Может быть вы заметили, что у 2 ряда ячеек — углы скругленные? Это мы назначили для них свойство CSS border-radius в значение 5px; Если же у вас свойство border-collapse стоит в значении collapse, углы останутся прямыми, то есть border-radius будет успешно проигнорирован.

6) Более продвинутые веб-дизайнеры знают как заставить человека дольше изучать таблицу — часто для того, чтобы «глазу было интереснее» — применяют раскраску рядов ячеек: например 1 ряд — белого цвета, а второй — серого. Но есть в CSS 3 и свойства, которые могут назначить четным рядам — одно, а нечетным = другое:

tr:nth-of-type(odd) { background-color: white; }
tr:nth-of-type(even) { background-color: grey; }

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

 6) Почему мы добавили теги <colgroup> и <col> в таблицу —  а для того, что при помощи них вы можете контролировать параметрами колонок, предварительно задав им идентификатор или класс. К примеру, попробуйте им задать ширину-width и свойства фона (backgroundcolor, background-image)

Как центрировать таблицу на странице сайта по ширине (по горизонтали)

Часто бывает очень нужно и красиво сделать таблицу именно по ширине блока или страницы, но она «зараза» как бы не хочет и не получается отцентрировать, такое бывает, но это легко исправить:

Решение: нужно задать ШИРИНУ таблицы в пикселах или в процентах(но меньше 100%) и задать свойство: margin: auto.

Вот так вот мы и разобрали основные CSS стили таблицы. Кому было полезно, отписываемся.

Добавить комментарий

CSS3 | Стилизация таблиц

Стилизация таблиц

Последнее обновление: 21.04.2016

CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:

Установка таблицы

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

<table border="2px" >

Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью стандартного свойства border:

table {
	border: 1px solid #ccc;	 /* граница всей таблицы */
}
tr {
	border: 1px solid #ccc;	 /* границы между строками */
}
td, th {
	border: 1px solid #ccc;	 /* границы между столбцами */
}

При установке границ между столбцами с помощью свойства border-collapse можно установить общую или раздельную границу между смежными ячейками:

• collapse: смежные ячейки имеют общую границу

• separate: смежные ячейки имеют отдельные границы, которые разделяются пространством

Если смежные ячейки имеют раздельные границы, то с помощью свойства border-spacing можно установить пространство между границами:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.collapsed{
			border-collapse: collapse;
		}
		.separated{
			border-collapse: separate;
		}
        </style>
    </head>
    <body>
		<h4>Collapse</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Separate</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
			<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
		</table>
	</body>
</html>

Пустые ячейки

Свойство empty-cells позволяет стилизовать пустые ячейки с помощью одного из следующих значений:

• show: пустые ячейки отображаются, значение по умолчанию

• hide: пустые ячейки не отображаются

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.hidden-empty-cells{
			empty-cells: hide;
		}
        </style>
    </head>
    <body>
		<h4>Show</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td></td><td></td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Hide</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td></td><td></td></tr>
			<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
		</table>
	</body>
</html>

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:

• top: позиционирование заголовка вверху (значение по умолчанию)

• bottom: позиционирование заголовка внизу

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		caption {
		
			font-weight: bold;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.captionBottom{
			caption-side: bottom;
		}
        </style>
    </head>
    <body>
		<h4>Top</h4>
		<table>
			<caption>Флагманы 2015 года</caption>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Bottom</h4>
		<table>
			<caption>Новинки 2016 года</caption>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
			<tr><td>iPhone SE</td><td>Apple</td><td>37000</td></tr>
		</table>
	</body>
</html>

Управление размером таблицы

С помощью свойства table-layout можно управлять размером таблицы. По умолчанию это свойство имеет значение auto, при котором браузер устанавливает ширину столбцов таблицы автоматически, исходя из ширины самой широкой ячейки в столбце. А из ширины отдельных столбцов складывается ширина всей таблицы.

Однако с помощью другого значения — fixed можно установить фиксированную ширину:

table {
	border: 1px solid #ccc;
	border-spacing: 3px;
	table-layout: fixed;
	width:350px; 
}

Вертикальное выравнивание ячеек

Как правило, содержимое ячеек таблицы выравнивается по центру ячейки. Но с помощью свойства vertical-align это поведение можно переопределить. Это свойство принимает следующие значения:

• top: выравнивание содержимого по верху ячейки

• baseline: выравнивание первой строки текста по верху ячейки

• middle: выравнивание по центру (значение по умолчанию)

• bottom: выравнивание по низу

Свойство vertical-align применяется только к элементам <th> и <td>:

td, th{
    border: solid 1px #ccc;
	vertical-align: bottom;
	height: 30px;
}

CSS Каскадные таблицы стилей

Как я уже писал на странице «Учебник HTML», CSS отвечает за оформление страниц и разметку гипертекста. Основная идея каскадных таблиц – уменьшить код HTML и упростить работу с ним. Повторяющаяся информация записывается в отдельный файл, на который впоследствии просто ссылаются.

Давайте подробнее рассмотрим словосочетание повторяющаяся информация. На предыдущей странице HTML код, теги и атрибуты я приводил ряд примеров использования атрибутов для управления свойствами тегов, например, выставление размеров изображения. На самом деле подобные настройки можно адресовать какой угодно по численности группе объектов (тегов) всего одним css-правилом. Код при этом существенно сократится.

Представьте, что код примера — это фрагмент html-страницы, на странице таких фрагментов 20. Допустим, вам понадобилось сделать 50 таких страниц. 20×50 – 1000 фрагментов получается. А через некоторое время вы решили, что мелкий шрифт надо сделать помельче, а крупный — покрупнее. Для этого вам придётся открыть в редакторе все 50 страниц и сделать в каждой из них по 20 правок. Получится очень нудно и очень долго.

Если создавать сайт на голом HTML, то подобные примеры будут частью повседневности человека, обслуживающего этот сайт. Чтобы этого избежать, нужно пользоваться каскадными таблицами стилей. В этом случае указать, как будет выглядеть крупный и мелкий шрифт придётся всего однажды – в отдельном файле, называемом каскадная таблица стилей.

Синтаксис каскадных таблиц CSS

Синтаксис CSS довольно прост и имеет много общего с атрибутами тегов. Подробную информацию по всем аспектам синтаксиса можно узнать в спецификации W3C. Для CSS, как и для HTML существует своя спецификация. Перевод А.Пирамидина также имеется:

Официальной на данный момент (март 2012) является версия CSS 2.1, версия CSS 3.0 находится в активной разработке, но стандартом ещё не является, несмотря на многочисленные публикации в сети на тему CCS 3. Итак, что же собой представляет синтаксис CSS? Синтаксис похож на написание атрибутов тега:

селектор {свойство:значение}

Естественно, ситуаций с применением стилей может быть очень много, таблицы стилей иногда насчитывают тысячи строк кода. К одному и тому же тегу в разных частях страницы может понадобиться применить разные стили оформления. Свойства и значения в CSS прописаны в спецификации, их совершенно конкретное число и они неизменны. А вот селектор – единица свободная, его можно фактически придумывать.

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

Селекторы CSS стилей

Возможно, этот раздел статьи окажется немного трудным для восприятия, но селекторы штука очень важная, ибо влияют на скорость обработки таблиц стилей. Так что потерпите . Селектор указывает, к какому тегу должны быть применены указанные свойства. Его можно сравнить с адресом почтового отправления. Обозреватель проверяет селекторы на соответствие, когда выстраивает страницу в окне просмотра. Шаблоны селекторов можете посмотреть по ссылкам ниже.

 В селекторе в различном сочетании можно использовать несколько составляющих:

1. Название тега (например, тегу <P> в CSS будет соответствовать селектор P )
2. Идентификатор ID (уникальное имя тега <P> в CSS будет селектор #my_p )
3. Класс (универсальный атрибут тега <P> в CSS будет селектор .my_p)

Ниже примеры селекторов для тегов <p> <img> <table>:

p {text-align:left}
img {padding:10px}
table {margin:20%;}

Теперь подробнее. Составляющие, описанные выше, можно сочетать. Тут тоже есть несколько условий:

1. Если в селекторе используется название тега, оно всегда идёт первым. Селектор с него начинается.
2. Если в качестве селектора используется идентификатор, то название тега или класс указывать не нужно, поскольку ID – уникальный параметр и используется на странице в единственном числе.
3. Селектор может начинаться с класса, если не указывать ID или название тега.   

Выглядит всё это так:

<div>
 <p>Абзац, находящийся в блоке c ID
  <span>Block</span>
 </p>
</div>

Запомните этот пример, мы к нему вернёмся ниже. Стили для этого примера могут быть такими:

#block {text-align:left}
p {padding:10px}
.green {color:green;}

В статье про теги HTML упоминалось о вложенности тегов. В примере выше теги <p> и <span> являются вложенными в тег <div>. При этом говорят, что <div> – родительский элемент, а <p> и <span> – его потомки. При этом <p> по отношению к <div> также является дочерним элементом, т.к. находится в первом уровне вложенности. Все потомки наследуют стили родителей по-умолчанию.

При составлении селектора разные его части (теги, классы, идентификаторы) разделяются пробелами. Если вы переходили по ссылкам выше, то наверняка обратили внимание, что в таблице шаблонов есть также примеры с символами + и >.

+ используют для обозначения соседей, а дочерние элементы обозначают при помощи >. Возвращаясь к составляющим селектора с учётом вложенности и родственных признаков, получаем такую картину:

.green {color:green;}
p .green {color:green;}
p span.green {color:green;}
#block .green {color:green;}
#block span {color:green;}
#block span.green {color:green;}
#block p .green {color:green;}
#block p span {color:green;}
#block p span.green {color:green;}
#block > p > span.green {color:green;}

Как видите, указывать селекторы можно по-разному. Все селекторы выше сделают текст тега <span> зелёным. Однако, у них у всех разная точность указания и разная скорость обработки. Это момент достаточно важный при работе с каскадными таблицами стилей.

Чем точнее (длиннее, если по-простому) написан селектор, тем меньше вероятность, что он перекроется другим селектором или унаследует от своего родителя что-то не запланированное. С другой стороны длинный селектор будет дольше обрабатываться обозревателем, поскольку обозреватели читают селекторы справа налево. Возьмём фрагмент предыдущего примера и рассмотрим его подробнее:

.green {color:green;}
span.green {color:green;}
p span.green {color:green;}

Сначала обозреватель применит стили ко всем элементам с классом .green,  поскольку проще раздать 10 указаний и потом отменить 2, чем возиться с каждым по-отдельности. Затем обозреватель проверит стили для span.green – отличаются они от стилей или нет. И если отличаются, внесёт корректировки уже только для span. Так происходит потому, что span.green более точный селектор и он не должен перекрываться селектором .green.  И напротив, более точный селектор должен перекрывать менее точный. Из-за этого условия всё происходит справа налево, а не наоборот. Изменим пример выше:

.green {color:green;}
span.green {color:red;}
p span.green {color:black;}

Сначала обозреватель покрасит всё элементы с  с классом .green зелёным, затем элементы <span> перекрасит в красный и уже проверив вложенность <span> в <p> покрасит оставшиеся в чёрный.

Поэтому надо всегда помнить о золотой середине и использовать составные селекторы только там, где они действительно нужны. На самом деле тема достаточно глубокая и в рамках этой статьи я не смогу раскрыть и 10-ой части нюансов, поскольку вы 100% запутаетесь тогда. Давайте вернёмся к простому и понятному – обратимся к одному из примеров прошлой статьи:

<p>Все <big>заблуждаются</big> в меру своих <small>возможностей.</small></p>

Все заблуждаются в меру своих возможностей.

small {font-size:8pt; color:red;}

означает следующее: тег small {размер шрифта:8 пунктов; цвет:красный;} результат будет такой:

Все заблуждаются в меру своих возможностей.

Изменим размер шрифта с 8 на 18 пунктов:

small {font-size:18pt; color:red;}

Все заблуждаются в меру своих возможностей.

В качестве селектора могут выступать не только названия тегов. Вы можете сами создавать селекторы при помощи так называемых классов (class). Преимущество классов в том, что их можно применять к нескольким тегам одновременно. Класс указывается следующим образом:

.имя_класса {свойство:значение}

Отмечу, что имя класса может быть любым, но не должно содержать пробелов:

.vasya_pupkin {color:green}
 
/* будет означать:
класс "вася_пупкин" {цвет:зелёный}*/

Так как в качестве селектора используется имя класса, а не имя тега, свойства по-умолчанию не будут адресованы ни одному из тегов. Чтобы присвоить тегам свойства созданного вами класса, необходимо указать соответствующий атрибут. На предыдущей странице я уже говорил о настройках тегов — атрибутах. Помните?

<тег атрибут="значение" атрибут2="значение" > 

Так вот для того, чтобы определить какаой из тегов станет Васей Пупкиным, нужно воспользоваться атрибутом class. Как это выглядит на практике: в таблице стилей указывают класс

small {font-size:8pt; color:red;}
.vasya_pupkin {color:green}

В html-файле указывают принадлежность тега к классу vasya_pupkin:

<p>Все <big>заблуждаются</big> в меру <small>возможностей.</small></p>

Все заблуждаются в меру возможностей.

Но это далеко не все варианты использования селекторов. Существует ряд более сложных выражений, благодаря которым настраивать применение стилей в html-документах можно в очень широком диапазоне:

Правила CSS

Кроме стилей в CSS присутствуют правила. Их четыре:

1. @charset
2. @import
3. @media
4. @page

В переводе А. Пирамидина присутствует также правило @font-face. Однако, перевод выполнен на основе версии спецификации 2.0, а в версии CSS 2.1 (оригинальная версия) это правило исключили, поэтому я тоже исключил его из описания. Все подробности по каждому из правил смотрите в спецификации:

Я же приведу краткий пример применения правил на практике. Возьмём предыдущую редакцию этого сайта. Сначала в нём было мало css-настроек и все они умещались в одном файле. Потом сайт стал расширяться и данных в файле стало много (тогда мои познания в сайтостроении были куда скромнее, поэтому я не всегда знал, как делать правильно, красиво и компактно). Поэтому я разбил css-файл на несколько частей (несколько файлов).

Все 5 файлов соединялись следующим образом: ссылка на первый css-файл была в html-документе, остальные четыре подключались через правила @import первого css-файла:

@import "file2.css"
@import "file3.css"
@import "file4.css"
@import "file5.css"

таким образом в любую таблицу стилей можно включить содержание другой таблицы посредством правила @import.

Каскадность

Еще один очень важный момент! CSS (Cascading Style Sheets) переводится как «каскадные таблицы стилей». Каскадными они названы потому, что в таблицах действует правило каскадов, то есть последующие стили влияют на предыдущие. Приведу пример. Код таблицы стилей:

.red {color:red}
.red {color:green}

Код html-файла:

<p>Все <big>заблуждаются</big> в меру <small>возможностей.</small></p>

Результат:

Все заблуждаются в меру возможностей.

Второй класс .red (зелёный цвет) переопределяет (перекрывает) первый класс .red (красный цвет), т.к. находится ниже (позднее) и по правилу каскадности он главнее.

Использование спецификации CSS

Пользоваться спецификацией CSS так же просто, как и спецификацией языка HTML. Меню, содержание… все то же самое, только вместо тегов свойства. Если вы уже исследовали спецификацию HTML, то разберетесь без труда, если же нет — самое время это сделать.

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

Также советую уделить особое внимание единицам измерения, применяемым в CSS:

Хранение и применение css-стилей

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

1. В таблице стилей, делая ссылку на неё в секции <head><head/>
2. В секции <head><head/> html-файла ( через тег <style><style/>)
3. Внутри тега при помощи атрибута <TAG>

Если стили надо применить ко всем файлам, используют таблицу стилей.
Если надо дополнительно внести коррективы в 1-2 html-файла, применяют
тег <style><style/> внутри этих файлов. Если надо применить стили к конкретному тегу, используют атрибут style. Стили, которые применяются к тегам посредством атрибута style называются инлайновыми.

В некоторых случаях html-код оформляют только инлайновыми стилями. Шаблоны сообщений, например.