Hoe om CSS by te voeg
Wanneer 'n blaaier 'n stylblad lees, sal dit die HTML-dokument formateer volgens die inligting in die stylblad.
Drie maniere om CSS in te voeg
Daar is drie maniere om 'n stylblad in te voeg:
- Eksterne CSS
- Interne CSS
- Inlyn CSS
Eksterne CSS
Met 'n eksterne stylblad kan jy die voorkoms van 'n hele webwerf verander deur net een lêer te verander!
Elke HTML-bladsy moet 'n verwysing insluit na die eksterne stylbladlêer binne die <link> element, binne die kop afdeling.
Voorbeeld
Eksterne style word gedefinieer binne die <link>-element, binne die <head>-afdeling van 'n HTML-bladsy:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
'n Eksterne stylblad kan in enige teksredigeerder geskryf word, en moet met 'n .css-uitbreiding gestoor word.
Die eksterne .css-lêer moet geen HTML-merkers bevat nie.
Hier is hoe die "mystyle.css"-lêer lyk:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Let wel: Moenie 'n spasie tussen die eienskapwaarde en die eenheid byvoeg nie:
Verkeerd (spasie): margin-left: 20 px;
Korrek (geen spasie):margin-left: 20px;
Interne CSS
'n Interne stylblad kan gebruik word as een enkele HTML-bladsy 'n unieke styl het.
Die interne styl word gedefinieer binne die <style> element, binne die kop afdeling.
Voorbeeld
Interne style word gedefinieer binne die <style>-element, binne die <head>-afdeling van 'n HTML-bladsy:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inlyn CSS
'n Inlynstyl kan gebruik word om 'n unieke styl vir 'n enkele element toe te pas.
Om inlynstyle te gebruik, voeg die stylkenmerk by die relevante element. Die stylkenmerk kan enige CSS-eienskap bevat.
Voorbeeld
Inlynstyle word gedefinieer binne die "styl"-kenmerk van die relevante element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Wenk: 'n Inlynstyl verloor baie van die voordele van 'n stylblad (deur inhoud met aanbieding te meng). Gebruik hierdie metode spaarsamig.
Veelvuldige stylblaaie
As sommige eienskappe vir dieselfde keurder (element) in verskillende stylblaaie gedefinieer is, sal die waarde van die laaste gelees stylblad gebruik word.
Aanvaar dat 'n eksterne stylblad die volgende styl vir die <h1>-element het:
h1
{
color: navy;
}Neem dan aan dat 'n interne stylblad ook die volgende styl vir die <h1>-element het:
h1
{
color: orange;
}Voorbeeld
As die interne styl na die skakel na die eksterne stylblad gedefinieer word , sal die <h1>-elemente "oranje" wees:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Voorbeeld
As die interne styl egter voor die skakel na die eksterne stylblad gedefinieer word, sal die <h1>-elemente "vloot" wees:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Cascading Order
Watter styl sal gebruik word as daar meer as een styl vir 'n HTML-element gespesifiseer is?
Al die style in 'n bladsy sal in 'n nuwe "virtuele" stylblad "cascade" volgens die volgende reëls, waar nommer een die hoogste prioriteit het:
- Inlyn-styl (binne 'n HTML-element)
- Eksterne en interne stylblaaie (in die kopgedeelte)
- Blaaier verstek
Dus, 'n inlyn-styl het die hoogste prioriteit, en sal eksterne en interne style en blaaier-standaarde ignoreer.
Al ooit gehoor van W3Schools Spaces ? Hier kan jy jou eie webwerf skep, of kodebrokkies stoor vir latere gebruik, gratis.
Begin gratis ❯* geen kredietkaart benodig nie