Tar en tumble med CSS - dummies

Hva betyr begrepet kaskade for stilark? Det betyr at en CSS-regel tumbles ned gjennom koden, og noen ganger støter på en motstridende regel.

Kaskaden handler om hvilke programmerere som kaller forrang : Hvem vinner når det er konflikt? Mer enn en stil kan gjelde for en gitt tag. For eksempel er det alltid standard nettleserdefinert stil, for eksempel svart som standard tekstfarge. Hvis du angir en annen farge i en CSS-regel, tillater kaskade at regelen din dominerer, for å ha forrang over den innebygde stilen.

Men hvordan bestemmer nettleseren hvilken stil som vinner hvis to CSS-regler er i konflikt med hverandre? Skal de motstridende stilene kombineres? Hva om stilene er helt uforenlige - for eksempel en stil som angir kursiv og den andre ikke kursiv?

Visualisering av spesifisitet

Flere faktorer bestemmer hvilken stil som vinner når stiler kolliderer: arv, strukturert tre i et dokument og spesifisitet (eller nærhet ) av en stil. Sannsynligvis den lettest forstått kollisionsregelen innebærer hvor stilen ble definert. Din CSS-stil kan defineres på fire hovedsteder:

• Nettleserens standardstil.
• Et eksternt stilark (en. Css-fil som inneholder stildefinisjoner som refereres fra i HTML-dokumentet med et Link-element).
• Et innebygd stilark (stiler definert i HTML-dokumentet, inne i taggen. Denne typen stil kalles også noen ganger intern ).
• En inline-stil (en stil definert som et attributt i et HTML-element i seg selv, og hvis effekt er begrenset til dette elementet bare ). Dette er for eksempel en typisk inline-stil:

Denne listen illustrerer også rekkefølgen der motstridende stiler "vinner" i enhver konflikt. Tenk på bestillingen som stilen nærmest til elementet vinner. For eksempel er inline-stilen - plassert rett innenfor selve elementet - den nærmeste. Så hvis mer enn en stil er spesifisert for det elementet, er en inline-stil den stilen som brukes. Denne nærheten av stilen til elementet som samsvarer med det, er mer formelt kjent som spesifisitet.

Stilstedet med nest høyeste prioritet er det interne stilarket som ligger i HTML-dokumentets overskrift. Den tredje høyeste prioriteten går til det eksterne stilarket - den separate filen. Og den svakeste prioriteten, den som alle de andre trumfene er, er standardstilen. Tross alt er standard det utseendet som et stilark skal endre.

Her er et eksempel som illustrerer hvordan IE bestemmer mellom blå og røde farger:

p {color: red;}

Jeg antar jeg er blå.

For å teste dette dokumentet, skriv inn HTML-koden i Notisblokk, og lagre det ved å bruke filnavnet EmTest. htm. Last inn denne nettsiden ved å dobbeltklikke på filnavnet i Windows Utforsker. Du ser setningen Jeg antar jeg er blå vises i blått.

-elementet her ble definert på to motstridende måter. I den innebygde stilen er den definert som rød, men den definisjonen overskrides av inline-definisjonen av fargen blå.

Prøv å fjerne inline-stilen for å se hva som skjer. Endre linjen til

Jeg antar jeg er blå.

Retest det ved å lagre Notisblokken filen du nettopp har endret.

Du trenger ikke å dobbeltklikke igjen på dette filnavnet i Windows Utforsker for å laste den nye versjonen til IE. Etter at du har lastet inn et dokument, er det standardadressen i IE - i dette tilfellet en adresse til en. htm-fil på harddisken din. Hvis du endrer den filen som du nettopp gjorde i dette eksemplet, trenger du bare å trykke på F5 for å se modifikasjonen. Det "oppdaterer" IE.

Noen foretrekker å bruke nettleserens innebygde kildevisning som en rask måte å modifisere og retesting CSS kode på. Velg Vis -> Kilde. Du kan gjøre endringer i koden, og deretter lagre den. Både Netscape og Firefox markerer syntaksen, som noen programmerere finner nyttige.

Når du har lastet den nye versjonen av dette dokumentet til IE, vises linjen Jeg antar jeg er blå nå i rødt. Konflikten mellom de innebygde og inline stildefinisjonene er løst fordi du slettet innlinestilen.

