Какво представлява CSS ?
CSS (Cascading Style Sheets) е език за описание на стилове - използва се основно за описване на представянето на документ, написан на език за маркиране. Най-често се използва заедно с HTML, но може да се приложи върху произволен XML документ. Официално спецификацията на CSS се поддържа от W3C (World Wide Web Consortium). Създаден първоначално като средство за разделяне на съдържанието от представянето му, днес той се използва основно за визуално оформление на HTML страници.
Същност на езика
CSS позволява да се определя как да изглеждат елементите на една HTML страница -шрифтове, размери, цветове, фонове, и др. CSS кодът се състои от последователност от стилови правила, всяко от които представлява селектор, последван от свойства и стойности. Например в следния CSS код:
p {font-size: 9pt;} има едно правило. То се състои от селектора p и свойството font-size, на което е зададена стойност 9pt. Това правило ще направи размера на шрифта във всички параграфи 9 точки.
Какъв проблем се решава с CSS?
В езика HTML има набор от елементи, като всеки се визуализира по точно определен начин. Ако разгледаме елемента h1 описващ главно заглавие то тои има опредлена големина и дебелина на шрифта. Така ако в дадена страница искаме да сложим главно заглавие, то е необходимо да се съобразим с големината и дебелината на шрифта. За да решим този проблем може да се вложи допълнителен елемент в него - font, така че да се намали големината на шрифта. Но това решение от гледна точка на четивност и изчистеност на кода се оказва неефективно, защото става натрупване на множество елементи.
За решаването на този проблем световната организация оговаряща за стандартите в Интернет - World Wide Web Consortium (W3C) решава проблема като създава CSS
Синтаксис:
<селектор> { свойство_1:стойност_1; свойство_2:стойност_2; ...; свойство_n:стойност_n; }
където,
<селектор> служи за указване на кой(кои) елементи ще се се приложи стил
във фигурните скоби се задават свойствата и стойностите които трябва да приемта, като всяка двойка свойство:стойност се разделя с ";"
| Пример: |
h1 {
color : red;
font-size : 12px;
} |
В примера се указва всички h1 елементи да се показват текста в червен цвят и с големина на шрифта 12 пиксела. Т.е. за свойството color (описващо цвят на текста) се задава стойност red, а за свойството font-size(големина на шрифта) се задава стойност 12 пиксела (12px)
