Учебни записки: CSS

4. CSS

Езикът за маркиране HTML служи за отбелязване на ролята на отделните части на един хипертекстов документ (уебстраница), но не как трябва да изглеждат тези части.

Предвидено е информацията за форматиране, която определя: как се подреждат частите текст, с какъв шрифт, цвят и размери на буквите, сенки, рамки, анимация и др. ефекти, да се представя с помощта на друг език, означаван със съкращението CSS (Cascading Style Sheets - каскадни стилови листове).

CSS се състои от декларации за стойностите на свойствата на елементите. Тези свойства се отнасят до начина на изобразяването им. Например: декларациите:

width:200px; height:100px;

определят, че размерите на елемента, за който се отнасят, са ширина - 200 пиксела и височина - 100 пиксела.

Декларациите се състоят от две части: име на свойство и стойност на свойството, разделени с двоеточие. Всяка декларация завършва с точка и запетая.

Декларации на CSS може да се намират на три различни места:

1. В атрибута style, в HTML тага на елемента

Пример:

<p style="color:red;">Абзац с червен тeкст</p>

2. Между тагове <style></style> на HTML кода на страницата

Пример:

В този случай декларациите се поставят в CSS правила. Едно CSS правило се състои от селектор и заградени в скоби { } декларации. Селекторът определя за кои елементи от документа се отнасят поставените в скоби след него декларации. В примера селекторът е име на таг h1. (Таговете с такива имена, вече знаем, отбелязват заглавието на документа.) Следователно, правилото от примера задава, заглавието на документа да се изобразява от браузърите с размер на шрифта (свойство font-size) 15 точки.

С използването на правила, поставени между тагове <style></style>, се избягва многократното писане на едни и същи декларации. Така писането на html код става по-бързо и много по лесно се правят промени, засягащи много елементи от документа, а и самия html код е по-кратък, лесен за четене и разбиране.

3. В отделен файл

CSS правила може да се напишат и запазят в отделен файл, тогава в html кода на страницата, към която искаме да се приложат тези правила, посочваме адреса на този файл с помощта на таг с име link, който се поставя в служебната заглавна част на документа, заградена от таговете <head></head>, например:

Тагът с име link има задължителни атрибути с имена:

rel - означава какво е отношението на посочения файл към текущия документ, в случай стойността "stylesheet" означава, че се явява списък от приложими CSS правила

href - URL на файла.

Поставянето на CSS правила в отделни файлове позволява едни и същи правила да се използват в много от страницата на сайта. Така се спестява работата по писане на тези правила във всяка страница, а и прави възможно чрез промяна на тези правила да се променя външния вид на много или на всички страници на сайта.

Вижте: CSS - статия в bg.wikipedia.org, CSS Tutorial