HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

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

Manipuleer teks
Kleure,  bokse


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 stylekenmerk 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 stylekenmerk 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- stylekenmerk 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- bordereienskap 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

Toets jouself met oefeninge

Oefening:

Gebruik CSS om die agtergrondkleur van die dokument (liggaam) op geel te stel.

<!DOCTYPE html>
<html>
<kop>
<styl>

  :geel;

</style>
</head>
<body>

<h1>My tuisblad</h1>

</body>
</html>


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 .