CSS 2 |
|
Типове CSS правила |
HTML селектор. Текстовата част на HTML тага се нарича селектор. Например h1 е селектор за тага <h1>. HTML селекторът се използва в CSS правилото за предефиниране на начина на визуализиране на тага.
Клас. Класът представлява "свободно" правило, което може да бъде приложено към всеки HTML таг и към множество HTML тагове.
ID индификатор. Правилата за идентификатори се могат да бъдат прилагани към всеки HTML таг, обаче, обикновено се прилагат еднократно. |
|
Части на CSS правилата |
CSS синтаксисът е съставен от 3 части: селектори, свойства и стойности. |
selector {property: value} |
Селекторите представляват знаковете за букви/числа, които идентифицират правило. Селекторът може да бъде селектор на HTML таг, клас или идентификатор.
Свойствата идентифицират какво е дефинирано. Има няколко десетки свойства, като всяко едно от тях отговаря за определен аспект от външния вид и поведението на съдържанието на страницата.
Стойностите се присвояват на свойство за дефениране на неговата същност. |
body {color: black} |
Бележка: Ако стойността е няколко думи се загражда в кавички. |
p {font-family: "sans serif"} |
Бележка: Ако искаме да зададем повече от едно свойство, трябва да ги разделим със точка и запетая. |
p {text-align:center; color:red;} |
За да се направи дефиницията по четлива, поставяме всяко свойство на отделен ред. |
p {
text-align: center;
color: black;
font-family: arial;
} |
|
Групиране |
Селекторите могат да се групират. Всеки селектор се отделя със запетая. |
h1,h2,h3,h4,h5,h6 {
color: green;
} |
|
Селектор CLASS |
С класа селектор може да се дефинират различни стилове за едни и същи HTML елементи. |
p.right {text-align: right}
p.center {text-align: center} |
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p> |
За да се зададат няколко класа на един елемент, синтаксиса е следният: |
<p class="center bold"> This is a paragraph. </p> |
Може също да се пропусне името на тага в селектора, за да се дефинира стил, който може да бъде използван от всички HTML елементи. |
.center {text-align: center} |
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p> |
Не започвайте име на клас с число. Няма да работи в Mozilla/Firefox. |
|
Добавяне на стилове на елементи с индивидуални атрибути |
Стилът по долу ще се свърже с всички елементи, които имат type атрибут със стойтост text. |
input[type="text"] {background-color: blue} |
|
Селектор ID |
Може да се дефинира стил за HTML елемент със селектор ID. Селекторът ID се определя с #. |
#green {color: green} |
p#para1 { text-align: center; color: red } |
Не започвайте ID селектор с число. Няма да работи в Mozilla/Firefox. |
|
CSS коментари |
/* This is a comment */
p { text-align: center;
/* This is another comment */
color: black; font-family: arial } |
Back To Top |