Het nemen van een Tumble met CSS

Wat betekent de term cascade betekenen voor style sheets? Het betekent dat een CSS-regel tuimelt naar beneden door de code, en soms botst tegen een conflicterend regel.

De cascade is over wat programmeurs noemen voorrang: Wie wint als er een conflict? Meer dan één stijl kunt toepassen op een gegeven tag. Bijvoorbeeld, er is altijd de standaard-browser gedefinieerde stijl, zoals zwart als de standaard tekstkleur. Als u een andere kleur in een CSS-regel op te geven, de cascade kan uw regel te domineren, om voorrang op de ingebouwde stijl hebben.

Maar hoe werkt de browser beslissen welke stijl out wint als twee CSS-regels in strijd zijn met elkaar? Moeten de conflicterende stijlen worden gecombineerd? Wat als de stijlen zijn volledig incompatibel - zoals een stijl te specificeren cursief en de andere niet-cursief?

Visualiseren specificiteit

Verschillende factoren bepalen welke stijl wint wanneer stijlen botsen: erfenis, de structurele boom in een document, en de specificiteit (of nabijheid) van een stijl. Waarschijnlijk de meest gemakkelijk te begrijpen botsing regel is waar de stijl werd gedefinieerd. Uw CSS-stijlen kunnen worden gedefinieerd in vier belangrijke locaties:

  • De browser standaard stijlen.
  • Een externe stylesheet (een CSS-bestand bevat stijl definities waarnaar wordt verwezen vanuit het HTML-document met een link element).
  • Een embedded style sheet (stijlen gedefinieerd in de HTML-document, binnen de <head> tag. Dit soort stijl wordt soms ook intern).
  • Een inline stijl (een stijl gedefinieerd als een attribuut in een HTML-element zelf, en waarvan het effect is beperkt tot alleen dat element). Bijvoorbeeld, dit is een typisch inline stijl:

<P style = "border-bottom: blue">

Deze lijst illustreert ook de volgorde waarin tegenstrijdige stijlen "winnen" in ieder conflict. Denk aan de orde als de stijl die het dichtst bij het ​​element wint. Bijvoorbeeld, de binnenregelstijl - genesteld binnen het element zelf - ligt het dichtst. Dus als er meer dan één stijl is opgegeven voor dat element, een inline stijl is de stijl gebruikt. Dit closenessof de stijl aan het element dat overeenkomt met het meer formeel bekend als specificiteit.

De stijl locatie met de tweede hoogste prioriteit is de interne stylesheet gelegen in de kop van het HTML-document. De derde hoogste prioriteit gaat naar de externe style sheet - de apart bestand. En de zwakste prioriteit, degene die alle anderen troef, is de standaard stijl. Immers, de standaard is de look die een stylesheet wordt verondersteld te veranderen.

Hier is een voorbeeld illustreren hoe IE beslist tussen blauwe en rode kleuren:

<Html>
<Head>
<Style type = "text / css">
p {color: red;}
</ Style>
</ Head>
<Body>
<P style = "color: blue;"> Ik denk dat ik ben blauw. </ P>
</ Body>
</ Html>

Om dit document te testen, typt u de HTML-code in Kladblok en sla het op met behulp van de bestandsnaam EmTest.htm. Laad deze webpagina door te dubbelklikken op de bestandsnaam in Windows Verkenner. U vindt de zin die ik denk dat ik ben blauw blauw weergegeven zien. De <p> element hier is gedefinieerd in twee tegenstrijdige manieren. In de embedded stijl, het is gedefinieerd als rood, maar die definitie wordt overschreven door de inline definitie van de kleur blauw.

Probeer het verwijderen van de inline stijl om te zien wat er gebeurt. Verander de lijn naar

<P> Ik denk dat ik ben blauw. </ P>

Hertest door opnieuw op te slaan het Kladblok bestand dat u zojuist gewijzigd.

Geen behoefte om dubbelklik nogmaals op deze bestandsnaam in Windows Verkenner naar de nieuwe versie te laden in IE. Nadat u een document hebt geladen, het is de standaard adres in IE - in dit geval, een adres van een htm-bestand op uw harde schijf. Als je dat bestand wijzigen zoals je net deed in dit voorbeeld, alles wat je hoeft te doen om te zien de wijziging is door op F5 te drukken. Dat "verfrist" IE.

Sommige mensen geven de voorkeur aan een ingebouwde bron oog van de browser te gebruiken als een snelle manier van het wijzigen en opnieuw testen CSS-code. Kies Beeld -> Bron. U kunt wijzigingen in de code te maken, en vervolgens opslaan. Zowel Netscape en Firefox markeert de syntaxis, die sommige programmeurs handig vinden.

