Jaro 2021, Praha

11. května 2021

https://github.com/tvorimweb-2021-praha-jaro/lekce_09

• Seznámit se s možnostmi připojení CSS do stránky a pravidly CSS specificity
• Zopakovat základní CSS selektory a představit další pokročilejší
• Naučit se práci se základními CSS pseudoelementy

Zatím jsme se seznámili s připojením CSS jako externího souboru pomocí značky link. Je to asi nejběžnější způsob a v mnoha ohledech nejvýhodnější, ale je dobré znát i ostatní možnosti, protože i ty mají své použití. A přinejmenším se s nimi můžete setkat na jiných projektech.

1. externí soubor nebo více souborů CSS pomocí tagu link Známe již celkem důvěrně, pouze poznamenáme, že lze takto připojit i více souborů CSS (jeden pro obecné styly písma a barev, další pro konkrétní stránku), aby se zbytečně nestahovaly styly, které se na stránce nepoužijí.

   <link rel="stylesheet" href="/styles/typography.css" />
   <link rel="stylesheet" href="/styles/contact.css" />

2. přímo v HTML prostřednictvím značky style Párová značka style vlastně vyznačí místo v HTML dokumentu, kam lze psát CSS. Takový to blok CSS kódu lze umístit kamkoli do dokumentu, včetně prvku head, což je nejběžnější užití toho zápisu. Zapisují se do něho například styly, které chceme mít na stránce vykresleny okamžitě (bez nutnosti čekat na načtení velkého souboru CSS), ale to již spíše zastaralý způsob.

   <style>
     /* CSS komentář */
     body {
       max-width: 1600px;
     }
   
     p {
       margin-bottom: 1rem;
     }
   </style>

3. tzv. inline styly, přímo do otvírací značky prostřednictvím atributu style Někdy nemáme možnost zasáhnout do kódu jinak než tímto způsobem. Nejčastěji jsme k tomu nuceni při úpravě obsahu stránky přes nějaký redakční systém. Dále se tento způsob využívá při tvorbě HTML e-mailů.

   <p style="max-width: 20rem; color: silver;">
     Text odstavce s maximální šířkou 20 rem a šedou barvou písma.
   </p>

4. pomocí jazyka JavaScript Uvádíme pouze pro úplnost, protože s JavaScriptem jsme se dosud nesetkali.

Pozor, poslední dva způsoby nemohou využít plnou škálu možnosti CSS (například nezapíšete stavové styly pro :hover či :focus).

note:

• předvedeme si v kódu

Existuje více jak 30 různých CSS selekterů a nespočet dalších možností, jak je kombinovat.

note:

• https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

• prostý název HTML tagu (v CSS bez špičatých závorek!)

/* odstavce vypiš tučně */

p {
  font-weight: bold;
}

note:

• vícenásobný selektor: tatáž pravidla se přiřadí více prvkům naráz
• zvolené prvky oddělujeme čárkou
• píšeme jeden selektor na řádek (kvůli přehlednosti)

/* nadpisy 1.‒4 úrovně vypiš karmínovou */

h1,
h2,
h3,
h4 {
  color: crimson;
}

• vyjadřuje strukturu HTML

footer p {
  color: white;
}

note:

• odstavce uvnitř patičky
• selektory čteme zprava doleva
• footer > p

• název třídy (začíná tečkou, aby se odlišil od názvu prvku)

/* prvky s třídou .perex vypiš kurzívou */

.perex {
  font-style: italic;
}

note:

• jednu třídu může mít více prvků, bez ohledu na jejich typ
• jeden prvek může mít více tříd, na pořadí tříd v HTML nezáleží

/* Tohle nedělejte! */
#navbar {
  background-color: #000;
}

note:

• uvádíme pro úplnost
• nepraktické, příliš vysoká specificita => id se omezuje na jediný prvek na stránce
• specificita vysvětlena níže

• prvek s konkrétním atributem

/* prvkům (tedy obrázkům) s atributem `alt` přidej spodní ohraničení */
[alt] {
  border: 1px solid silver;
}

• prvek s konkrétní hodnotou atributu

/* obrázky s prázdným atributem `alt` orámuj karmínově */
[alt=""] {
  border-color: crimson;
}

note:

• lze ještě obměňovat, např. hodnota atributu začínající/končící na konkrétní text apod. => samostudium

:first-child, :last-child, :nth-child(), :nth-of-type(), ...

/* První potomek elementu */
div:first-child {}

/* Poslední potomek elementu */
div:last-child {}

/* pravidlo platí pro druhou položku seznamu */
li:nth-child(2) {}

/* pravidlo platí pro každou třetí položku */
li:nth-child(3n) {}

/* jako předchozí, ale začíná se u druhé položky */
li:nth-child(3n + 2) {}

• ::first-line, ::first-letter
  • lze stylovat pouze font, styl textu, pozadí, margin, padding a border
• ::after, ::before
  • lze stylovat vše
