Структурата на CSS стила включва названието на елемента, за който ще се приложи стилово правило и след това самите параметри, които се ограждат в големи скоби – { }.
Практически на всеки таг в HTML – например p, h1, h2 и т.н. – може да се зададат някакви стилови параметри. HTML таговете, за които се задават параметрите, се наричат в CSS селектори, а кодът, поставен в големите скоби се нарича стилово правило и се състои от свойства и зададените им стойности.
Типичната структура на CSS стилово правило е:
селектор {свойство: стойност;}
В скобите може да се съдържа едно или няколко свойства с техните стойности, като в този случай те се отделят с точка и запетая.
Пример:
body
{
background-color: #000000;
font-size: 16px;
color: #cccccc;
}В примера имаме един селектор – body. Кодът, заключен между двете скоби, е съставен от свойствата background-color, font-family, font-size и color, а на всеки е зададена някаква стойност – в случая например стойността на свойството color e #cccccc и т.н. Тъй като имаме зададени няколко свойства с техните стойности, те са отделени чрез точка и запетая.
Тъй като в този пример селекторът е body, то всички зададени параметри ще важат за секцията body на HTML страницата. Ако на мястото на body сложим например селектора p, тогава свойствата и техните стойности ще важат за всеки параграф, който съществува в HTML документа:
p
{
background-color: #000000;
font-size: 16px;
color: #cccccc;
}Когато се задават цветове има и още едно улеснение. В случая на свойството background-color е зададена стойност #000000 (черен цвят) и на свойството color е зададена стойност #cccccc (бледосив цвят). Те биха могли да се декларират и така:
background-color: #000; color: #ccc;По този начин ще се спести малко пространство, което може да се окаже и голямо, ако стилът има много код. CSS позволява двойките еднакви букви или цифри от 16-тичната бройна система да се заменят с едната от тях, т.е. кодът #ff0000 може да се напише #f00, кодът #334455 може да бъде #345 и т.н.
Вижте още:
🔗 Какво е CSS и как се използва в HTML? | Help
🔗 Видове селектори в CSS | Help
