Wyświetl i zmień CSS

Kayce Basques

Sofia Emelianova

Skorzystaj z tych interaktywnych samouczków, aby poznać podstawy wyświetlania i zmieniania kodu CSS strony za pomocą Narzędzi deweloperskich w Chrome.

Wyświetl kod CSS elementu

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

   Sprawdź mnie!

2. Zwróć uwagę na element Inspect me! podświetlony na niebiesko w drzewie DOM.

   

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

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

5. W panelu Elementy > Style znajdź regułę klasy aloha.

   W panelu Style wymienione są reguły CSS stosowane do dowolnego elementu wybranego w drzewie DOM. Powinno on nadal być elementem Inspect me!.

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

Jeśli chcesz zadokować okno Narzędzi deweloperskich po prawej stronie widocznego obszaru, tak jak na zrzucie ekranu w kroku 1, przeczytaj artykuł Zmiana miejsca docelowego Narzędzi deweloperskich.

Dodawanie deklaracji CSS do elementu

Jeśli chcesz zmienić lub dodać deklaracje CSS do elementu, skorzystaj z panelu Style.

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

   Dodaj do mnie kolor tła!

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

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

4. Wpisz honeydew i naciśnij Enter. W drzewie DOM widać, że do elementu została zastosowana deklaracja stylu wbudowanego.

Dodawanie klasy CSS do elementu

W panelu Style możesz zobaczyć, jak wygląda element po zastosowaniu lub usunięciu klasy CSS.

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

   Dodaj do mnie zajęcia

2. Kliknij .cls. W Narzędziach deweloperskich znajduje się pole tekstowe, w którym można dodać klasy do wybranego elementu.

3. Wpisz color_me w polu tekstowym Dodaj nowe zajęcia i naciśnij Enter. Pod polem tekstowym Dodaj nową klasę pojawi się pole wyboru, w którym możesz włączać i wyłączać klasę. Jeśli do elementu Add a class to me! zastosowano inne klasy, możesz je również tutaj przełączać.

Dodawanie pseudostanu do klasy

W panelu Style możesz zastosować pseudostan CSS do elementu. Narzędzia deweloperskie obsługują :active, :focus, :focus-within, :target, :hover, :visited i focus-visible.

1. Najedź kursorem na tekst Hover over me! poniżej. Kolor tła ulegnie zmianie.

   Najedź na mnie!

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

3. W panelu Style kliknij :hov.

4. Zaznacz pole wyboru :hover. Kolor tła zmieni się jak wcześniej, nawet jeśli nie najedziesz kursorem na element.

Zmiana wymiarów elementu

Za pomocą interaktywnego diagramu Model pudełka w panelu Style możesz zmienić szerokość, wysokość, dopełnienie, margines lub długość obramowania elementu.

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

   Zmień moją marżę!

2. Aby wyświetlić Model pola, kliknij przycisk Pokaż pasek boczny na pasku działań w panelu Style.

3. Na diagramie Model pola w panelu Style najedź kursorem na dopełnienie. Dopełnienie elementu jest wyróżnione w widocznym obszarze.

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

5. Wpisz 100 i naciśnij Enter.

Domyślnie Model pola jest ustawiany na piksele, ale akceptuje też inne wartości, takie jak 25% i 10vw.

Ważne: w deklaracjach reguł w panelu Style możesz też zmieniać właściwości długości i ich jednostki za pomocą wskaźnika.