close

Základní CSS: Úvod a syntaxe

CSS(Cascading Style Sheets) je základní složkou vývoje webu, která hraje zásadní roli při řízení vizuálního vzhledu prvků HTML na vašem webu. Poskytuje výkonnou sadu pravidel a vlastností, které definují, jak se prvky zobrazují, formátují a umísťují, což vám umožňuje přizpůsobit vzhled a dojem z vašich webových stránek.

 

Začněme pochopením konceptu selektorů

Selektory se používají k cílení na konkrétní prvky HTML pro stylování. Jedním z nejzákladnějších selektorů je selektor prvků, který vybere všechny instance určitého prvku HTML.

Například následující pravidlo CSS cílí na všechny odstavce v dokumentu:

p {  
  color: blue;  
}

V tomto příkladu p selektor vybere všechny <p> prvky a nastaví jejich barvu textu na modrou.

 

Dalším běžným selektorem je selektor třídy

Třídy se používají k seskupování prvků s podobnými vlastnostmi. Přiřazením třídy prvkům HTML na ně můžete cílit a upravovat je společně.

Zde je příklad:

.blue-text {  
  color: blue;  
}

V tomto případě .blue-text se selektor zaměří na všechny prvky s třídou blue-text a aplikuje na jejich text modrou barvu.

Selektor vám navíc ID umožňuje zacílit na konkrétní prvek podle jeho jedinečného identifikátoru. ID jsou obvykle přiřazeny k jednotlivým prvkům na stránce.

Zde je příklad:

#header {  
  background-color: gray;  
}

V tomto příkladu #header selektor vybere prvek s ID header  a použije na něj šedou barvu pozadí.

 

Když přejdeme k syntaxi CSS, každé pravidlo CSS se skládá ze selektoru a deklaračního bloku

Blok deklarací je uzavřen ve složených závorkách {} a obsahuje jednu nebo více deklarací. Deklarace se skládají z nemovitosti a její odpovídající hodnoty.

Zde je příklad:

h1 {  
  font-size: 24px;  
  color: #333;  
}

V tomto fragmentu kódu h1 selektor vybere všechny <h1> prvky a nastaví jejich velikost písma na 24 pixelů a barvu textu na tmavě šedou(#333).

 

V této sérii prozkoumáme a vysvětlíme různé vlastnosti CSS, selektory a jejich kombinace, které vám umožní vytvářet vizuálně přitažlivé a dobře strukturované webové stránky. Pochopení CSS a jeho základní syntaxe vám poskytne základ pro kontrolu nad stylingovými aspekty vašich webových stránek a zajistí vám jedinečný a personalizovaný uživatelský zážitek. Pojďme se ponořit a objevit neomezené možnosti CSS!