CSS (Cascading Style Sheets), of trapsgewijze tabellen stijlen worden gebruikt om het uiterlijk van een opmaaktaaldocument te beschrijven. Typisch worden CSS-stijlen gebruikt om de stijl van webpagina-elementen te maken en aan te passen en gebruikersinterfaces geschreven in HTML-talen en XHTML, maar kan ook worden toegepast op elk soort XML-document, inclusief XML, SVG en XUL.

Cascading style sheets beschrijven de regels voor het opmaken van elementen met behulp van eigenschappen en aanvaardbare waarden deze eigenschappen. Voor elk element kunt u een beperkte set eigenschappen gebruiken, de rest van de eigenschappen heeft er geen effect op.

Een stijldeclaratie bestaat uit twee delen: het webpagina-element - selector, en de opmaakopdrachten zijn - advertentieblok... De selector vertelt de browser welk element moet worden opgemaakt en in het advertentieblok (code in accolades) geeft een overzicht van de opmaakopdrachten - eigenschappen en hun waarden.

Soorten trapsgewijze stylesheets en hun bijzonderheden

1. Soorten stylesheets

1.1. Extern stijlblad

Extern stijlblad vertegenwoordigt tekstbestand css-extensie, die een set CSS-stijlelementen bevat. Het bestand wordt gemaakt in een code-editor, net als een HTML-pagina. Het bestand kan alleen stijlen bevatten, geen HTML-opmaak. Een externe stylesheet is verbonden met een webpagina met behulp van de tag bevindt zich in de sectie ... Deze stijlen werken voor alle pagina's op de site.

Er kunnen meerdere stylesheets aan elke webpagina worden toegevoegd door meerdere tags achter elkaar toe te voegen door het doel van deze stylesheet op te geven in het mediatag-attribuut. rel = "stylesheet" geeft het type link aan (stylesheet-link).

Het kenmerk type = "text / css" is optioneel in de HTML5-standaard en kan worden weggelaten. Als het attribuut ontbreekt, is het standaard type = "text / css".

1.2. Interne stijlen

Interne stijlen ingebed in de sectie HTML-document en zijn gedefinieerd in de tag... Innerlijke stijlen hebben voorrang op externe stijlen, maar zijn inferieur aan inline stijlen (opgegeven met het stijlkenmerk).

...

1.3. Inline stijlen

wanneer we schrijven inline stijlen, schrijven we de CSS-code naar een HTML-bestand, direct in de elementtag met behulp van het stijlkenmerk:

Let op deze tekst.

Deze stijlen zijn alleen van invloed op het element waarvoor ze zijn opgegeven.

1.4. @Import regel

@Import regel staat het laden van externe stylesheets toe. Om de @import-richtlijn te laten werken, moet deze in de stylesheet (extern of intern) vóór alle andere regels verschijnen:

De @import-regel wordt ook gebruikt om weblettertypen op te nemen:

