HOME -> CSS_TUTORIAL -> css-05 Lørdag, 24. Juni 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 05

Lektionen beskæftiger sig med text i dokumentet

Følgende text egenskaber beskrives i denne lektion:
  • Text-align
  • Word-spacing
  • Letter-spacing
  • Text-decoration
  • Text-indent
  • Text-transform
  • Line-height
  • Vertical-align

Text-align
Via egenskaben text-align har du mulighed for at justere din tekst. Hvad enten den skal være venstre, højre, centreret eller om teksten skal have lige margener.
Følgende muligheder har du med text-align: justify | center | left | right


p {
text-align: justify;
}
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}

/* Gem dette stylesheet som align.css */



<html>
<head>
<title>Text-align</title>
<link rel="stylesheet" type="text/css" href="align.css" />
</head>
<body>
<p>Teksten har lige margen .... De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke .... De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
<h1>Centreret tekst.</h1>
<h2>Venstre justeret tekst.</h2>
<h3>Højre justeret tekst.</h3>
</body>
</html>


Vis som eksempel
Word-spacing
Word-spacing er afstanden mellem de enkelte ord.


p {
word-spacing: 30px;
}
h1 {
word-spacing: 20px;
}

/* Gem dette stylesheet som wordspacing.css */



<html>
<head>
<title>Word-spacing</title>
<link rel="stylesheet" type="text/css" href="wordspacing.css" />
</head>
<body>
<p>Afstanden mellem ordene er 30px.</p>
<h1>Afstanden mellem ordene er 20px.</h1>
</body>
</html>


Vis som eksempel
Letter-spacing
Letter-spacing er ganske enkelt afstanden mellem de enkelte bogstaver.


p {
letter-spacing: 3px;
}
h1 {
letter-spacing: 6px;
}

/* Gem dette stylesheet som spacing.css */



<html>
<head>
<title>Letter-spacing</title>
<link rel="stylesheet" type="text/css" href="spacing.css" />
</head>
<body>
<p>Afstanden mellem bogstaverne er 3px.</p>
<h1>Afstanden mellem bogstaverne er 6px.</h1>
</body>
</html>


Vis som eksempel
Text-decoration
Ved at anvende text-decoration kan du understrege, overstrege eller gennemstrege din tekst.


p {
text-decoration: underline;
}
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}

/* Gem dette stylesheet som decoration.css */



<html>
<head>
<title>Text-decoration</title>
<link rel="stylesheet" type="text/css" href="decoration.css" />
</head>
<body>
<p>Denne tekst er understreget.</p>
<h1>Denne tekst er overstreget.</h1>
<h2>Denne tekst er gennemstreget.</h2>
</body>
</html>


Vis som eksempel
Text-indent
Teksten rykkes ind ved start.


p {
text-indent: 50px;
}

/* Gem dette stylesheet som indent.css */



<html>
<head>
<title>Text-indent</title>
<link rel="stylesheet" type="text/css" href="indent.css" />
</head>
<body>
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
</body>
</html>


Vis som eksempel
Text-transform
Ved hjælp af text-transform har du mulighed for at ændrer mellem store og små bogstaver. .... Her er dine muligheder:
Uppercase - Alle bogstaver skrives med stort.

Lowercase - Alle bogstaver skrives med lille.

capitalize - Det første bogstav i hvert ord skrives med stort.

None - Teksten skrives uden ændringer.



p {
text-transform: uppercase;
}
h6 {
text-transform: lowercase;
}
h5 {
text-transform: capitalize;
}

/* Gem dette stylesheet som transform.css */



<html>
<head>
<title>Text-transform</title>
<link rel="stylesheet" type="text/css" href="transform.css" />
</head>
<body>
<p>læg mærke til at teksten er skrevet med lille i html dokumentet, men den vil blive vist med store bogstaver.</p>
<h6>LÆG MÆRKE TIL AT TEKSTEN ER SKREVET MED STORE BOGSTAVER I HTML DOKUMENTET, MEN DEN BLIVER VIST MED SMÅ BOGSTAVER.</h6>
<h5>læg mærke til det første bogstav i hvert ord, alle er de skrevet med lille i html dokumentet, men bliver vist med stort.</h5>
</body>
</html>


Vis som eksempel
Line-height
Her angives afstanden mellem linier.
Du har følgende muligheder med line-height: normal | number | length | percentage
Percentage værdier er relativ til font-size af selve elementet.
Lad dig nu ikke forstyre af 'div class ....', det kommer vi til i et senere kapitel. Konstater blot at du har en mulighed for justering af afstand mellem linierne med funktionen line-height.


div.1 {
line-height: 2; /* number */
font-size: 16pt;
}
div.2 {
line-height: 1.2em; /* length */
font-size: 16pt;
}
div.3 {
line-height: 400%; /* percentage */
font-size: 16pt;
}

/* Gem dette stylesheet som lineheight.css */



<html>
<head>
<title>Line-height</title>
<link rel="stylesheet" type="text/css" href="lineheight.css" />
</head>
<body>
<div class="1">Line-height er 2 .... De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke .... </div><br /><br />
<div class="2">Line-height er 1.2em .... De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke .... </div><br /><br />
<div class="3">Line-height er 400% .... De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke .... </div>
</body>
</html>


Vis som eksempel

Prøv nu at ændre line-height i dit stylesheet til 1.2 , 1.2em og 120%. Du vil så se, at afstanden mellem linierne er ens!

Vertical-align
Vertical-align giver dig følgende muligheder:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage

Percentage refererer til 'line-height' af selve elementet.

Vi vil ikke i denne lektion komme nærmere ind på vertical-align. Dog skal det kort bemærkes at 'baseline' er default.

Så meget til teksten i css. Prøv nu at lege en smule med de ovenfor stående eksempler. ;-) Næste lektion handler om fonte.

FONT >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top