HTML -style - CSS
CSS staan vir Cascading Style Sheets.
CSS bespaar baie werk. Dit kan die uitleg van verskeie webblaaie gelyktydig beheer.
CSS = Styles en Kleure
Wat is CSS?
Cascading Style Sheets (CSS) word gebruik om die uitleg van 'n webblad te formateer.
Met CSS kan jy die kleur, lettertipe, die grootte van teks, die spasiëring tussen elemente, hoe elemente geposisioneer en uitgelê word, watter agtergrondprente of agtergrondkleure gebruik moet word, verskillende skerms vir verskillende toestelle en skermgroottes beheer, en baie meer!
Wenk: Die woord kaskade beteken dat 'n styl wat op 'n ouerelement toegepas word, ook op alle kinderelemente binne die ouer van toepassing sal wees. Dus, as jy die kleur van die hoofteks op "blou" stel, sal alle opskrifte, paragrawe en ander tekselemente binne die liggaam ook dieselfde kleur kry (tensy jy iets anders spesifiseer)!
Gebruik CSS
CSS kan op 3 maniere by HTML-dokumente gevoeg word:
- Inlyn - deur die
style
kenmerk binne HTML-elemente te gebruik - Intern - deur 'n
<style>
element in die<head>
afdeling te gebruik - Ekstern - deur 'n
<link>
element te gebruik om na 'n eksterne CSS-lêer te skakel
Die mees algemene manier om CSS by te voeg, is om die style in eksterne CSS-lêers te hou. In hierdie tutoriaal sal ons egter inlyn- en interne style gebruik, want dit is makliker om te demonstreer en makliker vir jou om dit self te probeer.
Inlyn CSS
'n Inlyn CSS word gebruik om 'n unieke styl op 'n enkele HTML-element toe te pas.
'n Inlyn CSS gebruik die style
kenmerk van 'n HTML-element.
Die volgende voorbeeld stel die tekskleur van die <h1>
element op blou, en die tekskleur van die <p>
element op rooi:
Voorbeeld
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
Interne CSS
'n Interne CSS word gebruik om 'n styl vir 'n enkele HTML-bladsy te definieer.
'n Interne CSS word gedefinieer in die <head>
gedeelte van 'n HTML-bladsy, binne 'n <style>
element.
Die volgende voorbeeld stel die tekskleur van AL die <h1>
elemente (op daardie bladsy) op blou, en die tekskleur van AL die <p>
elemente op rooi. Daarbenewens sal die bladsy vertoon word met 'n "poeierblou" agtergrondkleur:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Eksterne CSS
'n Eksterne stylblad word gebruik om die styl vir baie HTML-bladsye te definieer.
Om 'n eksterne stylblad te gebruik, voeg 'n skakel daarby in die <head>
afdeling van elke HTML-bladsy:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Die eksterne stylblad kan in enige teksredigeerder geskryf word. Die lêer moet geen HTML-kode bevat nie, en moet met 'n .css-uitbreiding gestoor word.
Hier is hoe die "styles.css"-lêer lyk:
"style.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Wenk: Met 'n eksterne stylblad kan jy die voorkoms van 'n hele webwerf verander deur een lêer te verander!
CSS-kleure, lettertipes en -groottes
Hier sal ons 'n paar algemeen gebruikte CSS-eienskappe demonstreer. Jy sal later meer oor hulle leer.
Die CSS color
-eienskap definieer die tekskleur wat gebruik moet word.
Die CSS font-family
-eienskap definieer die font wat gebruik moet word.
Die CSS font-size
-eienskap definieer die teksgrootte wat gebruik moet word.
Voorbeeld
Gebruik van CSS-kleur, lettertipe-familie en lettergrootte-eienskappe:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS grens
Die CSS border
-eienskap definieer 'n grens rondom 'n HTML-element.
Wenk: Jy kan 'n grens vir byna alle HTML-elemente definieer.
Voorbeeld
Gebruik van CSS-grenseienskap:
p {
border: 2px
solid powderblue;
}
CSS Opvulling
Die CSS padding
-eienskap definieer 'n opvulling (spasie) tussen die teks en die grens.
Voorbeeld
Gebruik van CSS-grens- en opvullingseienskappe:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS-marge
Die CSS margin
-eienskap definieer 'n marge (spasie) buite die grens.
Voorbeeld
Gebruik van CSS-grens- en marge-eienskappe:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Skakel na eksterne CSS
Eksterne stylblaaie kan verwys word met 'n volledige URL of met 'n pad relatief tot die huidige webblad.
Voorbeeld
Hierdie voorbeeld gebruik 'n volledige URL om na 'n stylblad te skakel:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Voorbeeld
Hierdie voorbeeld skakel na 'n stylblad wat in die html-lêergids op die huidige webwerf geleë is:
<link rel="stylesheet" href="/html/styles.css">
Voorbeeld
Hierdie voorbeeld skakel na 'n stylblad wat in dieselfde vouer as die huidige bladsy geleë is:
<link rel="stylesheet" href="styles.css">
Jy kan meer lees oor lêerpaaie in die hoofstuk HTML-lêerpaaie .
Hoofstuk Opsomming
- Gebruik die HTML-
style
kenmerk vir inlynstilering - Gebruik die HTML-
<style>
element om interne CSS te definieer - Gebruik die HTML
<link>
-element om na 'n eksterne CSS-lêer te verwys - Gebruik die HTML
<head>
-element om <style>- en <link>-elemente te stoor - Gebruik die CSS
color
-eienskap vir tekskleure - Gebruik die CSS
font-family
-eienskap vir tekslettertipes - Gebruik die CSS
font-size
-eienskap vir teksgroottes - Gebruik die CSS-
border
eienskap vir grense - Gebruik die CSS
padding
-eienskap vir spasie binne die grens - Gebruik die CSS
margin
-eienskap vir spasie buite die grens
Wenk: Jy kan baie meer oor CSS leer in ons CSS-tutoriaal .
HTML-oefeninge
HTML-styletikette
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .