Ćwiczenie — style kodu HTML przy użyciu arkuszy CSS

  • 10 min

Kaskadowe arkusze stylów (CSS) umożliwiają określenie wyglądu strony. Podstawowym pomysłem jest zdefiniowanie stylu elementów używanych na stronach HTML. Chociaż elementy HTML definiują zawartość, style CSS definiują, jak wygląda ta zawartość.

Na przykład można zastosować zaokrąglone rogi lub nadać tło gradientowe elementowi lub użyć css, aby określić wygląd hiperlinków i reagować podczas interakcji z nimi. Można również wykonywać zaawansowane układy stron i efekty animacji.

Style można stosować do określonych elementów, wszystkich elementów określonego typu lub używać klas do stylu wielu różnych elementów.

W tym ćwiczeniu zastosujesz style CSS do elementów strony HTML i dodasz kod CSS, aby zdefiniować motywy jasne i ciemne. Następnie sprawdzisz wyniki w narzędziach deweloperskich przeglądarki.

Zewnętrzny arkusz CSS

W poprzedniej lekcji dotyczącej kodu HTML połączono z zewnętrznym plikiem CSS z kodu HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Jedną z zalet zewnętrznego arkusza CSS jest to, że wiele stron HTML może łączyć się z tym samym plikiem CSS. Jeśli wprowadzisz zmianę w arkuszu CSS, styl zostanie zaktualizowany dla każdej strony. W przypadku korzystania z pliku HTML dla zawartości strony, pliku CSS do stylów i pliku JavaScript na potrzeby interakcji jest to nazywane separacją problemów.

Jak opisano wcześniej, można również napisać arkusz CSS bezpośrednio w kodzie HTML, który jest nazywany wewnętrznym kodem CSS. Nawet w przypadku podstawowej witryny internetowej istnieje tak wiele reguł CSS, które strona HTML może szybko stać się zaśmiecona. Na więcej niż jednej stronie ten sam arkusz CSS często powtarza się i wymaga zarządzania.

Reguły CSS

Reguły CSS to sposób stosowania stylów do elementów HTML. Reguły CSS mają selektor, który służy do wyrażania elementu (lub elementów), do którego mają być stosowane style.

W programie Visual Studio Code otwórz main.css plik i wprowadź następujące polecenie:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Ten fragment kodu zawiera dwie reguły. Każda reguła ma:

  • Selektor. body i ul są selektorami dwóch reguł i służą do wybierania, do których elementów mają zastosowanie style.
  • Otwierający nawias klamrowy ({).
  • Lista deklaracji stylów określających, jak powinny wyglądać wybrane elementy.
  • Zamykający nawias klamrowy (}).

Na przykład selektor wybiera ul element HTML na stronie, <ul> aby zastosować do niego style. Deklaracja to font-family: helvetica, i określa, jaki powinien być styl. Nazwa właściwości to font-family, a wartość to helvetica.

Jak widać, możesz zdefiniować własne nazwy niestandardowe dla elementów.

Selektory

Selektory identyfikatorów i klas umożliwiają stosowanie stylów do niestandardowych nazw atrybutów w kodzie HTML. Identyfikator służy do stylu jednego elementu, natomiast klasy służą do stylu wielu elementów.

  1. Skopiuj następujący kod i dodaj go do pliku CSS. Wklej go po zamykającym nawiasie klamrowym dla wcześniej dodanego selektora ul .

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    Powyższy kod zawiera trzy reguły CSS, z dwoma ostatnimi regułami używającymi atrybutów niestandardowych do wybierania elementów: .list i #msg.

    • .listjest selektorem klas. Każdy element HTML, który zawiera class zestaw list atrybutów, pobiera style zdefiniowane w tym selektorze.

    • #msgjest selektorem identyfikatorów. Element HTML, który ma ustawiony idmsg atrybut , pobiera style zdefiniowane w tym selektorze.

    Nazwy używane dla selektorów mogą być dowolne, o ile odpowiadają one elementom zdefiniowanym w kodzie HTML.

  2. Zapisz swoją pracę, wybierając pozycję Control+S w systemie Windows lub Command+S w systemie macOS.

Wyświetlanie w przeglądarce

  1. Aby wyświetlić podgląd przy użyciu programu Visual Studio Code, kliknij prawym przyciskiem myszy index.html plik w Eksploratorze, a następnie wybierz polecenie Otwórz w domyślnej przeglądarce.

    Ważne

    Mimo że tylko edytujesz main.css plik, aby wyświetlić podgląd zmian, należy wybrać index.html plik.

    Strona internetowa zostanie otwarta w domyślnej przeglądarce.

    Zrzut ekranu witryny internetowej ze zastosowanymi stylami czcionek.

Czy style czcionek są wyświetlane? Interesujące jest, jak style stosowane do elementu <body> są dziedziczone na elemecie <h1> . Nie zdefiniowaliśmy niczego dla <h1>elementu , ale nadal mamy czcionkę, która została zdefiniowana na .<body> Ten mechanizm dziedziczenia od elementów nadrzędnych do ich elementów potomnych jest jednym z kluczowych aspektów css. Jednak <li> elementy mają inną czcionkę. Styl elementów zastępuje zestaw <li> stylów, <body> ponieważ <li> element jest elementem potomnym <ul> elementu, dla którego zdefiniowano styl.

Gdy używasz opcji Otwórz w domyślnej przeglądarce w programie Visual Studio Code, zostanie otwarta nowa karta w przeglądarce za każdym razem. Aby uniknąć otwierania nowej karty, możesz ponownie załadować kartę, która już zawiera witrynę internetową.

Aby ponownie załadować kartę, naciśnij F5, który jest skrótem klawiaturowym odświeżania, lub naciśnij Ctrl+R w systemie Windows lub Linux i Command+R na komputerze Mac.

Dodawanie motywu jasnego

Następnie dodaj obsługę motywu kolorów dla witryny internetowej. Zacznij od zdefiniowania motywu w kolorze jasnym przy użyciu kodów kolorów szesnastkowych.

  1. W pliku CSS (main.css) dodaj następujący kod na końcu pliku.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    W tym przykładzie #000000 określa kolor dla koloru czcionki i #00FF00 określa kolor zielony dla koloru tła.

  2. W pliku HTML (index.html) zaktualizuj <body> element przy użyciu nazwy light-themeklasy . Teraz selektor klas dla motywu lekkiego prawidłowo stosuje style.

    <body class="light-theme">

Wyświetlanie w przeglądarce

  • Aby wyświetlić podgląd przy użyciu programu Visual Studio Code, kliknij prawym przyciskiem myszy pozycję index.html, a następnie wybierz polecenie Otwórz w domyślnej przeglądarce lub załaduj ponownie poprzednią kartę, naciskając F5.

    Zwróć uwagę, że motyw jasny z zielonym tłem jest wyświetlany.

    Zrzut ekranu przedstawiający witrynę internetową z zastosowanym motywem jasnym.

Wyświetl zastosowany arkusz CSS

  1. W widoku przeglądarki otwórz pozycję Narzędzia deweloperskie.

    Kliknij prawym przyciskiem myszy stronę i wybierz pozycję Sprawdź lub wybierz skrót F12 lub Ctrl+Shift+I.

  2. Wybierz kartę Elementy i wybierz kartę Style na karcie Elementy (powinna być już zaznaczona domyślnie).

  3. Umieść kursor na różnych elementach HTML i po wybraniu kilku elementów zwróć uwagę, jak narzędzia deweloperskie wyświetlają, które style są stosowane do nich na karcie Style .

  4. <body> Wybierz element. Zanotuj light-theme zastosowane.

  5. Wybierz nieurządkowany element listy <ul> . Zwróć uwagę na styl font-family: helvetica;niestandardowy , który zastępuje styl elementu <body> .

Zrzut ekranu przedstawiający witrynę internetową z zastosowanym motywem jasnym i narzędziami deweloperów obok niego przedstawiający panel Elementy z kodem HTML i CSS.

Aby dowiedzieć się więcej na temat wyświetlania stylów CSS w narzędziach deweloperskich, zapoznaj się z artykułem Wprowadzenie do wyświetlania i zmieniania arkuszy CSS .

Dodawanie motywu ciemnego

W przypadku motywu ciemnego skonfigurujesz infrastrukturę w ramach przygotowań do następnej lekcji, w której włączysz przełączanie motywu na stronie internetowej.

Aby dodać obsługę motywu ciemnego do arkusza CSS, wykonaj następujące kroki.

  1. W pliku CSS (main.css) dodaj kilka stałych do katalogu głównego strony na początku pliku.

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    Selektor :root reprezentuje <html> element na stronie HTML. W tym rodzaju zadania najlepszym rozwiązaniem jest zdefiniowanie zestawu globalnych zmiennych CSS w regule CSS z selektorem :root . W tym przykładzie zdefiniowano trzy zmienne kolorów. Teraz możesz użyć tych zmiennych w innych regułach CSS.

  2. Na końcu pliku CSS zastąp regułę light-theme następującym kodem, aby go zaktualizować i dodać dark-theme selektor.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    W poprzednim kodzie zdefiniowano dwie nowe zmienne i bgfontColor, które określają tło i kolor czcionki. Te zmienne używają słowa kluczowego var , aby ustawić ich wartości właściwości na zmienne określone wcześniej w selektorze :root .

  3. Następnie w pliku CSS zastąp bieżący body selektor następującym kodem.

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

    W tym przykładzie używasz selektora body do ustawiania background właściwości icolor, ponieważ elementy widoczne na stronie internetowej znajdują się wewnątrz <body> elementu, dziedziczą kolory ustawione na .<body>

  4. W pliku CSS usuń reguły za pomocą selektorów #msg i ul , aby dziedziczyły również tę samą czcionkę z <body>.

  5. Pamiętaj, aby zapisać plik, wybierając pozycję Control+S lub Command+S.

    Plik CSS (main.css) powinien teraz wyglądać następująco:

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. Aby wyświetlić motyw ciemny, otwórz plik index.html i ręcznie edytuj motyw domyślny w atrybucie <body> klasy na motyw ciemny (dark-theme). Zapisz plik i załaduj ponownie stronę w przeglądarce.

    Zrzut ekranu przedstawiający witrynę internetową z zastosowanym ciemnym motywem i obok niej narzędziami deweloperskich.

  7. Edytuj atrybut klasy, <body> aby przełączyć domyślny motyw z powrotem na jasny motyw.

W następnej lekcji użyjesz języka JavaScript, aby zapewnić interakcyjność i obsługę przełączania motywów.

Dodawanie motywu za pomocą narzędzia GitHub Copilot

Możesz użyć narzędzia GitHub Copilot w środowisku IDE, aby wygenerować arkusz CSS w celu dodania nowego motywu. Możesz dostosować monit, aby określić właściwości w celu zdefiniowania stylów dla elementów HTML zgodnie z wymaganiami.

Poniższy tekst przedstawia przykładowy monit dotyczący czatu copilot:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

Narzędzie GitHub Copilot jest obsługiwane przez sztuczną inteligencję, więc możliwe są niespodzianki i błędy. Aby uzyskać więcej informacji, zobacz Copilot FAQs.

Dowiedz się więcej o narzędziu GitHub Copilot w programie Visual Studio Code.