CSS (Cascading Style Sheets) е език за описание на стилове (език за стилови файлове, style sheet language) – използва се основно за описание на онлайн представянето на уеббазиран документ, който написан на маркиращ език. Най-често се използва допълнително към чистия HTML, но се прилага и върху XML уебстраници и документи. Спецификацията на CSS официално се поддържа от W3C.
Още в началото на развитието на www CSS започва да се добавя към стандартния 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 страница, като се затворят между таговете и :
h1.blue {color: #0000ff} p.left {text-align: left}
Вече дефинираните класове, могат да се използват и в тялото (body-то) на страницата (body) чрез следния код: <h1 class="blue"> Синьо Заглавие </h1>
Пример: I. Класови селектори
h1.blue {color: #FFFF00} p.left {text-align: left} <h1 class="blue"> Морето е синьо </h1> <p class="left"> В Бургас лятото е топло и има много гларуси </p> <h1> Статия 2 </h1> <h1 class="blue"> ...и небето е синьо </h1>
Класовете могат да бъдат декларирани и по друг начин – без обвързване с определен селектор: .клас {атрибут: стойност}
В този случай гореописаният код ще изглежда така: .blue {color: #0000ff} .left {text-align: left}
II. ID селектори – с помощта на този вид селектори могат да се декларират допълнителни параметри, които не са указани в декларираните класове. Имената отново са произволни. Използва се следният синтаксис: #id {атрибут: стойност} /или също селектор#id {атрибут: стойност}/
След добавяне на id селектор в горния пример:
css
.left {text-align: left} #rb {color:#ff0000; font-weight:bold}
В тялото на страницата можем да въведем следния код: <p class="left" id="rb"> Кръвта е тъмно червена и тече от ляво надясно </p>
Може да се въведе и параграф без декларирания клас: <p id="rb"> Хубавото вино е червено, тъмно червено </p>
III. Контекстуални селектори – комбинация от няколко селектора, като зададения ефект се проявява в зависимост от подредбата им. Използва се следния синтаксис: 1-ви селектор 2-ри селектор... {атрибут: стойност}
Например в секцията head може да напишем кода:
css
p i b {color:#00ff00}
Ако след това в тялото на страницата напишем: <p><i><b> Жабите са зелени и наклонени </b></i> ..а рибите не са </p>
то ефектът ще бъде удебелен и наклонен зелен текст, между и и стандартен текст за останалата част.
Групиране на селектори Няколко селектора могат да бъдат подредени, като се отделят със запетаи, и им се зададе еднакъв ефект, т.е. атрибути с еднакви стойности. Синтаксисът при групирането е: селектор1,селектор2,селектор3,... {атрибут: стойност}
Пример: Няколко ефекта на един ред код
h1,h2,h3,p,del {color: #ff0000}
Въведени са селекторите h1, h2, h3, този за параграф и за зачертаване на текст, като на всички им е зададен червен цвят. Ако след това в тялото на HTML документа се въведе:
<del> Червен Зачеркнат Текст </del>
то този текст ще се покаже не само зачеркнат, какъвто е по принцип ефекта от тага del, но и в червен цвят.
Коментари в CSS – в HTML се използва: <!--Коментари и обяснения--> В CSS коментарът трябва да е затворен между наклонена черта със „звезда“ и „звезда“ с наклонена черта: /*Закоментиран текст*/.
Свойства и стойности Свойство представлява конкретна характеристика на елемент от HTML документа, а стойност е стойността, която се дава на това свойство. Например на свойство за размер може да се даде стойност число в дадена мерна единица, а за свойство цвят – стойност, която представлява стандартното наименование на цвета или hex стойности. от рода на #ffffff (бяло) до #000000 (черно).
+ Списък на основните свойства, използвани при CSS Свойство Значение Възможна стойност Пример 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
+ Всички видове стойности в CSS Синтаксис Пример Допълнителна информация 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 Елементът е абсолютно позициониран на екрана във фиксирано положение, това е валидно дори и когато документът се скролира.