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 точки.
[редактиране] Селектори
Селекторите се използват за да покажат към кои елементи на HTML документа трябва да бъде прилаган съответният стил. Съществуват много видове селектори. Някои селектори позволяват постигане на динамичност на страницата до определена степен. Например само с помощта на CSS могат да бъдат направени изкачащи менюта, хипервръзки, които при посочване променят цвета си и др.
[редактиране] Свойства и стойности
Свойство представлява конкретна характеристика на елемент от HTML документа, а стойност е стойността, която се дава на това свойство. Например на свойство за размер може да се даде стойност число в дадена мерна единица, а за свойство цвят - стойност, която представлява стандартното наименование на цвета или hex стойности. от рода на #ffffff (бяло) до #000000 (черно).
| Синтаксис | Пример | Допълнителна информация |
|---|---|---|
| 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" />
Могат да бъдат вкарани неограничен брой файла, но е препоръчително броят им да е максимално ограничен, заради бавното зареждане на уеб страницата.
[редактиране] Версии
Съществуват 3 основни версии на езика CSS + една, която още не е поддържана от основните браузъри. За всяка от тях е разработен специален тест, чрез който може да се провери дали даден web браузър поддържа съответната версия на езика. Всяка следваща версия разширява възможностите на езика.Могат да се използват и разширения на CSS (Sass,Less) или фреймуърци(Foundation Zurb),които улесняват работата и позволяват допълнителна функционалност като наследяване,задаване на променливи и др.
[редактиране] Вижте също
[редактиране] Външни препратки
- Cascading Style Sheets на сайта на World Wide Web Consortium (неофициален превод: Cascading Style Sheets на български език)
