☰ open

VSC + HTML + CSS

CSS

picture
Jazyk CSS

CSS (Cascading Style Sheets) je jazyk speciálně vyvinutý pro stylování HTML. Kaskádový proto, že ve stylech funguje dědičnost.

Uvedení více selektorů

Selektory lze slučovat.

Mezi slektory děláme čárku (bez mezer). 

 H1, H2 { margin: 0px auto; padding: 0.5em 1.5em;}
Vyhledání externího fontu

Nejednoduší je použít Google Fonts


do těla HTML je musíme nalinkovat

<head>
<title>Ondříšek Petr</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add FontFamily -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
</head>

Zároveň je, musíme zmínit v CSS



body {
	font-family: Raleway, Geneva, Arial, Helvetica, sans-serif;
	margin: 0em;
	font-size: 1em;
	background-image: url(../images/bg_html.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
Uložení fontu

V případě, že používám velice atipický font (težko nahraditelný jiným on-line) je lepší si font uložit.

Stáhneme si daný font třeba z Google Fonts

Uložíme si to do složky fonts

Musím odkázat na cestu k fontu v CSS 



@font-face {
	font-family: Raleway;
	src: url(./fonty/Raleway.ttf);
    font-weight: normal;
	
}

Poznámka: u písma si vždy přečtu podmínky užití. Jedná o o autorské dílo!

Text-shadow

Stín textu

První a druhý parametr - pozice ( stín leží dva px napravo a 2px dole od textu)

Třetí parametr je barva stínu 


.nadpis {
	text-shadow: 2px 2px #D7D7D7 ;
}
Text-shadow

Stín textu

První a druhý parametr - pozice ( stín leží dva px napravo a 2px dole od textu)

Třetí parametr - rádius stínu

Čtvrtý parametr je barva stínu 


.nadpis {
	text-shadow: 2px 2px 3px #D7D7D7 ;
}
Text-shadow

Stínů můžeme mít i více

Řadí se pod sebe. První je úplně nahoře

Oddělují se čárkou 


.nadpis {
	text-shadow: 2px 2px 3px #D7D7D7, 4px 4px 3px #A2A2A2;
}
Odsazení - margin a padding

Na obrázku je element a rámeček kolem něj.

Rozestup mezi rámečkem a obsahem elementu se nazývá padding.

Rozestup mezi rámečkem a okolím elementu se nazývá margin.

Velikost pole CSS

Vlastnost CSS nám umožňuje zahrnout odsazení a ohraničení do celková šířka a výška prvku.box-sizing

V div1 není definován padding, kdežto v druhém divu definován padding je.

Pokud nepoužijeme box-sizing:border-box; (implicitně je content-box) budou prvky vykresleny rozdílněv

Dvě stejná pole bez definování box-size 

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  
}
Dvě stejná pole s definováním box-size 

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Pseudotřídy

:hover

Vlastnost :hover můžeme použít prakticky na jakýkoliv HTML element.

Funkce téhle vlastnosti je, že po najetí na konkrétní element se změní jeho vlastnost, kterou deklarujeme.



a:hover {
   color: green;
}
:first-child

:first-child, který najde první element daného typu a přidá mu nějaký styl.


p:first-child {
  background-color: yellow;
}

:nth-child(x)
:nth-child(x), který říká, kolikátý element daného typu vybíráme. 

p:nth-child(2) {
   color: green;
}

Má několik variant zápisu, které se liší hodnotou v závorkách.

První číslo říká kolikátý elemnt vybereme, druhé číslo od kterého místa začínáme počítat (počátek).


druhý element a počítáme hned od začátku


p:nth-child(2n+0) {
   color: green;
}

Dalším způsobem je označení jako odd (lichý) nebo even (sudý.


druhý element a počítáme hned od začátku


p:nth-child(odd) {
   color: green;
}

p:nth-child(even) {
   color: blue;
}

::after

Za obsah každého uvedeného prvku se vloží definovaný řetězec



p::after {
  content: " - vložený řetězec";
}




a::after {
  content: " (" attr(href) ")";
}

Ukázka ::after
Flexbox

Flexbox (Flexible Box)

Umožňuje nám skládat položky elementu za sebe.

Řeší rozložení pouze v jednom směru - buď do řádku, nebo do sloupce.

Flexbox nám kromě směru skládání položek umožňuje navíc snadno nastavit, v jakém pořadí se mají položky skládat, kolik místa mají jednotlivé položky zabírat, jaké mají mít mezi sebou mezery.

Abychom tedy mohli umístit elementy vedle sebe, tak přidáme vlastnost display s hodnotou flex. Z elementu se tak stane flexbox:


body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
    display: flex;
    justify-content: space-evenly;
}
Justify-content

Tato vlastnost definuje, jak velký je prostor mezi a kolem položek.

Ve výchozím stavu je nastaven směr flexboxu na řádky, takže řešíme prostor napravo a nalevo

Syntaxe

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Ukázka zarovnání na W3Schools

justify-content: space-evenly;


<html> 
<head> 
<style> 
body {
  background-color: #E7E9EB;
}
#myDIV {
  height:300px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-evenly;
}
#myDIV div {
  width: 80px;
  height: 80px; 
}
</style> 
</head> 
<body> 

