Wat is de betekenis van de ‘trapsgewijze’ in CSS?

Wat is de exacte betekenis van het begrip “Cascading” in CSS? Ik ben aan de verschillende opvattingen, dus ik vraag het hier. Een voorbeeld zou helpen.

  • Als je iets als ik, het “Cascading” verwijst naar de trapsgewijze bedragen van de tijd die je zal besteden aan het aanpassen van uw div breedte in twee pixel om de dingen te kijken “just right” in plaats van zich te concentreren op uw fundamentele business logica. (Ik zal waarschijnlijk een paar negatieven voor dat antwoord, maar het is gewoon waar)

 

12 Replies
  1. 103

    “Cascading” betekent in deze context dat omdat er meer dan één stylesheet regel van toepassing kunnen zijn op een bepaald stuk van HTML, er is een bekende manier om te bepalen welke specifieke stylesheet regel van toepassing is op welk stuk van HTML.

    De regel gebruikt wordt gekozen door trapsgewijs van de meer algemene regels van de specifieke regel vereist. De meest specifieke regel is gekozen.

    • wanneer gaat class/ID en de orde komen in het spel?
    • Id ‘ s zijn specifieker dan de klassen. Dus ik denk dat je kunt zeggen dat de klasse regel watervallen naar beneden op de meer specifieke id-regel. Als 2 regels hebben dezelfde prioriteit (zoals 2 klassen met tegenstrijdige regels op één element), dan is de laatst opgegeven optie in uw css bestand voorrang.
    • Dus als ID zegt “A” en de klasse zegt “B”, dan, zelfs als klasse is later in het blad, ID (EEN) wint? I. E. Bestelling komt pas in het spel als twee stijlen hebben exact dezelfde specificiteit?
    • Ja, dat is correct. De id selector is zelfs één van de meest specifieke selectors in CSS. Voor de demonstratie, het zou zelfs “winnen” tegen kiezers als “div.blubb:hover”. Alleen inline styles en de !een belangrijke regel meer specificiteit.
  2. 47

    Toen ik leren CSS, zeg ik altijd tegen de leerlingen: “cascading style sheets” betekent zoiets als “vechten style sheets”.

    Één regel vertelt de H3-tag te rood, een andere regel zegt dat het groen — de regels zijn behoorlijk met elkaar in tegenspraak, wie zal er winnen!? Stylesheet deathmatch!

    OK misschien is dat enigszins overdreven, maar het is veel meer vatbaar is voor niet-code, niet-programmering mensen die net beginnen dan een notie van een cascade, of erfenis.

    Ik natuurlijk zorg ervoor om hen te vertellen dat het niet een probleem voor de style sheets worden met elkaar vechten, dat is de manier waarop de taal is ontworpen.

    • Niet zeker waarom dit is omlaag gestemd. Ziet eruit als een eenvoudige uitleg voor nieuwe leerlingen.
    • Waarschijnlijk omdat het niet uitleggen, die zal winnen, en waarom.
    • Je lijkt te zijn in de war over de vraag. Het is niet “wat is de specificiteit/erfenis”, of over de regels die worden toegepast etc. het is “wat doet trapsgewijze BETEKENEN?”.
    • Ik weet dat dit een oude post, maar toch: ik denk dat het voorbeeld van style sheets en/of CSS-regels “vechten” is een slechte. Veel meer leerzaam om nieuwe leerlingen (in mijn eigen ervaring bij het lesgeven) is te verklaren van de hiërarchie van een regel bij het overschrijven van een vorige. Zeggen, een medewerker schetst een H3 tag rood (1e regel), dan de handen aan zijn QA manager die schuift hem en besluit om het te schilderen groen (2e regel). Geen death match, net corporate hiërarchie. CSS-regels niet “uit te vechten”, ze lopen (cascade) door middel van een strikt hiërarchisch systeem van latere beslissingen neutralisering van de vorige.
    • dit is echt een goed antwoord aub uitleggen verder! Wie zal winnen door het geven van eenvoudige voorbeeld! @AmbroseChapel
    • LOL @ “stylesheet deathmatch!” In de naam van alle katten die ik u belonen 1000 internets voor dit. Dit is een zeer ernstige verklaring die ik namens de katten van het internet. Dank u voor uw tijd.
    • Ik heb downvoted dit geheel want je geeft geen verklaring voor waarom ze “vechten” en wie zal winnen van de strijd, en belangrijker, WAAROM zal dat een overwinning. Dit zijn de fundamentele onderdelen van het beantwoorden van deze vraag.
    • Om duidelijk te zijn, het gewicht van de stijlen bepalen welke van toepassing zouden zijn die bekend is als de Specificiteit. Het begrip “Cascading” heeft te maken met meer dan alleen Specificiteit en omvat de Bron Bestelling. Wanneer de gewichten zijn hetzelfde, dan is de bron om in het spel komt (user-agent stylesheets –> auteur stylesheets –> gebruiker stylesheets), die werkt als een cascade. developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

  3. 18

    Håkon Wium Lie (CSS co-creator) definieert “cascade” in zijn proefschrift over CSS
    “Het proces van het combineren van verschillende style sheets en het oplossen van conflicten tussen hen” https://www.wiumlie.no/2006/phd/

    • Beste tot nu toe.
  4. 4

    Moet je denken aan het van buiten naar binnen. Als je een regel is dat op de body-tag zal het “cascade” door middel van elk kind tag. Als u een regel op een tag in het lichaam zij zal vaststellen dat de regel, enzovoort. Dus de regel stromen door alle content, tenzij onderbroken door een regel van een ingebouwde tag.

    • Dit impliceert niet wat voorrang. Dubbelzinnig?
  5. 2

    U kunt de behandeling van de CSS-verwerking als een waterval bevat een aantal watervallen. Hier zijn de watervallen van boven naar beneden in volgorde: (De onderste kan voorrang op hetzelfde onroerend goed in het hogere.)

    1. user agent verklaringen
    2. gebruiker normale verklaringen
    3. auteur normale verklaringen
    4. auteur belangrijke verklaringen
    5. gebruiker belangrijke verklaringen

    Meer zien in de spec

    De trapsgewijze is om de juiste waarde van de verschillende gebieden. Maar het is verschillend van sorteren. Alleen iets niet in orde is moeten we om te sorteren. Maar in CSS deze oorsprong hebben vaste voorrang. En dus de pseudo-code ziet er als het volgt:

    1. initialiseren van de waarde array;
    2. gelden de waarden van het 1e oorsprong;
    3. gelden de waarden van 2st oorsprong, overschrijven als de waarde bestaat;
    4. toepassing van de waarden van de N-de oorsprong, overschrijven als de waarden bestaat;

    Van de pseudo-code zie je het helemaal ziet eruit als een waterval van verschillende stromen.

  6. 2

    Een verduidelijking die kunnen helpen. Als u twee stylesheets en er is een regel met dezelfde specificiteit in elke, de laatste wint. I. E. de laatste in de cascade heeft de meeste invloed.

    (Dit is slechts een variatie op de twee regels in hetzelfde blad – de laatste wint als alle andere dingen gelijk zijn.)

    Bv, gegeven

    body {
        background:blue;
    }
    
    body {
        background:green;
    }

    dan de achtergrond zal groen worden.

  7. 0

    Het is een proces dat wordt gebruikt voor het oplossen van de conflicten in style sheet specificatie.

    Dat is primely het conflict resolutie proces gebeurt volgens de voorrang, vermeld in CSS.

  8. 0

    CSS staat voor Cascading Style Sheet. Door hun aard stijlen verder naar beneden met een trapsgewijze stijlpagina overschrijven equivalent stijlen hoger (tenzij stijlen hoger zijn meer specifiek). We kunnen dus stellen base stijlen aan het begin van een stylesheet, van toepassing op alle versies van het ontwerp, en vervolgens negeren relevante delen met media queries verder in het document.

  9. 0

    Trapsgewijze middelen te storten in stappen of toevoegen in stappen. Style sheets bevat codes voor het stylen van een html-element. En de wijze waarop de codes zijn geschreven in een style sheet is in de trapsgewijze mode. Of gewoon, rug-aan-rug-codes in lagen voor elk html-element van een html-pagina in style sheet maken de cascading style sheet.

  10. 0

    Trapsgewijze is een algoritme die kent gewicht toe aan elke stijl regel.
    Wanneer verschillende regels worden toegepast, degene met de grootste gewicht voorrang.

  11. -1
    CSS doc    
    p{font-size: 12pt;}
    p{font-size: 14pt;}
    
    <p>My Headline<p>

    zou maken van de p 14pt lettertype, omdat het dichter bij de werkelijke element (externe style sheets laden van de top van het bestand tot de onderkant van het bestand). Als u een gekoppeld stijlblad en vervolgens zijn enkele CSS in de head van je document na koppelen aan de externe CSS-doc, het “in het hoofd” verklaring zou winnen, want het is nog dichter bij het element gedefinieerd. Dit geldt alleen even gewogen kiezers. Check out http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html voor een goede beschrijving van het gewicht van een bepaalde keuzemogelijkheid.

    Dat gezegd, je zou kunnen overwegen om ‘erfenis’ als onderdeel van de cascade als goed voor alle praktische doeleinden. Dingen “cascade” naar beneden van die elementen.

    • Dit houdt in dat de stijlen in tussen materie, zelfs als het niet is gericht op het gegeven element. Dat is onjuist, als ik het volg.
    • Lijkt dit was bewerkt. In ieder geval, ik begrijp niet hoe dit het antwoord op de vraag.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *