CSS ID

CSS ID Vám umožňuje přiřadit jedinečný identifikátor do HTML prvku. To vám umožňuje definovat styl, který může být užíván pouze pokud má prvek přiděleno ID.

Pravidlo CSS ID

CSS ID je téměř totožné jako CSS třídy - rozdíl je pouze v tom, že se před názvem místo tečky používá křížek (#).



#jméno-ID { atribut: hodnota; }

Příklad CSS ID:


<html>

<head>

<style type="text/css">

#modry-obdelnik {

     height: 20px;

     width: 150px;

     padding: 3px;

     margin-top: 7px;

     margin-bottom: 7px;

     background:#b2c9fd;

     border:1px solid #040f60;

     text-align: center;

     color: #040f60;
     
}



#cerveny-obdelnik {

     height: 20px;

     width: 150px;

     padding: 3px;

     margin-top: 7px;

     margin-bottom: 7px;

     background:#fec1c1;

     border:1px solid #f9282d;

     text-align: center;

     color: #f9282d;
     
}

</style>

</head>

<body>

<div id="modry-obdelnik">

<p>CSS ID!</p>

</div>

<div id="cerveny-obdelnik">

<p>CSS ID!</p>

</div>

</body>

</html>

Výsledek:

CSS ID!

Pokud chcete použít stejné jméno ID pro více elementů, ale každý v jiném stylu. Jednoduše před křížek napište Vámi požadovaný HTML element - v našem případě pro odstavec tedy p.


p#jméno-ID { atribut: hodnota; }

Příklad CSS ID:


<html>

<head>

<style type="text/css">

h1#modra-barva { 

     color: blue;  

     font-size: 30px; 

}



p#modra-barva {
  
     padding: 3px;

     margin-top: 7px;

     margin-bottom: 7px;

     background:#b2c9fd;

     border:1px solid #040f60;

     color : #040f60;

     text-align: center; 
  
}

</style>

</head>

<body>

<h1 id="modra-barva">CSS ID</h1>

<p id="modra-barva">CSS ID mohou být velmi užitečné!</p>

</body>

</html>

Výsledek:

CSS ID

CSS ID mohou být velmi užitečné!

ID vs Třída

CSS ID a třídy si jsou velmi podobné. No jo, ale co a kdy mám tedy použít? To záleží na situaci.

Kdy použít CSS třídy?

CSS třídy by jste měli použít, pokud potřebujete použít jeden styl vícekrát na jedné stránce. Například potřebujete použít stejný styl pro několik odstavců na stránce.

Kdy použít CSS ID?

CSS ID by jste měli použít, pokud potřebujete použít jeden styl jednou na stránce.

Další lekce >>

<< Předchozí lekce