CSS
Тази статия се нуждае от вниманието на редактор с по-задълбочени познания. Ако смятате, че имате необходимите знания, подобрете тази страница. |
CSS (Cascading Style Sheets) е език за описание на стилове (език за стилови файлове, style sheet language) – използва се основно за описание на онлайн представянето на уеббазиран документ, който написан на език за маркиране. Най-често се използва допълнително към чистия HTML, но се прилага и върху XML уебстраници и документи. Спецификацията на CSS официално се поддържа от W3C.
CSS още в началото на развитието на www започва да се добавя към стандартния HTML с цел да бъдат разделени съдържанието и структурата на уеб страниците отделно от тяхното визуално представяне. Преди стандартите за CSS, установени от W3C през 1995 г., съдържанието на сайтовете и стила на техния дизайн са писани в една и съща HTML страницата. В резултат на това HTML кодът се превръща в сложен и нечетлив, а всяка промяна в проекта на даден сайт изисквала корекцията да бъде нанасяна в целия сайт страница по страница. Използвайки CSS, настройките за форматиране могат да бъдат поставени в един-единствен файл и тогава промяната ще бъде отразена едновременно на всички страници, които използват този CSS файл.
Същност и характеристики на езика
[редактиране | редактиране на кода]CSS позволява да се определя как да изглеждат елементите на една HTML страница – шрифтове, размери, цветове, фонове, и др. CSS кодът се състои от последователност от стилови правила, всяко от които представлява селектор, последван от свойства и стойности. Например в следния CSS код:
p {font-size: 9pt;}
има едно правило. То се състои от селектора p и свойството font-size, на което е зададена стойност 9pt. Това правило ще направи размера на шрифта във всички параграфи 9 точки.
Селектори
[редактиране | редактиране на кода]Селекторите (от английски: select, като при "select color") в CSS се използват като наименуват типа селекция и покажат съответно към кои елементи на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане и на динамичност на страницата, макар и в определена степен. Например само с помощта на CSS могат да бъдат направени падащи (drop-down) или пък изскачащи менюта (за мобилни устройства), и особено за хипервръзки, при които може да се задава цвета на линка, и също при посочване на линка, той да променя цвета си и др.
- Видове Селектори
В CSS има няколко вида селектори:
I. Селектори за класове – с помощта на CSS може да създавате собствени класове за всеки един селектор. След дефиниране на класа, то всички селектори, на които е присвоен този клас, ще показват един и същ ефект. Използва се следният синтаксис:
селектор.клас {атрибут: стойност}
Пример:
Нека имаме клас заглавия h1 със син цвят и клас параграфи p, позиционирани вляво.
Името на класа е произволно, но за удобство ще използваме blue. Следователно целият код ще изглежда така:
h1.blue {color: #0000ff}
p.left {text-align: left}
С това класовете са дефинирани и трябва да се поместят в секцията head на основната HTML страница, като се затворят между таговете <style> и </style>:
<style type="text/css">
h1.blue {color: #0000ff}
p.left {text-align: left}
</style>
Вече дефинираните класове, могат да се използват и в тялото (body-то) на страницата (body) чрез следния код:
<h1 class="blue"> Синьо Заглавие </h1>
Пример:
<html>
<head>
<title>I. Класови селектори</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
h1.blue {color: #FFFF00}
p.left {text-align: left}
</style>
</head>
<body>
<h1 class="blue"> Морето е синьо </h1>
<p class="left"> В Бургас лятото е топло и има много гларуси </p>
<h1> Статия 2 </h1>
<h1 class="blue"> ...и небето е синьо </h1>
</body>
</html>
Класовете могат да бъдат декларирани и по друг начин – без обвързване с определен селектор:
.клас {атрибут: стойност}
В този случай гореописаният код ще изглежда така:
.blue {color: #0000ff}
.left {text-align: left}
II. ID селектори – с помощта на този вид селектори могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Имената отново са произволни. Използва се следният синтаксис:
#id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/
След добавяне на id селектор в горния пример:
<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
.left {text-align: left}
#rb {color:#ff0000; font-weight:bold}
</style>
</head>
В тялото на страницата можем да въведем следния код:
<p class="left" id="rb"> Кръвта е тъмно червена и тече от ляво надясно </p>
Може да се въведе и параграф без декларирания клас:
<p id="rb"> Хубавото вино е червено, тъмно червено </p>
III. Контекстуални селектори – комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им. Използва се следния синтаксис:
1-ви селектор 2-ри селектор... {атрибут: стойност}
Например в секцията head може да напишем кода:
<head>
<title>css</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
p i b {color:#00ff00}
</style>
</head>
Ако след това в тялото на страницата напишем:
<p><i><b> Жабите са зелени и наклонени </b></i> ..а рибите не са </p>
то ефектът ще бъде удебелен и наклонен зелен текст, между и и стандартен текст за останалата част.
Групиране на селектори
Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е:
селектор1,селектор2,селектор3,... {атрибут: стойност}
Пример:
<head>
<title>Няколко ефекта на един ред код</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<style type="text/css">
h1,h2,h3,p,del {color: #ff0000}
</style>
</head>
Въведени са селекторите h1,h2,h3, този за параграф и за зачертаване на текст, като на всички им е зададен червен цвят. Ако след това в тялото на HTML документа се въведе:
<del> Червен Зачеркнат Текст </del>
то този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.
Коментари в CSS – в HTML се използва: <!--Коментари и обяснения-->
В CSS коментарът трябва да е затворен между наклонена черта със „звезда“ и „звезда“ с наклонена черта: /*Закоментиран текст*/.
Свойства и стойности
[редактиране | редактиране на кода]Свойство представлява конкретна характеристика на елемент от HTML документа, а стойност е стойността, която се дава на това свойство. Например на свойство за размер може да се даде стойност число в дадена мерна единица, а за свойство цвят – стойност, която представлява стандартното наименование на цвета или hex стойности. от рода на #ffffff (бяло) до #000000 (черно).
Свойство | Значение | Възможна стойност | Пример |
---|---|---|---|
color | Цвят на текста | Едно от 16-те имена на цветовете, дефинирани в HTML 4.0: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Цвят в RGB формат: color:rgb (R,G,B) |
color:blue color:rgb(255,255,255) color:rgb(0,0,0) |
background-color | Цвят на фона | Същите стойности, както при color | background-color:black |
text-align | Подравняване на текста | left, right, center, justify | text-align:center |
font-style | Стил на шрифт | normal, italic, oblique | font-style:italic |
font-weight | Дебелина на текста | normal, lighter, bold, bolder | font-weight:bold |
font-size | Размер на текста | Стойности в пиксели, ем, процент или име: large, small, x-small, x-large | font-size:110 % font-size:0.8em font-size:20px font-size:x-large |
font-family | Шрифт | serif, sans-serif, cursive, fantasy, monospace, Arial, Courier, „Times New Roman“ | font-family:sans-serif font-family:"Times New Roman" |
list-style-type | Водещ знак пред ред на списък | decimal, upper-alpha, lower-alpha, upper-roman, lower-rman | list-style-type:square list-style-type:lower-roman |
width | Ширина на елемент (напр.таблица) | Процент от ширината на страницата | width:50% |
border | Рамка на таблица | Дебелина в пиксели и тип на рамката: solid, dotted, dashed, double, groove | border:3px solid |
margin | Разстояние от всички страни на елемента | auto | margin:auto |
margin-left | Разстояние от лявата страна на елемента | Стойности в ем | margin-left:1em |
margin-right | Разстояние от дясната страна на елемента | Стойности в ем | margin-right:3em |
margin-top | Разстояние от горната страна на елемента | Стойности в ем | margin-top:5em |
margin-bottom | Разстояние от долната страна на елемента | Стойности в ем | margin-bottom:2em |
border-collapse | Вид рамка на таблица | collapse | border-collapse:collapse |
link | Псевдокласове на елементна котва | a:link | a:link{color:black} |
visited | a:visited | ||
hover | a:hover | ||
active | a:active | ||
float | Относително местоположение на страницата | left, right | float:left; |
clear | Забрана за заобикаляне на елементи отляво или отдясно | left, right, both | clear:both |
Синтаксис | Пример | Допълнителна информация |
---|---|---|
px | font-size:9px
|
Точно определяне на размера. Не е препоръчително при използването му в border-radius или други свойства от този тип. |
em | font-size:16px; line-height:1.5em /*24px/16*/
|
Определяне на размера спрямо размера на шрифта на бащиния елемент. Когато шрифта има размер 16px и се приеме за 1em, тогава размера на всеки останал елемент който се определя чрез em се умножава по стойността си. Пример: при размер на шрифта 10px, 1em = 10px; 2em = 20px. Това е най-добрата модерна техника за определяне на размери, поради запазването на съотношението между елементите.Em стойността е и приета за W3C стандарт |
% | font-size:100%
|
Използва се при сайтовете с подвижен строеж Пример: при промяната на ширината на екрана, елемента се намира на х% от съседния елемент (margin-left:10%; )
|
in | font-size:0,09in
|
Мерната единица инч |
cm | font-size:0.3cm
|
Мерната единица сантиметър |
mm | font-size:8mm
|
Мерната единица милиметър |
ex | font-size:16px; line-height:3ex
|
X-височината на шрифта. (Х-височината е приблизително половината от шрифта) |
pt | font-size:16pt;
|
1pt = 1/72in (1/72 инча) = 0,0138888889 инча |
pc | font-size:16pc;
|
Пика. 1pc = 12 points |
Задаване на стилове на HTML документ
[редактиране | редактиране на кода]Има 3 начина да се зададе стил на HTML документ.
Вграден стил на елемента
[редактиране | редактиране на кода]Зададеният по този начин стил се нарича inline. Представлява записване на стилова информация в атрибута style на даден таг. Полученият стил е валиден директно само за елемента, на който е зададен (въпреки това негови поделементи могат да го наследят при определени условия). Този метод има редица ограничения, тъй като не позволява използването на CSS селектори.
<h2 style="font-size: 10pt; color: blue;">Hello</h2>
Блок със стилове в документа
[редактиране | редактиране на кода]Зададеният по този начин стил се нарича internal. Представлява блок със стилове, затворен в таг <style>. Този таг трябва да е поставен в заглавната част на HTML документа (тага <head>).
Файл със стилове
[редактиране | редактиране на кода]Зададеният по този начин стил се нарича external. Представлява самостоятелен файл, който се състои от стилове и към него е направено обръщение в HTML документа. Това е единственият способ, който отговаря на идеята за отделяне на съдържание от оформление.
Указването на такъв файл се случва между <head> таговете и има следният синтаксис:
<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />
Могат да бъдат вкарани неограничен брой файла, но е препоръчително броят им да е максимално ограничен, заради бавното зареждане на уеб страницата.
Позициониране
[редактиране | редактиране на кода]CSS 2.1 задава три възможни схеми за позициониране:
- Нормален поток
Генерираните от елементите кутии се позиционират в зависимост от контекста (блоков или поредов форматиращ контекст за кутия, но не и двата едновременно). Съществува възможност за относително позициониране на блокови и поредови кутии.
- Плаваща схема
Кутията първоначално се позиционира според нормалната потокова схема, а след това се отмества наляво/надясно в зависимост от указаната стойност.
- Абсолютно позициониране
Кутията изцяло се премахва от нормалния поток и се позиционира според зададените координати спрямо съдържащия я блок.
Позиция: горе, долу, ляво и дясно
[редактиране | редактиране на кода]Има четири възможности за свойството position
. Ако даден елемент не е static
, то следните свойства top
, bottom
, left
, и right
позволяват да му се зададат отстояния и позиция.
- Статичен
static
- Стойност по подразбиране, която поставя елемента в нормален поток.
#div-1 {
position:static;
}
- Релативен
relative
- Относителна позиция спрямо статичното местоположение на елемента.
#div-1 {
position:relative;
top:20px;
left:-40px;
}
- Абсолютен
absolute
- Определя абсолютно позициониране. Елементът се позиционира по отношение на най-близкия си нестатичен предшественик.
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
- Фиксиран
fixed
- Елементът е абсолютно позициониран на екрана във фиксирано положение, това е валидно дори и когато документът се скролира.
Плаващи и прозрачни елементи
[редактиране | редактиране на кода]Една от три различни стойности може да бъде присвоена на свойството float
. Абсолютно- или фиксирано- позиционирани елементи не могат да бъдат плаващи. Други елементи обикновено се носят около плаващи такива освен ако не са възпрепятствани от свойството clear
.
- Ляв
left
- Елементът плава отляво на линията, на която би се появил, други елементи може да се застанат от дясната му страна
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
- Десен
right
- Eлементът плава отдясно на линията, на която би се появил, други елементи може да се застанат от лявата му страна
#div-1a {
float:right;
width:200px;
}
- Прозрачен
clear
- Принуждава елементът да се появи зад прозрачно ('clear') плаващи елементи отляво (
clear:left
), отдясно (clear:right
) или и от двете страни (clear:both
).
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:right;
width:190px;
}
#div-1c {
clear:both;
}
Версии
[редактиране | редактиране на кода]Съществуват 3 основни версии на езика CSS + една, която още не е поддържана от основните браузъри. За всяка от тях е разработен специален тест, чрез който може да се провери дали даден web браузър поддържа съответната версия на езика. Всяка следваща версия разширява възможностите на езика. Могат да се използват и разширения на CSS (Sass, Less) или фреймуърци(Foundation Zurb), които улесняват работата и позволяват допълнителна функционалност като наследяване, задаване на променливи и др.
Вижте също
[редактиране | редактиране на кода]Външни препратки
[редактиране | редактиране на кода]- Cascading Style Sheets на английски на сайта на World Wide Web Consortium
- Cascading Style Sheets, ниво 1, превод на български от 1999 г. на сайта на World Wide Web Consortium (друг превод от 2010: Cascading Style Sheets на български език)