Background Border Classification Dimension Font Generated Content List and Marker Margin Outline Padding Positioning Table Text Pseudo-classes Pseudo-elements !important  

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
 
Copyright © 2007 RARO Design & Develop