Учебни записки
4. CSS
Езикът за маркиране HTML служи за отбелязване на ролята на отделните части на един хипертекстов документ (уебстраница) и не дава информация за форматирането на тези части.
Предвидено е информацията за форматиране, което означава: как се подреждат частите текст, с какъв шрифт, цвят и размери на буквите, сенки, рамки, анимация и др. ефекти да се описват с помощта на друг език, означаван със съкращението CSS (Cascading Style Sheets - каскадни стилови листове).
CSS се състои от декларации за стойностите на свойствата на елементите. Тези свойства се отнасят до начина на изобразяването им. Например: декларациите:
width:200px; height:100px;
определят, че размерите на елемента, за който се отнасят, са ширина - 200 пиксела и височина - 100 пиксела.
Декларациите се състоят от две части: име на свойство и стойност на свойството, разделени с двоеточие. Всяка декларация завършва с точка и запетая.
Декларации може да се намират на три различни места:
1. В атрибута style, в HTML тага на елемента
Пример:
<p style="color:red;">Абзац с червен такст</p>
2. Между тагове <style></style> на HTML кода на страницата
Пример:
<style>
h1 { font-size: 15pt; }
</style>
В този случай декларациите се поставят в CSS правила. Едно CSS правило се състои от селектор и заградени в скоби { } декларации. Селекторът определя за кои елементи от документа се отнасят поставените в скоби след него декларации. В примера селекторът е име на таг h1. (Таговете с такива имена, вече знаем, отбелязват заглавието на документа.) Следователно, правилото от примера задава, заглавието на документа да се изобразява от браузърите с размер на шрифта (свойство font-size) 15 точки.
С използването на правила, поставени между тагове <style></style>, се избягва многократното писане на едни и същи декларации. Така писането на html код става по-бързо и много по лесно се правят промени, засягащи много елементи от документа, а и самия html код е по-кратък, лесен за четене и разбиране.
3. В отделен файл
CSS правила може да се напишат и запазят в отделен файл, тогава в html кода на страницата, към която искаме да се приложат тези правила, посочваме адреса на този файл с помощта на таг с име link, който се поставя в служебната заглавна част на документа, заградена с тагове <head></head>, например:
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
Тагът с име link има атрибути с имена:
rel - означава какво е отношението на посочения файл към текущия документ, в случай стойността "stylesheet" означава, че се явява списък от приложими CSS правила
href - URL на файла.
Използването на CSS правила от отделни файлове позволява едни и същи правила да се използват на много от страницата на сайта. Така се спестява работата по писане на тези правила във всяка страница, а и прави възможно чрез промяна на тези правила да се променя външния вид на много или на всички страници на сайта.
Вижте: CSS - статия в bg.wikipedia.org, CSS Tutorial