основы CSS

Множественные классы

Вы хотите, чтобы все элементы, атрибут class которых имеет значение warning, были выделены полужирным шрифтом, те элементы, атрибут class которых имеет значение urgent, были выделены курсивом, а элементы, имеющие оба значения, получили серебряный фон. Это могло бы быть написано следующим образом:

.warning { font-weight: bold; }

.urgent { font-style: italic; }

.warning.urgent { background: silver; } p.warning.help { background: red;}

<p class="urgent warning"> При работе с плутонием необходимо предпринять меры по недопущению достижения критической массы.</p> <p>При работе с плутонием <span class="warning">существует реальная возможность взрыва, которую надо избежать любой ценой </span>.

Это может быть достигнуто путем разделения масс.<span class="urgent">Планк. </span></p>

Селекторы идентификаторов

В некотором смысле селекторы идентификаторов аналогичны селекторам классов, но есть несколько существенных отличий. Во первых, перед селекторами идентификаторов вместо точки ставится «решетка» (#), называемая также знаком фунта, диезом и даже полем для игры в крестики нолики.

Второе отличие – вместо значений атрибута class в селекторах идентификаторов, что и не удивительно, используются значения атрибутов id. Вот пример селектора идентификатора в действии:

*#lead­para {font weight: bold;}

<p id="lead­para"> Этот параграф будет выделен полужирным шрифтом.</p>

<p> Этот параграф НЕ будет выделен полужирным шрифтом.</p>

Выбор между селектором классов и селектором идентификаторов

Как было показано ранее, назначать классы можно любому количеству элементов; имя класса warning было применено и к элементу <p>, и к элементу <span> и могло бы применяться к намного большему количеству элементов. С другой стороны, идентификаторы в HTML документе используются один и только один раз. Поэтому если в документе есть элемент, значение атрибута id которого равно lead para, ни один дру­ гой элемент этого документа не может иметь id со значением lead para.

В отличие от селекторов класса, селекторы идентификаторов не могут объединяться, поскольку в атрибуты id нельзя помещать разделенные пробелами списки.

Еще одно отличие между именами class и id состоит в том, что идентификаторы имеют больший вес, когда определяется, какие стили должны применяться к данному элементу.

Пример:

#header { float: left; width: 100%; height: 58px;

}

#header .contacts .address { padding-left: 13px;

}

<div id="header">

<div class="contacts">

<p class="phone">8(812)777-77-77</p>

<p class="address">Гражданский пр.</p> </div>

</div>

Селекторы атрибутов

Для того чтобы выбрать элементы с определенным атрибутом независимо от значения этого атрибута, можно обратиться к простому селектору атрибутов. Например, чтобы выбрать все элементы h1, имеющие атрибут class с любым значением, и сделать их текст серебряным, на Пишите:

h1[class] {color: silver;}

Итак, следующая разметка даст выделение текста серебром для всех классов:

<h1 class="hoopla">Hello</h1> <h1 class="severe">Serenity</h1> <h1 class="fancy">Fooling</h1>

Выбор атрибутов

Для того чтобы выбрать все элементы planet с атрибутом moons (луны) и выделить их полужирным шрифтом, обращая внимание на любую планету, имеющую естественные спутники, можно написать:

planet[moons] {font-weight: bold;}

Это приведет к тому, что в следующем фрагменте разметки текст вто рого и третьего элементов, но не первого, будет выделен полужирным Шрифтом:

<planet>Venus</planet>

<planet moons="1">Earth</planet> <planet moons="2">Mars</planet>

Выбор атрибутов

Также можно осуществлять выбор на основании наличия нескольких атрибутов. Это делается путем простого объединения селекторов атрибутов. Например, чтобы выделить полужирным шрифтом текст любой гиперссылки HTML, которая имеет и атрибут href, и атрибут title, можно написать:

a[href][title] {font-weight: bold;}

При этом полужирным шрифтом будет выделена первая ссылка следующей разметки, но не вторая или третья:

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br /> <a href="http://www.webstandards.org">Standards Info</a><br />

<a title="Not a link">dead.letter</a>

Выбор на основании конкретного значения атрибута

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

Предположим, требуется выбрать только те элементы planet, значение атрибута moons которых равно 1:

planet[moons="1"] {font weight: bold;} a[href="http://www.css discuss.org/about.html"] {font weight: bold;}

При этом полужирным шрифтом будет выделен текст второго элемента следующего фрагмента разметки, но не первого или третьего:

<planet>Venus</planet>

<planet moons="1">Earth</planet> <planet moons="2">Mars</planet>

Выбор по частичному значению атрибута

Скажем, требуется выбрать элементы, атрибут class которых содержит слово warning. Это можно сделать посредством селектора атрибутов:

p[class~="warning"] {font-weight: bold;}

<p class="warning cold"> Мороз и солнце день

чудесый </p>

Обратите внимание на наличие в селекторе тильды (~). Это ключ для осуществления выбора на основании наличия в значении атрибута от деленного пробелами слова. Если пропустить тильду, то получится требование точного соответствия конкретному значению.

Применение стилей

Установка шрифта с помощью стилей

<html>

<head>

<style type="text/css">

BODY

{

font-family: 'Times New Roman', Times, serif; font-size: 100%

}

TD

{

font-family: Arial, sans-serif; font-size: 90%;

font-weight: bold

}

HI, H2, H3

{

font-family: Verdana, Tahoma, Arial, sans-serif

}

</style>

</head>

<body>

</body>

</html>