@import url (https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Soorten selectors

Selectors geeft de structuur van de webpagina weer. Ze worden gebruikt om regels te maken voor opmaakelementen van een webpagina. Selectors kunnen elementen zijn, hun klassen en identifiers, evenals pseudo-klassen en pseudo-elementen.

2.1. Universele selector

Komt overeen met elk HTML-element. Bijvoorbeeld, * (marge: 0;) zal de marges voor alle site-elementen op nul zetten. De selector kan ook gebruikt worden in combinatie met de pseudo-class of pseudo-element: *: after (CSS-stijlen), *: aangevinkt (CSS-stijlen).

2.2. Elementkiezer

Met elementselectors kunt u alle elementen opmaken van dit type op alle pagina's van de site. H1 (lettertypefamilie: Kreeft, cursief;) stelt bijvoorbeeld de algemene opmaakstijl in voor alle h1-koppen.

2.3. Klassenkiezer

Met klassekiezers kunt u stijlen instellen voor een of meer elementen met dezelfde klassenaam op verschillende plaatsen op de pagina of op verschillende pagina's plaats. Als u bijvoorbeeld een kop met de kopklasse wilt maken, voegt u een klassekenmerk met de waarde kop toe aan de openingstag

en stel de stijl in voor van de opgegeven klasse... Stijlen die met de klasse zijn gemaakt, kunnen worden toegepast op andere elementen, niet noodzakelijkerwijs van dit type.

Gebruiksaanwijzing persoonlijke computer

2.4. Identificatiekiezer

Met de id-selector kunt u formatteren een specifiek artikel. De id moet uniek zijn en mag maar één keer op één pagina voorkomen.

2.5. Afstammeling selector

Onderliggende selectors passen stijlen toe op elementen binnen een containerelement. Bijvoorbeeld, ul li (text-transform: hoofdletter;) zal alle li-elementen selecteren die afstammelingen zijn van alle ul-elementen.

Als u afstammelingen moet opmaken specifiek element, moet dit element een stijlklasse krijgen:

p.first a (kleur: groen;) - deze stijl wordt toegepast op alle links, afstammelingen van de alinea met de eerste klasse;

p .first a (kleur: groen;) - als u een spatie toevoegt, worden links in een klassetag .first, die een kind is van het element, gestyled

Eerst a (kleur: groen;) - deze stijl wordt toegepast op elke link die zich in een ander element bevindt dat is aangewezen door de .first class.

2.6. Kinderkiezer

Een onderliggend element is een directe afstammeling van het bevattende element. Eén element kan meerdere onderliggende elementen hebben en elk element kan slechts één bovenliggend element hebben. Met de kindselector kunt u alleen stijlen toepassen als het onderliggende element onmiddellijk volgt op het bovenliggende element en er geen andere elementen tussen staan, dat wil zeggen dat het kind niet langer genest is.
Bijvoorbeeld, p> strong selecteert alle sterke elementen die kinderen zijn van het p-element.

2.7. Zuster selector

Er ontstaat een zusterrelatie tussen elementen met een gemeenschappelijke ouder. Met selectors voor broers en zussen kunt u items uit een groep broers en zussen selecteren.

h1 + p - selecteert alle eerste alinea's onmiddellijk na een tag

zonder de rest van de paragrafen te beïnvloeden;

h1 ~ p - selecteert alle alinea's die broers en zussen zijn van een h1-kop en onmiddellijk erna.

2.8. Kenmerkkiezer

Attribuutselectors selecteren elementen op basis van een attribuutnaam of attribuutwaarde:

[attribuut] - alle elementen die het gespecificeerde attribuut bevatten - alle elementen waarvoor het alt-attribuut is ingesteld;

selector [attribuut] - elementen van dit type die het gespecificeerde attribuut bevatten, img - alleen afbeeldingen waarvoor het alt-attribuut is ingesteld;

selector [attribuut = "waarde"] - elementen van dit type die het gespecificeerde attribuut met een specifieke waarde bevatten, img - alle afbeeldingen waarvan de naam het woord bloem bevat;

selector [attribuut ~ = "waarde"] - elementen die gedeeltelijk . bevatten gegeven waarde, bijvoorbeeld als er verschillende klassen zijn opgegeven voor een element, gescheiden door een spatie, p - alinea's, waarvan de klassenaam feature bevat;

selector [attribuut | = "waarde"] - elementen waarvan de lijst met attribuutwaarden begint met het opgegeven woord, p - alinea's waarvan de klassenaam feature is of begint met feature;

selector [attribuut ^ = "waarde"] - elementen waarvan de attribuutwaarde begint met de opgegeven waarde, a - alle links die beginnen met http: //;

selector [attribuut $ = "waarde"] - elementen waarvan de attribuutwaarde eindigt gespecificeerde waarde, img - alle afbeeldingen in png-formaat;

selector [attribuut * = "waarde"] - elementen waarvan de attribuutwaarde het opgegeven woord ergens bevat, a - alle links waarvan de naam boek bevat.

2.9. Pseudo-klassenkiezer

Pseudo-klassen zijn klassen die niet echt aan HTML-tags zijn gekoppeld. Hiermee kunt u CSS-regels toepassen op elementen wanneer een gebeurtenis wordt geactiveerd of als u zich aan een specifieke regel houdt. Pseudo-klassen kenmerken elementen met de volgende eigenschappen:

: hover - elk element waar de muiscursor over zweeft;

: focus - een interactief element waarnaar met het toetsenbord is genavigeerd of met de muis is geactiveerd;

: actief - een element dat door de gebruiker is geactiveerd;

: geldig - formuliervelden waarvan de inhoud in de browser is gecontroleerd op overeenstemming met het opgegeven gegevenstype;

: ongeldig - formuliervelden waarvan de inhoud niet overeenkomt met het opgegeven gegevenstype;

: ingeschakeld - alle actieve formuliervelden;

: uitgeschakeld - uitgeschakelde formuliervelden, d.w.z. in een inactieve staat;

: binnen bereik - formuliervelden waarvan de waarden in het opgegeven bereik liggen;

: buiten bereik - formuliervelden waarvan de waarden niet zijn opgenomen in het opgegeven bereik;

: lang () - elementen met tekst in de opgegeven taal;

: not (selector) - elementen die de gespecificeerde selector niet bevatten - klasse, identifier, naam of type van het formulierveld -: not ();

: target - het element met het # symbool waarnaar in het document wordt verwezen;

: aangevinkt - geselecteerde (geselecteerd door de gebruiker) formulierelementen.

2.10. Structurele pseudo-klasse selector

Structurele pseudo-klassen selecteren kinderen volgens de parameter die tussen haakjes is opgegeven:

: n-de-kind (oneven) - oneven kinderen;

: n-de-kind (even) - zelfs kinderen;

: nth-child (3n) - elk derde element onder kinderen;

: n-de kind (3n + 2) - selecteert elk derde element beginnend met het tweede kind (+2);

: nth-child (n + 2) - selecteert alle elementen vanaf de tweede;

: nth-child (3) - selecteert het derde kind;

: nth-last-child () - in de lijst met kinderen selecteert u het element met gespecificeerde locatie, vergelijkbaar met: nth-child (), maar beginnend bij de laatste in de tegenovergestelde richting;

: first-child - hiermee kunt u alleen het allereerste kind van de tag stylen;

: last-child - hiermee kunt u het laatste kind van de tag opmaken;

: enig-kind - selecteert het element dat het enige kind is;

: leeg - selecteert elementen die geen kinderen hebben;

: root - selecteert het element dat de root van het document is - het html-element.

2.11. Selector van pseudo-klassen van het structurele type

Geeft een specifiek type onderliggende tag aan:

: nth-of-type () - selecteert elementen naar analogie met: nth-child (), waarbij alleen rekening wordt gehouden met het elementtype;

: first-of-type - selecteert het eerste kind van het gegeven type;

: last-of-type - selecteert het laatste element van het gegeven type;

: nth-last-of-type () - selecteert een element van het gegeven type in de lijst met elementen volgens de opgegeven locatie, beginnend bij het einde;

: only-of-type - Selecteert het enige element van het opgegeven type onder de onderliggende elementen van het bovenliggende element.

2.12. Pseudo-elementkiezer

Pseudo-elementen worden gebruikt om inhoud toe te voegen die is gegenereerd met behulp van de eigenschap content:

: eerste letter - selecteert de eerste letter van elke alinea, is alleen van toepassing op blokelementen;

: eerste regel - selecteert de eerste regel van de tekst van het element, is alleen van toepassing op blokelementen;

: before - voegt gegenereerde inhoud toe voor het element;

: after - voegt gegenereerde inhoud toe na het element.

3. Combinatie van selectors

Voor een nauwkeurigere selectie van elementen voor opmaak, kunt u combinaties van selectors gebruiken:

img: nth-of-type (even) - selecteert alle even afbeeldingen, waarvan de alternatieve tekst het woord css bevat.

4. Groepering van selectors

Dezelfde stijl kan op meerdere elementen tegelijk worden toegepast. Om dit te doen, vermeldt u aan de linkerkant van de aangifte de vereiste selectors gescheiden door komma's:

H1, h2, p, span (kleur: tomaat; achtergrond: wit;)

5. Overerving en cascade

Overerving en cascade zijn twee fundamentele concepten in CSS die nauw verwant zijn. Overerving betekent dat elementen eigenschappen erven van hun ouder (het element dat ze bevat). De cascade komt tot uiting in de manier waarop verschillende soorten stylesheets worden toegepast op het document en hoe conflicterende regels elkaar overheersen.

5.1. Erfenis

Erfenis is het mechanisme waarmee bepaalde eigenschappen van een voorouder worden doorgegeven aan zijn nakomelingen. CSS-specificatie overerving van eigenschappen met betrekking tot de tekstinhoud van de pagina, zoals kleur, lettertype, letterafstand, regelhoogte, lijststijl, tekstuitlijning, tekstinspringing, teksttransformatie, zichtbaarheid, witruimte en woord -spatiëring. Dit is in veel gevallen handig omdat u niet voor elk element op de webpagina de lettergrootte en letterfamilie hoeft in te stellen.

Eigenschappen voor blokopmaak worden niet overgenomen. Dit zijn achtergrond, rand, weergave, zwevend en helder, hoogte en breedte, marge, min-max-hoogte en -breedte, omtrek, overloop, opvulling, positie, tekstdecoratie, verticaal uitlijnen en z-index.

gedwongen erfenis

Door het gebruiken van trefwoord erven U kunt een element dwingen om elke eigenschapswaarde van het bovenliggende element over te nemen. Dit werkt zelfs voor eigenschappen die niet standaard worden overgenomen.

Hoe CSS-stijlen worden ingesteld en werken

1) Stijlen kunnen worden overgenomen van het bovenliggende element (overgeërfde eigenschappen of met behulp van de overerven-waarde);

2) Stijlen in het onderstaande stijlblad hebben voorrang op de stijlen in de bovenstaande tabel;

3) Een element kan vanuit verschillende bronnen worden gestileerd. U kunt controleren welke stijlen worden toegepast in de browserontwikkelaarsmodus. Klik hiervoor boven het element. klik met de rechtermuisknop muis en selecteer "Code weergeven" (of iets dergelijks). De rechterkolom toont alle eigenschappen die voor dit element zijn ingesteld of van het bovenliggende element zijn overgenomen, evenals de stijlbestanden waarin ze zijn opgegeven, en serienummer regels code.

4) Wanneer u een stijl definieert, kunt u elke combinatie van selectors gebruiken: elementselector, elementpseudoklasse, klasse of element-ID.

5.2. Cascade

Cascadering Is een mechanisme dat het eindresultaat bepaalt wanneer verschillende CSS-regels op hetzelfde element worden toegepast. Er zijn drie criteria die de volgorde bepalen waarin eigenschappen worden toegepast: de belangrijke regel, de specificiteit en de volgorde waarin de stylesheets worden opgenomen.

De!Belangrijke regel

Regelgewicht kan worden ingesteld met het trefwoord!Belangrijk, dat direct na de eigenschapswaarde wordt toegevoegd, bijvoorbeeld span (lettergewicht: vet! Belangrijk;). De regel moet aan het einde van de aangifte worden geplaatst, vóór het haakje sluiten, zonder spatie. Een dergelijke aankondiging heeft voorrang op alle andere regels. Met deze regel kunt u de eigenschapswaarde overschrijven en een nieuwe instellen voor een element uit een elementgroep in het geval dat er geen directe toegang is tot het bestand met stijlen.

