Синтаксис на CSS
Както вече отбелязахме стиловата таблица
представлява по своята същност набор правила за форматиране на HTML елементите.
Пример:
selector {
property1: value1;
property2: value2;
property3: value3;
property4: value4;
}
За пример нека зададем цвят на текста, съдържащ
се в тага <b>. Това може да стане по следния начин:
b {color: red}
Тук b е ceлeктop, color – е cвoйcтвo, red е
неговата стойност.
Ако пък е необходимо на страницата всички
заглавия от първо ниво да се извеждат в син цвят и с шрифт размер 16 пункта, то
в стиловата таблица трябва да зададем правилото:
H1 { color: blue; font-size: 16pt }
Казано съвесем грубо, правилото представлява един
ред от стиловата таблица.
Всяко правило се състои от две части: селектор и
дефиниция. Селектор може да бъде всеки HTML таг, за който дефиницията задава по
какъв начин трябва да бъде форматиран. Самата дефиниция, в свой ред, също се
състои от две части: свойство и неговата стойност, разделени със символ за
двоеточие (:). Предназначението на свойството е очевидно от неговото име.
В горното правило селектор е елементът H1, а
дефиницията, записана във фигурни скоби, задава стойност на две свойства на
заглавието от първо ниво: цвят на шрифта (свойство color, стойност blue) и
размер на шрифта (свойство font-size, стойност 16pt). В едно правило може да се
задават няколко определения, разделени със символа точка и запетая (;), както
се вижда от примера.
Включване на стилова таблица
За осъществяване на тази задача можем да се
възползваме от някой от следните три метода:
- външен файл
- описание в заглавната секция на страницата
- inline-описание
Да започнем с
най-простото, с така нареченото inline-описание или описание, вградено в тага:
<p style="color: red;
text-align: center;"> Примерен текст </p>
С помощта на допълнителния атрибут style можем да
дефинираме нужните ни стилови параметри в тага. Това е най-лесния метод, обаче
той действа само в пределите на един таг. Но представете си колко нараства
размера на файла и колко неудобно ще бъде след това да се коригира, ако
започнем да дефнираме стил във всеки таг. Този начин за описание на стил не се
различава много например от директното описание на вънешния вид с помощта на
тага <font>.
Много по-удобно е предварително да се дефинират
всички нужни стилове и впоследствие просто да се приложат към съответния таг.
Това е втория начин - описание в заглавната секция. Това описание вече е в сила
за цялата страница. Задаването на стила става с помощта на класове, които
представляватт по своята същност списъци с дефиниции на всички необходими
параметри за оформление. При използването на този метод за описание на
стиловете то трябва да се разположи в заглавната секция на страницата. Пример:
<head>
<style type="text/css">
<!--
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
-->
</style>
</head>
Сега вече тези стилове може да се прилагат на
произволно място в html-кода. За целта се използва следната конструкция:
<p class="header">Това е
текст, написан със стил header</p>
<p class="red">Този
текст е с червен цвят</p>
Освен да дефинираме новите класове, ние имаме
възможност да предефинираме стандартните тагове. Например тага <p>. Пример:
<style type="text/css">
<!--
p { text-align : center; font-size : 12pt;}
-->
</style>
Сега целият текст, затворен между таговете
<p></p>, ще изглежда така, както е определено в дадения стил. Това
е много удобно и позволява лесно да се адаптират вече съществуващи страници към
използването на стилове. Освен това този похват намалява обема на файловете за
сметка на избягването на излишни атрибути class.
И накрая третия метод – изнасяне на описанията на
стиловете във външен файл. Диапазонът на неговото действие се простира върху
всички файлове, в които е включено това описание. Този способ най-добре
съответства на концепциите на HTML 4.0. В случая, когато е необходимо да
изменим вънешния вид на сайта, ще бъде достатъчно да коригираме само един файл.
Как точно става включването на външния файл? За
начало да създадем стилов файл с описание на всички нужни ни класове
(style.css). Пример:
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
p { text-align : center; font-size : 12pt;}
След това той се внедрява в документа с помощта
на тага <link>. Пример:
<head>
<link rel="stylesheet" type="text/css"
href="style.css" title="MyStyleSheet">
</head>
Това е най-удачния метод и за основната стилова
таблица се препоръчва именно той. Защо точно "основната" ? Работата е
там, че на практика се налага да се възползваме и от трите метода, и тук в
действие влиза "каскадността" на стиловете.
