CSS
CSS - Cascading Style Sheets - Каскадни Стилови Множества
редактиранеВстъпителни думи
редактиранеКаскадните стилови множества CSS са създадени от W3C за да се облекчи и систематизира работата на уеб дизайнерите, като им се предостави стандарт за описание изгледа на HTML/XHTML документите и удобен метод за форматиране на множество документи едновременно с един и същ стил, както и каскадно наслагване на различни стилове, съхранени във файл или вмъкнати в самия HTML-документ. Каскадното наслагване на стилове от гледна точка на браузъра става в следния ред:
- Стил по подразбиране на браузъра
- Стил от външен .css файл
- Стил от заглавната секция на HTML-документ (между head-таговете)
- Стил вложен в HTML-елемент
Където най-висок приоритет има вложения в HTML-елементът стил.
Удобство при използването на CSS е дефинирането на селектори които позволяват да се укаже стойността на някое свойство едновременно за няколко различни по вид HTML-елементи (напр.: подравняването на заглавие, параграф, таблица и картинка едновременно, центрирано). Могат да бъдат дефинирани и селектори на клас което позволява на еднакви по вид елементи да приемат различни стойности за накое свойство (напр.: Два параграфа но единият със син текст а другият с червен)
Синтаксис
редактиранеСинтаксисът се състои от три части: селектор, свойство и стойност.
selector {property: value}
Обикновено селекторът е HTML елемента (тага) който желаете да дефинирате, свойството е атрибута който желаете да промените, като всяко свойство може да приема стойност. Свойството и стойността са отделени с двоеточие ":" и заградени с фигурни скоби "{}":
body {color: black}
Ако стойността value е съставена от множество думи, то поставете кавички около това множество:
p {font-family: "Times New Roman"}
Ако желаете да укажете повече от едно свойство, то трябва да отделите всяко свойство със символа точка и запетая ";". Примерът по-долу показва как се дефинира дясно подравнен параграф със син цвят:
p {text-align: right; color: blue}
За да направите стиловите дефиниции по-четливи, можете да опишете свойствата по едно на ред:
p
{
text-align: justify;
color: red;
font-family: Verdana
font-size: 10pt
}
Можете да групирате селектори, като отделите всеки селектор със запетая ",". В примера по-долу са групирани някой елементи за заглавие, като всички те ще бъдат изобразени със зелен цвят, централно подравнени:
h1,h2,h3,h4
{
color: green;
text-aling: center
}
Свойствата на елементите могат да бъдат модифицирани за еднотипни HTML-елементи, но с различни стойности за някой техни свойства. Например параграф с дясно подравняване и параграф с централно подравняване:
p.right {text-align: right}
p.center {text-align: center}
Ще трябва да използвате атрибута class във вашия HTML-документ:
<p class="right">
Този параграф ще бъде подравнен в дясно.
</p>
<p class="center">
Този параграф ще бъде подравнен централно.
</p>
За да приложите повече от един клас над даден елемент, синтаксисът е:
<p class="center italic">
Това е параграф, който евентуално би бил подравнен центално и изобразен с наклонени букви.
</p>
Към параграфът p по-горе ще бъдат приложени класовете "center" и "italic" (обърнете внимание, че това са само имена на класове, съвпадащи с имената на стойности за свойствата text-aling и font-style)
Можете също да изпуснете таг-името, когато задавате селектор за дефиниране на стил, който ще се използва от всички HTML-елементи които са от един и същ клас. В примера по-долу, всички HTML-елементи (заглавието h1 и параграфът p) с class="justify" ще бъдат подравнени двустранно:
.center {text-align: center}
<h1 class="justify">
Това заглавие ще бъде подравнено двустранно.
</h1>
<p class="justify">
Този параграф ще бъде подравнен двустранно.
</p>
! Mozilla/Firefox не поддържат имена на класове започващи с цифра.
Прилагане на стилове към HTML-елементи с конкретни атрибути става, когато има съответствие между всички елементи, които имат атрибут с една и съща стойност, с тази описана в селектора. В примера по-долу, стиловото правило ще се приложи за всички input елементи, които имат атрибут със стойност "text":
input[type="text"] {background-color: red}
HTML-елементи могат да бъдат избирани за форматиране и чрез id-селектор. Той се дефинира със символа "#". Стиловото правило по-долу, ще търси съответствие с елемент, чийто id-атрибут има стойност "green":
#green {color: green}
Понякога може да се наложи и конкретното указване на вид селектор на HTML-елемент с определено id. Стиловото правило по-долу, ще търси съответствие с p елемент, чийто id-атрибут има стойност "first":
p#first
{
text-align: center;
color: blue
}
За да внесете по-голяма яснота в кода си е желателно да ползвате кратки описателни коментари, които ще са незаменим помощник в бъдеще, ако се наложат някой редакции. Коментарите се игнорират от браузърите, така че те няма да са видими в документа ви. CSS-коментарите започват с "/*" и завършват с "*/":
/* Това е коментар */
p
{
text-align: justify;
/* и това е коментар */
color: red;
font-family: verdana;
font-size: 12pt
}