Exerciții - Stil HTML cu CSS

  • 10 minute

Foile de stil în cascadă (CSS) vă permit să specificați cum ar trebui să arate pagina. Ideea de bază este să definiți stilul care trebuie să fie pentru elementele pe care le utilizați în paginile HTML. În timp ce elementele HTML definesc conținutul, stilurile CSS definesc aspectul acestui conținut.

De exemplu, puteți să aplicați colțuri rotunjite sau să dați un fundal gradient unui element sau să utilizați CSS pentru a specifica modul în care arată hyperlinkurile și a răspunde atunci când interacționați cu ele. De asemenea, puteți efectua aspecte de pagină sofisticate și efecte de animație.

Aveți posibilitatea să aplicați stiluri la anumite elemente, la toate elementele de un anumit tip sau să utilizați clase pentru a stila mai multe elemente diferite.

În acest exercițiu, aplicați stiluri CSS la elementele de pagină HTML și adăugați un cod CSS pentru a defini temele luminoase și întunecate. Apoi verificați rezultatele în instrumentele de dezvoltator ale browserului.

CSS extern

În unitatea anterioară despre HTML, ați legat la un fișier CSS extern din 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">
...

Un beneficiu al CSS extern este că mai multe pagini HTML se pot lega la același fișier CSS. Dacă efectuați o modificare la CSS, stylingul dvs. este actualizat pentru fiecare pagină. Atunci când utilizați un fișier HTML pentru conținutul paginii, un fișier CSS pentru stil și un fișier JavaScript pentru interacțiune, se numește separarea preocupărilor.

Așa cum este descris anterior, puteți scrie, de asemenea, CSS direct în HTML, care se numește css intern. Chiar și pentru un site web de bază, există atât de multe reguli CSS pe care pagina HTML le poate aglomera rapid. Cu mai multe pagini, același CSS ar fi adesea repetat și dificil de gestionat.

Reguli CSS

Regulile CSS sunt modul în care aplicați stiluri la elementele HTML. Regulile CSS au un selector , care este utilizat pentru a exprima elementul (sau elementele) la care să se aplice stilurile.

În Visual Studio Code, deschideți fișierul main.css și introduceți următoarele:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Acest fragment de cod conține două reguli. Fiecare regulă are:

  • Un selector . body și ul sunt selectorii celor două reguli și sunt utilizați pentru a selecta la ce elemente se aplică stilurile.
  • O acoladă de deschidere ({).
  • O listă de declarații de stil care determină cum ar trebui să arate elementele selectate.
  • Acoladă de închidere (}).

De exemplu, selectorul ul selectează elementul HTML <ul> din pagină pentru a aplica stiluri la acesta. Declarația este font-family: helveticași determină stilul care ar trebui să fie. Numele proprietății este font-family, iar valoarea este helvetica.

După cum vedeți în continuare, vă puteți defini propriile nume particularizate pentru elemente.

Selectoare

ID și selectori de clasă vă permit să aplicați stiluri la numele de atribute particularizate din HTML. Utilizați un ID pentru a stila un element, în timp ce utilizați clase pentru a stila mai multe elemente.

  1. Copiați următorul cod și adăugați-l la fișierul CSS. Lipiți-l după acoladă închisă pentru selectorul de ul pe care l-ați adăugat anterior.

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    Codul precedent conține trei reguli CSS, cu ultimele două reguli care utilizează atribute particularizate pentru a selecta elemente: .list și #msg.

    • .list este un selector de clasă . Fiecare element HTML care conține un atribut class setat la list obține stilurile definite în cadrul acestui selector.

    • #msg este un selector de ID . Elementul HTML care are atributul său id setat la msg obține stilurile definite în cadrul acestui selector.

    Numele pe care le utilizați pentru selectori pot fi arbitrare, atât timp cât acestea corespund cu ceea ce ați definit în HTML.

  2. Salvați lucrul selectând Control+S în Windows sau Command+S pe macOS.

Vizualizare în browser

  1. Pentru a previzualiza utilizând Visual Studio Code, faceți clic dreapta pe fișierul index.html în Explorer, apoi selectați Deschidere în browserul implicit.

    Important

    Chiar dacă editați fișierul main.css, pentru a previzualiza modificările, trebuie să selectați fișierul index.html.

    Pagina web se deschide în browserul implicit.

    Captură de ecran a site-ului web cu stilurile de font aplicate.

Stilurile de font pe care vă așteptați să le vedeți? Este interesant cum stilurile aplicate la <body> sunt moștenite pe elementul <h1>. Nu am definit nimic pentru <h1>, dar încă a primit fontul care a fost definit în <body>. Acest mecanism de moștenire de la elementele părinte la descendenții lor este unul dintre aspectele cheie ale CSS. Totuși, elementele <li> au un alt font. Stilul pentru elementele <li> înlocuiește setul de stiluri pentru <body>, deoarece elementul <li> este un descendent al elementului <ul>, pentru care ați definit un stil.

Atunci când utilizați Deschidere în browserul implicit în Visual Studio Code, aceasta deschide o filă nouă în browser de fiecare dată. Pentru a evita deschiderea unei file noi, puteți reîncărca fila care conține deja site-ul web.

Pentru a reîncărca fila, apăsați F5, care este comanda rapidă de la tastatură pentru reîmprospătare sau apăsați Ctrl+R pe Windows sau Linux și Command+R pe un Mac.

Adăugarea unei teme luminoase

În continuare, adăugați suport pentru o temă de culoare pentru site-ul web. Începeți prin definirea unei teme colorate la culoare deschisă utilizând coduri de culoare hex.

  1. În fișierul CSS (main.css), adăugați următorul cod la sfârșitul fișierului.

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

    În acest exemplu, #000000 specifică negru pentru culoarea fontului și #00FF00 specifică verde pentru culoarea de fundal.

  2. În fișierul HTML (index.html), actualizați elementul <body> cu numele clasei light-theme. Acum, selectorul de clasă pentru tema luminos aplică corect stilurile.

    <body class="light-theme">

Vizualizare în browser

  • Pentru a previzualiza utilizând Visual Studio Code, faceți clic dreapta pe index.html, apoi selectați Deschidere în browserul implicit sau reîncărcați fila anterioară apăsând F5.

    Observați că tema deschisă utilizând un fundal verde apare.

    Captură de ecran a site-ului web cu tema sa deschisă aplicată.

View applied CSS

  1. În vizualizarea browser, deschideți Instrumente pentru dezvoltatori.

    Faceți clic dreapta pe pagină și selectați Inspectațisau selectați comanda rapidă F12 sau Ctrl+Shift+I.

  2. Selectați fila Elemente și selectați fila Stiluri din fila Elemente (ar trebui să fie deja selectată în mod implicit).

  3. Treceți cu mouse-ul peste diversele elemente HTML și, pe măsură ce selectați câteva elemente, observați cum se afișează instrumentele pentru dezvoltatori ce stiluri sunt aplicate în fila stiluri.

  4. Selectați elementul <body>. Rețineți light-theme aplicate.

  5. Selectați lista neordonată <ul> element. Rețineți stilul particularizat font-family: helvetica;, care înlocuiește stilul pentru elementul <body>.

Captură de ecran a site-ului web cu tema sa deschisă aplicată și Instrumente pentru dezvoltatori lângă acesta afișând panoul Elemente cu codul HTML și CSS.

Pentru a afla mai multe despre vizualizarea stilurilor CSS în Instrumente pentru dezvoltatori, consultați Începeți vizualizarea și modificarea css articol.

Adăugarea unei teme întunecate

Pentru tema Întunecat, veți configura infrastructura în pregătirea pentru următoarea unitate, în care veți activa comutarea temelor pe pagina web.

Pentru a adăuga suport pentru o temă întunecată la CSS, urmați acești pași.

  1. În fișierul CSS (main.css), adăugați câteva constante la rădăcina paginii de la începutul fișierului.

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

    Selectorul :root reprezintă elementul <html> din pagina HTML. Pentru acest tip de activitate, un exemplu de bună practică este să definiți un set de variabile CSS globale într-o regulă CSS cu selectorul :root. În acest exemplu, ați definit trei variabile de culoare. Acum puteți utiliza aceste variabile în alte reguli CSS.

  2. La sfârșitul fișierului CSS, înlocuiți regula de light-theme cu următorul cod pentru a-l actualiza și a adăuga selectorul de dark-theme.

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

    În codul precedent, ați definit două variabile noi, bg și fontColor, care specifică un fundal și o culoare de font. Aceste variabile utilizează cuvântul cheie var pentru a seta valorile proprietății lor la variabilele specificate anterior în selectorul de :root.

  3. În continuare, în fișierul CSS, înlocuiți selectorul curent body cu următorul cod.

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

    În acest exemplu, utilizați selectorul de body pentru a seta proprietățile background și color și, deoarece elementele vizibile pe pagina web sunt toate în interiorul elementului <body>, ele moștenesc culorile setate pe <body>.

  4. În fișierul CSS, eliminați regulile cu selectorii de #msg și ul, astfel încât să moștenească același font de la <body>.

  5. Nu uitați să salvați fișierul selectând Control+S sau Command+S.

    Fișierul CSS (main.css) ar trebui să arate acum astfel:

    :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. Pentru a vizualiza tema întunecată, deschideți fișierul index.html și editați manual tema implicită în atributul clasei <body> la tema întunecată (dark-theme). Salvați fișierul și reîncărcați pagina în browser.

    Captură de ecran a site-ului web cu tema sa întunecată aplicată și Instrumente pentru dezvoltatori lângă acesta.

  7. Editați atributul de clasă <body> pentru a comuta implicit înapoi la tema luminos.

În următoarea unitate, utilizați JavaScript pentru a oferi interactivitate și a accepta comutarea temelor.

Utilizați GitHub Copilot pentru a adăuga o temă

Puteți utiliza GitHub Copilot în IDE pentru a genera CSS pentru a adăuga o temă nouă. Puteți particulariza solicitarea de a specifica proprietăți pentru a defini stilurile pentru elementele HTML în funcție de cerințele dvs.

Următorul text arată un exemplu de solicitare pentru Copilot Chat:

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.

GitHub Copilot este susținut de inteligența artificială, deci sunt posibile surprize și greșeli. Pentru mai multe informații, consultați Întrebări frecvente despre Copilot.

Aflați mai multe despre GitHub Copilot în Visual Studio Code.