Indholdsfortegnelse:
Video: Candy GVHD1013A2 tørretumbler 2025
Hvad betyder udtrykket kaskade for stilark? Det betyder, at en CSS regel tumbles ned gennem koden, og nogle gange støder på en modstridende regel.
Kaskade handler om, hvad programmører kalder forrang : Hvem vinder, når der er en konflikt? Mere end en stil kan gælde for et bestemt mærke. For eksempel er der altid den standard browser-definerede stil, f.eks. Sort som standard tekstfarve. Hvis du angiver en anden farve i en CSS-regel, tillader kaskade din regel at dominere, for at have forrang over den indbyggede stil.
Men hvordan bestemmer browseren hvilken stil der vinder, hvis to CSS-regler er i konflikt med hinanden? Skal de modstridende stilarter kombineres? Hvad hvis stilarterne er helt uforenelige - f.eks. En stil, der angiver kursiv og den anden ikke kursiv?
Visualisering af specificitet
Flere faktorer bestemmer, hvilken stil der vinder ud, når stilarter kolliderer: arv, strukturstrukturen i et dokument og specificitet (eller nærhed ) af en stil. Sandsynligvis den mest letforståelige kollisionsregel involverer hvor stilen blev defineret. Dine CSS-stilarter kan defineres på fire hovedsteder:
- Browserens standardstil.
- Et eksternt stilark (en css-fil, der indeholder stildefinitioner, der refereres fra inde i HTML-dokumentet med et Link-element).
- Et indlejret stilark (stilarter defineret i HTML-dokumentet, inde i dets tag. Denne slags stil kaldes også undertiden intern ).
- En inline-stil (en stil defineret som en attribut i et HTML-element selv, og hvis effekt er begrænset kun til det pågældende element ). For eksempel er dette en typisk inline-stil:
Denne liste illustrerer også den rækkefølge, hvor modstridende stilarter "vinder" i enhver konflikt. Tænk på ordren som stilen tættest til elementet vinder. For eksempel er inline-stilen - beliggende lige inden for selve elementet - den nærmeste. Så hvis mere end en stil er angivet for det element, er en inline-stil den anvendte stil. Denne nærhed af stilen til elementet, der matcher den, er mere formelt kendt som specificitet.
Stilstedet med den næsthøjeste prioritet er det interne stilark i HTML-dokumentets overskrift. Den tredje højeste prioritet går til det eksterne stilark - den separate fil. Og den svageste prioritet, den, som alle de andre tromper, er standardstilen. Efter alt er standard det udseende, et stilark skal ændre.
Her er et eksempel, der illustrerer, hvordan IE bestemmer mellem blå og røde farver:
p {color: red;}
Jeg tror jeg er blå.
For at teste dette dokument skal du skrive HTML-koden i Notesblok og derefter gemme den ved hjælp af filnavnet EmTest. htm. Indlæs denne webside ved at dobbeltklikke på filnavnet i Windows Stifinder. Du får se sætningen Jeg tror jeg er blå vises i blåt.
elementet her blev defineret på to modstridende måder. I den indlejrede stil er den defineret som rød, men den definition er overskredet af inline definitionen af farven blå.
Prøv at fjerne inline-stilen for at se, hvad der sker. Skift linjen til
Jeg tror jeg er blå.
Retest det ved at gemme Notepad-filen, du lige har ændret.
Du skal ikke dobbeltklikke igen på dette filnavn i Windows Stifinder for at indlæse den nye version i IE. Når du har indlæst et dokument, er det standardadressen i IE - i dette tilfælde en adresse på en. htm-fil på din harddisk. Hvis du ændrer den fil som du lige gjorde i dette eksempel, er alt du skal gøre for at se ændringen, at trykke på F5. Det "opdateres" IE.
Nogle foretrækker at bruge browserens indbyggede kildevisning som en hurtig måde at ændre og genprøve CSS kode på. Vælg Vis -> Kilde. Du kan foretage ændringer i koden, og derefter gemme den. Både Netscape og Firefox fremhæver syntaxen, som nogle programmerere finder nyttige.
Når du har indlæst den nye version af dette dokument i IE, vises linjen Jeg tror jeg er blå nu i rød. Konflikten mellem de indlejrede og inline-stildefinitioner er blevet løst, fordi du har slettet inline-stilen.
Du kan tilsidesætte de normale prioritetsregler ved at bruge! Vigtigt kommando for at angive, at denne stil skal bruges, uanset hvad. En! Vigtig erklæring overstyrer alle andre stildefinitioner. Du føjer kommandoen som denne:
p {farve: blå! vigtig;}
I CSS1 tilsidesætter stilarter, der er erklæret vigtige af forfatteren af websiden, endog alle stilarter, som læseren har erklæret vigtig. Men i CSS2 vinder vigtige læserformater ud over vigtige forfatterstile, og faktisk over nogen forfatterstile, hvad enten det er vigtigt eller ikke.
Forståelse af CSS-specificitet
Udtrykket specificitet bruges også til at beskrive en anden måde, som en browser beregner, hvilken stil vinder, når stilarter konflikter. For det første ser browseren på nærhed - men hvad hvis nærheden er identisk? Det er, når denne anden teknik anvendes.
Forestil dig f.eks., At to forskellige stilark er refereret af det samme HTML-dokument (ja, du kan vedhæfte mere end på CSS-filen til en bestemt websides HTML-kode). Men i et af disse ark er H1 stylet fed, og i et andet ark er det stylet kursiv. Hvad er den dårlige browser til at gøre i dette tilfælde? Hvilken specifikation vinder?
I modsætning til eksemplerne på stilkollision tidligere i dette kapitel, hvor nærhed kan bruges til at erklære en vinder, har du begge stilarter placeret i samme grad af nærhed (samme specificitet). Begge disse stildefinitioner findes i eksterne stilark.
I dette tilfælde gør browseren en lille bizar matematik til at træffe beslutningen om hvilken stil der skal bruges.Som tidligere, vinder den mere "specifikke" stil. Men hvad tæller som specificitet i denne konkurrence? Det er ikke det samme som "nærhed" -faktoren. Browseren skal gøre en smule mærkelig beregning, men du kan virkelig ikke kalde dette. Det er bare en underlig slags akkumulering af værdier, hvor nogle stilarter har størrelsesordener mere vægt end andre. Forstyr ikke dit smukke hoved om disse ting, hvis du ikke finder ejendommelige beregninger interessant.
Hvad gør browseren for at beregne specificiteten af to konkurrerende stilarter, hvis deres "nærhed" -faktor er identisk? Tre ting:
- Ser på en stil og tæller antallet af ID-attributter, som den har, hvis nogen
- Tæller antallet af klassetegn, hvis nogen
- Tæller antallet af selektorer (du kan gruppere vælgere i en stil som dette: h1, h2, h3)
Browseren tilføjer derefter ikke disse tal sammen; det concatenates kun cifrene. Måske er dette en slags aritmetik, der bruges af udlændinge i deres 999 Galaxy, men jeg har sikkert aldrig hørt om det. Forestil dig, om du har nummer 130 ved følgende sammenkoblingsproces: 1 æble, 3 appelsiner, 0 bananer = 130 Denne proces giver æbler ti gange "appelsinernes vægt" og 100 gange vægten af bananer. Her er et par eksempler, der viser, hvordan det virker, når det bruges til at bestemme specificitet i et CSS. Bare lad som om du er tilbage i tredje klasse matematik klasse. Opmærksomhed, klasse! Hvad er specificitetsnummeret til denne vælger?
ul h1 li. rød {farve: gul;}
Alle får svaret 13?
Det korrekte svar er 13. Du har
0 ID'er, 1 klasseattribut (rød) og 3 selectorer (ul h1 li)
Det "tilføjes", så at sige til 013. Nu, kiddies, hvem kan forklare, hvordan du får en specificitet på 1 til følgende vælgerdefinition?
H1 {farve: blå;}
Efter specificiteten er blevet bestemt, vinder det højere antal. Antag at to stilarter er i konflikt, fordi de begge definerer farven på H1, men definerer den anderledes. Men fordi en definition har en specificitetsværdi på 13 og den anden kun har 1, er H1-overskriften gul, ikke blå.
Hvad hvis to regler viser sig at have samme specificitet? I så fald (hvis man antager at begge er i et stilark eller på anden måde er den samme "nærhed" til HTML-taggen), vinder reglen, der blev angivet sidst.
