Спонсоры

Селекторы класса CSS

Классы селектора, для чего они нужны?
К примеру, мы хотим создать страницу HTML на которой будет два вида ссылок <а>, три вида абзацев <р> и два вида заголовков <h2> Если приведенные запросы реализовать при помощи тех методов которые были рассмотрены на предыдущих страницах данного ресурса, то пришлось бы создавать семь таблиц стилей (УЖАС), но делать этого мы не будем. На такой случай в CSS предусмотрен класс селектора (CLASS).

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

И так движемся дальше:

  1. Ссылки меню, я хочу сделать красного цвета COLOR: red;, а при наведении на них курсора мыши A:hover их цвет менялся на синий COLOR: blue; и в обоих случаях они не должны быть подчеркнуты TEXT-DECORATION: none;.
  2. Ссылки подменю должны быть синего цвета COLOR: blue; без линии подчеркивания TEXT-DECORATION: none;, а при наведении на них курсора мыши A:hover цвет менялся на зеленый COLOR: green; и появлялась полоса подчеркивания TEXT-DECORATION: underline;.
  3. Первый вид абзацев <р> будет серого цвета color: gray;, отображаться шрифтом Times New Roman font-family: "Times New Roman", Times, serif;, размером 12 пунктов font-size: 12pt;, располагаться должен по обеим краям равномерно text-align: justify;, данное правило будет применено к основному тексту страницы.
  4. Следующий абзац должен иметь шрифт Arial font-family: Arial, Helvetica, sans-serif;, полужирным font-weight: bolder;, курсивного начертания font-style: italic;, размером 10 пунктов font-size: 10pt; черного цвета color: black; и располагаться по центру text-align: center;, это правило можно применить к новостной строке.
  5. Третье правило для абзаца <р> применю к подписи автора статьи в котором указываю, что текст должен быть прижат к правому краю text-align: right;, иметь шрифт Arial font-family: Arial, Helvetica, sans-serif; черного цвета color: black;, курсивного начертания font-style: italic;, размером 12 пунктов font-size: 12pt;.
  6. Первое правило для заголовка <h2> будет применено к названию страницы в котором указываем, что текст должен располагаться по центру text-align: center;, иметь шрифт Arial font-family: Arial, Helvetica, sans-serif;, курсивное начертание font-style: italic; и покрасим его к примеру в оранжевый цвет color: orange;.
  7. Второе правило для заголовка <h2> можно применить к названию статьи, которое будет окрашено в зеленый цвет color: green;, должно располагаться по центру text-align: center; и иметь шрифт Times New Roman font-family: "Times New Roman", Times, serif;.

Далее собираем все правила в единую запись. Даем названия селекторам например Top1 - Тор7 которые в самой записи начинаются с точки .Top при такой записи, класс можно применять к любому тегу внутри страницы.

  .Top1 A {
FONT-WEIGHT: normal; COLOR: red; TEXT-DECORATION: none;
}
.Top1 A:hover {
FONT-WEIGHT: normal; COLOR: blue; TEXT-DECORATION: none;
}
.Top2 A {
FONT-WEIGHT: normal; COLOR: blue; TEXT-DECORATION: none;
}
.Top2 A:hover {
FONT-WEIGHT: normal; COLOR: green; TEXT-DECORATION: underline;
}
.Top3 {
FONT-FAMILY: "Times New Roman", Times, serif; FONT-SIZE: 12pt; TEXT-ALIGN: justify; color: gray;
}
.Top4 {
FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; FONT-STYLE: italic; FONT-WEIGHT: bolder; TEXT-ALIGN: center; COLOR: black;
}
.Top5 {
FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 12pt; FONT-STYLE: italic; FONT-WEIGHT: bolder; TEXT-ALIGN: right; COLOR: black;
}
.Top6 {
FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-STYLE: italic; TEXT-ALIGN: center; COLOR: orange;
}
.Top7 {
FONT-FAMILY: "Times New Roman", Times, serif; TEXT-ALIGN: center; COLOR: green;
}

В качестве примера берем обычную HTML страницу к которой не был применен стиль CSS. И помещаем полученную запись в тег контейнер <style></style>, уже непосредственно на самой HTML странице. А также прописываем селекторы (в нашем случае Тор1 - Тор7) для тегов к которым мы хотим применить определенное правило.

  <html>
<head>
<title>Моя первая страничка с использованием CSS</title>
<style><!--
.Top1 A {
FONT-WEIGHT: normal; COLOR: red; TEXT-DECORATION: none;
}
.Top1 A:hover {
FONT-WEIGHT: normal; COLOR: blue; TEXT-DECORATION: none;
}
.Top2 A {
FONT-WEIGHT: normal; COLOR: blue; TEXT-DECORATION: none;
}
.Top2 A:hover {
FONT-WEIGHT: normal; COLOR: green; TEXT-DECORATION: underline;
}
.Top3 {
font-family: "Times New Roman", Times, serif; font-size: 12pt; text-align: justify; color: gray;
}
.Top4 {
font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: italic; font-weight: bolder; text-align: center; color: black;
}
.Top5 {
font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bolder; text-align: right; color: black;
}
.Top6 {
font-family: Arial, Helvetica, sans-serif; font-style: italic; text-align: center; color: orange;
}
.Top7 {
font-family: "Times New Roman", Times, serif; text-align: center; color: green;
}

--></style>
</head>
<body>
<h2 CLASS="Top6">Моя первая страничка с использованием CSS</h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99">
<tr>
<td><div CLASS="Top1"><a href="#">меню 1</a></td></div>
<td><p CLASS="Top1"><a href="#">меню 2</a></td></p>
<td CLASS="Top1"><a href="#">меню 3</a></td>
<td CLASS="Top1"><a href="#">меню 4</a></td>
<td CLASS="Top1"><a href="#">меню 5</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160" CLASS="Top2">
<tr>
<td><a href="#">подменю 1</a></td>
</tr>
<tr>
<td><a href="#">подменю 2</a></td>
</tr>
<tr>
<td><a href="#">подменю 3</a></td>
</tr>
<tr>
<td><a href="#">подменю 4</a></td>
</tr>
<tr>
<td><a href="#">подменю 5</a></td>
</tr>
</table>
</td>
<td rowspan="2">
<h2 CLASS="Top7">Название статьи</h2>
<P CLASS="Top3">
   Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</P>
<div CLASS="Top5">Борис АКУНИН</div>
<hr size="1" noshade color="#000000" width="350">
</td>
<td bgcolor="#CCCCFF"><p CLASS="Top4">сюда можно поместить какие-нибудь новости
<br>
или рекламу</p></td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="css_selektor_looc1.files/1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="css_selektor_looc1.files/2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666">Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html>    посмотреть

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

Обратите внимание, что правила CSS, помещены внутри синтаксиса комментария <!-- Сюда помещаем правило CSS --> Делается это на случай, если браузер пользователя не сможет распознать текст CSS, в таком случае он просто выведет все ваши правила на показ вашему клиенту, вот тут то и поможет синтаксис комментария который укажет браузеру игнорировать эту запись.



Вернуться на предыдущую страницу Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru