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świetlanie kodu 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! 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 odszukaj regułę klasy aloha.

   Na karcie Style (Style) są wymienione reguły CSS stosowane do dowolnego elementu wybranego w drzewie DOM (który nadal powinien 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 wybierz 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 została zastosowana deklaracja 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 kliknij Zbadaj.

   Dodaj do mnie zajęcia

2. Kliknij .cls. W Narzędziach deweloperskich pojawi się pole tekstowe, w którym możesz dodać 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, w którym możesz włączać i wyłączać klasę. Jeśli do elementu Add a class to me! zastosowano jakiekolwiek inne klasy, tutaj możesz też je przełą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. Kolor tła się zmieni.

   Najedź na mnie kursorem!

2. Kliknij prawym przyciskiem myszy tekst Hover over me! i wybierz 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.

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

Zmienianie wymiarów elementu

Przy użyciu interaktywnego diagramu Model pudełka na karcie 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ń 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 element margin-left ma wartość -.

5. Wpisz 100 i naciśnij Enter.

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

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