Atunci când un browser citeste o foaie de stil, acesta va formata documentul HTML în conformitate cu informațiile din foaia de stil.
Trei moduri de a insera CSS
Există trei moduri de a introduce o foaie de stil:
Foaie de stil extern
Cu o foaie de stil extern, puteți schimba aspectul unui întreg site prin schimbarea doar un singur fișier!
Fiecare pagină trebuie să includă o referință la fișierul extern foaie de stil în interiorul <link> element. <link> elementul merge în interiorul <head> sectiunea:
Exemplu
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head> Încearcă - l singur » O foaie de stil extern poate fi scris în orice editor de text. Fișierul nu trebuie să conțină nici un tag-uri html. Fișierul foaie de stil trebuie să fie salvat cu o .css prelungire.
Iată cum "myStyle.css" arată:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} Nu adăugați un spațiu între valoarea proprietății și unitatea (such as margin-left:20 px; ) . Modul corect este: margin-left:20px;
Foaie de stil intern
O foaie de stil intern poate fi utilizat în cazul în care o singură pagină are un stil unic.
Stiluri interne sunt definite în <style> elementul, în interiorul <head> sectiune a unei pagini HTML:
Exemplu
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Încearcă - l singur » Stiluri Inline
Un stil inline poate fi utilizat pentru a aplica un stil unic pentru un singur element.
Pentru a utiliza stiluri inline, adăugați style atribut element relevant. style atribut poate conține orice proprietate CSS.
Exemplul de mai jos arată cum să schimbe culoarea și marginea din stânga a unui <h1> Element:
Un stil inline pierde multe din avantajele unei foi de stil (prin amestecarea cu continut de prezentare). Utilizați această metodă cu moderație!
Mai multe foi de stil
În cazul în care unele proprietăți au fost definite pentru același selector (element) în diferite foi de stil, valoarea din ultima foaie de stil de citire va fi utilizat.
Exemplu
Să presupunem că o foaie de stil extern are următorul stil pentru <h1> Elementul:
h1
{
color: navy;
}apoi, să presupunem că o foaie de stil intern are de asemenea următorul stil pentru <h1> Elementul:
h1
{
color: orange;
}În cazul în care stilul intern este definit după link - ul de la foaia de stil externă, <h1> elemente vor fi "orange" :
Exemplu
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Încearcă - l singur » Cu toate acestea, în cazul în care stilul intern este definit înainte de link - ul de la foaia de stil externă, <h1> elemente vor fi "navy" :
Exemplu
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Încearcă - l singur » Cascading Comanda
Ce stil va fi utilizat atunci când există mai mult de un stil specificat pentru un element HTML?
În general vorbind , putem spune că toate stilurile vor "cascade" , într - un nou "virtual" foaie de stil de următoarele reguli, în cazul în care numărul unu are cea mai mare prioritate:
- Stilul inline (inside an HTML element) în (inside an HTML element)
- Foi de stil externe și interne (in the head section)
- browser prestabilit
Deci, un stil inline (inside a specific HTML element) în <head> (inside a specific HTML element) are cea mai mare prioritate, ceea ce înseamnă că va trece peste un stil definit în interiorul <head> tag - ul, sau într - o foaie de stil extern, sau o valoare prestabilită de browser.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»