<h1> The justify-content property</h1> 

<div id="myDIV"> 
<div style='background-color:coral;'> </div> 
<div style='background-color:lightblue;'> </div> 
<div style='background-color:pink;'> </div> 
</div> 

</body> 
</html> 
< >
Ukázka zarovnání justify-content: space-evenly;
align-items

Tato vlastnost určuje zarovnání pro položky uvnitř flexboxu nebo kontejneru

V kontejneru flexbox jsou položky flexboxu zarovnány na křížovou osu, která je ve výchozím nastavení svislá (opačná než ve směru ohybu).

V kontejneru mřížky jsou položky mřížky zarovnány ve směru bloku.

U stránek v angličtině je směr bloku směrem dolů a směr inline zleva doprava.

Aby tato vlastnost měla nějaký efekt zarovnání, potřebují položky kolem sebe dostupný prostor ve správném směru.

Poznámka:

Vlastnost je nutné uvést u každého prvku align-self align-items 


div {
  display: flex;
  align-items: center;
}
Ukázka align-items:center 

<html>
<head>
<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: center;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>
</head>
<body>

<h2>align-items: center</h2>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

</body>

Syntaxe CSS

align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit; Ukázka align-items na W3Shools
align-self
 
#myBlueDiv {
  align-self: center;
}

Tato vlastnost určuje zarovnání ve směru bloku pro vybranou položku uvnitř flexboxu nebo kontejneru mřížky .align-self

U stránek v angličtině je směr bloku směrem dolů a směr inline zleva doprava.

Poznámka:

Chcete-li zarovnat položku mřížky ve směru inline namísto směru bloku, použijte vlastnosti justify-selfjustify-items

Tato vlastnost přepíše vlastnost mřížky nebo flexibilního kontejneru.align-selfalign-items

Ukázka align-self
 
<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
}

#myBlueDiv {
  align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> The align-self property overrides the container's align-items property.</p>

</body>
</html>

Syntaxe CSS

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Ukázka align-self na W3Shools < >

Nahoru

HTML kousky

width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification

CSS

picture
Jazyk CSS

CSS (Cascading Style Sheets) je jazyk speciálně vyvinutý pro stylování HTML. Kaskádový proto, že ve stylech funguje dědičnost.

Uvedení více selektorů

Selektory lze slučovat.

Mezi slektory děláme čárku (bez mezer). 

 H1, H2 { margin: 0px auto; padding: 0.5em 1.5em;}
Vyhledání externího fontu

Nejednoduší je použít Google Fonts


do těla HTML je musíme nalinkovat

<head>
<title>Ondříšek Petr</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add FontFamily -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
</head>

Zároveň je, musíme zmínit v CSS