• ::selection
  • lze stylovat pouze color, background-color, text-decoration a pár dalších

div::before { content: 'Před'; }

div::after { content: 'Za'; }

<div>
  Před
  <!-- Vše ostatní co bylo v divu předtím -->
  Za
</div>

div::before { content: 'Text'; }

div::before { content: 'url(/cesta/k/obrazek.jpg)'; }

/* Nic, pro obrázková pozadí*/
div::before { content: ''; }

div::before { content: "<h1>Toto nejde!</h1>"; }

Dědičnost v CSS je způsob, jakým se dostávají hodnoty vlastností od rodičovských elementů k potomkům.

Martin Michálek, Vzhůru Dolů

note:

• platí jen pro menšinu vlastností
• vlastnosti týkající se textu (začínají na font-)
• Máchal: táta českých frontendistů
• od něj jsem čerpal (kopíroval) pro další výklad
• ve sporu s kaskádou vždy prohraje, kaskáda je silnější

note:

• 3 principy: pořadí, specificita, důležitost

1. Pořadí rozhoduje a poslední vyhraje

p {
    color: crimson;
}

p {
    color: cornflowerblue;
}

note:

• Kdo se směje naposled, ten se směje nejlíp.
• Ale to je spíš vzácnější případ.

2. Selektor s vyšší váhou (specifitou) vyhrává.

section p {
    color: crimson;
}

p {
    color: cornflowerblue;
}

note:

• čím konkrétněji je popsán prvek, tím má pravidlo vyšší váhu
• čím konkrétněji ~ čím vyšší specificita
• ukážeme si ve cvičení 3

Specificita je hodnota, která vyjadřuje přesnost zacílení daného selektoru (má číselnou hodnotu, více o tom v článku Smashing Magazine).

Pamatuj si, že pravidlo se vyšší specificitou se uplatní bez ohledu na pořadí v kódu. Teprve střetnou-li se stejně „silná“ pravidla, vítězí to, které je ve stylopise později.

Porovnání se skutečným světem:

vyndej | cokoli | svetr | svetr ze skříně | její svetr ze skříně | její vytahaný svetr ze skříně*

selektor | * | li | ul li | ul .nav-item | .nav > .nav-item

* Jedná se o příměr, ber s rezervou

• naznačíme mezerou

/* seznamu v navigaci (neplatí pro ostatní seznamy) odeber odrážky */

nav ul {
  list-style: none;
}

/* odkazy uvnitř prvků s třídou .perex (a jenom tam) vypiš chrpovou */

.perex a {
  color: cornflowerblue;
}

• předchozí pravdla lze zpřesnit (dát jim vyšší specificitu)

/* odrážky se odeberou jen na první úrovni navigace odrážek, na zanořený seznam se pravidlo nevztahuje */

nav > ul {
  list-style-type: square;
}

<!-- Novinky a Starosti bez odrážek, ročníky s odrážkou -->
<nav>
  <ul>
    <li><a href="novinky.html">Novinky</a></li>
    <li>
      <a href="starosti.html">Starosti</a>
      <ul>
        <li><a href="2017">2017</a></li>
        <li><a href="2016">2016</a></li>
        <li><a href="2015">2015</a></li>
      </ul>
    </li>
  </ul>
</nav>

Jiný příklad

/* odkazy uvnitř prvků s třídou .perex, které jsou jeho přímým potomkem vypiš kaštanovou */

.perex > a {
  color: maroon;
}

<div class="perex">
  <p>Text odstavce <a href="#">odkaz na zajímavý zdroj</a>, další text</p>
  <a href="#">odkaz na celý článek</a
  ><!-- tento odkaz bude kaštanovou barvou, předchozí odkaz ne -->
</div>

• používat s rozumem, pokud nás prosazení pravidla nutí řadit více než tři třídy, bude vhodnější přidat třídu novou

/* .perex, který má současně třídu .main vykresli se slonovinovým pozadím */

.perex.main {
  background-color: ivory;
}

• předchozí zápis podbarví tento prvek:

<p class="perex main">Úvodní odstavec nějakého článku…</p>

• Specificity calculator
• Specificity with Fish
• CSS specificity Wars

3. pravidlo označené jako důležité, vyhraje vždy

p {
  font-size: 1rem !important;
}

note:

• atomový kufřík, když jiné možnosti selžou: snažte se nepoužívat
• hrozí, že se uškvaříte v importantovém pekle
• Dá se přebít !important?
• 2 případy, kdy lze použít
  1. potřebuji přebít CSS 3. strany (plugin), do nějž nemohu zasáhnout, případně nastavuje styly pomocí JS (inline styly => nejvyšší specificita)
  2. zdědila jsem prastaré a spletité CSS, které by nejlíp bylo zahodit a napsat znova, ale na to není čas=peníze
  3. Tzv. utility třídy, viz Tachyons

• Zadaný v classrooms
• Ukážeme si co je třeba