Webdesign 101 » CSS » Stylesheet tekstformatering

CSS tekstformatering

Der er flere formateringsmulighederne med CSS end dem, der umiddelbart møder øjet. Jeg har kigget lidt i bogen for at finde ud af, hvordan jeg løser nogle konkrete udfordringer. Resultatet er (foreløbig?) denne artikel med en række konkrete eksempler med demoer.

Tekst i spalter

At lave tekst i spalter er der umiddelbart ikke så mange ben i. Her er et stylesheet, der laver en webside med 2 lige brede spalter:

  .leftcol {
  width:48%;
  float:left;
  text-align:justify;
  }
  .rightcol {
  width:48%;
  float:left;
  margin-left:4%;
  text-align:justify;
  }

Vis eksempel

Kommentarer til eksemplet: Stylesheet'et for body-markøren, der ikke er vist her, sætter sidens marginer. Inden for disse marginer, men efter sidehoved og overskifter, deles teksten så i 2 div'er, hhv. .leftcol og .rightcol på hver 48 % af den til rådighed værende bredde. Spaltemellemrummet laves af margin-left.rightcol.

I dokumentets "flow" af HTML-elementer kommer alle elementerne i korrekt orden. Det har den betydning, at footeren kommer lige efter højre spalte. Hvis højre spalte er kortere end venstre spalte, får du et problem: Vis eksempel. Det skal du klare med egenskaben float:

#footer {
  float:left;
  width:100%;
}

- der giver følgende resultat: Vis eksempel.

Du kan lave flere spalter på denne måde, f.eks. 3-spaltet (Vis eksempel) eller 4-spaltet (Vis eksempel).

Grundlæggende tekstformatering

Det er meget godt, at jeg kan lave masser af spalter og kasser med indhold i, men dette indhold – som mestendels består af tekst – skal jo også formateres.

Mit udgangspunkt er som altid en webside, som browseren formaterer for mig. Vis eksempel. Det første jeg gør, er at bestemme mig for, hvilken grundskrift skal anvendes til brødskrift og til overskrifter, samt hvilke skriftstørrelser, der skal anvendes:

body{
    font-family:verdana,sans-serif;
    font-size:12px;
}
h1,h2,h3,h4,h5,h6 {
    font-family:arial,sans-serif;
}
h1 {
    font-size:24px;
}
h2 {
    font-size:18px;
}
h3 {
    font-size:14px;
}
h4  {
    font-size:12px;
}
h5,h6 {
    font-size:10px;
}

Vis eksempel

Jeg synes, den linieskydning, browseren som standard sætter ind ikke er særlig harmonisk. Afstanden mellem de enkelte linier i afsnittene er for lille, mens til gengæld en hel linies afstand mellem afsnittene er for meget. Afstanden mellem overskrifterne og den første linie i den efterfølgende tekst er heller ikke særlig harmonisk.

Alt dette kan jeg regulere på ved hjælp af stylesheet formregler, først og fremmest margin-egenskaben:

body{
    font-family:verdana,sans-serif;
    font-size:12px;
}
h1,h2,h3,h4,h5,h6 {
    font-family:arial,sans-serif;
    margin-bottom:5px;
    margin-top:10px;
}
h1 {
    font-size:24px;
}
h2 {
    font-size:18px;
}
h3 {
    font-size:14px;
}
h4 {
    font-size:12px;
}
h5,h6 {
    font-size:10px;
}
p {
line-height:130%;
margin-top:5px;
margin-bottom:5px;
}

Dette stylesheet bygger videre på det første eksempel. Tilføjelser er markeret med rødt.
Vis eksempel

Skrifteffekter på websiden

Ønsker jeg at lave en særlige visuelle effekter i mit skriftbillede, kan jeg f.eks. benytte mig af uncialer og særligt effektfulde mellemrubrikker:

.uncial {
  float:left;
  font-size:3em;
  color:#006;
  background-color:#ffe;
  padding:0 0.1em 0 0.1em;
  border:1px solid black;
  margin:1em 0.1em 0 0;
  font-weight:bold;
  margin-left:0;
}

Vis eksempel

Kommentarer til eksemplet: Uncialen indsættes på siden på følgende måde:

<span class="uncial">L</span><p>orem ipsum 
dolor sit amet, consectetuer ...

Mellemrubrikkerne i eksemplet skabes via formateringen af h3-markøren:

h3 {
  font-size:16px;
  margin-left:0;
  padding:5px;
  border:1px solid black;
  float:left;
  width:160px;
  background-color:#ffe;
  color:#006;
  margin-right:10px;
  margin-bottom:10px;
  margin-left:0;
}

Manchet

Ofte ønsker jeg også at kunne lave en manchet. Jeg kunne nøjes med at bruge fed skrift, men den synes jeg er for iøjnefaldende, så jeg foretrækker et særligt formateret afsnit:

p.manchet {
  border-top:1px solid #006;
  border-bottom:1px solid #006;
  font-family:arial,sans-serif;
  font-size:14px;
  margin-bottom:8px;
}

Vis eksempel

Denne metode er udmærket, så længe jeg kun har ét tekstafsnit i manchetten. Hvis jeg formaterer to afsnit med class="manchet", går det galt: Vis eksempel. Derfor plejer jeg at at oprette en <div class="manchet"> ... </div>, der omslutter det eller de afsnit, der skal være i manchetten:

.manchet {
    font-family:arial,sans-serif;
    font-size:14px;
    border-top:1px solid #006;
    border-bottom:1px solid #006;
    margin-bottom:10px;
    padding-top:5px;
    padding-bottom:5px;
   
}
.manchet p {
    line-height:100%;
    margin:0 !important;
    padding:0 !important;
}

Vis eksempel

Kommentarer til stylesheet'et: Bemærk, at jeg er nødt til at bruge !important-reglen her for at sikre, at p-markøren ikke arver egenskaberne fra det overordnede element.

Du vil også bemærke, at tekstformateringen i hele højrekolonne er med hængende indrykning.Denne effekt kunne være opnået ved at oprette en særlig p-class, men jeg synes egentlig det er mere hensigtsmæssigt at bruge det, der hedder kontekstuelle selektorer i den slags tilfælde:

.rightcol p {
    margin-left:25px;
    text-indent:-25px;
}

Konteksten er her: Alle p-markører inde i en kasse, der har class="rightcol", skal have en venstre margin på 25 pixel og første linie i hvert afsnit skal indrykkes minus 25 pixel.

Senest opdateret: 25. nov. 2002.

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.