Ćwiczenie — selektory

Ukończone

W poprzednim ćwiczeniu zastosowano styl do elementów, takich jak html i h1. Często musisz być nieco węższy w stosowaniu stylu.

Celem tego ćwiczenia jest ustawienie stylu sekcji i linków do mediów społecznościowych i doświadczeń na stronie.

Stosowanie stylu do klas i identyfikatorów

Zaczynasz od ustawienia stylu dla sekcji mediów społecznościowych i doświadczeń.

1. Wróć do okna vscode.dev użytego w poprzednim ćwiczeniu.

2. Wewnątrz index.htmlzwróć uwagę na section element z identyfikatorem mediów społecznościowych w wierszu 10; zastosuj styl do tej sekcji, aby ustawić kolor na niebieski.

3. Na końcu style.css dodaj następujący kod CSS, aby ustawić kolor elementu social-media :

   #social-media {
       color: blue;
   }
   

4. Strona zostanie zaktualizowana, ustawiając zawartość w sekcji mediów społecznościowych na niebiesko.

5. Wewnątrz index.htmlzwróć uwagę na dwie sekcje w wierszach 28 i 32 z doświadczeniem klasowym; Styl jest stosowany do tych sekcji, aby czcionka była pisana kursywą.

6. Na końcu style.css dodaj następujący kod CSS, aby zmodyfikować czcionkę dla elementów z klasą experience :

   .experience {
       font-style: italic;
   }
   

7. Strona zostanie zaktualizowana, ustawiając czcionkę wewnątrz środowiska na kursywę.

Używanie pseudoklas do ustawiania stylu linku

Wielu deweloperów sieci Web zmienia kolor i styl hiperlinków na stronie. Ustawiasz kolor linków na zielony i podświetlasz linki, gdy użytkownik najedzie na nie kursorem.

1. Na końcu style.css dodaj następujący kod CSS, aby ustawić linki w kolorze zielonym:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. Strona zostanie zaktualizowana w celu wyświetlenia łączy jako zielonych.

3. Dodaj następujący kod CSS na końcu style.css , aby wyróżnić linki podczas umieszczania kursora na nich:

   a:hover {
       background-color: yellow;
   }
   

4. Umieść kursor na linkach na stronie i zwróć uwagę, że linki są wyróżnione.

Wykonaj przegląd

Poniższy zrzut ekranu przedstawia wyniki zastosowanego pliku CSS. Użyto klas, identyfikatorów i pseudo-klas, aby zastosować style do określonych elementów i logicznych grup elementów.