Inhoudsopgave:
Video: How Girls Get Ready - Realistic Get Ready With Me! 2024
Wat betekent de term cascade voor stijlpagina's? Het betekent dat een CSS-regel door de code tuimelt en soms een tegenstrijdige regel tegenkomt.
De cascade gaat over wat programmeurs noemen voorrang : Wie wint wanneer er een conflict is? Meerdere stijlen kunnen van toepassing zijn op een bepaalde tag. Er is bijvoorbeeld altijd de standaard door de browser gedefinieerde stijl, zoals zwart als de standaardtekstkleur. Als u een andere kleur opgeeft in een CSS-regel, kan de regel in de cascade domineren, zodat deze voorrang heeft boven de ingebouwde stijl.
Maar hoe bepaalt de browser welke stijl wint als twee CSS-regels met elkaar botsen? Moeten de conflicterende stijlen worden gecombineerd? Wat als de stijlen volledig incompatibel zijn - zoals een stijl die cursief en de andere niet-cursief aangeeft?
Visualiseringsspecificiteit
Verschillende factoren bepalen welke stijl wint bij het botsen van stijlen: overerving, de structuurstructuur in een document en de specificiteit (of nabijheid ) van een stijl. Waarschijnlijk omvat de gemakkelijkst te begrijpen collisieregel waarbij de stijl is gedefinieerd. Uw CSS-stijlen kunnen op vier belangrijke locaties worden gedefinieerd:
- De standaardstijlen van de browser.
- Een externe stijlpagina (een.css-bestand met stijldefinities waarnaar wordt verwezen vanuit het HTML-document met een Link-element).
- Een ingesloten stijlpagina (stijlen gedefinieerd in het HTML-document binnen de tag.) Dit type stijl wordt ook wel interne ) genoemd.
- Een inline-stijl (een stijl die wordt gedefinieerd als een attribuut binnen een HTML-element zelf en waarvan het effect beperkt is tot dat element, alleen ). Dit is bijvoorbeeld een typische inline-stijl:
Deze lijst illustreert ook de volgorde waarin conflicterende stijlen "winnen" in een conflict. Denk aan de volgorde als de stijl die het dichtst bij het element staat wint. Bijvoorbeeld, de inline-stijl - precies in het element zelf genesteld - komt het dichtst in de buurt. Dus als er meer dan één stijl is opgegeven voor dat element, is een inline-stijl de gebruikte stijl. Deze nabijheid van de stijl tot het element dat overeenkomt met het element is formeel beter bekend als specificiteit.
De stijllocatie met de op een na hoogste prioriteit is het interne stijlblad in de kop van het HTML-document. De derde hoogste prioriteit gaat naar het externe stijlblad - het afzonderlijke bestand. En de zwakste prioriteit, die alle anderen troef, is de standaardstijl. De standaard is immers de look die een stylesheet zou moeten veranderen.
Hier is een voorbeeld dat illustreert hoe IE tussen blauwe en rode kleuren beslist:
p {color: red;}
ik denk dat ik blauw ben.
Om dit document te testen, typt u de HTML-code in Kladblok en slaat u deze op met de bestandsnaam EmTest. htm. Laad deze webpagina door te dubbelklikken op de bestandsnaam in Windows Verkenner. Je ziet de zin Ik vermoed dat ik blauw in blauw verschijnt. Het element
is hier op twee conflicterende manieren gedefinieerd. In de ingesloten stijl is deze gedefinieerd als rood, maar die definitie wordt overschreven door de inline-definitie van de kleur blauw.
Probeer de inline-stijl te verwijderen om te zien wat er gebeurt. Verander de regel in
Ik denk dat ik blauw ben.
Probeer het opnieuw door het Kladblok-bestand dat u zojuist hebt gewijzigd opnieuw in te stellen.
U hoeft niet nogmaals te dubbelklikken op deze bestandsnaam in Windows Verkenner om de nieuwe versie in Internet Explorer te laden. Nadat u een document hebt geladen, is dit het standaardadres in IE - in dit geval een adres van een. htm-bestand op uw harde schijf. Als u dat bestand wijzigt zoals u net in dit voorbeeld hebt gedaan, hoeft u alleen nog maar op F5 te drukken om de wijziging te zien. Dat "ververst" IE.
Sommige mensen gebruiken de ingebouwde bronweergave van de browser liever als een snelle manier om CSS-code te wijzigen en opnieuw te testen. Kies Beeld -> Bron. U kunt de code wijzigen en vervolgens opslaan. Zowel Netscape als Firefox markeren de syntaxis, die sommige programmeurs nuttig vinden.
Nadat u de nieuwe versie van dit document in Internet Explorer hebt geladen, wordt de regel I guess I'm blue nu in rood weergegeven. Het conflict tussen de ingesloten en inline-stijldefinities is opgelost omdat u de inline-stijl hebt verwijderd.
U kunt de normale prioriteitsregels overschrijven door de! Belangrijke opdracht om aan te geven dat deze stijl moet worden gebruikt, ongeacht wat. Een! Belangrijke verklaring overschrijft alle andere stijldefinities. U voegt de opdracht als volgt toe:
p {kleur: blauw! belangrijk;}
In CSS1 negeren stijlen die belangrijk zijn verklaard door de auteur van de webpagina zelfs de stijlen die de lezer belangrijk heeft verklaard. In CSS2 winnen belangrijke lezersstijlen echter de aandacht boven belangrijke auteurstijlen, en inderdaad meer dan alle auteursstijlen, ongeacht of ze belangrijk zijn gemarkeerd of niet.
CSS-specificiteit
begrijpen De term specificiteit wordt ook gebruikt om een tweede manier te beschrijven waarop een browser berekent welke stijl wint wanneer stijlen conflicteren. Ten eerste, de browser zoekt naar nabijheid - maar wat als de nabijheid identiek is? Dat is wanneer deze tweede techniek wordt toegepast.
Stel u bijvoorbeeld voor dat naar twee verschillende stijlbladen wordt verwezen door hetzelfde HTML-document (ja, u kunt meer dan een CSS-bestand bijvoegen bij de HTML-code van een bepaalde webpagina). Maar in een van deze bladen is H1 vetgedrukt en in een ander blad cursief. Wat is de slechte browser om in dit geval te doen? Welke specificatie wint?
Anders dan de voorbeelden van stijlbotsingen eerder in dit hoofdstuk, waarbij nabijheid kan worden gebruikt om een winnaar aan te duiden, hier heb je beide stijlen op in dezelfde mate van nabijheid (dezelfde specificiteit). Beide stijldefinities bevinden zich in externe stijlbladen.
In dit geval doet de browser een beetje bizarre wiskunde om de beslissing te nemen over welke stijl te gebruiken.Net als eerder wint de meer "specifieke" stijl. Maar wat telt als specificiteit in deze wedstrijd? Het is niet hetzelfde als de factor "nabijheid". De browser moet een beetje vreemde berekening doen, maar je kunt echt niet zoiets noemen. Het is gewoon een vreemd soort accumulatie van waarden waarbij sommige stijlen orden van grootte meer gewicht hebben dan andere. Maak je kop erover lastig als je geen bijzondere berekeningen interessant vindt.
Wat doet de browser om de specificiteit van twee concurrerende stijlen te berekenen als de "nabijheid" -factor identiek is? Drie dingen:
- Kijkt naar een stijl en telt het aantal ID-attributen dat het heeft, indien aanwezig
- Telt het aantal klassekenmerken, indien van toepassing
- telt het aantal selectors (u kunt selectors groeperen in een stijl zoals dit: h1, h2, h3)
De browser voegt dan deze samen toe; het maakt alleen de cijfers aaneen. Misschien is dit een soort rekenkunde die door buitenaardse wezens in hun melkweg wordt gebruikt, maar ik heb er vast nooit van gehoord. Stel je voor dat je het getal 130 hebt gekregen door het volgende aaneenschakelingsproces: 1 appel, 3 sinaasappels, 0 bananen = 130
Dit proces geeft appels tien keer het "gewicht" aan sinaasappelen en 100 keer het gewicht aan bananen. Hier zijn een paar voorbeelden die laten zien hoe het werkt wanneer het wordt gebruikt om de specificiteit in een CSS te bepalen. Doe net alsof je terug bent in de derde klas wiskunde.
Let op, klasse! Wat is het specificiteitsnummer voor deze selector?
ul h1 li. rood {kleur: geel;}
Iedereen krijgt het antwoord 13?
Het juiste antwoord is 13. Je hebt
0 ID's, 1 klassenkenmerk (rood) en 3 selectors (ul h1 li)
Dat "optelt", om zo te zeggen, tot 013. Nu, kiddies, wie kan uitleggen hoe je een specificiteit van 1 krijgt voor de volgende selectordefinitie?
H1 {kleur: blauw;}
Nadat de specificiteit is bepaald, wint het hogere aantal. Stel dat twee stijlen met elkaar in conflict zijn omdat ze beide de kleur van H1 definiëren, maar deze anders definiëren. Maar omdat een definitie een specificiteitswaarde van 13 heeft en de andere heeft slechts 1, is de H1-kop geel en niet blauw.
Wat als twee regels dezelfde specificiteit blijken te hebben? In dat geval (aangenomen dat beide zich in een stylesheet bevinden, of op een andere manier dezelfde "nabijheid" hebben ten opzichte van de HTML-tag), wint de regel die als laatste is opgegeven.
