Далее на странице...
Как Вы уже наверное поняли, синтаксис CSS отличен от формы записи тегов и имеет следующую структуру:
Селектор {свойство: значение; свойство: значение;...}
Селектор это своего рода метка, по которой браузер понимает к каким элементам страницы и где применить стиль, описанный в фигурных скобках - в так называемом блоке объявления стилей.
В блоке объявления стилей указаны свойства CSS и их значения. Значение следует за свойством после двоеточия, свойства указаны через точку с запятой. После значения последнего свойства точку с запятой можно опустить.
Для некоторых свойств CSS можно задать несколько значений, которые должны быть указаны через пробел.
Синтаксис CSS
H2 {border:#339999 solid 2px; color:#CC0000; padding:5px}
Для заголовка второго уровня установлен стиль границы: цвет, толщина и тип линии, а также задан цвет текста и поля величиной 5 пикселей.
Селектор по элементу
В данном примере, в качестве селектора был указан заголовок второго уровня - тег . Затем в фигурных скобках - в блоке объявления стилей, было описано стилевое оформление, которое будет характерно для всех заголовков второго уровня текущего документа, если стилевое оформление задается II способом; или указанное оформление будет применено ко всем тегам , встречающихся на тех страницах, для которых стилевое оформление задано III способом.
Но и в том и в другом случае, для любого заголовка второго уровня оформление может быть изменено и задано индивидуально I способом.
Мы сейчас работали с селектором, в качестве которого используется имя какого-либо тега HTML. И именно к указанному тегу (или тегам) применяется описанный стиль. Такой селектор получил название Селектор по элементу.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Селектор по элементу </title>
<style type="text/css">
p {font-size:large; font-style:italic; color:#339999;}
h1 {color:#CC3300; text-transform:capitalize}
</style>
</head>
<body>
<p> Все просто. </p>
<p> Задаем стиль для абзацев. </p>
<h1> И для заголовков </h1>
<h1> Первого уровня данного документа! </h1>
</body>
</html>
Все просто.
Задаем стиль для абзацев.
И для заголовков
Первого уровня данного документа!
Использование селектора по элементу, бесспорно, имеет свои плюсы - отпадает необходимость каждый раз задавать стиль одним и тем же тегам текущего документа; но есть и минусы - что если необходимо задать иное оформление, отличное от установленного? Например, нужно выделить один абзац из множества - задать для него свой стиль.
Такая возможность есть и для этого существует селектор по классу.
Селектор по классу
Селектор по классу характерен тем, что для идентификации стиля используется имя.
Использование селектора по классу добавляет в синтаксис небольшие изменения. Если в случае с селектором по элементу указывается имя какого-либо тега HTML, к которому будет применено оформление, то здесь сначала ставится точка, а затем подходящее, выбранное Вами имя.
.имя {свойство: значение; свойство: значение;...}
Затем с помощью параметра class ссылаются на указанное имя, задавая данное стилевое оформление тегам HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Селектор по классу </title>
<style type="text/css">
p {border:#3366CC solid 2px; color:#00FF99; padding:5px}
.end {border:#00CC99 solid 1px; color:#FF3300; font-size:22px; padding:5px}
</style>
</head>
<body>
<p> Все абзацы оформлены одинаково </p>
<p> Все абзацы оформлены одинаково </p>
<p> Все абзацы оформлены одинаково </p>
<p class="end"> Кроме одного </p>
<h2> Заголовок второго уровня не оформлен. </h2>
<h2 class="end"> Этот заголовок оформлен в том же стиле, что и последний абзац. </h2>
</body>
</html>
Все абзацы оформлены одинаково
Все абзацы оформлены одинаково
Все абзацы оформлены одинаково
Кроме одного
Заголовок второго уровня не оформлен.
Этот заголовок оформлен в том же стиле, что и последний абзац.
В этом примере, с помощью селектора по элементу, задан стиль для абзацев - в качестве селектора указан тег . Этот стиль автоматически применяется ко всем абзацам текущего документа.
Затем создали новый стиль и присвоили ему имя .end (не забывайте о точке перед именем) - идентифицировали его. И применили этот стиль с помощью параметра class к последнему абзацу, оформив его индивидуально.
Этот же стиль можно применить к любым элементам, на которые он может повлиять. Что мы и сделали, применив его к одному из заголовков второго уровня.
Еще о селекторе по классу
Есть возможность сделать так, чтобы стиль, установленный при помощи селектора по классу, был применим только к конкретному элементу. Для этого необходимо указать название элемента перед точкой.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Селектор по классу </title>
<style type="text/css">
p {border:#3366CC solid 2px; color:#00FF99; padding:5px}
p.end {border:#00CC99 solid 1px; color:#FF3300; font-size:22px; padding:5px}
</style>
</head>
<body>
<p> Все абзацы оформлены одинаково </p>
<p> Все абзацы оформлены одинаково </p>
<p> Все абзацы оформлены одинаково </p>
<p class="end"> Кроме одного </p>
<h2> Заголовок второго уровня не оформлен. </h2>
<h2 class="end"> Стиль применим только к абзацам! </h2>
</body>
</html>
Все абзацы оформлены одинаково
Все абзацы оформлены одинаково
Все абзацы оформлены одинаково
Кроме одного
Заголовок второго уровня не оформлен.
Стиль применим только к абзацам!
Если сравнивать приведенный пример с предыдущим, то теперь стиль .end, который ранее можно было применять к любым элементам, применим только к абзацам (и только к тем, для которых делается ссылка на стиль с указанием его имени при помощи параметра class).
Селектор по id
Селектор по id - это разновидность селектора по классу, с той лишь разницей, что здесь вместо точки перед именем используется символ #. А для ссылки на идентификатор (имя стиля) вместо параметра class применяется параметр id.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Селектор по id </title>
<style type="text/css">
#end{color:#FF3333; font-size:24px; background-color:#CCCCCC; text-align:center}
</style>
</head>
<body>
<p> Все абзацы в этом документе одинаковые </p>
<p> Все абзацы в этом документе одинаковые </p>
<p> Все абзацы в этом документе одинаковые </p>
<p id="end"> Кроме одного </p>
<table width="700" border="1">
<tr>
<td> Этот же стиль можно применить, например, к... </td>
<td id="end"> Ячейке таблицы </td>
</tr>
</table>
</body>
</html>
Изначально селектор по id использовался, если возникала необходимость выделить один единственный элемент в документе, отличный от всех остальных, то есть мог быть только один тег с данным идентификатором.
Но, как правило, браузеры это правило игнорируют и позволяют применять стиль, идентифицированный с помощью селектора по id к нескольким элементам. Поэтому по сути селектор по id ничем не отличается от селектора по классу.
Контекстный селектор
Контекстный селектор применяют, когда необходимо задать стилевое оформление для вложенных тегов, то есть для тегов, которые расположены внутри других.
Использование контекстного селектора вносит в синтаксис небольшие изменения.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Контекстный селектор </title>
<style type="text/css">
p strong, .context{color:teal; font-size:18px; font-style:italic;}
</style>
</head>
<body>
<p> Внутри абзацев для слов, выделенных <strong> жирным шрифтом </strong>, </p>
<p> зададим дополнительное оформление, используя <strong> контекстный селектор! </strong> </p>
<p> Это же стилевое оформление применимо к элементам внутри абзацев, </p>
<p> для которых <span class="context"> параметру class присвоено имя context! </span> </p>
</body>
</html>
Внутри абзацев для слов, выделенных жирным шрифтом ,
зададим дополнительное оформление, используя контекстный селектор!
Это же стилевое оформление применимо к элементам внутри абзацев,
для которых параметру class присвоено имя context!
Как Вы уже, я надеюсь, поняли - в приведенном примере описанный стиль применим к тегам и к элементам, для которых установлен класс с именем context (class="context"), при условии что они являются вложенными: расположены внутри абзаца (тега ).
Во всех вышеприведенных примерах применялись глобальные стили, т.е. стили были описаны в голове документа при помощи тега <style>.
Но точно такое же оформление могло быть указано в файле с расширением .css и применено к элементам тех страниц, с которыми была бы установлена связь при помощи тега . Таким образом такой же синтаксис CSS селекторов используется при работе с внешними стилями.
Итак, теперь Вы немного знакомы с технологией CSS: Вы знаете что такое стили и селектор CSS; познакомились со способами применения стилей и видами селектора. Далее переходим к первым шагам в изучении свойств CSS.