Nadat u de nieuwe versie van dit document in IE te laden, de lijn die ik denk dat ik ben blauw wordt nu weergegeven in het rood. Het conflict tussen de embedded en inline stijldefinities is opgelost, omdat je de inline stijl verwijderd.

U kunt de normale regels van voorrang overschrijven met behulp van de! Belangrijk opdracht om aan te geven dat deze stijl moet worden gebruikt, maakt niet uit wat. Een! Belangrijke verklaring overschrijft alle andere stijl definities. U voegt de opdracht als volgt uit:

p {color: blue belangrijk;!}

In CSS1 stijlen verklaard belangrijk door de auteur van de webpagina override zelfs de stijlen die de lezer belangrijk is verklaard. Echter, in CSS2, belangrijke lezer stijlen winnen van belangrijke auteur stijlen, en inderdaad over een auteur stijlen, al of niet belangrijk gemarkeerd.

Inzicht CSS specificiteit

De term specificiteit wordt ook gebruikt om een tweede manier waarop een browser berekent welke stijl wint wanneer stijlen conflict te beschrijven. Ten eerste, de browser zoekt nabijheid - maar wat als de nabijheid is identiek? Dat is wanneer deze tweede techniek wordt toegepast.

Stel je voor, bijvoorbeeld, dat twee verschillende stylesheets wordt verwezen door dezelfde HTML-document (ja, kunt u meer dan op CSS-bestand koppelen aan HTML-code een bepaalde pagina's Web). Maar één van deze lagen, H1 is vormgegeven vet, en ander blad het gestileerde cursief. Wat is de arme browser te doen in dit geval? Welke specificatie wint?

In tegenstelling tot de voorbeelden van de stijl botsing eerder in dit hoofdstuk, waar nabijheid zou kunnen worden gebruikt om een winnaar te verklaren, hier heb je beide stijlen zich aan dezelfde mate van nabijheid (dezelfde specificiteit). Beide stijldefinities zijn gevestigd in externe style sheets.

In dit geval, de browser doet een beetje bizar wiskunde om de beslissing over welke stijl te gebruiken. Zoals eerder, de meer "specifieke" stijl wint. Maar wat telt als specificiteit in deze wedstrijd? Het is niet hetzelfde als de "nabijheid" factor. De browser heeft een beetje vreemd berekening te doen, maar je kunt echt niet thismath noemen. Het is gewoon een vreemd soort van accumulatie van waarden waar sommige stijlen hebben ordes van grootte meer gewicht dan anderen. Doe geen moeite om je mooie hoofd over dit soort dingen als je het niet vinden eigenaardige berekeningen interessant.

Wat doet de browser te doen aan de specificiteit van twee concurrerende stijlen als hun "nabijheid" factor is identiek berekenen? Drie dingen:

  • Bekijkt een stijl en telt het aantal ID attributen heeft, indien
  • Telt het aantal class attributen, eventuele
  • Telt het aantal selectors (u kunt de groep selectors in een stijl als volgt: H1, H2, H3)

De browser niet voeg dan deze getallen bij elkaar; het slechts aaneengeschakeld de cijfers. Misschien is dit een soort van rekenkundige gebruikt door buitenaardse wezens in hun sterrenstelsel, maar ik heb zeker nog nooit van gehoord. Stel je voor dat je de nummer 130 door de volgende concatenatieproces:

1 appel, 3 sinaasappels, bananen 0 = 130

Dit proces geeft appels tienmaal het "gewicht" van sinaasappelen en 100 keer het gewicht van bananen. Hier zijn een paar voorbeelden laten zien hoe het werkt wanneer het wordt gebruikt om de specificiteit te bepalen in een CSS. Net doen alsof je terug in de derde graad wiskunde klas bent.

Let op, klasse! Wat is de specificiteit nummer voor deze selector?

ul h1 li.red {color: geel;}

Iedereen krijgt het antwoord 13?

Het juiste antwoord is 13. Je hebt

0-ID's, 1 class attribuut (rood), en 3 selectors (ul h1 li)

Dat "voegt," zo te zeggen, tot 013. Nu, kiddies, die kan uitleggen hoe je een specificiteit van 1 te krijgen voor de volgende selector definitie?

H1 {color: blue;}

Nadat de specificiteit is vastgesteld, het hogere aantal wint. Neem aan dat twee stijlen met elkaar in conflict, omdat ze zowel de kleur van H1 definiëren, maar definieert het anders. Maar omdat een definitie heeft een specificiteit waarde van 13 en de andere heeft slechts 1, de H1 kop is geel, niet blauw.

Wat gebeurt er als twee regels blijken dezelfde specificiteit te hebben? In dat geval (in de veronderstelling dat beide in een stylesheet, of op andere wijze zijn hetzelfde "nabijheid" om de HTML-tag), de regel dat is opgegeven laatste wint.