Командите
в CSS могат да се обобщят по следния начин:
селектор {свойство:стойност}
селектор {свойство:стойност}
Обърнете внимание, че свойството е отделено от стойността си с
двоеточие, а самата двойка думи е заградена с големи скоби: {}
Под селектор се разбира елемента, върху който ще се наложи
указания стил. Това често е HTML елемент, но може да е class или id селектор
(за тези селектори - малко по-късно). Ето и един конкретен пример:
p {text-align:center}
Със селектор p стилът се налага над всички параграфи, text-align е свойството за подравняване на текста на страницата, а конкретната стойност (center) показва, че това подравняване трябва да е центрирано. С други думи тази CSS команда означава "центрирай текста на всички параграфи".
p {text-align:center}
Със селектор p стилът се налага над всички параграфи, text-align е свойството за подравняване на текста на страницата, а конкретната стойност (center) показва, че това подравняване трябва да е центрирано. С други думи тази CSS команда означава "центрирай текста на всички параграфи".
Ако
стойността представлява две и повече думи, те трябва да се заградят с кавички.
Следният пример задава шрифт Times New Roman за всички параграфи:
p {font-family: "Times New Roman"}
p {font-family: "Times New Roman"}
Когато стойността съдържа числа и мерни единици, не бива да
оставяте празен интервал между числото и мерната единица:
h1 {line-height: 2em} е правилно
h1 {line-height: 2 em} е неправилно.
Указване на повече от едно свойство за даден елемент
Можете да зададете повече от едно свойство за даден елемент. Трябва само да
разделите отделните двойки свойство:стойност с точка и запетайка. Следната
команда задава едновременно три свойства на заглавията от типа h1 (червен цвят,
удебелен шрифт и подчертаване):
h1 {color: red; font-weight: bold; text-decoration: underline}
За край на CSS командата се приема затварящата скоба, а не края на реда. Това Ви позволява да организирате командите по малко по-четлив начин:
h1 {
color: red;
font-weight: bold;
text-decoration: underline;
}
h1 {color: red; font-weight: bold; text-decoration: underline}
За край на CSS командата се приема затварящата скоба, а не края на реда. Това Ви позволява да организирате командите по малко по-четлив начин:
h1 {
color: red;
font-weight: bold;
text-decoration: underline;
}
Пример 1:
Едновременно указване на стил за няколко елемента
Ако за няколко елемента искате да зададете общи свойства, можете да
съкратите кода като групирате елементите и укажете стила за групата като цяло.
Следната команда указва заглавията от типа h1, h2 и h3 да бъдат показани с
шрифт Courier New и в син цвят :
h1, h2, h3 {
color:blue;
font-family:"Courier New";
}
h1, h2, h3 {
color:blue;
font-family:"Courier New";
}
Ето един конкретен пример, чрез който ще изясним за
какво става дума.
Да предположим, че имате сайт, съставен от 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++ и напишете в него следния код:
<html>
<head>
<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" />
