Stiluri CSS în HTML. Atribute: id, class. Referințe externe: external style sheets.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
Atributul id
Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului:
Exemplu:
Atributul class
Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului:
Exemplu:
Referințe externe
Foile de stil externe (external style sheets) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Acest exemplu utilizează o adresă URL completă pentru a face legătura cu o foaie de stil (style sheet):
Exemplu:
Exemplu:
Exemplu:
Rezumat
HTML Style Tags
Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului:
<p id = "p01"> Sunt diferit </p>
apoi definiți un stil pentru elementul cu id-ul specific:Exemplu:
#p01 {
color: blue;
}
Notă: Id-ul unui element ar trebui să fie unic într-o pagină, astfel încât selectorul de id să fie utilizat pentru a selecta un element unic!Atributul class
Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului:
<p class = "error"> Sunt diferit </p>
apoi definiți un stil pentru elementele cu clasa specifică:Exemplu:
p.error {
color: red;
}
Referințe externe
Foile de stil externe (external style sheets) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Acest exemplu utilizează o adresă URL completă pentru a face legătura cu o foaie de stil (style sheet):
Exemplu:
<link rel="stylesheet" href="https://www.lectii-virtuale.ro/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în folderul html de pe site-ul web curent:Exemplu:
<link rel="stylesheet" href="/html/styles.css">
Acest exemplu se leagă la o foaie de stil localizată în același folder cu pagina curentă:Exemplu:
<link rel="stylesheet" href="styles.css">
Rezumat
- Utilizați atributul HTML style pentru stilul CSS în linie (inline).
- Utilizați elementul HTML <style> pentru a defini stilul CSS intern.
- Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern.
- Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>.
- Utilizați proprietatea CSS color pentru culorile de text.
- Utilizați proprietatea CSS font-family pentru fonturile text.
- Utilizați proprietatea CSS font-size pentru dimensiunile textului.
- Utilizați proprietatea CSS border pentru margini.
- Utilizați proprietatea CSS padding pentru spațiu în interiorul border.
- Utilizați proprietatea CSS margin pentru spațiu în afara border.
HTML Style Tags
| Etichetă | Descriere |
|---|---|
| <style> | Definește informațiile despre stil pentru un document HTML |
| <link> | Definește o legătură între un document și o resursă externă |
Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
