|
=== Селектори ===
Селекторите се използват за да покажат към кои елементи на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане на динамичност на страницата до определена степен. Например само с помощта на CSS могат да бъдат направени изскачащи менюта, хипервръзки, които при посочване променят цвета си и др.
{{clearBr}}'''Видове Селектори'''
В CSS съществуват няколко вида селектори:
<code>селектор.клас {атрибут: стойност}</code>
{{clearBr}}'''Пример:'''
Нека имаме клас заглавия h1 със син цвят и клас параграфи p, позиционирани вляво.
Името на класа е произволно, но за удобство ще използваме blue. Следователно целият код ще изглежда така:
<code>{{Br}}h1.blue {color: #0000ff}
{{clearBr}}p.left {text-align: left}</code>
{{clearBr}}С това класовете са дефинирани и трябва да се поместят в секцията head на основната HTML страница, като се затворят между [[Таг (метаданни)|таговете]] <style> и </style>:
<code><style type="text/css">
{{clearBr}}h1.blue {color: #0000ff}
{{clearBr}}p.left {text-align: left}
{{clearBr}}</style></code>
{{clearBr}}Вече дефинираните класове, могат да се използват и в тялото (body-то) на страницата (body) чрез следния код:
<code>{{Br}}<h1 class="blue"> Синьо Заглавие </h1> </code>
{{clearBr}}Пример:
<code>
{{clearBr}}<html>
{{clearBr}}<head>
{{clearBr}}<title>I. Класови селектори</title>
{{clearBr}}<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
{{clearBr}}<style type="text/css">
{{clearBr}}h1.blue {color: #FFFF00}
{{clearBr}}p.left {text-align: left}
{{clearBr}}</style>
{{clearBr}}</head>
{{clearBr}}<body>
{{clearBr}}<h1 class="blue"> Морето е синьо </h1>
{{clearBr}}<p class="left"> В Бургас лятото е топло и има много гларуси </p>
{{clearBr}}<h1> Статия 2 </h1>
{{clearBr}}<h1 class="blue"> ...и небето е синьо </h1>
{{clearBr}}</body>
{{clearBr}}</html></code>
{{clearBr}}Класовете могат да бъдат декларирани и по друг начин – без обвързване с определен селектор:
<code>{{Br}}.клас {атрибут: стойност}</code>
{{clearBr}}В този случай гореописаният код ще изглежда така:
<code>{{Br}}.blue {color: #0000ff}
{{clearBr}}.left {text-align: left}</code>
{{clearBr}}'''II. ID селектори''' – с помощта на този вид селектори могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Имената отново са произволни. Използва се следният синтаксис:
<code>{{Br}}#id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/</code>
{{clearBr}}След добавяне на id селектор в горния пример:
<code>{{Br}}<head>
{{clearBr}}<title>css</title>
{{clearBr}}<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
{{clearBr}}<style type="text/css">
{{clearBr}}.left {text-align: left}
{{clearBr}}#rb {color:#ff0000; font-weight:bold}
{{clearBr}}</style>
{{clearBr}}</head></code>
{{clearBr}}В тялото на страницата можем да въведем следния код:
<code>{{Br}}<p class="left" id="rb"> Кръвта е тъмно червена и тече от ляво надясно </p></code>
{{clearBr}}Може да се въведе и параграф без декларирания клас:
<code>{{Br}}<p id="rb"> Хубавото вино е червено, тъмно червено </p></code>
{{clearBr}}'''III. Контекстуални селектори''' – комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им. Използва се следния синтаксис:
<code>{{Br}}1-ви селектор 2-ри селектор... {атрибут: стойност}</code>
{{clearBr}}Например в секцията head може да напишем кода:
<code>{{Br}}<head>
{{clearBr}}<title>css</title>
{{clearBr}}<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
{{clearBr}}<style type="text/css">
{{clearBr}}p i b {color:#00ff00}
{{clearBr}}</style>
{{clearBr}}</head></code>
{{clearBr}}Ако след това в тялото на страницата напишем:
<code>{{Br}}<p><i><b> Жабите са зелени и наклонени </b></i> ..а рибите не са </p></code>
то ефектът ще бъде удебелен и наклонен зелен текст, между ''''' и ''''' и стандартен текст за останалата част.
{{clearBr}}'''Групиране на селектори'''
{{clearBr}}Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е:
<code>{{Br}}селектор1,селектор2,селектор3,... {атрибут: стойност}</code>
{{clearBr}}Пример:
<code>{{Br}}<head>
{{clearBr}}<title>Няколко ефекта на един ред код</title>
{{clearBr}}<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
{{clearBr}}<style type="text/css">
{{clearBr}}h1,h2,h3,p,del {color: #ff0000}
{{clearBr}}</style>
{{clearBr}}</head></code>
{{clearBr}}Въведени са селекторите h1,h2,h3, този за параграф и за зачертаване на текст, като на всички им е зададен червен цвят. Ако след това в тялото на HTML документа се въведе:
<code><del> Червен Зачеркнат Текст </del></code>
то този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.
{{clearBr}}'''Коментари в CSS''' – в HTML се използва: <!--Коментари и обяснения-->
{{clearBr}} В CSS коментарът трябва да е затворен между наклонена черта със „звезда“ и „звезда“ с наклонена черта: /*Закоментиран текст*/.
=== Свойства и стойности ===
| '''em'''
| <code>font-size:16px; line-height:1.5em /*24px/16*/</code>
| Определяне на размера спрямо размера на шрифта на бащиния елемент. Когато шрифта има размер 16px и се приеме за 1em, тогава размера на всеки останал елемент който се определя чрез em се умножава по стойността си. Пример: при размер на шрифта 10px, 1em = 10px; 2em = 20px. Това е най- – добрата модерна техника за определяне на размери, поради запазването на съотношението между елементите.Em стойността е и приета за W3C стандарт
|-
| '''%'''
| 