CSS (Cascading Style Sheets) е език за описване на презентацията и стиловете на елементите в един HTML/XML документ. CSS е една от основните технологии, използвани в уеб, редом с HTML и JavaScript.
При създаване на HTML страница, съдържанието й се описва (маркира) с HTML код, а презентацията на това съдържание, тоест как ще изглежда то в браузъра, се описва с CSS код (стил).
CSS кодът се поставя във файл с разширение .css. След това този файл може да се използва във всяка една страница от уеб сайта. Така че стилът ще се намира на едно място и при промяна ще се отразява на всички уеб страници.
Ще направим един най-прост CSS файл. Отворете някакъв текстов редактор, например Notepad и напишете в него следния код:
body
{
background-color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #cccccc;
}След това съхранете файла като му зададете разширение css – например file.css.
Сега остава във всяка HTML страница в секцията head да сложите следния код:
<link rel=stylesheet type="text/css" href="file.css" />Пример:
<!DOCTYPE html>
<html>
<head>
<title>Заглавие на страницата</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="description" content="описание на страницата" />
<meta name="ключови, думи" />
<meta name="robots" content="index, follow" />
<link rel=stylesheet type="text/css" href="file.css" />
</head>
<body>
Това е примерен текст, намиращ се в тялото на HTML страницата.
</body>
</html>Сега страницата ще се покаже със стиловите параметри, които сте задали, а именно – черен фон на страницата и светлосив текст. Всички страници, в които сложите кода <link rel=stylesheet type="text/css" href="file.css" /> ще имат същия външен вид. Ако желаете да промените цвета на фона или някои от параметрите на текста ще трябва да направите промените единствено в CSS файла и те автоматично ще се отразят във всички HTML документи, в които има връзка към файла file.css
За да работи този ефект, както е направен линка към file.css в примера, е нужно CSS файла да се намира в същата директория, в която се намират и HTML страниците. В противен случай трябва да се укаже пътя до CSS файла, например ако HTML страницата е във вътрешна папка, а file.css е в основната директория линка ще бъде
<link rel=stylesheet type="text/css" href="../file.css" />и т.н.
Структурата на CSS файла включва название на елемента (селектор), за който ще се приложи стила – в случая това е body, и след това параметрите (свойствата), които се ограждат в големи скоби – { }. Когато в големите скоби се поставят няколко свойства (както е в случая), те се отделят един от друг чрез точка и запетая. В примера скобите и зададените параметри са поставени на отделни редове, но това е само за прегледност, иначе кодът на CSS файла може да изглежда и така:
body {background-color:#000000;font-family:arial,helvetica,sans-serif;font-size:16px;color:#cccccc;}Всички параметри, намиращи се в големите скоби {..}, се наричат правило, а то се състои от селектора body и свойствата background-color, font-family, font-size и color. За свойствата се задават стойности, например за свойството color е зададена стойността #cccccc.
Когато се задава числова стойност на дадено свойство, например font-size: 16px, можете да оставите стъпка разстояние между двуеточието и цифрите (: 16), но не отделяйте цифрите от мерната единица, т.е. правилно е да се напише „16px“, а не „16 px“. Във втория случай кодът няма да бъде разчетен от всички браузъри.
Когато стойността на дадено свойство е съставена от две и повече думи, например sans serif, тези думи трябва да са свързани с тире (sans-serif) или трябва да се поставят в кавички („sans serif“).
Съществуват няколко начина за прилагане на CSS стила:
- Външен стил
Записът, който направихме в горния пример, се нарича външен стил (External Style Sheet) и се използва когато трябва да се контролират множество HTML документи, като нужните параметри се задават във външен файл (file.css). - Вътрешен стил
Съществува и вътрешен за HTML документа стил (Internal Style Sheet), който се използва за да се зададе вида на един отделен HTML документ, като нужните свойства се задават със специалния таг <style> в секцията <head> на HTML страницата. - Вграден стил
Другият начин за налагане на стил е Inline Styles – вътрешни за HTML таговете стилове. CSS стилът се разполага като атрибут директно в HTML тага например <p>.
Когато в един документ се използват и трите начина за налагане на CSS стил – с най-висок приоритет е стилът на Inline Style (вътрешните за HTML таговете стилове), след тях на по приоритет са Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл.
Коментари в CSS
В HTML коментарите, които не влияят на изпълнението на кода, се изписват по подобен начин:
<!-- Коментар, който няма да повлияе на HTML-документа -->В CSS коментарът трябва да е записан между наклонена черта „звезда“ и „звезда“ наклонена черта:
/* Коментар, който няма да повлияе на стила */Вижте още:
