CSS

Cascading Style Sheets
Utvidelse.css
MIME-typetext/css
Utviklet avW3C
1. utgivelse17. desember 1996
Nettstedwww.w3.org/TR/CSS

CSS (akronym for Cascading Style Sheets ) , i informatikk , er et språk som brukes til å definere formateringen av HTML- , XHTML- og XML -dokumenter , for eksempel nettsteder og relaterte nettsider . Reglene for å lage CSS finnes i et sett med direktiver ( anbefalinger ) utstedt siden 1996 av W3C .

Innføringen av CSS var nødvendig for å skille innholdet på HTML-sider fra deres formatering eller layout og for å tillate klarere og enklere å bruke programmering , både for forfatterne av sidene selv og for brukerne, samtidig som man garanterer gjenbruk av kode og det er lettere vedlikehold.

Historie

For å la forfattere fritt kunne forme utseendet til nettsider , presenterte Netscape Navigator og Internet Explorer , de to navigasjonsprogramvarene som brukere bestred i den velkjente nettleserkrigen , fra 1993 og fremover proprietære tagger , dvs. at de ikke fulgte standarder. kompatibel med konkurrerende nettlesere. Et eksempel på disse kodene var <font>at de definerte fonten til tegnene.

Disse proprietære formateringskodene var den eneste måten for forfattere å definere formatering på, så bruken ble veldig intensiv. Disse taggene hadde imidlertid tre problemer:

  1. Det første problemet er lengden på taggene. Sammenlignet med en side som bruker CSS-språk, er en side som ikke bruker det vanligvis tyngre (i form av biter ) i et forhold som ofte når 0,2 %. I tillegg kan CSS-instruksjoner pakkes inn i en ekstern fil som forblir bufret i nettleseren, noe som ytterligere reduserer mengden dataservere som må overføre.
  2. Det andre problemet er mangelen på logikk i (X) HTML-koden. Faktisk innebærer en ikke-kompatibel, redundant og forvirrende kode mye ekstra arbeid for nettlesere, som må prøve å korrigere og tolke (når det er mulig) vilkårlige direktiver.
  3. Det tredje problemet er mangelen på kompatibilitet med håndholdte datamaskiner og smarttelefoner . Disse sidene er faktisk laget for skjermer med en minimumsoppløsning på 800 × 600 piksler. Enheter som palmtops (eller mer moderne nettbrett ) som kan ha en lavere oppløsning og en skjermform som er svært forskjellig fra 4:3-forholdet på dataskjermer , kan derfor ikke vise siden riktig, med det resultat at brukeren vil finne en forvirrende og ubehagelig side å lese.

Et annet problem var, på ikke-standardiserte nettsider, bruken av taggen <table>( tabellene ) for å lage layouten til nettsidene. Tabelllayout anses foraktelig av purister, ettersom tabeller er designet for å layoute tabelldata og ikke weboppsett . I tillegg til dette har bruken av tabeller også praktiske ulemper: øke vekten på sidene, som allerede indikert i oppgave 1, og forverret tilgjengelighet, da den logiske rekkefølgen av dataene kan måtte ofres av layouthensyn.

En annen måte å lage nettsteder på på 90- og 2000-tallet (inntil den ble forlatt 31. desember 2020 av Adobe [1] ) var Adobe Flash som tillot (på en vektoriell måte) å lage animasjoner, transformasjoner og generelt en veldig mer iøynefallende enn HTML og CSS. Dessuten tillot det å integrere hvilken som helst skrift selv om brukeren ikke hadde den på enheten sin. Disse problemene ble løst med HTML5 og CSS3.

Et annet problem var å lage formateringen av HTML-sidene ved å bygge inn stilene i kodene og skrifttypen i (nå avviklet) "font"-taggen. Dette gjorde koden komplisert og ofte rotete. For eksempel:

< p style = "farge: blå; skriftstørrelse: 46px;" >       Wikipedia er et leksikon     </ p >

CSS

For å prøve å løse denne situasjonen ga W3C ut spesifikasjonen CSS 1 i 1996. CSS 1 var en interessant måte å skille innhold fra formatering på . Grunnlaget for dette språket besto faktisk i det faktum at innholdet alltid ville bli definert av (X) HTML-koden, mens formateringen ville bli overført til en helt egen kode , CSS. Referansene mellom de to kodene ble gjort gjennom to spesielle attributter: klasse og ID . Disse spesifikasjonene:

  1. De var en effektiv løsning på det første problemet (unntatt tag-problemet <table>) fordi de reduserte størrelsen på sidene kraftig.
  2. De løste den andre delvis fordi de tillot (X) HTML-koden å returnere i stor grad enkel og essensiell, men hadde noen mangler som tvang bruken av HTML-tagger.
  3. Imidlertid tok de ikke hensyn til det tredje problemet, gitt at i 1996 var PDAer (håndholdte) knapt utbredt.

CSS utviklet en enkel, men effektiv idé, men til tross for deres store potensial var de mislykkede på grunn av mangelen på nettlesere som kunne støtte dem.

CSS 2 og CSS 2.1

For å inkludere de nye funksjonene og gjøre CSS til et godt støttet språk, ga W3C ut CSS 2-spesifikasjonen i 1998. I 2004 begynte arbeidet med den oppdaterte CSS 2.1-spesifikasjonen som ble en offisiell anbefaling 7. juni 2011. CSS 2 er naturlig utvikling av CSS 1 og tilbyr kraftige løsninger for å løse fremfor alt det tredje problemet, med muligheten for å lage separate stilark for bærbare enheter. Til og med det andre problemet er nå fullt løsbart, ved å skrive en (X) HTML-side eksklusivt adressert til strukturen og innholdet og deretter manipulere den utelukkende med CSS for å layoute den.

Fra og med Internet Explorer 5 , Firefox og Opera 7 , har CSS 2 vært i stand til å bruke nettlesere som er i stand til å tolke dem og har derfor blitt en del av koden til mange nettsteder.

De første typene oppsett uten tabeller (vanligvis en, to eller tre kolonner) begynte å bli opprettet [2] [3] :

  • fast layout: hadde en standardstørrelse på alle enheter.
  • flytelastisk layout: bredden varierte ettersom bredden på nettleservinduet varierte, men ved svært store skjermer utvidet tekstene seg mye og oppsettet presenterte veldig lange tekstlinjer og irriterende å lese.

CSS 3

I motsetning til CSS 2-spesifikasjonen, som består av en enkelt spesifikasjon, består CSS3-spesifikasjonen av separate seksjoner kalt "moduler". På grunn av denne modulariseringen har CSS3-spesifikasjonene forskjellige tilstander for fremgang og stabilitet. [4] Fra november 2014 ble fem moduler formelt publisert av W3C som anbefalinger :

HTML og CSS3 utgjør et komplett turing -språk [5] [6] , en tilstrekkelig betingelse for at et språk kan anses som et programmeringsspråk .

CSS3 presenterer nye muligheter og egenskaper sammenlignet med CSS2 [7] [8] . De viktigste er:

  • muligheten til å bruke CSS-kode i stedet for bilder (jpg, png ...) for å lage transparenter, avrundede kanter og skygger
  • muligheten til å lage animasjoner , transformasjoner og skalaer slik det var mulig å gjøre med Adobe Flash
  • nye velgere og klasser
  • muligheten til å tilpasse oppsettet av nettsider til ulike enheter og medier, ikke lenger ved å bruke flere stilark for hver enhet, men bare ett som tilpasser siden til alle.
  • muligheten til å erstatte JavaScript for å lage verktøytips , bildegallerier og mer [9] [10] [11] .
EIENDOM CSS3 TYPER EKSEMPEL
Velgere
Grunnleggende velgere
  • Universalvelger
  • Typevelgere
  • Klassevelgere
  • ID-velgere
 * {fargen rød}

h1 {farge: rød}

.title {farge: rød}

#tittel {farge: rød}

Kombinatoriske eller relasjonsvelgere
  • Etterkommervelger
  • Barnevelger
  • Tilstøtende søskenvelger
  • Generalselger av søsken
 div # container p {farge: rød}

body> p {farge: rød}

h1 + h2 {farge: rød}

h1 ~ h2 {farge: rød}

Attributtvelgere
  • E [attributt]
  • E [attributt = verdi]
  • E [attributt ~ = verdi]
  • E [attributt | = verdi]
  • E [attributt ^ = verdi]
  • E [attributt $ = verdi]
  • E [attributt * = verdi]
 en [tittel] {farge: blå}

a [tittel = "Lorem"] {farge: blå}

a [tittel ~ = "dolor"] {farge: blå}

a [tittel ^ = "Lorem"] {farge: blå}

a [tittel $ = "amet"] {farge: blå}

a [tittel * = "dolor"] {farge: blå}

Strukturelle pseudo-klasser og pseudo-klasser
  • E: rot
  • E: n. barn ()
  • E: n. siste barn ()
  • E: siste barn
  • E: enebarn
  • E: nth-of-type ()
  • E: nth-last-of-type ()
  • E: den første av typen
  • E: siste av typen
  • E: bare av typen
  • E: tom
 : rot {bakgrunnsfarge: rød}
Andre pseudo-klasser
  • Pseudo-klasse:target
  • Pseudo-klasse:not
  • Pseudo-klasser av tilstandene til elementene i brukergrensesnittet (brukergrensesnitt):
    • E:enabled
    • E:disabled
    • E:checked
 div: mål {border: 3px}

div: ikke (.black) {farge: rød}

input: aktivert {farge: rød}

Pseudo-klasser for validering
  • : standard
  • : gyldig
  • : ugyldig
  • : innen rekkevidde
  • : ute av rekkevidde
  • : nødvendig
  • : valgfritt
  • : skrivebeskyttet
  • : Les Skriv
 : standard {bakgrunn: rød}
Pseudo-elementer
  • ::first-letter
  • ::first-line
  • ::before
  • ::after
 :: første bokstav {farge: rød}
Farge
Opasitet opasitet div {bakgrunn: hvit; farge svart; opasitet: 0,5}
RGBa farge rgb

rgba

body {bakgrunnsfarge: rgb (100%, 100%, 100%)}

_____________________

body {bakgrunnsfarge: rgb (255, 255, 255)}

_____________________

body {bakgrunnsfarge: rgba (255, 255, 255, 0.5)}

HSLa farge hsl

hsla

body {bakgrunnsfarge: hsl (0, 100%, 50%)}

__________________

# box1 {bakgrunnsfarge: hsla (0,100 %, 100 %, 0,5); }

Kanter
Avrundede hjørner
  • border-top-venstre-radius
  • border-top-right-radius
  • kant-nederst-høyre-radius
  • kant-nederst-venstre-radius
  • grense-radius
 # box1 {border-top-left-radius: 20px}
Dekorerte kanter grense-bilde #border {border-image: url (border.png) 27 27 27 27 runde runde; }
Skygger av beholderne boks-skygge box-shadow: 5px 5px 10px 2px # 333333;
Bakgrunner
Flere bakgrunner url ( første bilde ), url ( andre bilde ), ... bakgrunnsbilde: url (image1.png), url (image2.png);
Klipp av bakgrunnsbildet
  • border-box
  • padding-box
  • content-box
 #box {background-clip: border-box}

#box {background-clip: padding-box}

#boks {bakgrunnsklipp: innholdsboks}

Plassering av bakgrunnsbildet
  • border-box
  • padding-box
  • content-box
 bakgrunn-opprinnelse: polstring-boks;
Bakgrunnsstørrelse
  • størrelse uttrykt i prosent;
  • dimensjon uttrykt med en måleenhet;
  • eiendom cover;
  • eiendom contain.
 bakgrunnsstørrelse: 50 % 50 %;

bakgrunnsstørrelse: 200px 50px;

bakgrunnsstørrelse: cover;

bakgrunnsstørrelse: inneholde;

Gradienter som bakgrunnsbilder lineær gradient bakgrunnsbilde: lineær gradient (øverst til høyre, #FFFFFF 0%, #AACFEF 100%);
Tekst og font
Nettfonter

(alternativ til Google-fonter )

@ font-face @ font-face { font-family: myFirstFont; src: url (sansation_light.woff);

}

Tekstpause ordomslag: #boks {ord-wrap: break-word; }
Skygge under teksten tekst-skygge: p {tekstskygge: 2px 2px 3px # 333;}
Tekstorientering (for eksempel for språk der teksten er vertikal) [12] [13] [14] skrivemodus: "verdi" ;

tekstorientering: "verdi" ;

tekstorientering: blandet;

oppreist;

sideveis-høyre;

sidelengs;

bruk-glyph-orientering;

arve;

første;

første;

ett sett;

skrive-modus: horisontal-tb;

vertikal-rl;

vertikal-lr;

arve;

førstegangs;

gå tilbake;

ett sett;

Spesielle karakterer innhold: " spesialtegn "; h1: etter { innhold: '\ 00A7';

}

Tekstens retning horisontal-tb;

vertikal-rl;

s. innhold1 { skrive-modus: horisontal-tb;

}

Tekstoversikt bredde:

farge:

h1 {tekststrek: 1px svart;}
Tekstpause tekst-overflyt: klipp;

tekst-overløp: ellips ellipsis;

tekst-overflyt: ellipsis "[..]";

Globale verdier:

  • arve;
  • første;
  • gå tilbake;
  • ett sett;
 .overflow-clip-clip

{text-overflow: clip clip;}

.overflow-clip-ellipsis {text-overflow: clip ellipsis;}

.overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;}

Layout og boksmodell
Overskudd overløp-x:

overløp-y:

# box2 {overflow-x: skjult; }
Plassering av containere boksstørrelse: # boks1 {boksstørrelse: innholdsboks; }
Oppsett med flere kolonner
  • Grunnleggende egenskaper:
    • kolonnebredde
    • kolonneantall
    • kolonne-gap
    • kolonne-regel
  • For trykte sider:
    • break-before
    • break-after
    • break-inside
  • Kolonnehåndtering
    • kolonnespenn
    • kolonnefylling
 #container {bredde: 750px; margin: 20px auto; kolonnebredde: 350px; kolonne-gap: 25px; }
Fleksibel bokslayout
  • Display: boks
  • Orientering av boksene
  • Retning og rekkefølge av gropene
  • Justering og plass boks-innrett boks-pakke Fleksible bokser
 display: boks;

boks-orientert: vertikal;

box-align: center;

box-pack: rettferdiggjøre;

box-flex: 1;

Gjennomsnittlig søk
  • all: CSS gjelder for alle skjermenheter;
  • screen: dataskjerm;
  • print: trykt side;
  • projection: presentasjoner og visninger;
  • speech: enheter for talesyntese;
  • braille: støtter basert på bruk av blindeskrift;
  • embossed: blindeskriftskrivere;
  • handheld: mobile enheter med små skjermer og nettlesere med begrensede grafikkmuligheter;
  • tty: enheter med fast karakter som terminaler;
  • tv: vises på TV-skjermer
 @medieskjerm og (farge) { css-regler }
Overganger, transformasjoner og animasjoner
Overganger
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
 div {transition-property: bakgrunnsfarge; overgang-varighet: 2s; }
Transformasjoner
  • transformere og transformere-opprinnelse
  • matrise
  • oversette
  • trapp
  • rotere
  • skjevhet
  • flere transformasjoner
 transformere: rotere (40 grader);

transform-origin: venstre bunn;

matrise (a, b, c, d, tx, ty);

transform: translate (10px, 10px);

transform: skala (0,5);

transformere: rotere (180 grader);

transform: skjevt (15 grader, 20 grader);

transformere: rotere (180 grader) skjevt (20 grader, 30 grader) skala (2);

Animasjoner @keyframe
  • animasjonsnavn
  • animasjon-varighet
  • animasjon-iterasjon-telling
  • animasjon-timing-funksjon
  1. letthet;
  2. lineær;
  3. lette inn;
  4. lette ut;
  5. lette inn-ut;
  6. kubikk-bezier.
 @keyframes 'puls' {fra {bakgrunnsfarge: rød; opasitet: 1,0; -transform: skala (1.0) rotere (0grader); }
Grafikk
Filtre filter: ingen | uskarphet () | lysstyrke () | kontrast () | drop-shadow () | gråtoner () | fargetone-rotere () | inverter () | opasitet () | mettet () | sepia () | url (); img { filter: uskarphet (5px);

}

Masker
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
 mask: url(masks.svg#star) luminance;

Funksjoner

Koden

Å sette inn CSS-kode på nettsider kan gjøres på tre forskjellige måter:

  • Ved å sette inn i taggen <head>til siden i HTML-kode en lenke til et eksternt stilark, det vil si en fil merket med filtypen .css som i de følgende eksemplene, gjennom link -taggen eller gjennom importdirektivet , som også kan brukes i de samme filene . css for å koble flere filer sammen:
< html > < head > < title > Eksempel </ title > < link rel = "stylesheet" type = "text / css" href = "style_sheet.css" /> </ head > eller < html > < head > < title > Eksempel </ title > < style type = "text / css" > @ import url ( style_sheet . css ) ; </ style > </ head >

denne løsningen garanterer maksimalt mulig gjenbruk av kode siden den kan kalles opp på hver av de ønskede HTML-nettsidene.

  • Setter inn, alltid innenfor <head>mellom de spesifikke kodene <style>og </style>css-deklarasjonene.
< html > < head > < title > Eksempel </ title > < style type = "text / css" > css -kode </ style > </ head >

Denne løsningen garanterer mindre gjenbruk av kode enn den forrige siden den kun kan brukes på HTML-siden der den er deklarert.

  • Innebygd i elementene
<tag style = "CSS-erklæringer"> ... </tag>

Denne løsningen garanterer enda mindre gjenbruk av kode enn den forrige.

Regler

Et CSS-stilark er syntaktisk strukturert som en sekvens av regler , som er par som består av en velger og en blokk med deklarasjoner , omsluttet av krøllede parenteser. En velger er et predikat som identifiserer visse elementer i HTML-dokumentet; en erklæring, atskilt med semikolon fra de andre, består i sin tur av en egenskap , det vil si en stilstrek (som fargen på teksten) og en verdi som skal tildeles sistnevnte (for eksempel blå). atskilt med et kolon.

selector1 { property1 : value1 ; eiendom2 : verdi2 ; } velger2 { egenskap3 : verdi3 }

Velgere

Noen av hovedtypene velgere er beskrevet nedenfor.

Typevelgere

Typevelgere bruker regelen på alle sideelementer av den gitte typen. Eksempler:

kropp { [...] }

eller

p { [...] } Klassevelgere

Klasser bruker regelen på alle elementer på siden som har egenskapen class="nome_classe". CSS-syntaksen er som følger:

. klassenavn { [...] } Identifikatorvelgere

Identifikatorer (vanligvis ID -er ) bruker regelen på det elementet på siden som har egenskapen id="nome_identificatore". IDer skiller unike elementer . CSS-syntaksen er som følger:

# identifier_name { [...] } Pseudoklassevelgere

Pseudoklasser identifiserer elementer basert på egenskapene deres.

  • first-child matcher et element bare hvis det er det første barnet til det overordnede elementet. Så da
p : første barn { [...] }

den finner bare det første avsnittet i (X) HTML-koden nedenfor.

< body > < p > Lorem ipsum </ p > < p > Lorem ipsum </ p > < p > Lorem ipsum </ p > </ body >
  • lenke og besøkte gjelder lenker. Den første identifiserer lenker som ikke er besøkt, den andre de besøkte. CSS-syntaksen er:
til : link { [...] }
  • aktiv , fokus og hover identifiserer elementer bare under spesielle forhold, det første hvis elementet er aktivt, det andre hvis det er valgt, det tredje hvis musepekeren er over det. Derfor
p : hover { [...] }

den vil bare gjelde hvis musepekeren går over et avsnitt og bare for tiden som blir værende der.

  • lang brukes til å identifisere elementer i et bestemt språk, men støtten er begrenset.
Pseudo-elementvelgere

Pseudo-elementer identifiserer bare en del av et element, uten behov for å bruke (X) HTML-markering.

  • første linje finner bare den første linjen i et avsnitt. Hvis nettleservinduet endrer størrelse, vil det automatisk tilpasse seg den nye linjestørrelsen. CSS-syntaksen er som følger:
p :: førstelinje { [...] }
  • første bokstav samsvarer bare med det første tegnet i et element.
  • før og etter er to pseudoklasser som brukes i opprettelsen av det genererte innholdet . De identifiserer ikke et element, men et sted å lage innholdet. De er lite brukt, gitt mangel på støtte for Internet Explorer.
Hierarkivelgere

De identifiserer bare elementer som finnes i et bestemt forhold som stammer fra trestrukturen til (X) HTML-dokumentet, for eksempel avstamning, avkom, brorskap.

  • Etterkommervelgeren identifiserer bare elementer som finnes i andre elementer. Som dette
p span { [...] }

identifiserer bare elementene <span>i elementene <p>.

  • I stedet identifiserer den underordnede velgeren bare elementer som er inneholdt direkte i det overordnede elementet. Som dette
div > p { [...] }

finner bare <p>innhold direkte i en <div>.

  • Søskenvelgeren identifiserer det første elementet umiddelbart etter et annet som det deler samme forelder med. Som dette
h1 + p { [...] }

identifiserer bare den første <p>broren til<h1>

Attributtvelgere

Attributtvelgeren tillater, gjennom følgende syntaks, å identifisere (X) HTML-elementer basert på deres attributter.

a [ tittel = Eksempel ] { [...] }

Denne regelen gjelder bare for elementer <a>som har attributtet title="Esempio". Attributtvelgerne er mange og vil tillate utmerket kontroll over siden, men Internet Explorer støtter dem ikke og bruken er derfor svært begrenset.

CSS-rutenett

CSS Grids er et todimensjonalt layoutsystem, noe som betyr at det kan håndtere både kolonner og rader, i motsetning til flexbox som stort sett er et endimensjonalt system. CSS-regler gjelder både for et overordnet element (som blir Grid Container) og underordnede av det elementet (som blir Grid Items) [15] .

CSS .grid-container { display: rutenett; rutenett-mal-kolonner: auto auto auto; bakgrunnsfarge: # 2196F3; polstring: 10px; } .grid-item { bakgrunnsfarge: rgba (255, 255, 255, 0,8); kantlinje: 1px solid rgba (0, 0, 0, 0,8); polstring: 20px; skriftstørrelse: 30px; tekst-align: center; } -------------------------------------------- HTML < div class = "grid-container" > < div class = "grid-item" > 1 </ div > < div class = "grid-item" > 2 </ div > </ div >

CSS for utskrift

Med CSS kan du sørge for at brukeren, hvis han skriver ut en nettside, bare skriver ut enkelte elementer på siden og ikke alle. Vanligvis fjernes menyen, bakgrunnsbildet og reklamebannerne fra den trykte siden. Hvis nettsiden er spesielt rik på grafikk og paginert på en kreativ og ikke-standard måte, har den en tendens til å bli skrevet ut på en mer klassisk og standard måte [16] [17] . Et alternativ til CSS for utskrift er noen nettleserplugins som lar brukeren fjerne visse elementer på nettsiden fra utskrift [18] .

Eksempel på ekstern CSS for utskrift koblet til en HTML-webside:

< link rel = "stylesheet" href = "main.css" /> < link rel = "stylesheet" media = "print" href = "print.css" />

Eksempel på ekstern CSS for utskrift:

/ * main.css * / body { margin : 2 em ; farge : #fff ; bakgrunnsfarge : # 000 ; } / * print.css * / @ media print { body { margin : 0 ; farge : # 000 ; bakgrunnsfarge : #fff ; } }

Farger

Nettfarger er farger som brukes til å vise nettsider på World Wide Web og i metodene for å beskrive og spesifisere disse fargene. Farger kan spesifiseres som en RGB -triplett eller i hex -format (en hex-triplett ) eller i noen tilfeller med deres vanlige engelske navn. Et fargevelgerverktøy eller annen grafikkprogramvare brukes ofte til å generere fargeverdier. Et eksempel: #0099CC(en type blå som også kan skrives Pacific Blue).

Endre navnet på fargene

CSS3 lar deg endre navn på farger som du vil og huske dem senere [19] :

$ farge-donau : # 668DD1 ; / * RECALL * / $ farge-alfa : $ farge-donau ;

Opprette variabler

Sass ( Syntactically A wesome Style Sheets ) er en utvidelse av CSS-språket som lar deg bruke variabler , lage funksjoner og organisere stilarket i flere filer .

Less ( LESS ) er en CSS- forprosessor som utvider det vanlige CSS-språket som tillater (i tillegg til den normale syntaksen for stilark) også bruk av funksjoner , operatorer og variabler , nesting av instruksjoner, opprettelse av "mixins" og en rekke andre funksjoner som gjør koden enklere å skrive, vedlikeholde og forstå.

Egenskaper

CSS-egenskapene er mange. De mest brukte er:

  • bredde og høyde. Disse egenskapene brukes til å angi høyden og bredden til et bestemt element.
  • bakgrunn . Definerer bakgrunnen til et element. Det er en forkortelse egenskaper for bakgrunnsvedlegg , bakgrunnsfarge , bakgrunnsbilde , bakgrunnsposisjon og bakgrunnsgjenta .
  • grense . Definerer grensen til et element. Det er en forkortelse for egenskaper for kant-farge , kant-stil og kant-bredde .
  • farge . Definerer fargen på teksten til et element. Bakgrunnsegenskapen brukes til å definere bakgrunnen .
  • posisjon . Definerer typen posisjoneringsmetode som brukes for et element (statisk, relativ, fast, absolutt eller klebrig).
  • z-indeks . Angir rekkefølgen til et plassert element og dets etterkommere (over eller under de andre på siden).
  • flyte . Denne egenskapen definerer en flytende blokk , det vil si at den tillater arrangement av andre elementer på sidene.
  • font-familie . Definerer egenskapene til skriften. Det er en forkortelse for egenskaper for font-familie , font-size og font-weight .
  • marg og polstring . De definerer rommet rundt elementene. Det første er det ytre rommet ved kantene, det andre det indre rommet.
  • tekstjustering . Definerer justeringen av elementer, inkludert tekst.
  • viktig. Det gjør at en CSS-regel råder over de andre
  • min bredde og maks bredde . De lar deg få et element til å vises og forsvinne avhengig av størrelsen på enheten
  • klar. Forhindrer at andre flytende elementer vises ved siden av et element

Verdier

Hvis det ikke er spesifisert, antar en egenskap standardverdiene for hver nettleser, eller for det andre den valgte brukerstilen, ellers kan den anta ett av følgende:

  • arve
  • bil
  • Antall
  • prosentdel
  • farge
  • URI
  • font
  • andre typiske verdier for hver eiendom

Arvstrengen spesifiserer at egenskapen må arve verdien fra elementene som elementet stammer fra. Auto- strengen har svært forskjellige betydninger avhengig av egenskapen den er tilordnet.

Hvis tall er merket med en måleenhet, må denne enheten uttrykkes (unntatt når det gjelder null). Det må ikke være mellomrom mellom tallet og enheten, som i følgende eksempel:

p { margin : 5 px ; kantlinje : 1 em ; polstring : 0 ; }

Farger kan angis med mer enn ett system. For eksempel kan fargen oransje angis med:

oransje / * standardfarge * / rgb ( 255 , 165 , 0 ) / * rgb-format 0 til 255 * / rgb ( 100 %, 64 %, 0 %) / * du kan bruke prosenter * / rgba ( 255 , 165 , 0 , 1 ) / * du kan spesifisere alfa fra 0 til 1 * / hsl ( 39 , 100 %, 50 %) / * notasjon fargetone metning lyshet * / hsla ( 39 , 100 %, 50 %, 1 ) / * alfa kan spesifiseres * / # ffa600 / * heksadesimalt format RRGGBB * / # ffa600ff / * heksadesimalt format RRGGBBAA * / # fa0 / * heksadesimalt format RGB-tilnærming av startverdien * / # fa0f / * heksadesimalt format RGBA-tilnærming av startverdien * /

URL - en er angitt i skjemaene

url ( http : // eksempel . it / fil . html ) url ( "http://example.it/file.html" )

CSS lar deg indikere i fontfamilieegenskapen mer enn én font, eller en familie av fonter (serif og sans). På denne måten vil nettleseren bruke den første den finner installert på operativsystemet . Deklarasjonen bruker denne syntaksen:

p { font-family : "Arial" , "Verdana" , serif ; } CSS for SVG

Du kan bruke CSS til å endre stilene til SVG (del av HTML5) [20] . Eksempel:

svg { bakgrunnsfarge : beige ; }

CSS for HTML5 Canvas

<! DOCTYPE html> < html > < head > < title > Lerretselementstørrelse: 600 x 300, Lerrets tegningsoverflatestørrelse: 300 x 150 </ title > < style > body { background : #dddddd ; } # canvas { margin : 20 px ; polstring : 20 px ; bakgrunn : #ffffff ; kantlinje : tynn innfelt #aaaaaa ; bredde : 600 px ; høyde : 300 px ; } </ style > </ head > < body > < canvas id = "canvas" > Lerret støttes ikke </ canvas > </ body > </ html > Automatisk CSS-oppretting

Med grafikk- og bilderedigeringsprogrammer som Photshop er det mulig å konvertere lag til CSS-stiler [21] .

Bruke 3D

CSS3 introduserte egenskapen "3D Transform" som lar deg lage noen animasjoner og former i 3D, men som ikke kan sette likhetstegn mellom mulighetene til WebGL [22] [23] .

Nettleserstøtte for CSS

Følgende liste er over gjengivelsesmotorer fordi de er tildelt oppgaven med å formatere siden i henhold til CSS-instruksjonene.

Gecko ( Mozilla Firefox og Netscape Navigator ) Gecko har utmerket støtte for CSS 1,2 og 3 og brukes derfor ofte til å sjekke ytelsen til nettsider. Gecko og Mozilla Firefox er gratis programvare . Netscape Navigator (foreldet fra 1. mars 2008 [24] ) ble også distribuert under en gratis lisens . Trident ( Internet Explorer og AOL Explorer ) Internet Explorer (foreldet fra august 2020 [25] til fordel for Edge ), fra versjon 9 støttet den CSS 3. En særegenhet ved Internet Explorer var de såkalte betingede kommentarene som tillot deg å bruke CSS-regler bare på en viss versjon av Internett Utforsker . Denne funksjonen ble mye brukt der det ble antatt en bruker som fortsatt brukte gamle versjoner av Internet Explorer og derfor ofte krevde noen ekstra CSS-regler for riktig visning av nettsiden. [26] I mange tilfeller var det nødvendig å bruke ad-hoc CSS-stilregler utelukkende for Internet Explorer på grunn av betydelige forskjeller i måten enkelte versjoner av Internet Explorer avviker fra standardene, for eksempel " box modelikke-standarden" som brukes av noen versjoner av Internet Explorer og som skilte seg vesentlig fra det som ble pålagt av standardene til World Wide Web Consortium. [27] [28] Syntaksen for betingede kommentarer var som følger: <! - '' '[if IE]>' '' '' ad-hoc CSS-regler for Internet Explorer '' '' '<! [endif]' '' -> siden den <!--vanligvis introduserte en kommentar, tolket ikke andre nettlesere enn Explorer 5.0 eller høyere koden. Betingede kommentarer tillot deg å spesifisere et Internet Explorer-spesifikt stilark som følger: <! - [if IE]> <link rel = "stylesheet" type = "text / css" href = "'' 'ad-hoc_stylesheet_for_IE.css' ''"> <! [endif] ->

Trident og Internet Explorer er proprietær programvare .

Snart ( opera ) Presto tilbyr utmerket støtte for CSS 1,2 og 3. Opera tilbyr også et alternativ som lar brukeren deaktivere stilark eller bruke sine egne. Presto og Opera er proprietær programvare . KHTML og WebKit ( Safari , Google Chrome og Konqueror ) KHTML er for tiden motoren som tilbyr størst støtte for CSS, og tilbyr en nesten total tolkning av CSS 3. KHTML og WebKit er gratis programvare ; Safari og Google Chrome er proprietær programvare (vedlikeholdes av henholdsvis Apple og Google ), mens Konqueror er fri programvare ( lisensiert under GPL , vedlikeholdt av KDE -fellesskapet ).

I tillegg til kompatibilitetsforskjeller, legger hver gjengivelsesmotor til noen nye elementer eller egenskaper til standard CSS.

Vanligvis starter slike egenskaper med et prefiks som endres av nettleseren, for eksempel -webkitsom indikerer at egenskapen er for WebKit-gjengivelsesmotoren, for eksempel -webkit-appearance. Alle disse egenskapene bør imidlertid bare brukes når du bare vil bruke den nettleseren med den bestemte gjengivelsesmotoren, da alle disse egenskapene er tilleggsfunksjoner som kun er gyldige for den bestemte gjengivelsesmotoren og ikke er standardegenskaper definert av World Wide Web Consortium.

Edge HTML ( Microsoft Edge )

EdgeHTML støtter CSS godt, inkludert CSS3. EdgeHTML og Microsoft Edge er proprietær programvare .

Bruk på ulike enheter

Før ankomsten av CSS3 laget CSS2 flere CSS-filer for det samme nettstedet som lastet CSS-filen som tilsvarer enheten som brukes av brukeren. I HTML ble følgende syntaks spesifisert:

<link rel = "stylesheet" type = "text / css" href = "sheet.css" media = "skjerm" />

Den foregående koden tilordner kun stilarket til standard nettlesere for stasjonære og bærbare datamaskiner. Verdiene til "media"-attributtet er de samme som " media queries " CSS-regelen . Selv om det fortsatt er mulig å lage flere stilark for forskjellige medier og spesifisere dette i "link rel"-taggen, siden mediespørringer støttes av alle moderne nettlesere, bruker de fleste utviklere dem ettersom de tillater i et enkelt CSS-ark å tilpasse den relaterte HTML-en side til alle enheter som bruker langt færre kodelinjer [29] .

Reduksjon av serveranrop

Hver separat serverforespørsel ( tid til første byte eller TTFB) påvirker hastigheten (når du påkaller bilder, fonter, videoer, JS-elementer ... i koden). Med CSS kan du øke ytelsen til en side betraktelig ved å redusere antallet forespørsler.

Bilder

Bruk CSS3 for å unngå å bruke bilder (jpg, png, ...) for eksempel for avrundede hjørner, skygger, gradienter og transparenter.

Sprite

Bruk CSS Sprites , foreta et enkelt anrop til serveren ved å bruke et enkelt bilde som inneholder mange for flere deler av nettsiden (eller hele nettsiden).

Forminsk

Komprimer CSS-filer med " minify "-metoden for å redusere vekten av CSS-filen og dermed båndbredden som brukes til å hente denne filen fra serveren. Dette kan også gjøres med HTML- og JavaScript -sider [30] . På denne måten vil imidlertid koden være fri for mellomrom og modifikasjonen blir mer kompleks.

Det er også flere måter å oppnå samme resultat med CSS. Metoden du bør velge er den som lar deg skrive så lite kode som mulig for å minimere vekten av ".css"-filen. For eksempel:

. foo { farge : # ff0000 ; } . bar { farge : rgba ( 255 , 0 , 0 , 1 ); } /* TILSVARENDE */ . bar ,. _ foo { farge : rød }

Font

Ikke bruk for mange innebygde skrifter ( @ font-face og Google Fonts ).

Filnummer

Minimer antallet CSS-filer og antallet filer generelt. Tilpass for eksempel oppsettet av nettsider til ulike enheter og medier, ikke bruk flere stilark for hver enhet, men bare ett som tilpasser siden til alle mediespørringer . På denne måten vil serveren kalle kun ett CSS-ark.

JavaScript

Erstatt JavaScript med CSS for å lage verktøytips , bildegallerier og mer [9] [10] [11] . Faktisk krever CSS færre ressurser enn JS.

Foretrukket og alternative stilark

Som beskrevet kan flere stilark kobles til hver side. Det er imidlertid også mulig for brukeren å velge hvilke som skal søkes. For å gjøre dette må du først definere de permanente stilarkene, det vil si at de ikke kan deaktiveres, i henhold til syntaksen som allerede er sett. Deretter er de foretrukne arkene definert, dvs. aktive når siden er lastet inn, men kan deaktiveres ved å legge til attributtet <title>som i følgende eksempel:

<link rel = "stylesheet" type = "text / css" href = "favorite_sheet.css" title = "Eksempel1" />

På dette tidspunktet er det mulig å spesifisere alternative stilark, dvs. ikke aktive ved lasting, men som kan aktiveres av brukeren, som i følgende eksempel:

<link rel = " alternativt stilark" type = "tekst / css" href = "alternate_sheet.css" title = "Eksempel2" />

For å aktivere og deaktivere stilarkene kan brukeren bruke den aktuelle menyen i nettleseren, men Internet Explorer tilbød ikke denne muligheten, så det var nødvendig å lage et JavaScript -skript som utførte funksjonen til å erstatte arkene. Koden ble først publisert på A List Apart . Men selv om dette skriptet var enkelt for utviklere å implementere, krevde det en oppdatert nettleser med god DOM -støtte , i tillegg til å ha både JavaScript og informasjonskapsler aktivert . Et mer komplekst, men mye mer robust system kan være et serversideskript som PHP . Et eksempel er alltid tilgjengelig på samme side .

Mønster

Mønstre er uendelige gjentakende modulære figurer som vanligvis danner bakgrunnen til HTML-elementer som DIV-beholdere, knapper, nettsidebakgrunn, avsnitt. Du kan lage dem direkte i CSS, med bilder eller ved å slå sammen begge metodene, dvs. lage et basisbilde og gjenta det med bakgrunns-repeat- regelen [31] . I disse tre tilfellene er det ikke nødvendig å lage et bakgrunnsbilde av størrelsen på beholderen som ville veie mye mer.

Acid3

Acid3 er en test som det er mulig å verifisere at en nettleser følger med visse nettstandarder inkludert CSS3 [32] .

Stylus

Stylus er et dynamisk stilark-preprosessorspråk kompilert i Cascading Style Sheets (CSS). Designet er påvirket av Sass og LESS . Det regnes som den fjerde mest brukte CSS-forprosessorsyntaksen [33] . Det ble laget av TJ Holowaychuk, en tidligere Node.js-programmerer og skaper av Luna-språket. Det er skrevet i JADE og Node.js.

Velgere

I motsetning til CSS, som bruker krøllete parenteser for å åpne og lukke deklarasjonsblokker, brukes innrykk. Dessuten er semikolon (;) valgfritt utelatt. Så, følgende CSS:

kroppsfarge : hvit ; _ }

kan forkortes til:

kroppsfarge : hvit ; _

I tillegg er kolon (:) og komma (,) også valgfrie; dette betyr at ovenstående kan skrives som følger:

kroppsfarge hvit _

Variabler

Stylus lar deg definere variabler, men i motsetning til LESS og Sass, bruker den ikke et symbol for å definere variabler. I tillegg gjøres tilordningen av variabler automatisk ved å skille egenskapen og nøkkelordene. På denne måten ligner variabler på variabler i Python.

melding = 'Hei, verden!' div :: før innhold melding farge # ffffff

Stylus-kompilatoren vil oversette eksemplet ovenfor til:

div :: før { innhold : "Hei, verden!" ; farge : #ffffff ; }

Blandinger og funksjoner

Både blandinger og funksjoner er definert på samme måte, men brukes på forskjellige måter.

For eksempel:

border-radius ( n ) -webkit-border-radius n -moz-border-radius n border-radius n

så, for å inkludere det som en blanding:

div . kant-radius rektangel ( 10px )

som vil bli satt sammen til:

div . rektangel { -webkit- border-radius : 10 px ; -moz- kantradius : 10 px ; border-radius : 10 px ; }

Interpolering

For å inkludere variabler i argumenter og identifikatorer, er det krøllete parenteser rundt variablene. For eksempel,

-webkit- { 'border' + '-radius' }

tilsvarer

-webkit-border-radius

Dynamisk CSS

Dynamisk CSS, eller DCSS, er et begrep som omfatter et sett med teknologier som brukes sammen for å lage dynamiske stilark, ved å bruke en kombinasjon av et hvilket som helst server - side programmeringsspråk (som PHP / ASP / Perl / JSP ) og CSS ) [34] . Den første ideen til DCSS ble skrevet i juli 2002 av Jori Koolstra , en nederlandsk programmerer [35] .

DCSS lar deg jobbe med variabler i CSS og med dynamisk omskriving av CSS-kildekoden. Mange CMS -er har laget tilleggsmoduler, for eksempel Drupal .

Eksempel:

$ persistent = [ 'bgmast' => 'bbd9ee' , / * list * / 'fgmast' => '4d4d4d' , 'bgmenu' => 'e7e4d3' , / * menu * / 'fgmenu' => '444' , 'bgcont' => 'fff' , / * content * / 'fgcont' => '444' ];

Markørmodifisering med CSS

CSS kan generere en rekke forskjellige musepekere som brukeren vil se når de kommer til HTML -siden som inneholder dem [36] [37] :

Prosjekter som pågår

W3C utvikler noen CSS3-spesifikasjoner for å lage layouter som ligner de for magasiner og ukeblader, med muligheten til å kjøre tekst rundt bilder uten bakgrunn (PNG og GIF) og geometriske former [38] [39] [40] [41] .

Eksempler

Innebygd CSS

< div id = ”circle” style = "ekskluderingsform: poly (x1, y1, .., xN, yN)" > </ div > < div style = "region-tråd: innhold; ekskluderinger: #sirkel;" > </ div >

Ekstern CSS

. ekskludering { wrap-flow : begge ; posisjon : absolutt ; bredde : 200 px ; } . region { flyt-fra : artikkel ; boksstørrelse : border-box ; posisjon : absolutt ; bredde : 200 px ; høyde : 200 px ; polstring : 10 px ; }

CSS3-eksempler

  • Sammenligning av CSS3-logo laget med CSS, med SVG og med HTML5 Canvas

  • Sammenligning av noen CSS3-filtre og tilsvarende Gimp-filtre

  • Før CSS3 ble flere <p> brukt til å distribuere tekst over flere avsnitt. Bare én <p> kan brukes med CSS3.

  • Sammenligning av flere CSS2- og CSS3-bakgrunner. I det første tilfellet var det nødvendig med flere <img>-tagger, hver med en bakgrunn og en z-indeks, i det andre en enkelt <img> med flere bakgrunner

  • Sammenligning av GIMP, CSS3 og SVG maske

Standardisering

Rammer

CSS-rammeverk er forhåndsforberedte biblioteker som er ment å muliggjøre enklere, standardkompatibel styling av nettsider ved å bruke språket Cascading Style Sheets. CSS-rammeverk inkluderer Blueprint, Bootstrap , Cascade Framework, Foundation, MDBootstrap og Materialize. I likhet med biblioteker med programmerings- og skriptspråk, er CSS-rammeverk vanligvis innebygd som eksterne .css-ark som refereres til i HTML <head>. De gir en rekke ferdige alternativer for nettsidedesign og layout. Selv om mange av disse rammeverkene er publisert, bruker noen forfattere dem først og fremst for rask prototyping, eller for å lære av, og foretrekker å "manuelt lage" passende CSS for hvert publisert nettsted uten utforming, vedlikehold og nedlasting av mange ubrukte funksjoner. stilen på nettstedet.

Designmetodologier

Etter hvert som størrelsen på CSS-ressurser som brukes i et prosjekt øker, må et utviklingsteam ofte bestemme seg for en felles designmetodikk for å holde dem organisert. Målene er enkel utvikling, enkel samarbeid under utvikling og ytelse av distribuerte stilark i nettleseren. Populære metoder inkluderer OOCSS (Object Oriented CSS), ACSS (Atomic CSS), oCSS (Organic Cascade Style Sheet), SMACSS (Scalable and Modular Architecture for CSS) og BEM (Block, Element, Modifier)

Merknader

  1. ^ Flash og fremtiden for interaktivt innhold | Adobe Blog , på web.archive.org , 2. desember 2017. Hentet 27. januar 2021 (arkivert fra originalen 2. desember 2017) .
  2. ^ Alessandro Fulciniti, de vanligste oppsettene uten bord , på HTML.it. Hentet 2. februar 2021 .
  3. ^ Fast vs. _ _ Væske vs. Elastisk layout: Hva er den rette for deg? , i Smashing Magazine 2. juni 2009. Hentet 2. februar 2021 .
  4. ^ CSS nåværende arbeid , på w3.org .
  5. ^ Stupid Machines - regel 110 , på github.com .
  6. ^ Regel 110 Online-demonstrasjon , på eli.fox-epste.in .
  7. ^ CSS3: komplett veiledning , på HTML.it. Hentet 27. januar 2021 .
  8. ^ W3Schools Online Web Tutorials , på w3schools.com . Hentet 28. januar 2021 .
  9. ^ a b 5 ting du kan gjøre med CSS i stedet for JavaScript , på LogRocket Blog , 29. oktober 2019. Hentet 28. januar 2021 .
  10. ^ a b Lage vakre verktøytips med kun CSS , på LogRocket Blog , 29. juni 2020. Hentet 28. januar 2021 .
  11. ^ a b ( EN ) 49 CSS-gallerier , på gratis grensesnitt . Hentet 28. januar 2021 .
  12. ^ Styling vertikal kinesisk, japansk, koreansk og mongolsk tekst , på w3.org . Hentet 7. februar 2022 .
  13. ^ Tekst - orientering - CSS: Cascading Style Sheets | MDN , på developer.mozilla.org . Hentet 7. februar 2022 .
  14. ^ Skriving - modus - CSS: Cascading Style Sheets | MDN , på developer.mozilla.org . Hentet 7. februar 2022 .
  15. ^ En komplett guide til rutenett , på CSS-triks . Hentet 2. februar 2021 .
  16. ^ Hvordan lage utskriftsvennlige sider med CSS - SitePoint , på sitepoint.com . Hentet 24. august 2021 .
  17. ^ How To Set Up A Print Style Sheet , Smashing Magazine , 24. november 2011. Hentet 24. august 2021 .
  18. ^ Utskriftsvennlig og PDF , på chrome.google.com . Hentet 24. august 2021 .
  19. ^ ( NO ) Hva kaller du fargevariabler? , i CSS-Tricks , 7. desember 2018. Hentet 4. februar 2021 .
  20. ^ SVG og CSS - SVG: Skalerbar vektorgrafikk | MDN , på developer.mozilla.org . Hentet 28. januar 2021 .
  21. ^ Eksportere CSS fra Photoshop When Building From A PSD File , Square Internet , 11. august 2019. Hentet 28. januar 2021 .
  22. ^ Veiledning til 3D i nettlesere - WebGL Versus CSS 3D Transforms , på WE RAD , 5. mai 2017. Hentet 29. januar 2021 .
  23. ^ Pratik, 10+ CSS 3D Transforms Example With Code Snippets , på OnAirCode 27. mars 2018. Hentet 29. januar 2021 .
  24. ^ Slutt på støtte for Netscape-nettlesere - The Netscape Blog , på web.archive.org , 29. desember 2007. Hentet 27. januar 2021 (arkivert fra originalen 29. desember 2007) .
  25. ^ Internet Explorer nettleser Slutt på støtte - Microsoft 365 , på microsoft.com . Hentet 27. januar 2021 .
  26. ^ CSS betingede kommentarer , på quirksmode.org . Hentet 10. juni 2014 .
    "Eldre IE-versjoner trenger ofte litt ekstra CSS for å vise sidene dine riktig. Betingede kommentarer er den beste måten å legge til denne CSS-en, siden systemet er eksplisitt designet for denne brukssaken "
  27. ^ Internet Explorer og CSS- boksmodellen , på 456bereastreet.com . Hentet 10. juni 2014 .
    "Internet Explorers ikke-standard måte å beregne boksdimensjoner på"
  28. ^ CSS2 Box-modell , på w3.org , W3C .
  29. ^ CSS @media Rule , på w3schools.com . Hentet 28. januar 2021 .
  30. ^ CSS Minifier , på cssminifier.com . Hentet 27. januar 2021 .
  31. ^ 51 CSS- bakgrunnsmønstre , på gratis grensesnitt . Hentet 5. februar 2021 .
  32. ^ The Acid3 Test , på acid3.acidtests.org . Hentet 3. februar 2021 .
  33. ^ Avstemningsresultater: Populariteten til CSS-forbehandlere
  34. ^ Generering av dynamisk CSS med PHP - Digital Web , i Digital Web , 24. januar 2014. Hentet 17. februar 2021 .
  35. ^ Wayback Machine ( TXT ), på web.archive.org , 19. august 2010. Hentet 17. februar 2021 (arkivert fra originalen 19. august 2010) .
  36. ^ markør - CSS | MDN , på developer.mozilla.org . Hentet 17. februar 2021 .
  37. ^ CSS-markøregenskap , på w3schools.com . Hentet 17. februar 2021 .
  38. ^ ( NO ) Christian Cantrell Publisert: 3. august 2012 Kommentarer: 0 Nettleseren din støtter kanskje ikke funksjonaliteten i denne artikkelen, Magasinlignende layout for nettet med CSS-regioner og ekskluderinger - HTML5 Rocks , su HTML5 Rocks - En ressurs for åpne web HTML5-utviklere . Hentet 23. august 2021 .
  39. ^ w3c ( PDF ), på lists.w3.org .
  40. ^ Ekskluderinger vil forhåpentligvis være som kraftigere rutenettvennlige flottører , på CSS-Tricks , 21. november 2018. Hentet 23. august 2021 .
  41. ^ CSS Exclusions Module Level 1 , på w3.org . Hentet 23. august 2021 .

Bibliografi

Relaterte elementer

Andre prosjekter

Eksterne lenker