Stiluri CSS în HTML. Adăugarea de CSS la elementele HTML: inline cu atributul style, intern folosind elementul style și extern folosind elementul link.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Modelarea HTML cu CSS
CSS înseamnă Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
CSS poate fi adăugat la elementele HTML în 3 moduri:
- Inline - prin utilizarea atributului style în elementele HTML.
- Intern - folosind un element <style> în secțiunea <head>.
- Extern - folosind un fișier CSS extern.
Stilul CSS Inline
Un CSS inline este utilizat pentru a aplica un stil unic la un singur element HTML.
Un CSS inline utilizează atributul style al unui element HTML.
Acest exemplu stabilește culoarea textului elementului <h1> pe albastru:
Exemplu:
<h1 style = "color: blue;"> Acesta este un titlu albastru </h1>
Stilul CSS intern
Un CSS intern este utilizat pentru a defini un stil pentru o singură pagină HTML.
Un CSS intern este definit în secțiunea <head> a unei pagini HTML, în cadrul unui element <style>:
Exemplu:
<! DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {culoare: albastru;}
p {culoare: roșu;}
</style>
</head>
<body>
<h1> Acesta este un titlu </h1>
<p> Acesta este un paragraf. </p>
</ body>
</ html>
Stilul CSS extern
O foaie de stil extern (external style sheet) este utilizată pentru a defini stilul pentru multe pagini HTML.
Cu o foaie de stil extern (external style sheet), puteți schimba aspectul unui întreg site web, schimbând un fișier!
Pentru a utiliza o foaie de stil extern (external style sheet), adăugați o legătură la aceasta în secțiunea <head> a paginii HTML:
Exemplu:
<! DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1> Acesta este un titlu </h1>
<p> Acesta este un paragraf. </p>
</body>
</html>
O foaie de stil extern (external style sheet) poate fi scrisă în orice editor de text. Fișierul nu trebuie să conțină niciun cod HTML și trebuie salvat cu o extensie .css.Iată cum arată „styles.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}