Selektoriai ir kaskada

Puslapis teisingas, bet atrodo kaip 1995-ieji. Laikas jį apiforminti — su CSS. Ši pamoka yra apie tris dalykus, kurie paaiškina beveik kiekvieną stiliaus problemą: kaip nurodai elementus, kaip naršyklė sprendžia, kuri taisyklė laimi, ir kaip vieną spalvą pakeisti vienoje vietoje.

Trys būdai prikabinti stilius

Stilius prie puslapio galima prikabinti trimis būdais:

<p style="color: red">              <!-- inline — venk -->
<style> p { color: red } </style>   <!-- puslapyje — retkarčiais -->
<link rel="stylesheet" href="style.css">   <!-- šitą -->

Naudok trečiąjį. Vienas stiliaus failas, prikabintas prie kiekvieno puslapio, reiškia vieną vietą, kurioje keiti visos svetainės išvaizdą. Inline stiliai išbarsto tą patį sprendimą per šimtą elementų — ir vėliau jie dar kausis su tavo JavaScript dėl elemento valdymo. Atskirumas — HTML sako kas yra, CSS sako kaip atrodo — ir yra visa esmė.

Selektoriai: kaip parodai, į ką taikaisi

CSS taisyklė prasideda selektoriumi — juo pasakai, kuriuos elementus apiforminti:

h1              { }   /* kiekvieną h1 */
.card           { }   /* kiekvieną elementą su class="card" */
#fav-count      { }   /* vienintelį elementą su tokiu id */
.card p         { }   /* pastraipas kortelės viduje */
.nav-link:hover { }   /* kol ant jo pelė */
[data-theme="light"] { }  /* pagal atributą — jį naudosime šiandien */

Klasė — apiforminimui, id — tapatybei. Klasę gali naudoti daug kartų, ir būtent ja apiformini. Id turi būti unikalus puslapyje ir iš tikrųjų skirtas nuorodoms bei elementui rasti iš JavaScript. Apiforminti pagal id veikia — ir įvaro į kampą, dėl priežasčių, kurios paaiškės po dviejų skyrių.

Kaip pasirinktum „pirmą kortelę galerijoje"? Pagalvok, prieš skaitydamas toliau. — :first-child. Yra visa šeima tokių pseudoklasių, ir jų nesimokai atmintinai — susirandi. Bet turi žinoti, kad jos egzistuoja, kitaip pridėsi klasių, kurių nereikia.

Kaskada: kai dvi taisyklės kaunasi

Tai — tikroji pamokos teorija. Įsivaizduok tris taisykles tam pačiam elementui:

p      { color: blue; }
.intro { color: green; }
#lead  { color: red; }

Elementas yra <p class="intro" id="lead">. Kuri spalva laimi? Apsispręsk, prieš tikrindamas. — Laimi raudona.

Taisyklė paprasta: id nugali klasę, klasė nugali elementą. O tarp vienodo svorio taisyklių laimi ta, kuri parašyta vėliau. Tai beveik viskas — ir tai paaiškina beveik kiekvieną „kodėl mano CSS neveikia" klausimą, kurį kada nors užduosi.

Dabar sulaužyk du kartus (atsidaryk tuščią bandomąjį failą ir įklijuok šias tris taisykles).

1. Kūjis. Prie mėlynos taisyklės pridėk !important:

p { color: blue !important; }

Dabar laimi mėlyna, ir nieko nebepakeisi be dar vieno !important. Kiekvienąkart jį panaudojęs padarai kitą pakeitimą sunkesnį. Jei tau reikia !important, tavo selektoriai neteisingi — taisyk juos, ne dangstyk.

2. Taisyklė, kuri nieko nedaro. Parašyk .card p { color: red } pastraipai, kuri nėra kortelės viduje. Niekas nepasikeis. Atsidaryk elementą naršyklės įrankiuose (F12 → Elements → Styles): pritaikytos taisyklės išvardytos, perrašytosios — perbrauktos, o tos, kurios niekada neatitiko, tiesiog nerodomos. Tas skydelis atsako į klausimą greičiau nei spoksojimas į failą — kiekvieną kartą.