Større første afsnitbogstav

Siden er opdateret 16. 3. 2009

Eksempel på definition af større begyndelsesbogstav i alle afsnit:

p:first-letter {
font-size: 18px;
color: red;
background: inheit
}

For at kunne virke i IE, er det vigtigt, at der er indsat et ordmellemrum før {.

Skal kun et enkelt eller få afsnit have denne egenskab tilføjet, kan det det gøres ved at definere det på et id eller en class, som så sættes på det aktuelle afsnit.

#stor:first-line {
font-size: 24px;
color: red;
background: inheit;
}
.stor:first-line {
font-size: 24px;
color: red;
background: inheit;
}

Og i html defineres det pågældende afsnit sådan ved id:

<p id="stor">Noget tekst</p>:

Her er første bogstav defineret 50% større end i de øvrige afsnit på siden.

^ Tilbage til sidens top


Stort, sænket begyndelsesbogstav

Man kan definere stort, sænket begyndelsesbogstav eventuelt i særskilt font - sådan som man kan observere i antikke bøger:

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea. Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.

Koden i css til dette laves sådan:

.dpl:first-letter {
float: left;
font-family: "old english", georgia, "times new roman", serif;
font-size: 45px;
color: #00c;
background-image: url(img.gif);
margin-right: 3px;
margin-bottom: 2px;
}

Og koden i html ser sådan ud:

<p class="dpl">Tekst her</p>

Ved at sætte float:left bliver første bogstav i p et selvstændigt inline-element, som den øvrige tekst så smyger sig omkring. Med margin-right og margin-bottom defineres hvor meget luft der skal være omkring det store bogstav.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - html - testsider - Større første afsnitbogstav
sidens top
Brugere lige nu: 1
Home Mail