Specificiteit:

Voor elke regel berekent de browser selector specificiteit en als het element tegenstrijdige eigendomsdeclaraties heeft, wordt rekening gehouden met de regel met de meeste specificiteit. De specificiteitswaarde bestaat uit vier delen: 0, 0, 0, 0. De specificiteit van een selector wordt als volgt bepaald:

voor id, voeg 0, 1, 0, 0 toe;
0, 0, 1, 0 wordt toegevoegd voor klasse;
0, 0, 0, 1 wordt toegevoegd voor elk element en pseudo-element;
voor inline-stijl die direct aan een element is toegevoegd - 1, 0, 0, 0;
de universele selector heeft geen specificiteit.

H1 (kleur: lichtblauw;) / * specificiteit 0, 0, 0, 1 * / em (kleur: zilver;) / * specificiteit 0, 0, 0, 1 * / h1 em (kleur: goud;) / * specificiteit: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # main p.about (kleur: blauw;) / * specificiteit: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .zijbalk (kleur: grijs;) / * specificiteit 0, 0, 1, 0 * / #zijbalk (kleur: oranje;) / * specificiteit 0, 1, 0, 0 * / li # zijbalk (kleur: aqua;) / * specificiteit: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

Daardoor zullen die regels worden toegepast op het element waarvan de specificiteit groter is. Als een item bijvoorbeeld twee specificiteiten heeft met waarden 0, 0, 0, 2 en 0, 1, 0, 1, dan wint de tweede regel.

