CSS предлага
големи удобства и улеснения при изграждането на даден HTML документ. В много
случаи е по-добре даден елемент от HTML страница да бъде създаден с помощта на
CSS, отколкото чрез ползване на добре познатите HTML тагове. Най-голямото
улеснение, което предлага CSS е свързано с контрола на голям набор HTML
документи, като контролирането на външния вид на страниците става чрез промяна
на един единствен файл - CSS файла, без да е нужно да се променя HTML кода във
всяка една от HTML страниците.
Ето един конкретен пример, чрез който ще изясним за какво
става дума.
Да предположим, че имате сайт, съставен от 50 HTML страници. Ако ползвате тага <font> за да задавате вида на шрифта, големината и цвета му, вие ще трябва във всяка една html страница да пишете кодове от сорта на
<font face="arial, helvetica, sans-serif"
size="-1" color="#cccccc">някакъв текст</font>
Също така ще се наложи за всяка една страница да дефинирате
например цвета на фона чрез атрибута bgcolor на тага body:
<body bgcolor="#000000">
и т.н.
Ако някога решите да промените някои от тези параметри ще ви
се наложи да отворите сорсовете на всичките 50 страници и да въведете промените
във всеки един от тях. Цялото това усилие може да си го спестите като направите
един CSS файл и разположите в него всички нужни параметри. След това трябва
само да сложите по един линк към CSS файла във всяка от примерните 50 HTML
страници, за да бъдат валидни зададените параметри за всяка една от тях.
Ще направим един най-прост CSS файл. Отворете Notepad++ и
напишете в него следния код:
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Заглавие на страницата</title>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251" />
<meta name="description" content="описание
на страницата" />
<meta name="ключови, думи" />
<meta name="robots" content="index,
follow" />
<link rel=stylesheet type="text/css"
href="file.css" />
</head>
<body>
Някакъв текст
</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, sans-serif, helvetica;font-size:12px;color:#cccccc}
Когато се задава числова стойност на някакъв атрибут,
например font-size: 16px, можете да оставите стъпка разстояние между двуеточието
и цифрите (: 16), но не отделяйте цифрите от техните параметри, т.е. правилно е
да се напише "16px", а не "16 px". Във втория случай кода
няма да бъде разчетен от всички браузери, само InternetExplorer6 ще покаже
ефекта.
Когато стойността на някакъв атрибут е съставена от две и
повече думи, например sans serif, тези думи трябва да са свързани с тире
(sans-serif) или трябва да се поставят в кавички ("sans serif").
