МОДУЛ 02 / CSS ДИЗАЙН

CSS селектори, цветове и типография

Научи как CSS избира HTML елементи и управлява техните цветове, шрифтове и визуално оформление.

CSS FundamentalsИнтерактивен урок12. клас

01 / НАУЧИ

Как работят CSS селекторите?

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

Например h1 избира всички заглавия h1,.card избира елементи с клас card, а #hero — елемент с идентификатор hero.

При конфликт между правила значение имат каскадата, специфичността и редът на декларациите. Някои свойства, например цветът на текста, могат да се наследяват от родителски елементи.

ОСНОВНИ CSS СВОЙСТВА

От код към визуален стил

color — цвят на текста.

background-color — фонов цвят.

font-family — семейство шрифтове.

font-size — размер на текста.

line-height — височина на реда.

border-radius — заобляне на ъглите.

02 / РАЗГЛЕДАЙ

CSS Design Playground

Използвай контролите, за да променяш визуалните свойства. Наблюдавай как се променят едновременно примерната карта и генерираният CSS.

Размер на заглавието26pxЗаобляне на ъглите14pxАкцентен цвят

Моята CSS карта

Експериментирай с цветовете и типографията.

Генериран CSS

03 / ПРОМЕНИ

Експериментирай с CSS

Промени цветовете, размера на заглавието, разстоянието между редовете и заоблянето. Сравни селекторите по елемент, клас и вложен елемент.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<article class="card">
  <h1>Открий света на CSS</h1>
  <p class="intro">Стиловете превръщат структурата в дизайн.</p>
  <a class="button" href="#learn">Научи повече</a>
</article>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background-color: #eef2f8;
  color: #182235;
}

.card {
  max-width: 520px;
  margin: auto;
  padding: 28px;
  background-color: white;
  border-radius: 14px;
}

.card h1 {
  font-size: 30px;
  color: #d52f38;
}

.intro {
  font-size: 17px;
  line-height: 1.6;
}

.button {
  display: inline-block;
  padding: 12px 18px;
  background-color: #d52f38;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

04 / СЪЗДАЙ

Дизайн на персонална карта

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

Изисквания към задачата

Използвай CSS селектор по клас.
Промени фоновия цвят на картата.
Задай собствен цвят на заглавието.
Оформи описанието чрез font-size и line-height.
Стилизирай връзката като бутон.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<article class="profile-card">
  <h1>Моят творчески проект</h1>
  <p class="description">
    Представи своя проект с няколко изречения.
  </p>
  <a class="action" href="#project">Разгледай проекта</a>
</article>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background-color: #eef2f8;
  color: #182235;
}

.profile-card {
  max-width: 560px;
  margin: auto;
  padding: 28px;
  background-color: white;
  border-radius: 12px;
}

/* Промени дизайна на заглавието */
.profile-card h1 {
  font-size: 28px;
  color: #182235;
}

/* Добави стил за .description */

/* Добави стил за .action */

Това е твоето проектно пространство. Промените се запазват локално и не засягат демонстрацията.

05 / ПРОВЕРИ

Провери CSS оформлението на своя проект.

Резултатите ще се появят тук след проверката.