CSS – Уеб Дизайн Част 2-ра

В първия пример беше споменато, че структурата на CSS файла включва названието на елемента, за който ще се задават параметрите – в примера това беше body, и след това самите параметри, които се ограждат в големи скоби – { }. Практически всеки таг от HTML – например table, p, h1, h2 и т.н. – може да бъде на мястото на body и да му се зададат някакви параметри. HTML таговете, за които се задават параметрите, се наричат в CSS селектори, а кода, поставен в големите скоби, се състои от атрибути и зададените им стойности. Т.е. типичната структура на CSS кода е

селектор {атрибут: стойност}

В скобите може да се затвори един атрибут или няколко атрибута
с техните стойности, като в такъв случай те се отделят с точка и запетая.

В примера беше използван кода:

body
{
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

В този случай имаме един селектор – body. Кода, заключен между двете скоби, е съставен от атрибутите background-color, font-family, font-size и color, а на всеки атрибут е зададена някаква стойност – в случая например стойността на атрибута color e #cccccc и т.н. Тъй като имаме зададени няколко атрибута с техните стойности, те са отделени един от друг чрез точка и запетая.

Тъй като в този пример селектора е body, то всички зададени праметри ще важат за секцията body на HTML страницата. Ако на мястото на body сложим например селектора table, тогава декларираните атрибути и техните стойности ще важат за всяка таблица, която имаме в HTML документите:

table
{
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

Специално що се отнася до декларирането на цветовете има и още едно улеснение. В случая на атрибута background-color е зададена стойност #000000 (черен цвят) и на атрибута color е зададена стойност #cccccc (бледосив цвят). Те биха могли да се декларират и така:

background-color: #000;
color: #ccc

като по този начин ще се спести малко пространство, което може да се окаже и голямо, ако се пише дълъг документ с много код за цветове. CSS позволява двойките еднакви букви или цифри от 16-тичната бройна система да се заменят с едната от тях, т.е. кода #ff0000 може да се напише #f00, кода #334455 може да бъде #345 и т.н.