Textformattering

1. Inledning

I detta avsnitt skall vi bl.a. gå in på hur vi reglerar radavstånd, hur vi får texten understruken och hur vi centrerar innehållet.

Textformatteringens egenskaper (med valda värden) är i huvudsak följande:

<style type="text/css">

<!--
body {
letter-spacing: 0.6em;
word-spacing: 0.6em;
vertical-align: baseline;
margin-left: 5%;
margin-right: 5%
text-decoration: underline;
line-height: 200%;
text-indent: 4%;
text-align: center;
text-transform: capitalize;
}
-->

</style>


När det gäller letter resp. word-spacing kan vi med dessa reglera avståndet mellan bokstäverna resp. avståndet mellan orden. Men denna funktion har dåligt stöd i nuvarande webbläsare och därför nämner jag inte så mycket om detta. Inte heller har vertical-align något större stöd.



2. Marginal-justering

Egenskaperna margin-left och margin-right tillhör egentligen avsnittet om box-egenskaperna, men vi tar upp det här ändå.

Vi kan med denna egenskap reglera marginal-justeringen på höger resp. vänster sida och värdet kan vi ex.ange i procent.



3. Understruken text m.m.

Egenskapen text-decoration har i mitt exempel ovan gjort texten understruken. Men denna kan också anta värdena none, overline, line-through och blink. I tur och ordning ger värdena normal text, text som är motsatt till understruken (har strecket ovanför sig istället), över(genom)struken text och slutligen blinkande text.



4. Radavstånd

Med line-height kan vi reglera avståndet mellan olika rader och vi kan ange värden som normal, procent och med nummer (som ex. 2). Vill vi ha dubbelt radavstånd kan vi ange 200%, 2 eller 24pt.



5. Text-indragning

Ibland vill vi låta den första raden i varje mening vara lite mer indragen än övriga. Detta kan vi åstadkomma med egenskapen text-indent. Hur mycket indragningen skall vara kan anges i procent och genom att ange en siffra.



6. Justera texten (höger, vänster m.m.)

För egenskapen text-align kan vi ange värdena left, right, center resp. justify. Texten kommer då att i tur och ordning bli justerad till vänster, till höger, till centrum eller kommer slutligen att ha en rak vänster och höger marginal.



7. "Text-förvandling"

Egenskapen text-transform kan anta värdena none, capitalize, uppercase och lowercase. I tur och ordning ger detta en text som är normal, en text där första bokstaven i varje ord är en stor bokstav, en text där alla ord skrivs i versaler och slutligen en text där alla orden skrivs i gemener.



8. Exempel på kod

<html>
<head>
<title>Övningar</TITLE>
<style type="text/css">

<!--
body {
background-color: rgb(255, 255, 255);
margin-left: 10%;
margin-right: 10%;
font-family: Verdana, 'Times New Roman', 'Sans-Serif';
line-height: 150%;
text-indent: 4%;
text-align: left;
text-transform: capitalize;
color: #000000;
}
-->

</style>
</head>
<body>
Sidan som vanligt. Här har jag infogat ett textavsnitt hämtat någonstans från mina sidor:

"Själv använder jag ingen HTML-editor, varken privat eller i denna HTML-Skola, då jag vant mig med att arbeta utan. Editorer behövs inte heller för att göra hemsidor, men kan å andra sidan kanske tjäna som ett hjälpmedel. Men observera att du i vissa editorer saknar möjlighet att skriva egen HTML-kod om du skulle vilja det! Sedan måste vi uppgradera produkten ibland, då nya möjligheter med HTML kommit."
</body>
</html>




 
portfolio
infoga bilder
dagens bibelord
ge hemsidan färg
infoga länkar
bildväxling för menyer i JavaScript
Kodförteckning för html 4.0
Var med och rösta i en fototävling
  kontakt © Stefan Dahlén Onsdag 22:e oktober 2014