Групиране на няколко тага при прилагане на един и същи стил
Таговете се разделят със запетая.
H1,H2,H3 (
color:green;
}
Коментари в
CSS:
/* коментар */
Приоритет при задаване на стилове
-
Присвоени стилове
-
Вътрешни стилове, зададени чрез селектор по
идентификатор id
-
Вътрешни стилове, зададени чрез селектор по клас
klass
-
Вътрешни стилове, зададени чрез селектор по таг
-
Свързани стилове – чрез отделен файл с
разширение .css
Важно! При прилагане на еднакви селектори с
еднакви приоритети се прилага последния.
Свойства в CSS
I.Свойства на рамката и отстъпите
на блока
1. Модел
на блок
|
|
 |
|
|
||||||||||||
2. Основни
съставляващи всеки блок
-
Съдържание на блока (content)
-
Неговото
обкръжение –
-
: вертикалните и хоризонтални отстъпи (групата
свойства padding), рамката (групата
свойства border) и полетата на блока (групата свойства margin)
3. Размери
-
размер на елемента – това е площта, която
съдържанието на блока заема (content)
-
размер на
блока – това е съвкупност от размери на елемента(content), и неговото обкръжение: отстъпи
(padding), рамки (border)и полета (margin).
|
|
|||||||||||
4. Използване на свойствата padding, margin и border.
Пример:
<html>
<head>
<title> Свойства
</title>
<style type="text/css">
div{
border-style:solid;
background-color:red;
}
</style>
</head>
<body style="background-color:blue">
<div style="padding: 0; border: 5px solid; margin: 0;">
София
</div>
<br>
<div style="padding: 20px; border: 10px solid; margin:
40;">
Париж
</div>
<br>
<div style="padding: 60px; border: 15px solid;
margin:100;">
Берлин
</div>
</body>
</html>
Резултатът от горния HTML документ в
браузера е следния:
Пример2:
<html>
<head>
<title> Свойства
</title>
<style type="text/css">
div{
border-style:solid;
background-color:red;
}
</style>
</head>
<body style="background-color:blue">
<div style="padding: 0; border: 5px solid; margin: 0;">
София
</div>
<br>
<div style="padding: 20px; border: 10px dashed; margin: 40;">
Париж
</div>
<br>
<div style="padding: 60px; border: 15px dotted; border-color:
green; margin:100;">
Берлин
</div>
</body>
</html>
Резултатът от горния HTML документ в
браузера е следния:
4. Свойства на рамката
А)
border-color и неговите производни
Синтаксис:
border-color:цвят
Производни на свойството:
border-top-color: цвят
border-left-color: цвят
border-right-color: цвят
border-bottom-color: цвят
б) border-widthи неговите производни
Синтаксис:
border-width:стойност в px
Производни
на свойството:
border-top- width: стойност
border-left- width: стойност
border-right- width: стойност
border-bottom- width: стойност
стойността може още да бъде: thin(тънка), medium(средна),thick(дебела)
б) border-style и неговите производни
Синтаксис:
border- style:стил
на рамка
Производни
на свойството:
border-top- style: стойност
border-left- style: стойност
border-right- style : стойност
border-bottom- ж: стойност
Стилът може още да бъде:
none –без рамка
dotted- рамка с
точки
dashed – рамка с
пунктир
solid – с непрекъсната
единична линия
double – с непрекъсната
двойна линия
groove – вдлъбната
ridge – изпъкнала
рамка
пример:
<div style:” border-width:
15px; border-style:dotted; border-color:green;”>
5. Свойства за управление на отстъпи
А) margin
и неговите производни
Синтаксисът е:
margin: стоиност px;
margin: проценти;
margin: аuto
Производните са:
margin-left
margin-top
margin-bottom
margin-right
пример:
<div style=”margin-top:56px; margin-left:auto; margin-bottom=120px;
margin-bottom=20px”>
б) padding и неговите производни
Синтаксисът е:
padding: стоиност px;
padding: проценти;
Производните са:
padding -left
padding -top
padding -bottom
padding -right
пример:
<div style=” padding -top:20px; padding -left:60px; padding -bottom=120px;
padding -bottom=40px”>
6. Свойства на блок
overflow – управлява начина на визуализиране на съдържанието на
елемента
в случай че то заема повече място,
отколкото му е отделено.
Стойности на свойството:
visible – показва се цялото съдържание.
hidden –
показва се толкова от съдържанието, колкото може да се побере в границите на
блока без премащабиране. Излишното се изрязва.
scroll – на границите на блока се създават ленти за превъртане.
auto – лентите за превъртане се създават при необходимост.
Пример:
<html>
<head>
<title> Свойства
</title>
<style type="text/css">
div{
border-style:solid;
background-color:red;
width:70px;
height:90px;
}
</style>
</head>
<body style="background-color:blue">
<div style="overflow:visible;">
София Moсква Париж Стокхолм
</div>
<br>
<div style="overflow:scroll;">
София Moсква Париж Стокхолм
</div>
</body>
</html>
7.Свойства за размери
Width
Height
Синтаксис:
width: число px; height: число px;
width: проценти; height: проценти;
width: auto; height: auto;
8. Свойства за позициониране
A)position - задава
принципа на позициониране на един елемент спрямо друг елемент (родителски
елемент) в който се намира или спрямо прозореца на браузера.
Стойноси на свойството:
static – игнорира задаването на координати с помощта на
свойствата left и top
relative – задава относителни координати на елемента спрямо горния ляв ъгъл на елемента в който се намира
absolute– задава абсолютни координати на елемента спрямо
горния ляв ъгъл на html документа
fixed -задава абсолютни координати на елемента спрямо горния ляв ъгъл на прозореца на браузера
б) top – задава разстоянието между горния край на родителския
елемент и текущия елемент, като се използва само съвместно със свойството
position
в) left – задава разстоянието между левия край на родителския
елемент и текущия елемент, като се използва само съвместно със свойството
position
г)right- задава разстоянието между десния край на родителския
елемент и текущия елемент, като се използва само съвместно със свойството
position
д)bottom- задава разстоянието между долния край на родителския елемент и текущия
елемент, като се използва само съвместно със свойството position
