What is CSS?

ipivanov No Comments CSS 35

Дойде време да разберем как да правим страницата си красива и добре подредена. В тази статия ще се спрем основно на няколко компонента. Ще разберете какво представлява CSS как да си служите с него и как да си организирате html документа, така че CSS кода да работи.

CSS е абревиатура за (cascading style sheet) файл, който ви позволява да изнесете цялото си презентационно оформление на документа в отделна секция. Всичко, което е свързано със шрифтове, цветове, рамки, тапети, формат на текст, ефекти и т.н. се асоциира със CSS.

За момента имаме няколко начина, по които можем да използваме CSS.

Първия начин е като пишеш CSS направо в html документа и по конкретно в <head></head> секцията. Точния формат може да го видите в следващия пример.

<head>
 <title><title>
  <style type=”text/css”>
   CSS Content Goes Here
  </style>
 </head>
<body>

В този случай самия HTML файл съдържа CSS-a необходим му за неговото стилизиране. В този метод означава, че за промяната на всяка страница трябва да се мине през всяка секция в style. Този метод не е подходящ ако имате много страници, но може да се прилага ако искате да напишете или изпробвате нещо набързо.

Друг метод е изнасянето на информацията от CSS файла в отделен външен такъв. Този външен CSS файл може да се създаде с всеки един текстов редактор като накрая му се даде разширение *.css. Този външен файл може да се свърже с html документа посредством линк, който се поставя отново в <head></head> частта.

<head>
 <title><title>
  <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
 </head>
<body>

Като използваме този начин успяваме да приложим към много HTML страници един CSS файл, който да ги стилизира. Това означава, че ако искате да промените нещо по всички страници, в които е включен този линк с CSS файла променяте само на едно място, а именно в style.css ако така сте си кръстили CSS-a.

Ето някои от преимуществата на този метод:

  • лесно се поддържат html файловете
  • намалява се големината на html документа
  • по добра гъвкавост

Ако се питате дали може да приложите и двата метода за една и съща страница – отговора е да. Примерно имате един глобален CSS линкнат файл, в който сте стилизирали по-голямата част от страницата и в <style></style> тага стилизирате някои дребни детайли.

Последния метод за стилизиране, който ще опиша е inline-method или накратко казано CSS-a се пише направо в таговете на отделните елементи.

Пример:

<p style=”color: #ff0000;”>Some red text</p>

Ако трябва да се степенуват тези три начина те се подреждат така:

  1. Стилизиране направо в тага
  2. Вътрешен CSS в <style></style> таг
  3. Външен CSS импортиран с линк към html страницата

 

CSS Синтаксис

Разгледайте следващия пример, който се състои от три елемента:

selector { property: value }

 

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

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

В случая със селектора body му предаваме две нови характеристики, а именно фон и по-специален шрифт.

Комбиниране на селектори може да стане като те се изредят със запетая преди първата скоба.

h1, h2, h3, h4, h5, h6 {
  color: #009900;
  font-family: Georgia, sans-serif;
}

Тук сме предали на всички от h1 до h6 тагове две еднакви характеристики.

CSS Класове

Класовете ви позволяват да стилизирате само един конкретен елемент който има фиксиран клас. Нека да видим пример за да изясним това.

<p>This is some text</p>
<p class=""cool-text">This text will be modified</p>
.cool-text {
  color: #009900;
  font-family: Georgia, sans-serif;
}

В този случай ще се стилизира по различно само второто <p></p>, което сме селектирали с клас “.cool-text”. В един html документ ни е позволено да имаме колкото класове са ни нужни без точно ограничение на тяхната бройка.

CSS Идентификатори (ID)

<p>This is some text</p>
<p id=""cool-text">This text will be modified</p>
#cool-text {
  color: #009900;
  font-family: Georgia, sans-serif;
}

В този случай отново селектираме второто <p></p>, но този път по ID. Идентификатора ни дава единствено по-голяма тежина на селектора. След като споменах тежест нека да завърша тази статия с обяснение именно на това как се определя тежестта на даден селектор.

CSS Тежест на селектора

Както споменах по-горе селекторите могат да бъдат от тагове, класове и идентификатори или от комбинации между тях. Сега всеки един от тези селектори има точки и след сумирането на всички тях се образува общата тежест на селектора.

  • таговете са 1 точка
  • класовете са 10 точки
  • идентификаторите (id-та) са 100 точки
  • inline стиловете са 1000 точки

Ето и няколко примера:

p {
color: red;
}
/*Точки: 1*/

.cool-text{
color: blue;
}
/*Точки: 10*/

#bigger-header{
font-size: 24px;
}
/*Точки: 100*/

div.container p{
font-family: Arial;
}
/*Точки: 12*/

div.wraper ul li#second-item{
font-weight: bold;
}
/*Точки: 113*/

Предлагам ви да посетите този линк  Specificity Calculator и да изпробвате различни селектори, като виждате в реално време тяхната тежест. Тази тежест ще ви е необходима в бъдеще когато ще трябва да презаписвате определени стилове за някои елементи, но това в следващите постове.

Leave a Reply Text

Leave a Reply