CSS bekijken en wijzigen

Kayce Basken
Sofia Emelianova
Sofia Emelianova
GitHub

Volg deze interactieve tutorials om de basisbeginselen te leren van het bekijken en wijzigen van de CSS van een pagina met Chrome DevTools.

Bekijk de CSS van een element

  1. Klik met de rechtermuisknop op Inspect me! tekst hieronder en selecteer Inspecteren . Het Elementenpaneel van DevTools wordt geopend.

    Inspecteer mij!

  2. Observeer de Inspect me! element blauw gemarkeerd in de DOM-structuur .

    Gemarkeerd element.

  3. Zoek in de DOM-structuur de waarde van het data-message attribuut voor Inspect me! element.

  4. Voer de waarde van het kenmerk in het onderstaande tekstvak in.

  5. Zoek op het tabblad Elementen > Stijlen de aloha klasseregel.

    Op het tabblad Stijlen worden de CSS-regels vermeld die worden toegepast op welk element dan ook geselecteerd in de DOM-structuur , wat nog steeds de Inspect me! element.

  6. De klasse aloha declareert een waarde voor padding . Voer deze waarde en de eenheid ervan zonder spaties in het onderstaande tekstvak in.

Als u uw DevTools-venster aan de rechterkant van uw viewport wilt vastzetten, zoals op de schermafbeelding in stap één, raadpleegt u DevTools-plaatsing wijzigen .

Voeg een CSS-declaratie toe aan een element

Gebruik het tabblad Stijlen als u CSS-declaraties aan een element wilt wijzigen of toevoegen.

  1. Klik met de rechtermuisknop op Add a background color to me! tekst hieronder en selecteer Inspecteren .

    Voeg een achtergrondkleur toe aan mij!

  2. Klik op element.style bovenaan het tabblad Stijlen .

  3. Typ background-color en druk op Enter .

  4. Typ honeydew en druk op Enter . In de DOM-structuur kunt u zien dat er een inline-stijldeclaratie op het element is toegepast.

Een CSS-declaratie aan het element toevoegen via het tabblad Stijlen.

Voeg een CSS-klasse toe aan een element

Gebruik het tabblad Stijlen om te zien hoe een element eruitziet wanneer een CSS-klasse wordt toegepast op of verwijderd uit een element.

  1. Klik met de rechtermuisknop op Add a class to me! element hieronder en selecteer Inspecteren .

    Voeg een klasse toe aan mij!

  2. Klik op .cls . DevTools onthult een tekstvak waarin u klassen aan het geselecteerde element kunt toevoegen.

  3. Typ color_me in het tekstvak Nieuwe les toevoegen en druk vervolgens op Enter. Er verschijnt een selectievakje onder het tekstvak Nieuwe klas toevoegen , waarin u de klas kunt in- en uitschakelen. Als het bericht Add a class to me! element waarop andere klassen waren toegepast, zou je ze vanaf hier ook kunnen omschakelen.

De klasse color_me op het element toepassen.

Voeg een pseudostatus toe aan een klasse

Gebruik het tabblad Stijlen om een ​​CSS-pseudostatus op een element toe te passen.

  1. Beweeg over de Hover over me! tekst hieronder. De achtergrondkleur verandert.

    Beweeg over mij!

  2. Klik met de rechtermuisknop op de Hover over me! tekst en selecteer Inspecteren .

  3. Klik op het tabblad Stijlen op :hov .

  4. Vink het selectievakje : hover aan. De achtergrondkleur verandert zoals voorheen, ook al zweeft u niet daadwerkelijk over het element.

De hover-pseudostatus op een element omschakelen.

Zie Een pseudo-klasse omschakelen voor meer informatie.

Wijzig de afmetingen van een element

Gebruik het interactieve Box Model- diagram op het tabblad Stijlen om de breedte, hoogte, opvulling, marge of randlengte van een element te wijzigen.

  1. Klik met de rechtermuisknop op Change my margin! element hieronder en selecteer Inspecteren .

    Verander mijn marge!

  2. Om het Box-model te bekijken, klikt u op de Zijbalk tonen. Zijbalkknop weergeven in de actiebalk op het tabblad Stijlen . De knop Zijbalk weergeven.

  3. Beweeg in het Box Model- diagram op het tabblad Stijlen de muis over opvulling . De opvulling van het element wordt gemarkeerd in de viewport. De opvulling van het element.

  4. Dubbelklik op de linkermarge in het Boxmodel . Het element heeft momenteel geen marges, dus de margin-left heeft de waarde - .

  5. Typ 100 en druk op Enter . De linkermarge van het element wijzigen.

Het Box-model is standaard ingesteld op pixels, maar accepteert ook andere waarden, zoals 25% of 10vw .