Wyświetl i zmień CSS

Kayce Basques

Sofia Emelianova

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.

   

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 znajdź 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ć deklaracje CSS lub dodać je do elementu, 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.

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. Narzędzia deweloperskie wyświetlają 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 element Add a class to me! ma zastosowane inne klasy, możesz je też włączać i wyłączać.

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 tekst Hover over me! i kliknij Zbadaj.

3. Na karcie Style kliknij :hov.

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

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

Zmiana 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  przycisk Pokaż pasek boczny.

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

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.

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