body {
	font-family: Raleway, Geneva, Arial, Helvetica, sans-serif;
	margin: 0em;
	font-size: 1em;
	background-image: url(../images/bg_html.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
Uložení fontu

V případě, že používám velice atipický font (težko nahraditelný jiným on-line) je lepší si font uložit.

Stáhneme si daný font třeba z Google Fonts

Uložíme si to do složky fonts

Musím odkázat na cestu k fontu v CSS 



@font-face {
	font-family: Raleway;
	src: url(./fonty/Raleway.ttf);
    font-weight: normal;
	
}

Poznámka: u písma si vždy přečtu podmínky užití. Jedná o o autorské dílo!

Text-shadow

Stín textu

První a druhý parametr - pozice ( stín leží dva px napravo a 2px dole od textu)

Třetí parametr je barva stínu 


.nadpis {
	text-shadow: 2px 2px #D7D7D7 ;
}
Text-shadow

Stín textu

První a druhý parametr - pozice ( stín leží dva px napravo a 2px dole od textu)

Třetí parametr - rádius stínu

Čtvrtý parametr je barva stínu 


.nadpis {
	text-shadow: 2px 2px 3px #D7D7D7 ;
}
Text-shadow

Stínů můžeme mít i více

Řadí se pod sebe. První je úplně nahoře

Oddělují se čárkou 


.nadpis {
	text-shadow: 2px 2px 3px #D7D7D7, 4px 4px 3px #A2A2A2;
}
Odsazení - margin a padding

Na obrázku je element a rámeček kolem něj.

Rozestup mezi rámečkem a obsahem elementu se nazývá padding.

Rozestup mezi rámečkem a okolím elementu se nazývá margin.

Velikost pole CSS

Vlastnost CSS nám umožňuje zahrnout odsazení a ohraničení do celková šířka a výška prvku.box-sizing

V div1 není definován padding, kdežto v druhém divu definován padding je.

Pokud nepoužijeme box-sizing:border-box; (implicitně je content-box) budou prvky vykresleny rozdílněv

Dvě stejná pole bez definování box-size 

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  
}
Dvě stejná pole s definováním box-size 

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Pseudotřídy

:hover

Vlastnost :hover můžeme použít prakticky na jakýkoliv HTML element.

Funkce téhle vlastnosti je, že po najetí na konkrétní element se změní jeho vlastnost, kterou deklarujeme.



a:hover {
   color: green;
}
:first-child

:first-child, který najde první element daného typu a přidá mu nějaký styl.


p:first-child {
  background-color: yellow;
}

:nth-child(x)
:nth-child(x), který říká, kolikátý element daného typu vybíráme. 

p:nth-child(2) {
   color: green;
}

Má několik variant zápisu, které se liší hodnotou v závorkách.

První číslo říká kolikátý elemnt vybereme, druhé číslo od kterého místa začínáme počítat (počátek).


druhý element a počítáme hned od začátku


p:nth-child(2n+0) {
   color: green;
}

Dalším způsobem je označení jako odd (lichý) nebo even (sudý.


druhý element a počítáme hned od začátku


p:nth-child(odd) {
   color: green;
}

p:nth-child(even) {
   color: blue;
}

::after

Za obsah každého uvedeného prvku se vloží definovaný řetězec



p::after {
  content: " - vložený řetězec";
}




a::after {
  content: " (" attr(href) ")";
}

Ukázka ::after
Flexbox

Flexbox (Flexible Box)

Umožňuje nám skládat položky elementu za sebe.

Řeší rozložení pouze v jednom směru - buď do řádku, nebo do sloupce.

Flexbox nám kromě směru skládání položek umožňuje navíc snadno nastavit, v jakém pořadí se mají položky skládat, kolik místa mají jednotlivé položky zabírat, jaké mají mít mezi sebou mezery.

Abychom tedy mohli umístit elementy vedle sebe, tak přidáme vlastnost display s hodnotou flex. Z elementu se tak stane flexbox:


body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
    display: flex;
    justify-content: space-evenly;
}
Justify-content

Tato vlastnost definuje, jak velký je prostor mezi a kolem položek.

Ve výchozím stavu je nastaven směr flexboxu na řádky, takže řešíme prostor napravo a nalevo

Syntaxe

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

Ukázka zarovnání na W3Schools

justify-content: space-evenly;


<html> 
<head> 
<style> 
body {
  background-color: #E7E9EB;
}
#myDIV {
  height:300px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-evenly;
}
#myDIV div {
  width: 80px;
  height: 80px; 
}
</style> 
</head> 
<body> 

<h1> The justify-content property</h1> 

<div id="myDIV"> 
<div style='background-color:coral;'> </div> 
<div style='background-color:lightblue;'> </div> 
<div style='background-color:pink;'> </div> 
</div> 

</body> 
</html> 
< >
Ukázka zarovnání justify-content: space-evenly;
align-items

Tato vlastnost určuje zarovnání pro položky uvnitř flexboxu nebo kontejneru

V kontejneru flexbox jsou položky flexboxu zarovnány na křížovou osu, která je ve výchozím nastavení svislá (opačná než ve směru ohybu).

V kontejneru mřížky jsou položky mřížky zarovnány ve směru bloku.

U stránek v angličtině je směr bloku směrem dolů a směr inline zleva doprava.

Aby tato vlastnost měla nějaký efekt zarovnání, potřebují položky kolem sebe dostupný prostor ve správném směru.

Poznámka:

Vlastnost je nutné uvést u každého prvku align-self align-items 


div {
  display: flex;
  align-items: center;
}
Ukázka align-items:center 

<html>
<head>
<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black; 
  display: flex;
  align-items: center;
}

#main div {
  flex: 1;
  border: 1px solid black;
  display: flex;
  align-items: center;
}
</style>
</head>
<body>

<h2>align-items: center</h2>

<div id="main">
  <div style="background-color:coral;min-height:30px;">RED</div>
  <div style="background-color:lightblue;min-height:50px;">BLUE</div>  
  <div style="background-color:lightgreen;min-height:190px;">Green div with more content.</div>
</div>

</body>

Syntaxe CSS

align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit; Ukázka align-items na W3Shools
align-self
 
#myBlueDiv {
  align-self: center;
}

Tato vlastnost určuje zarovnání ve směru bloku pro vybranou položku uvnitř flexboxu nebo kontejneru mřížky .align-self

U stránek v angličtině je směr bloku směrem dolů a směr inline zleva doprava.

Poznámka:

Chcete-li zarovnat položku mřížky ve směru inline namísto směru bloku, použijte vlastnosti justify-selfjustify-items

Tato vlastnost přepíše vlastnost mřížky nebo flexibilního kontejneru.align-selfalign-items

Ukázka align-self
 
<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 220px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  align-items: flex-start;
}

#main div {
  flex: 1;
}

#myBlueDiv {
  align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;" id="myBlueDiv">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> The align-self property overrides the container's align-items property.</p>

</body>
</html>

Syntaxe CSS

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Ukázka align-self na W3Shools < >

Nahoru
Copyright PEON © 2001 - 2026,