Undersøg selektorer
CSS-selektorer bruges til at vælge de elementer, der skal anvendes typografi. Selektorer giver stor fleksibilitet og kraft. Vælgere giver dig mulighed for at anvende en typografi på alle elementer eller på et bestemt element og endda et bestemt bogstav.
Der er tre kernetyper af selektorer:
- Elementer
- Klasser
- Id'er
Ved hjælp af disse selektorer kan du anvende typografier på mange elementer eller nogle få.
Elementvælgere
En elementvælger gælder for alle elementer med det pågældende mærke. Alle HTML-elementer kan bruges som en elementvælger. Ved hjælp af h1 kan du redigere alle h1 elementer på siden.
h1 {
/* style */
}
Klassevælgere
Alle HTML-elementer gør det muligt at tilføje en class attribut.
class bruges til at gruppere elementer sammen og give dig mulighed for at markere dem til anvendelse af CSS-indstillinger.
Når du opretter et CV, har du sektioner til din uddannelses- og beskæftigelseshistorik. Hvis du bruger en klasse, kan du formatere disse elementer med samme typografi.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
I det forrige eksempel vil du sandsynligvis have, at formateringen for hver div skal være den samme, som de viser lignende typer oplysninger. Ved at markere de to div elementer med samme klasse kan du anvende den samme CSS-typografi på hver enkelt.
Hvis du vil identificere en klasse i CSS, skal du præfikse en . foran navnet. I vores eksempel skal du bruge .history.
.history {
/* your styles */
}
Hvis du bruger en CSS-fil, skal du skrive klassetypografidefinitionen i CSS-filen. Klasseattributten i HTML refererer til definitionen fra CSS-filen.
Pseudoklasser
Pseudoklasser gør det muligt for dig at identificere elementer baseret på deres placering på en side, eller hvordan brugeren interagerer med dem.
Når en bruger interagerer med en webside, ændres tilstanden af forskellige elementer. En bruger kan holde musen over et element, og du vil gerne have, at farven ændres, når brugeren holder markøren. Eller hvis brugeren har valgt et link. Når de har besøgt dette link, kan du give dem besked ved at ændre stilen. CSS understøtter mange pseudoklasser, som anvendes dynamisk baseret på, hvad brugeren gør eller har gjort. Pseudoklasser har præfikset en :og placeres efter en anden selektor.
Hvis du f.eks. vil angive baggrundsfarven for et link til gul, når en bruger holder markøren over det, kan du bruge følgende CSS:
a:hover {
background-color: yellow;
}
Nogle af de mest almindelige pseudoklasser er angivet i følgende tabel:
| Pseudoklasse | Beskrivelse |
|---|---|
hover |
Brugeren holder markøren over et element |
visited |
Et link, der tidligere er blevet klikket på |
link |
Et ikke-overvåget link |
first-child |
Det første underordnede element, der matcher vælgeren i et hierarki |
last-child |
Det sidste underordnede element, der matcher vælgeren i et hierarki |
Vigtig
Ved hjælp af pseudoelementer og CSS kan du fjerne understregningen fra links. Som hovedregel er det bedst at lade understregningen stå i forbindelse med tilgængelighed. Den understregede tekst gør det muligt for en bruger hurtigt at identificere links på en side.
ID-vælgere
På samme måde som med klasser giver et id dig mulighed for at anvende en typografi på et element. Men selvom en klasse kan anvendes på flere elementer, skal et id være entydigt og kun referere til ét element.
På et CV har du muligvis et afsnit til sociale medier, f.eks. X, GitHub eller din blog. Hvis du vil have en brugerdefineret typografi for sektionen, kan du angive et id:
<div id="social-media">
<!-- list of links -->
</div>
Id'er har et præfiks med et # i CSS:
#social-media {
/* style */
}
Seddel
Standardkonvention for navngivning af klasser og id'er er at bruge "spyd-casing". Hvert ord er skrevet med små bogstaver og adskilt med et -. Navnet skewer-case kommer fra, hvordan ordene ser ud, som om de kunne være på en spyd.