Sådan tilføjes CSS

Indholdsfortegnelse

    Vis indholdsfortegnelse

Når en browser læser et typografiark, vil den formatere HTML-dokumentet efter oplysningerne i stilarket.

Tre måder at indsætte CSS på

Der er tre måder at indsætte et typografiark på:

  • Ekstern CSS

  • Intern CSS

  • Inline CSS

Ekstern CSS

Med en eksternt stilark, kan du ændre udseendet af en hel hjemmeside ved at ændre kun én fil!

Hver HTML-side skal indeholde en reference til den eksterne typografiark-fil indeni -elementet inde i hovedsektionen.

Eksempel

Eksterne typografier er defineret i -elementet inde i <head>-sektionen på en HTML-side:

 <!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>

Prøv det selv →

<!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>

Et eksternt typografiark kan skrives i enhver teksteditor og skal gemmes med en .css-udvidelse.

Den eksterne .css-fil bør ikke indeholde HTML-tags.

Sådan ser filen "mystyle.css" ud:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

Bemærk: Tilføj ikke et mellemrum mellem egenskabsværdien (20) og enheden (px):

Forkert (mellemrum):

margin-left: 20 px;

Korrekt (ingen mellemrum):

margin-left: 20px;

Intern CSS

Et internt typografiark kan bruges, hvis én enkelt HTML-side har en unik stil.

Den interne stil er defineret inde i <style>-elementet, inde i hovedet afsnit.

Eksempel

Interne typografier er defineret i <style>-elementet, inde i <head>-sektionen på en HTML-side:

 <!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>

Prøv det selv →

<!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>

Inline CSS

En inline-stil kan bruges til at anvende en unik stil for et enkelt element.

For at bruge indlejrede typografier skal du tilføje stilattributten til det relevante element. Det style-attributten kan indeholde enhver CSS-egenskab.

Eksempel

Inline-stile er defineret inden for "stil"-attributten for den 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>

Prøv det selv →

<!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>

Tip: En inline-stil mister mange af fordelene ved et typografiark (ved at blande indhold med præsentation). Brug denne metode sparsomt.

Flere stilark

Hvis nogle egenskaber er blevet defineret for den samme vælger (element) i forskellige typografiark, værdien fra det sidst læste typografiark vil blive brugt.

Antag, at et eksternt typografiark har følgende typografi for <h1>-elementet:

h1
{
  color: navy;
}

Antag derefter, at et internt typografiark også har følgende typografi for <h1>-elementet:

h1
{
  color: orange;   
}

Eksempel

Hvis den interne typografi er defineret efter linket til det eksterne typografiark, vil <h1>-elementerne være "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Eksempel

Men hvis den interne typografi er defineret før linket til det eksterne typografiark, vil <h1>-elementerne være "flåde":

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

Cascading Order

Hvilken stil vil blive brugt, når der er angivet mere end én stil for et HTML-element?

Alle stile på en side vil "kaskade" til en ny "virtuel" stil ark efter følgende regler, hvor nummer et har højeste prioritet:

  1. Indlejret stil (inde i et HTML-element)

  2. Eksterne og interne stylesheets (i hovedsektionen)

  3. Browser standard

Så en inline-stil har højeste prioritet og vil tilsidesætte ekstern og interne stilarter og browserstandarder.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>

</body>
</html>