Paragrafer og Overskrifter med CSS

Postet Den: 19/10/2008 Kl: 16:48

Ved brugen af CSS kan man ændre stort set alt, selv om et element skal renderes som inline eller block. Det vil sige om det skal skifte linje, eller placeres på samme linje som andre elementer. Paragrafer og Overskrifter er block level elementer, det kan ændres ved at tilføje display: inline; til dem, ligeså med andre block-elementer.

Men for at man overhovedet kan ændre på noget, skal man først vælge de elementer man ønsker at ændre på ved brugen af css selectors. Hvis du har fulgt de forrige skulle du allerede have arbejdet med selectors, måske endda uden at vide det. Jeg vil beskrive de enkelte Selectors i et senere Reference Opslag.

Paragrafer

Når Paragrafer skal vælges kan det gøres på følgende måde.

p { }

P vil i det her tilfælde stå for alle Paragrafer på siden, stilen bliver tilføjet imellem de skæve parenteser Hvis vi vil ændre tekst størrelsen kan vi bruge font-size Egenskaben.

p {
 font-size: 1.3em;
}

Eksemplet vil have indflydelse på alt tekst som er indsat imellem p tags.

Overskrifter

Når vi angiver stil for Overskrifter kan vi gøre det på samme måde, det er en god ide at ændre størrelsen på den første overskrift h1, hvis den er for stor, frem for at bruge en sektions-overskrift som h2-h6.

h1 Skulle gerne være den første overskrift på siden, men ofte vil den være for stor med standard tekst størrelsen. Derfor ændre vi den ved brugen af CSS.

h1 {
  font-size: 1.4em;
}

Tilsvarende kan vi ændre de andre overskrifter på samme måde.

Plads over/under elementer

Nogle elementer vil ikke kun skifte linje, de vil også placere sig cirka 1-linjes højde under forrige element. Det svare til cirka 1em. Denne opførsel kan kontrolleres med Margin egenskaben. Hvis det er ønsket at fjerne afstanden helt, kan man gøre som vist nedenfor.

h1 {
  margin: 0;
}

Det samme gælder i øvrigt for Paragrafer.

Forfatter: BlueBoden

Kommentarer: [0]

© Brugbart Webdesign