Wat is CSS?
CSS staan vir C ascading S tyle Sheets
CSS beskryf hoe HTML- elemente vertoon moet word
CSS voorbeeld
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Klik op die "Probeer dit self"-knoppie om te sien hoe dit werk.
CSS-sintaksis
'n CSS-reël bestaan uit 'n keurder en 'n verklaringsblok :
Die kieser wys na die HTML-element na styl (h1).
Die verklaringsblok (in krullerige hakies) bevat een of meer verklarings geskei deur kommapunte.
Elke verklaring bevat 'n CSS-eiendomnaam en 'n waarde, geskei deur 'n dubbelpunt.
In die volgende voorbeeld sal alle <p>-elemente middelbelyn wees, rooi en 'n lettergrootte van 32 pixels hê:
Voorbeeld
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Dieselfde voorbeeld kan ook so geskryf word:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Eksterne stylblad
'n CSS-stylblad kan in 'n eksterne lêer gestoor word:
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Eksterne stylblaaie is gekoppel aan HTML-bladsye met <link> -merkers:
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Inlyn styl
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Cascading Order
As verskillende style vir HTML-elemente gespesifiseer word, sal die style in nuwe style oorval met die volgende prioriteit:
- Prioriteit 1: Inlyn style
- Prioriteit 2: Eksterne en interne stylblaaie
- Prioriteit 3: Blaaier verstek
- As verskillende style op dieselfde prioriteitsvlak gedefinieer word, het die laaste een die hoogste prioriteit.
Voorbeeld
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - Een HTML-bladsy - Veelvuldige style!
Hier sal ons een HTML-bladsy wys wat vertoon word met 4 verskillende stylblaaie.
Klik op die Stylesheet-knoppies (1-4) om die bladsy met verskillende style te sien.
Volledige CSS-tutoriaal
Dit was 'n kort beskrywing van CSS.
Vir 'n volledige CSS-tutoriaal gaan na W3Schools CSS-tutoriaal .
Vir 'n volledige CSS-verwysing gaan na W3Schools CSS Reference .