Синтаксис за писане на CSS стилове

Основният синтаксис за писане на CSS стилове се състои от правило (ruleset), което включва селектор и блок с декларации.

Ето структурата:

css

селектор {
  свойство: стойност;
  свойство: стойност;
  /* ... още декларации ... */
}

Основни компоненти

Селектор (Selector): Посочва HTML елемента или елементите, за които се отнася стилът (напр. body, h1, p, .class-name, #id-name).
Фигурни скоби ({}): Обграждат блока с декларации за съответния селектор.
Декларация (Declaration): Единично правило за стилизиране в блока. Всяка декларация съдържа свойство и стойност.
Свойство (Property): Типът характеристика, която искате да промените (напр. color, font-size, background-color).
Двоеточие (:): Разделя свойството от неговата стойност.
Стойност (Value): Определя конкретната визия или поведение на свойството (напр. red, 16px, #FFFFFF).
Точка и запетая (;): Използва се за разделяне на отделните декларации в блока. Последната декларация в блока не е задължително да завършва с точка и запетая, но е добра практика да се слага.

Пример

Ето един пример, който показва как всички параграфи (<p>) ще имат червен текст и размер на шрифта 14 пиксела:

css

p {
  color: red;
  font-size: 14px;
}

1. Пример със селектор за клас (.class-name)

Много често срещан начин за прилагане на стилове. Позволява ви да стилизирате само определени елементи, които имат конкретен клас в HTML кода си.

css

/* Всички елементи с клас "container" ще имат син фон и бял цвят на текста */
.container {
  background-color: blue;
  color: white;
  padding: 10px; /* Добавя вътрешно отстояние от 10 пиксела */
}

Използвайте кода внимателно.

2. Пример със селектор за идентификатор (#id-name)

Използва се за стилизиране на уникален елемент на страницата, който има конкретен id.

css

/* Елементът с id="header-title" ще има центриран текст */
#header-title {
  text-align: center;
  font-size: 24px;
}

Използвайте кода внимателно.

3. Пример с комбиниран селектор (наследници)

Позволява да изберете елемент само ако се намира вътре в друг конкретен елемент.

css

/* Всички елементи <a> (линкове), които са вътре в елемент с клас "navbar", 
   ще имат премахнато подчертаване */
.navbar a {
  text-decoration: none;
  font-weight: bold; /* Прави текста получер */
}

Използвайте кода внимателно.

4. Пример със селектор за псевдоклас (:hover)

Използва се за добавяне на интерактивност и промяна на стила при определено състояние на елемента, например когато потребителят мине с мишката върху него.

css

/* Когато потребителят мине с мишката върху който и да е бутон, 
   цветът на фона му ще стане зелен */
button:hover {
  background-color: green;
  cursor: pointer; /* Променя курсора на ръчичка */
}

5. Пример с групиране на селектори

Можете да приложите едни и същи стилове към множество различни селектори, като ги разделите със запетая.

css

/* Заглавията H1, H2 и H3 ще имат еднакъв цвят и шрифт */
h1, h2, h3 {
  color: #333; /* Тъмно сив цвят */
  font-family: Arial, sans-serif; /* Задава шрифт */
}

Тези примери покриват най-често срещаните начини за писане на CSS правила.

CSS Стил (във вашия <style> таг или CSS файл)

css

/* Стил за контейнера на кода (запазва белите полета и форматирането) */
pre.code-block {
  background-color: #f4f4f4; /* Светлосив фон за по-добра видимост */
  border: 1px solid #ddd;   /* Лека рамка */
  padding: 15px;            /* Вътрешно отстояние */
  margin: 20px 0;           /* Външно отстояние от останалия текст */
  font-family: monospace, monospace; /* Фиксиран шрифт за четливост на кода */
  font-size: 14px;          /* Размер на шрифта */
  line-height: 1.5;         /* Разстояние между редовете */
  overflow-x: auto;         /* Позволява хоризонтален скрол, ако кодът е дълъг */
  border-radius: 4px;       /* Леко заоблени ъгли */
  white-space: pre-wrap;    /* Запазва форматирането и позволява пренасяне на редове */
  word-wrap: break-word;
}

/* Стил за самия текстов елемент (прилага цвят на текста) */
pre.code-block code {
  color: #333; /* Тъмен цвят на текста */
  display: block; /* Гарантира, че кода заема целия блок */
}

Използвайте кода внимателно.

Пример за използване в HTML

Ето как ще изглежда кодът във вашата статия, използвайки горния CSS:

html

<p>В този пример дефинираме основна HTML структура:</p>

<pre class="code-block">
  <code>
    &lt;!DOCTYPE html&gt;
    &lt;html lang="bg"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Примерна страница&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Здравейте, свят!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code>
</pre>

<p>Това е остатъкът от статията...</p>

Използвайте кода внимателно.

Забележки:

< и >: Забележете, че в HTML примера използваме специалните символи (HTML entities) < (за <) и > (за >), за да гарантираме, че браузърът ги показва като текст, а не ги интерпретира като истински HTML тагове.
Четливост: Този стил е проектиран да бъде неутрален, да не отвлича вниманието и да е лесен за четене на фона на основния текст на статията.
Подсветка на синтаксиса (Syntax Highlighting): Ако искате различните части на кода (тагове, атрибути, стойности) да имат различни цветове, ще ви трябва допълнителна JavaScript библиотека като Prism.js или Highlight.js, тъй като чистият CSS не може автоматично да разпознава синтаксиса вътре в текстовия блок.

Отговорите на AI може да съ

Синтаксис за писане на CSS стилове

Свързани публикации