Преминете към основното съдържание

Въведение в CSS

CSS - Cascading Style Sheets (каскадни стилови таблици) е език, който ви позволява да създавате страхотно изглеждащи уебстраници. [1]

Предимства и развитие​

CSS е език за стилови таблици, използван за описание на представянето на документ, написан на HTML или XML. CSS описва как елементите трябва да се изобразяват.

CSS е сред основните езици в интернет мрежата и е стандартизиран в уеб браузърите според спецификациите на W3C. Преди това разработването на различни части от CSS спецификацията се извършваше синхронно, което позволяваше създаване на версии на най-новите препоръки. Може би сте чували за CSS1, CSS2.1 или дори CSS3. Никога няма да има CSS3 или CSS4; по-скоро всичко сега е просто CSS с отделни CSS модули с номера на версиите.

След CSS 2.1 обхватът на спецификацията се увеличи значително и напредъкът по различните CSS модули започна да се различава толкова много, че стана по-ефективно да се разработват и публикуват препоръки поотделно за всеки модул. Вместо да се прави версия за CSS спецификацията, W3C сега периодично запазва история (snapshot) на последното стабилно състояние на CSS спецификацията и напредъка на отделните модули. CSS модулите вече имат номера на версии или нива, като например CSS Color Module Level 5. [2]

Стиловe по подразбиране на браузъра​

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

html page default css

Това, което виждате, са стиловете по подразбиране на браузъра – много основно стилизиране, което браузърът прилага към HTML, за да гарантира, че страницата ще бъде четлива, дори ако авторът на страницата не е посочил изрично стилизиране. Тези стилове са дефинирани в CSS стилови таблици по подразбиране, съдържащи се в браузъра – те нямат нищо общо с HTML.

Внимание

Интернет би било скучно място, ако всички уебсайтове изглеждаха така. Ето защо трябва да научите CSS 🫡.

За какво се използва CSS?​

С помощта на CSS можете да контролирате как точно изглеждат HTML елементите в браузъра, представяйки документите си на потребителите с какъвто и да е дизайн и оформление, които желаете.

  • Документът обикновено е текстов файл, структуриран с помощта на език за маркиране, най-често HTML (тези се наричат ​​HTML документи). Може да попаднете и на документи, написани на други езици за маркиране, като SVG или XML. HTML документът съдържа съдържанието на уебстраница и определя нейната структура.
  • Представянето на документ на потребител означава преобразуването му във форма, използваема от вашата аудитория. Браузъри като Comet, Firefox, Chrome, Safari и Edge са предназначени да представят документи визуално, например на компютърен екран, проектор, мобилно устройство и т.н. В уеб контекст това обикновено се нарича рендиране (rendering). Ако искаш да прочетеш за процеса, чрез който се рендира уебстраница, [ето линк].

CSS може да се използва за много цели, свързани с външния вид на вашата уебстраница, например:

  • Стилизиране на текст, включително промяна на цвета и размера на заглавия и връзки.
  • Създаване на оформления, като например мрежови оформления (grid layouts) или оформления с няколко колони (multiple-column layouts).
  • Специални ефекти като например анимация.

CSS синтаксис​

CSS е език, базиран на правила — дефинирате правила, като посочвате групи стилове, които трябва да се приложат към определен елемент или групи елементи на вашата уебстраница.

Например, може да решите да стилизирате главния заглавен текст на страницата си като голям червен текст. Следният код показва много просто CSS правило, което би постигнало това:

h1 {
  color: red;
  font-size: 2.5em;
}
  • В горния пример, CSS правилото се задава със селектор. CSS селекторът е частта от CSS правило, която описва кои елементи в документа ще съответстват на правилото. Към съответстващите елементи ще бъде приложен зададения от правилото стил. В този случай стилизираме заглавия от ниво едно (<h1>).
  • След това включваме набор от къдрави скоби (), за да създадем блок за декларации.
  • Блокът за декларации съдържа една или повече декларации, които са под формата на двойки свойство и стойност. Указваме свойството (например, цвят в горния пример) преди двоеточието и указваме стойността на свойството след двоеточието (червено е стойността, която се задава за свойството цвят). Този пример съдържа две декларации, едната за цвят и другата за размер на шрифта.

Различните CSS свойства имат различни допустими стойности. В нашия пример имаме свойството color, което може да приема различни стойности за цвят. Също така имаме свойството font-size. Това свойство може да приема различни мерни единици за размер като стойност. CSS стиловият лист съдържа много такива правила, написани едно след друго.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}
Информация

Можете да намерите връзки към всички страници със свойства на CSS (заедно с други CSS функции), изброени в справочника за CSS на MDN. Като алтернатива, трябва да свикнете да търсите „mdn css-feature-name“ в любимата си търсачка, когато имате нужда от повече информация за дадена CSS функция. Например, опитайте да търсите „mdn color“ или „mdn font-size“!

Прилагане на CSS към HTML документ​

Когато отворите уебстраница, браузърът първо получава HTML документа, съдържащ съдържанието на уебстраницата, и го преобразува в DOM дърво.

След това всички CSS правила, намерени в уебстраницата (или вмъкнати директно в HTML, или в посочени външни .css файлове), се сортират в различни кофи (buckets), въз основа на различните елементи, към които ще бъдат приложени (както е посочено от техните селектори). След това CSS правилата се прилагат към DOM дървото, което води до дърво за рендериране, което след това се изобразява в прозореца на браузъра.

Нека разгледаме един пример. Първо, ще дефинираме HTML фрагмент, към който може да се приложи CSS кодът:

Code


<h1>CSS is great</h1>
<p>You can style text.</p>
<p>And create layouts and special effects.</p>

Preview

След това и CSS кодът:

