CSS: Разлика между версии
Изтрито е съдържание Добавено е съдържание
м Премахнати редакции на 46.40.124.159 (б.), към версия на Ket |
|||
Ред 5:
== Същност на езика ==
CSS позволява да
<code>p {font-size: 9pt;}</code>
Ред 312:
= Позициониране =
CSS 2.1 задава три възможни схеми за позициониране:
;Нормален поток
Генерираните от елементите кутии се позиционират в зависимост от контекста (блоков или поредов форматиращ контекст за кутия,
но не и двата едновременно). Съществува възможност за относително позициониране на блокови и поредови кутии.
;Плаваща схема
Кутията първоначално се позиционира според нормалната потокова схема, а след това се отмества наляво/надясно в зависимост от указаната стойност.
;Абсолютно позициониране
Кутията изцяло се премахва от нормалния поток и се позиционира според зададените координати спрямо съдържащия я блок.
=== Позиция: горе, долу, ляво и дясно ===
Има четири възможности за свойството <code>position</code>. Ако даден елемент не е <code>static</code>, то следните свойства <code>top</code>, <code>bottom</code>, <code>left</code>, и <code>right</code> позволяват да му се зададат отстояния и позиция.
;Статичен <code>static</code> : Стойност по подразбиране, която поставя елемента в ''нормален поток''.
<source lang="css">
#div-1 {
position:static;
}
</source>
;Релативен <code>relative</code>: Относителна позиция спрямо статичното местоположение на елемента.
<source lang="css">
#div-1 {
position:relative;
top:20px;
left:-40px;
}
</source>
;Абсолютен <code>absolute</code>: Определя ''абсолютно позициониране''. Елементът се позиционира по отношение на най-близкия си нестатичен предшественик.
<source lang="css">
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</source>
;Фиксиран <code>fixed</code>: Елементът е ''абсолютно позициониран'' на екрана във фиксирано положение, това е валидно дори и когато документът се скролира.
=== Плаващи и прозрачни елементи ===
Една от три различни стойности може да бъде присвоена на свойството <code>float</code>. ''Абсолютно-'' или ''фиксирано-'' позиционирани елементи не могат да бъдат плаващи. Други елементи обикновено се носят около плаващи такива освен ако не са възпрепятствани от свойството <code>clear</code>.
;Ляв <code>left</code>: Елементът ''плава'' отляво на линията, на която би се появил, други елементи може да се застанат от дясната му страна
<source lang="css">
#div-1a {
float:left;
width:150px;
}</source>
<source lang="css">
#div-1b {
float:left;
width:150px;
}</source>
;Десен <code>right</code>: Eлементът ''плава'' отдясно на линията, на която би се появил, други елементи може да се застанат от лявата му страна
<source lang="css">
#div-1a {
float:right;
width:200px;
}</source>
;Прозрачен <code>clear</code>: Принуждава елементът да се появи зад прозрачно ('clear') плаващи елементи отляво (<code>clear:left</code>), отдясно (<code>clear:right</code>) или и от двете страни (<code>clear:both</code>).
<source lang="css">
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:right;
width:190px;
}
#div-1c {
clear:both;
}</source>
== Версии ==
Съществуват 3 основни версии на езика CSS + една, която още не е поддържана от основните браузъри. За всяка от тях е разработен специален тест, чрез който може да се провери дали даден web браузър поддържа съответната версия на езика. Всяка следваща версия разширява възможностите на езика. Могат да се използват и разширения на CSS ([[Sass]], [[Less]]) или фреймуърци([[Foundation Zurb]]), които улесняват работата и позволяват допълнителна функционалност като наследяване, задаване на променливи и др.
== Вижте също ==
* [[HTML]]
* [[Acid]]
== Външни препратки ==
* [https://www.w3.org/Style/CSS/ Cascading Style Sheets на английски] на сайта на [[World Wide Web Consortium]]
* [https://www.w3.org/2006/02/cssbg.html Cascading Style Sheets, ниво 1, превод на български от 1999 г.] на сайта на [[World Wide Web Consortium]] (друг превод от 2010: [http://dichev.com/Style/CSS/ Cascading Style Sheets на български език])
[[Категория:Уеб дизайн]]
[[Категория:Стандарти на W3C]]
| |||