Atribut class

V knize jsme se naučili, že části stránky, které považujeme za důležité, můžeme označit pomocí atributu class. Nanonauti by například chtěli upravit styl svých Top tipů, aby na stránce více vynikaly, ale nechtějí každý z nich upravovat zvlášť. Aby toho docílili, vytvořili třídu nazvanou top-tip, kterou mohou aplikovat na každý <p> odstavec, co si vyberou.

p.top-tip {
  border:4px solid #00AFEB;
  border-radius:10px;
  padding:16px;
  background-color:#C5EBFB;
}
  p.top-tip::before {
  color:black;
  content:"TOP TIP: ";
  font-weight:bold;
}

Potom tento styl v HTML přidali do elementu <p> odstavců:

<p class="top-tip">Vše uvnitř tohoto elementu se řídí podle class top-tip.</p>

Podívejme se, co to udělá.

V prvním pravidle výše jsme přidali:

  • 4 pixely tlustý jednolitý modrý rámeček kolem odstavce
  • vypouklé okraje
  • menší mezeru mezi textem a ohraničením
  • světle modré pozadí uvnitř rámečku

Druhé pravidlo obsahuje něco, co jsme zatím ještě neviděli – značku ::before. Patří mezi pseudo-elementy, které poznáte díky dvojité dvojtečce.

Tento pseudo-element internetovému prohlížecí poví, aby obsah pravidla vložil PŘED obsah <p> elementu. Tímto obsahem je černě a tučně vyvedený text TOP TIP. To znamená, že tento text nemusíme k Top tipům přidávat v HTML, protože se tam díky třídě top-tip přidá automaticky.

Existují i další pseudo-elementy, které můžete použít podobně:

  • ::first-line – pravidlo se použije jen na první řádek textu v <p> elementu
  • ::first-letter – pravidlo se použije jen na první písmeno v <p> elementu
  • ::after – vloží obsah pravidla za obsah <p> elementu
  • ::selection – pravidlo se použije na text, který je označený uživatelem

Co kdybychom chtěli na element aplikovat více jak jednu třídu? No, to je snadné, protože jich můžete použít, kolik jen chcete. Řekněme, že jste definovali dvě třídy

  • „makeBig“ obsahuje css pravidlo, které zvětší velikost fontu
  • „allCaps“ obsahuje pravidlo, které text přepíše na velká písmena

Obě třídy můžete přiřadit k <p> elementu prostě tím, že je vložíte do class atributu a necháte mezi nimi mezeru:

<p class=”makeBig allCaps”>Tento text teď bude větší a napsaný velkými písmeny.</p>