Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Селектори "id" и "class"

Селектор "id"

Този селектор определя форматирането на отделен елемент, като използва id атрибута на HTML елемента и се определя с "#" и селектора на CSS формата.


Внимание: Имената на селекторите, тук и по-нататък не трябва да започват с цифра, защото няма да работят в Mozilla Firefox.


В долният пример CSS формата #text1 ще се приложи към елемент с id="text1". В този и следващите примери за улеснение форматирането CSS е вътрешно и се задава в секцията head вместо във външен файл. Може да се използва и външен CSS файл, като тогава в секцията head се записва линка към CSS файла както в предишния пример (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Вътрешно форматиране със CSS</title>
  <style type="text/css">
  #text1
  {text-align:center;
  color:DarkRed;
  font-size:28px;} 
  </style>
 </head>
 <body>
  <p id="text1">Здравейте всичики!</p>
  <p>Форматирането на този абзац е различно от горното.</p>
 </body>
</html>
 

Селектор "class"

Този селектор се използва за определяне формата на група елементи. Използва атрибута class, като в началото се поставя точка ".". Също така, може да се определи HTML елемент, който да се форматира с определен селектор class. (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Селектор "class"</title>
  <style type="text/css">
  .text
  {text-align:center;
  color:DarkRed;} 
  p.text1
  {text-align:justify;
  color:Black;
  font-size:16px; } 
  </style>
 </head>
 <body>
  <h1 class="text">Записаното тук е форматирано с атрибута class!</h1>
  <p class="text1">Този текст е форматиран с атрибута class само за елемнт <p>.</p> 
 </body>
</html>
 

Когато съществува смесено форматиране за един и същ селектор от външен файл и вътрешно форматиране ще преобладава вътрешното форматиране. Например, ако във външен CSS файл за селектор h3 е записано следното: h3 {color:DarkRed; text-align:center;font-size:8pt;} А чрез вътрешно CSS форматиране за селектора h3 е записано следното: h3{text-align:left; font-size:20pt; } и ако страницата е с линк към външния CSS файл, то форматирането за h3 се обединява в следното:
    color:DarkRed;
    text-align:left;
    font-size:20pt;

Ясно е, че приоритета е на вътрешното CSS форматиране. Обаче, ако линка към външния CSS файл е поставен в секцията head след вътрешното CSS форматиране, то външното CSS форматиране ще има приоритет.