Oblikovanje besedila s CSS

CSS za besedila

Lastnosti za oblikovanje teksta omogočajo:

  • spreminjanje barve besedil,
  • povečanje ali pomanjšanje razmika med črkami besedila,
  • poravnavo besedila,
  • olepšavo besedila,
  • zamik prve vrstice v odstavku idr.

Besedilne lastnosti:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Lastnost Opis Možne vrednosti
 NN IE W3C
color Barva besedila
 color 4.0 3.0 CSS1
direction Postavi smer izpisa ltr
rtl 		Â Â CSS2
letter-spacing Poveča ali pomanjša razmik med posameznimi znaki normal
length 		6.0 4.0 CSS1
text-align Poravna tekst v elementu left
right
center
justify 		4.0 4.0 CSS1
text-decoration Doda besedilu olepšave none
underline
overline
line-through
blink 		4.0 4.0 CSS1
text-indent Zamakne prvo vrstico besedila v elementu
 length
% 		4.0 4.0 CSS1
text-transform Določa izgled črk v elementu none
capitalize
uppercase
lowercase 		4.0 4.0 CSS1
white-space Določa kako se prikaže presledke v elementu normal
pre
nowrap 		4.0 5.5 CSS1
word-spacing Poveča ali pomanjša razmik med besedami normal
length 		6.0 6.0 CSS1

Primeri

Določitev barve besedila
Primer kaže kako obarvamo besedilo.

<html>
<head>

<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>

</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

Določitev barve ozadja besedila
Primer prikazuje, kako obarvamo ozadje besedila.

<html>
<head>
<style type="text/css">
span.oznaceno
{
background-color:yellow
}
</style>
</head>

<body>
<p>
<span class="oznaceno">To je besedilo.</span> Span značka sama po sebi ne določa izgleda besedila, uporablja pa se v povezavi s stili. <span class="oznaceno">Tudi tukaj je besedilo.</span>
</p>
</body></html>

Določitev razmaka med znaki
Primer kaže kako povečamo ali pomanjšamo razmik med posameznimi znaki. Razmik se lahko določa v pikah ali cm.
<html>
<head>

<style type="text/css">
h1 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</style>

</head>

<body>
<p>
<b>Opomba:</b> Netscape 4 lastnosti "letter-spacing" ne pozna.
</p>

<h1>Naslov 1</h1>
<h4>Naslov 4</h4>

</body></html>

Poravnava besedila
Besedilo lahko poravnamo sredinsko, levo, desno ali obojestransko. Zadnje poravnave starejši brskalniki ne znajo prikazati.
<html>
<head>

<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>

</head>

<body>

<h1>Naslov 1</h1>
<h2>Naslov 2</h2>
<h3>Naslov 3</h3>

</body>
</html>

Olepšava besedila
Besedilo lahko popestrimo z različnimi učinki. Primer jih nekaj navaja.
<html>
<head>

<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p>
<a href="http://www.w3schools.com/default.asp">;
This is a link</a>
</p>

</body>
</html>

Zamik prve vrstice
Prvo vrstico odstavka lahko enostavno zamaknemo. S tem postane daljše besedilo bolj pregledno.
<html>
<head>

<style type="text/css">
p {text-indent: 1cm}
</style>

</head>

<body>

<p>
Besedilo zapisano v enem odstavku
Besedilo zapisano v enem odstavku
Besedilo zapisano v enem odstavku
Besedilo zapisano v enem odstavku
Besedilo zapisano v enem odstavku
Besedilo zapisano v enem odstavku
</p>

</body>
</html>

Izgled znakov v besedilu
Znake besedila lahko zapišemo na različne načine. Primer podaja nekaj načinov.
<html>
<head>

<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>

</head>

<body>

<p class="uppercase">
This is some text in a paragraph
</p>

<p class="lowercase">
This is some text in a paragraph
</p>

<p class="capitalize">
This is some text in a paragraph
</p>

</body>
</html>
Zadnja sprememba: 26. 2. 2014, 3:47