Wyświetl i zmień CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Wykonaj te interaktywne samouczki, aby poznać podstawy wyświetlania i zmieniania kodu CSS strony za pomocą Narzędzi deweloperskich w Chrome.

Wyświetlanie kodu CSS elementu

  1. Kliknij prawym przyciskiem myszy tekst Inspect me! poniżej i kliknij Zbadaj. Otworzy się panel Elementy w Narzędziach deweloperskich.

    Sprawdzaj mnie

  2. Zwróć uwagę na element Inspect me! wyróżniony na niebiesko w drzewie DOM.

    Wyróżniony element.

  3. W drzewie DOM znajdź wartość atrybutu data-message dla elementu Inspect me!.

  4. Wpisz wartość atrybutu w polu tekstowym poniżej.

  5. Na karcie Elementy > Style odszukaj regułę klasy aloha.

    Karta Style zawiera reguły CSS stosowane do dowolnego elementu wybranego w drzewie DOM, który powinien nadal być elementem Inspect me!.

  6. Klasa aloha deklaruje wartość dla padding. Wpisz tę wartość i jej jednostkę bez spacji w polu tekstowym poniżej.

Jeśli chcesz przypiąć okno Narzędzi dla programistów po prawej stronie widocznego obszaru, tak jak na zrzucie ekranu w kroku 1, zapoznaj się z artykułem Zmiana położenia Narzędzi dla programistów.

Dodawanie deklaracji CSS do elementu

Jeśli chcesz zmienić lub dodać do elementu deklaracje CSS, użyj karty Style.

  1. Kliknij prawym przyciskiem myszy tekst Add a background color to me! poniżej i kliknij Zbadaj.

    Dodaj mi kolor tła.

  2. Kliknij element.style u góry karty Style.

  3. Wpisz background-color i naciśnij Enter.

  4. Wpisz honeydew i naciśnij Enter. W drzewie DOM widać, że do elementu zastosowano deklarację stylu wbudowanego.

Dodanie do elementu deklaracji CSS na karcie Style.

Dodawanie klasy CSS do elementu

Na karcie Style możesz sprawdzić, jak element wygląda, gdy zastosujesz lub usuniesz klasę CSS.

  1. Kliknij prawym przyciskiem myszy element Add a class to me! poniżej i wybierz Zbadaj.

    Dodaj zajęcia do mnie

  2. Kliknij .cls. W DevTools pojawi się pole tekstowe, w którym możesz dodawać klasy do wybranego elementu.

  3. Wpisz color_me w polu tekstowym Dodaj nowe zajęcia, a następnie naciśnij Enter. Pod polem tekstowym Dodaj nową klasę pojawi się pole wyboru, za pomocą którego możesz włączać i wyłączać klasę. Jeśli do elementu Add a class to me! zostały zastosowane inne klasy, możesz je też włączać i wyłączać.

Zastosowanie klasy color_me do elementu.

Dodawanie pseudostanu do klasy

Aby zastosować pseudostan CSS do elementu, użyj karty Style.

  1. Najedź kursorem na tekst Hover over me! poniżej. Zmienia się kolor tła.

    Najedź na mnie kursorem!

  2. Kliknij prawym przyciskiem myszy tekst Hover over me! i kliknij Zbadaj.

  3. Na karcie Style kliknij :hov.

  4. Zaznacz pole wyboru :hover. Kolor tła zmienia się tak jak wcześniej, mimo że nie najeżdżasz kursorem na element.

przełączanie pseudostanu najechania kursorem na element;

Więcej informacji znajdziesz w artykule Przełączanie pseudoklasy.

Zmienianie wymiarów elementu

Aby zmienić szerokość, wysokość, wypełnienie, margines lub długość obramowania elementu, użyj interaktywnego diagramu Model pudełka na karcie Style.

  1. Kliknij prawym przyciskiem myszy element Change my margin! poniżej i wybierz Zbadaj.

    Zmień margines!

  2. Aby wyświetlić model pudełka, na pasku czynności na karcie Style kliknij Pokaż pasek boczny. przycisk Pokaż pasek boczny.przycisk Pokaż panel boczny.

  3. Na diagramie Model pudełka na karcie Style najedź kursorem na wypełnienie. Margines elementu jest wyróżniony w widocznym obszarze. Dopełnienie elementu.

  4. Kliknij dwukrotnie lewy margines w sekcji Model pudełka. Element nie ma obecnie marginesów, więc atrybut margin-left ma wartość -.

  5. Wpisz 100 i naciśnij Enter. Zmiana margin-left elementu.

Wartość domyślna Box Model to piksele, ale można też podać inne wartości, np. 25% lub 10vw.