De volgorde van de bijgevoegde tabellen

U kunt meerdere externe stylesheets maken en deze koppelen aan één webpagina. Als verschillende tabellen bevatten verschillende betekenissen eigenschappen van één element, dan wordt als resultaat de regel die in de stylesheet in de onderstaande lijst is gevonden, op het element toegepast.

Waar zijn stylesheets voor?

Zoals we ons herinneren, boden de eerste versies van de HTML-standaard geen enkele manier om de weergave van informatie te controleren. Het algemene concept van hypertext was gericht op de beschikbaarheid van informatie voor elk apparaat dat tekst kan reproduceren. Voor opmaak werd aanbevolen om alleen booleaanse tags te gebruiken die koppen, subkoppen, lijsten, alinea's, aanhalingstekens, enz. definiëren. - dat wil zeggen, die elementen die de structuur van het document vormen. De invulling van het uiterlijk bleef geheel op het geweten van de terminalterminal.

Sindsdien is er echter veel veranderd en HTML-standaard verloor zijn oorspronkelijke slankheid. Aanvankelijk voegde Netscape "verbeterde tags" toe die meer controle gaven over het uiterlijk van de gepresenteerde informatie. De innovatie sloeg aan en alle Netscape-extensies werden de de facto standaard. Toen deed Microsoft hetzelfde. Toen ze het beseften, was HTML een verschrikkelijke mengeling van logische en ontwerptags, incompatibele extensies en reageerde volledig niet meer op het oorspronkelijke concept - om informatie op elk apparaat te presenteren, ongeacht de kenmerken van de informatieweergave.

Vervolgens is er een grootschalige standaardisatie doorgevoerd. Als gevolg hiervan werd de HTML 3.2-standaard geboren. Hij was niet revolutionair, maar zette alleen alle innovaties op hun plaats en werkte uit algemene aanbevelingen voor browserfabrikanten. Revolutionaire veranderingen werden geïntroduceerd in de nieuwe standaard - HTML 4.0 of, zoals het genoemd werd, Dynamic HTML. Lagen, stylesheets en universeel objectmodel browser.

De nieuwe standaard heeft geprobeerd terug te keren naar de oorsprong van het HTML-concept. De vierde versie beveelt, net als de eerste, aan om pagina's zo te maken dat ze op elk apparaat kunnen worden gereproduceerd - of het nu een 21 "monitor of een kleine zwart-wit scherm mobiele telefoon.

Hoe is het presentatieprobleem opgelost? Dit is de revolutionaire benadering. Het wordt aanbevolen om alle ontwerpen over te brengen naar een extern stijlbestand. De hoofdpagina bevat alleen informatie en links naar de benodigde stijlen.

Bij het tonen van de pagina specifiek apparaat een geschikt stylesheet moet worden gebruikt. Voor een mobiele telefoon en een computermonitor moeten ze natuurlijk verschillend zijn. In het eerste geval gebruiken we het minimale ontwerp, waardoor we informatie op de meest optimale en compacte manier kunnen presenteren. In het tweede geval hebben we alle rijkdom aan lettertype- en kleurontwerp tot onze beschikking.

U hoeft slechts één keer een stylesheet te schrijven wanneer u een site maakt voor elk apparaat waarop u informatie wilt weergeven. Bovendien kan de stylesheet voor de hele site hetzelfde zijn. En daarom hoeft u niet dezelfde stijlbeschrijvingen op elk van de pagina's te herhalen.

Het plaatsen van alle stijlinformatie in één extern bestand opent andere voor ons. handige functies- nadat we de inhoud van slechts één (!) stijlbestand hebben gewijzigd, kunnen we tenslotte het hele site-ontwerp in een kwestie van seconden wijzigen. Bovendien zijn er geen andere wijzigingen nodig. Dit is natuurlijk alleen waar als de oorspronkelijke site correct is ontworpen.

Met een beetje theorie uit de weg, laten we in de praktijk gaan, en we beginnen met het verbinden van een stylesheet met een HTML-bestand.

Inclusief stylesheets
Om deze taak te volbrengen, kunnen we een van de 3 voorgestelde methoden gebruiken:

extern bestand

beschrijving in titelsectie

inline beschrijving

Laten we beginnen met de eenvoudigste, de zogenaamde inline beschrijving of beschrijving ingebed in een tag:

Deze tekst wordt overschreven door de stijl

Met behulp van de extra attribuutstijl kunnen we de stijlparameters definiëren die we in elke tag nodig hebben. Dit is de gemakkelijkste methode en werkt alleen binnen één tag. Maar stel je voor hoeveel de bestandsgrootte zal groeien en hoe lastig het zal zijn om het te repareren als we de stijl voor elke tag specificeren. Deze methode verschilt niet veel van bijvoorbeeld de directe beschrijving van het uiterlijk door middel van een tag.

Het is veel handiger om vooraf alle vereiste ontwerpstijlen te definiëren en deze vervolgens eenvoudig op de bijbehorende tags toe te passen. Dit is de tweede manier - beschrijving in de koptekst. Het effect is van toepassing op de hele pagina. Stijlen worden gedefinieerd met klassen, dit zijn lijsten met de definitie van alle benodigde ontwerpparameters.

Bij gebruik van deze methode moet de beschrijving van stijlen in het kopgedeelte worden geplaatst:

....

Deze stijlen kunnen nu overal in de html-code worden toegepast. Hiervoor wordt de volgende constructie gebruikt:

Deze tekst is geschreven met de kopstijl

Deze tekst is in het rood geschreven

Zoals je kunt zien, is alles niet zo moeilijk. Het belangrijkste is om de basisprincipes te begrijpen. Naast het definiëren van nieuwe klassen, hebben we ook de mogelijkheid om standaardtags te overschrijven. Bijvoorbeeld de tag

Nu ziet alle tekst tussen tags eruit zoals gedefinieerd door deze stijl. Dit is erg handig en stelt u in staat om bestaande pagina's eenvoudig aan te passen aan het gebruik van stijlen. Bovendien verkleint het de grootte van het bestand enigszins vanwege de afwezigheid van onnodige klasseattributen.

En tot slot, de derde manier is om de beschrijving van stijlen over te brengen naar een extern bestand. Zijn invloedssfeer strekt zich uit tot alle bestanden waarin de beschrijving is opgenomen. Deze methode sluit het beste aan bij het concept van HTML 4.0. Voor het geval we moeten veranderen verschijning site, is het voldoende om alleen dit ene bestand te corrigeren. Vergelijk het met vorige manieren... In een van hen moet je de beschrijving op elke pagina wijzigen, en in de andere, zelfs meer - in de buurt van elke tag, wat natuurlijk helemaal niet inspirerend is.