h1 {
  color: red;
  font-size: 2.5em;
}
p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

Този CSS код:

  • Избира всички <h1> елементи на страницата, оцветявайки текста им в червено и правейки ги по-големи от размера им по подразбиране. Тъй като в нашия примерен HTML код има само един <h1>, само този елемент ще получи стилизацията.
  • Избира всички <p> елементи на страницата, като им дава цветен текст и цвят на фона, както и известно разстояние около текста. В нашия примерен HTML код има два <p> елемента и двата получават стилизацията.

Code


<style>
h1 {
      color: red;
      font-size: 2.5em;
}
p {
      color: aqua;
      padding: 5px;
      background: midnightblue;
}
</style>

<h1>CSS is great</h1>
<p>You can style text.</p>
<p>And create layouts and special effects.</p>

Preview

Продължаваме с това

HTML код​

index.html

Code


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Getting started with CSS</title>
</head>

<body>
  <h1>I am a level one heading</h1>

  <p>
    This is a paragraph of text. In the text is a
    <span>span element</span> and also a
    <a href="https://example.com">link</a>.
  </p>

  <p>
    This is the second paragraph. It contains an <em>emphasized</em> element.
  </p>

  <ul>
    <li>Item <span>one</span></li>
    <li>Item two</li>
    <li>Item <em>three</em></li>
  </ul>

</body>
</html>

Preview

CSS код​

Първото нещо, което трябва да направим, е да кажем на HTML документа, че имаме някои CSS правила, които искаме да използва. Има три различни начина за прилагане на CSS към HTML документ, с които обикновено се сблъсквате – външни стилови таблици (external stylesheets), вътрешни стилови таблици (internal stylesheets) и вградени стилове (inline styles). Нека ги разгледаме сега.

External stylesheets​

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

Създайте файл в същата папка като вашия HTML документ и го запазете като styles.css. За да свържете styles.css към index.html, добавете следния ред някъде в <head> на HTML документа:

<link rel="stylesheet" href="styles.css" />

Този елемент <link> казва на браузъра, че имаме стилов лист, използвайки атрибута rel и местоположението на този стилов лист като стойност на атрибута href.

В styles.css можете да сложите този код

h1 {
  color: red;
}

Намиране на стилови таблици на различни места​

В горния пример CSS файлът е в същата папка като HTML документа, но можете да го поставите някъде другаде и да коригирате пътя. Ето три примера:

<!-- В поддиректория, наречена styles, в текущата директория -->
<link rel="stylesheet" href="styles/style.css" />

<!-- В поддиректория, наречена general, която се намира в поддиректория, наречена styles, в текущата директория -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Върнете се едно ниво назад в директорията, след това в поддиректория, наречена styles -->
<link rel="stylesheet" href="../styles/style.css" />

Internal stylesheets​

Вътрешните стилови таблици се съдържат в елементите <style>, които се намират в HTML <head>. Нека създадем един сега.

Във вашия HTML документ добавете следния фрагмент някъде между таговете <head> и </head>:

<style>
  p {
    color: purple;
  }
</style>

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

Inline styles​

Вградените стилове са CSS декларации, които засягат един HTML елемент, съдържащ атрибут style. Нека опитаме да имплементираме един сега.

Добавете атрибут style към елемента <span> във вашия HTML код, така че да изглежда по следния начин:

<span style="color: purple; font-weight: bold">span element</span>
Внимание

Избягвайте използването на CSS по този начин, ако е възможно. Това е лоша практика. Първо, това е най-неефективната имплементация на CSS за поддръжка. Една промяна в стила може да изисква множество редакции в рамките на една уебстраница. Второ, вграденият CSS също смесва (CSS) код с HTML и съдържание, което прави всичко по-трудно за четене и разбиране. Разделянето на кода и съдържанието улеснява поддръжката за всички, които работят по уебсайта.

Използване на селектори​

В CSS, селекторът е шаблон, който се използва за избиране на HTML елементи, които искате да стилизирате. След като бъдат избрани, можете да приложите различни правила за стилизиране (като цвят, размер на шрифта, фон и др.) към тези елементи. Селекторите са основна концепция в CSS, защото ви позволяват да определите точно кои елементи трябва да бъдат засегнати от вашите стилове. [3]

css selector

Има няколко вида CSS селектори, които можете да използвате за насочване към различни HTML елементи. Нека разгледаме най-често срещаните селектори.

Type Selectors​

Type Selector - Селекторът на тип (известен също като селектор на елементи) избира всички елементи от даден тип. Например, ако искате да стилизирате всички абзаци, всички div-ове или всички тагове за заглавия, бихте използвали селектора на тип.

h1 {
    color: red;
}

Class Selectors​

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

За да използвате селектор на класове, пред името на класа се поставя точка (.):

.my-class {
    background-color: lightblue;
}

След това в HTML прилагате класа по следния начин

<div class="my-class">This div has a light blue background.</div>

ID Selectors​

ID Selector - ID Селекторът е насочен към елемент, който има специфичен атрибут id. За разлика от класовете, ID трябва да е уникален в рамките на страницата, което означава, че само един елемент трябва да използва специфичен ID.

За да използвате селектор на ID, пред името на ID трябва да поставите символа (#):

#header {
    font-size: 24px;
}

След това в HTML прилагате ID по следния начин

<h1 id="header">This is a header</h1>

Коментари​

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

Синтаксис​

Коментарите могат да се поставят навсякъде, където е разрешено празно пространство в стилов лист. Те могат да се използват на един ред или да се разпростират през няколко реда.

/* A one-line comment */

/*
A comment
which stretches
over several
lines
*/

/* The comment below is used to
   disable specific styling */
/*
span {
  color: blue;
  font-size: 1.5em;
}
*/

Използвана литература​