CSS bekijken en wijzigen

Sofia Emelianova
Sofia Emelianova

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 in het paneel Elementen > Stijlen de aloha klasseregel.

    In het deelvenster Stijlen worden de CSS-regels weergegeven die worden toegepast op welk element dan ook geselecteerd in de DOM-structuur , wat nog steeds de Inspect me! zou moeten zijn. 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 deelvenster 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 deelvenster 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 deelvenster Stijlen.

Voeg een CSS-klasse toe aan een element

Gebruik het deelvenster 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 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 deelvenster Stijlen om een ​​CSS-pseudostatus op een element toe te passen. DevTools ondersteunt :active , :focus , :focus-within , :target , :hover , :visited focus-visible .

  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 in het deelvenster 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.

Wijzig de afmetingen van een element

Gebruik het interactieve Box Model- diagram in het deelvenster 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 in het deelvenster Stijlen . De knop Zijbalk weergeven.

  3. Beweeg in het Box Model- diagram in het deelvenster 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 left-margin 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 .