Du kan overstyre de vanlige prioritetsregler ved å bruke! Viktig kommando for å angi at denne stilen må brukes, uansett hva. En! Viktig deklarasjon overstyrer alle andre stildefinisjoner. Du legger til kommandoen slik:

p {color: blue! viktig;}

I CSS1 overstyrer stiler som er erklært viktige av forfatteren av nettsiden, til og med noen stiler som leseren har erklært viktig. Men i CSS2 vinner viktige leserstiler ut over viktige forfatterstiler, og faktisk over noen forfatterstiler, enten det er viktig eller ikke.

Forstå CSS-spesifisitet

Begrepet spesifisitet brukes også til å beskrive en annen måte at en nettleser beregner hvilken stil som vinner når stiler konflikter. Først ser nettleseren på nærhet - men hva om nærheten er identisk? Det er da denne andre teknikken brukes.

Tenk for eksempel at to forskjellige stilark er referert til av samme HTML-dokument (ja, du kan legge ved mer enn på CSS-fil til en bestemt nettside HTML-kode). Men i et av disse arkene er H1 stylet fet, og i et annet ark er det kursiv kursiv. Hva er den dårlige nettleseren å gjøre i dette tilfellet? Hvilken spesifikasjon vinner?

I motsetning til eksemplene på stilkollisjon tidligere i dette kapitlet, hvor nærhet kan brukes til å erklære en vinner, har du begge stilene plassert i samme grad av nærhet (samme spesifisitet). Begge disse stildefinisjonene er plassert i eksterne stilark.

I dette tilfellet gjør nettleseren litt bizar matte for å ta avgjørelsen om hvilken stil som skal brukes.Som tidligere, vinner den mer "spesifikke" stilen. Men hva teller som spesifisitet i denne konkurransen? Det er ikke det samme som "nærhet" -faktoren. Nettleseren må gjøre litt merkelig beregning, men du kan egentlig ikke kalle dette. Det er bare en merkelig slags akkumulering av verdier hvor noen stiler har størrelsesordener mer vekt enn andre. Ikke bry deg om det vakre hodet ditt om dette, hvis du ikke finner spesielle beregninger interessant.

Hva gjør nettleseren for å beregne spesifisiteten til to konkurrerende stiler hvis deres "nærhet" -faktor er identisk? Tre ting:

• Ser på en stil og teller antall ID-attributter den har, hvis noen
• Teller antall klassegenskaper, hvis noen
• teller antall selektorer (du kan gruppere selektorer i en stil slik: h1, h2, h3)

Nettleseren legger ikke disse sammen; det sammenkaller bare sifrene. Kanskje dette er en slags aritmetikk brukt av romvesener i deres galakse, men jeg har sikkert aldri hørt om det. Tenk deg om du har nummer 130 ved følgende sammenkoblingsprosess:

1 eple, 3 appelsiner, 0 bananer = 130

Denne prosessen gir epler ti ganger "vekten" av appelsiner og 100 ganger vekten av bananer. Her er et par eksempler som viser hvordan det fungerer når det brukes til å bestemme spesifisitet i et CSS. Bare la som om du er tilbake i matematikkklasse i tredje klasse.

Oppmerksomhet, klasse! Hva er spesifisitetsnummeret for denne velgeren?

ul h1 li. rød {farge: gul;}

Noen får svaret 13?

Det riktige svaret er 13. Du har

0 ID, 1 klasseattributt (rød) og 3 selektorer (ul h1 li)

Som "legger til, så å si til 013. Nå, kiddies, som kan forklare hvordan du får en spesifisitet på 1 for følgende selektørdefinisjon?

H1 {color: blue;}

Etter at spesifisiteten er bestemt, vinner det høyere nummeret. Anta at to stiler er i konflikt fordi de begge definerer fargen på H1, men definerer den annerledes. Men fordi en definisjon har en spesifisitetsverdi på 13 og den andre har bare 1, er H1-overskriften gul, ikke blå.

Hva om to regler viser seg å ha samme spesifisitet? I så fall (forutsatt at begge er i et stilark eller på annen måte er det samme "nærhet" til HTML-taggen), vinner regelen som ble spesifisert sist.