Hoe wordt de uitvoering uitgevoerd? extern bestand? Eerst wordt een stijlbestand gemaakt met een beschrijving van alle klassen die we nodig hebben (mystyle.css):

Koptekst (tekst-uitlijning: midden; lettergrootte: 27pt;)
.rood (kleur: rood;)
p (tekst uitlijnen: midden; lettergrootte: 12pt;)

....

....

Dit is het meeste handige manier, en het wordt aanbevolen om het te gebruiken voor het hoofdstijlblad.

Waarom zei ik "basis"? Feit is dat je in de praktijk alle drie de methoden moet gebruiken, en hier komt de "cascade" van stijlen om de hoek kijken. Maar daar hebben we het de volgende keer over.

Voortzetting van het gesprek over het toepassen van stylesheets. Laten we eerst de cascade van stijlen behandelen en dan verder gaan met het bekijken van de syntaxis en een overzicht van de meest voorkomende parameters die worden gebruikt bij het maken van stijlen.

Trapsgewijze stijlen
Laten we dus eerst uitzoeken waarom stijlen cascading worden genoemd. Staat u mij toe, beste lezer, ik zal u nogmaals de manieren geven om stijlen op een pagina te implementeren:

een apart stijlbestand gebruiken en het invoegen met een tag

beschrijving van de stijl in de kop van het document

een stijl toepassen als parameter in een tag.

De cascade is dat stijlen kunnen worden overschreven. De bovenstaande lijst met stylesheets voor het injecteren van stijlen komt overeen met de volgorde van overschrijven. De stroomafwaartse methode kan de stroomopwaartse methode overschrijven.

We hebben bijvoorbeeld in het externe stijlbestand gedefinieerd dat de tekst in de tag

moet worden geschreven in een 10-punts lettertype. Maar als we in de titel van de pagina bovendien aangeven dat dezelfde tekst in de tag

moet worden geschreven in een 12-punts lettertype, dan wordt de tekst in precies die grootte weergegeven - d.w.z. de stijl in de kop van de pagina heeft de stijl in het externe bestand overschreven.

Waar is het voor? Oh het is erg handig ding... En nu zal ik dit laten zien met een specifiek voorbeeld. Laten we aannemen dat de volgende stijl is gedefinieerd voor alle links in de koptekst op onze pagina:

En daarom wordt elke tekst die een hyperlink is automatisch rood en wordt deze niet meer onderstreept. En dus hebben we besloten om het copyright aan het einde van de pagina aan te geven, maar om dit te doen is niet erg opvallend, om er niet de aandacht op te vestigen. Maar toch willen we dat het copyright ook een link is. We hoeven dit maar op één plek op de pagina te doen, en het is onpraktisch om hiervoor een extra klasse te definiëren. In dit geval zijn we bij hulp zal komen trapsgewijze stijlen. Het is voldoende om de linkkleur lokaal te overschrijven:

Auteursrecht (C)
1998-2001 Kersenontwerp

We hebben dit gedaan met behulp van de stijlparameter en, zoals u zich herinnert, werkt deze alleen binnen de limieten van de tag waarin deze is gedefinieerd. Wat we nodig hebben.

Je hebt waarschijnlijk gemerkt dat ik in het bovenstaande voorbeeld in omloop ben gekomen nieuwe tag... Het is speciaal ontworpen voor dergelijke gevallen. Het enige dat het doet, is een gebied definiëren waarop we de stijl kunnen toepassen. Dit is een erg handig label omdat: voegt geen onnodige spatie voor of na zichzelf in (d.w.z. lege verticale spatie), zoals de tag doet

In welke tags is het beter om stijlen te definiëren met behulp van een klasse? Meestal wordt hiervoor een van de volgende constructies gebruikt:

Iets