Lav tekstboks med StyleSheets
Sat på siden 11-07-2003
Hvis du har brug for en lynhurtig metode til at vise tekst i en tekstboks på din hjemmeside, så er CSS løsningen.
CSS - eller Stylesheets - eller helt korrekt: Cascading Style Sheets er nogle koder, du kan indsætte på din hjemmesider, og som kan hjælpe dig med at lave layoutet. Det helt smarte er, hvis man gemmer sine stylesheets i en fil for sig og blot kalder denne fil fra hjemmesiden, for så kan samme CSS bruges på mange, mange sider. Får du senere lyst til at ændre en ting, eller det hele måske, er det kun én fil, der rettes, og din hjemmeside får et helt nyt udseende.
Her skal vi se på en lille og helt enkel opgave: at lave en flot boks til at have tekster i, der skal fremhæves eller holdes uden for teksten af den ene eller den anden grund. Se et eksempel på brugen på www.tips-og-tricks.com/eksempler/celinda.html
I Stylesheets kan vi definere en ny klasse (class), som vi kalder "box", og som vi let kan henvise til, hver gang der er tekst, der skal indsættes i en boks. Vi kan vælge baggrundsfarven til boksen, skrifttyperne, rammen, indrykningen og flere andre ting. Det ser fx flot ud, hvis man bruger en baggrund, der er en tone lysere eller mørkere end den baggrund, teksten ellers har.
Du kan lave et nyt stylesheet enten direkte på hjemmesiden - hvilket gør det besværligt - hvis du vil bruge den andre steder - eller i et dokument for sig ved hjælp af Notesblok eller et program som fx TopStyle.
Når du skal lave en ny klasse, skal du vise det ved at skrive et punktum
foran navnet på din nye klasse - her: .box - Skriv herefter en krøllet
startparantes, også kaldet en "Tuborg". (AltGr+7)
.box{
Herefter skal du skrive eller vælge de egenskaber, din boks skal have.
Det er ligemeget, i hvilken orden du vælger dem, så her kan du fx
starte med rammen, der hedder "border". Hvis tykkelsen skal være
2 pixels, linjen skal være stiplet og blå, kommer det til at se
således ud:
border : 2px dashed Blue;
Så kan vi vælge baggrundsfarven i en lysere blå, fx #C2D3FC - det bliver til:
background : #C2D3FC;
Lige nu fylder boksen hele sidebredden, og det ser jo knap så fikst ud, så den skal indrykkes i begge sider.
margin-left : 25%;
margin-right : 25%;
Hvis du vil have en blå skrift i sans serif (uden fødder på) i en lidt mindre størrelse end normalt, kommer det til at se således ud:
font-family : sans-serif;
font-size : smaller;
color : Blue;
Måske skal den centreres? - text-align : center;
og lidt luft omkring teksten laves med "padding":
padding-bottom : 1%;
padding-left : 1%;
padding-right : 1%;
padding-top : 1%;
Det færdige CSS - med den krøllede slutparantes - ser således ud:
.box{
border : 2px dashed Blue;
background : #C2D3FC;
margin-left : 25%;
margin-right : 25%;
font-family : sans-serif;
font-size : smaller;
color : Blue;
text-align : center;
padding-bottom : 1%;
padding-left : 1%;
padding-right : 1%;
padding-top : 1%;
}
Nu er tiden inde til at teste, hvordan det ser ud, så gem dette stylesheet under navnet box.css.
I dit HTML dokument skal du indsætte følgende i <head>:
<link rel="stylesheet" type="text/css" href="/box.css">
/box.css kan godt tænkes at skulle ændres til hele stien til dit stylesheet, hvis det ikke virker umiddelbart.
Dernæst finder du det sted i din tekst, hvor du gerne vil have din tekst
indsat i en boks, og skriver
<div class="box">
Her kommer din tekst
</div>
Nu har du en tekstboks, der kan bruges når som helst på din hjemmeside.
Du behøver blot at indsætte koderne omkring den <div class="box">
og </div>.
Alt, hvad der er imellem <div> og </div> vil blive vist i tekstboksen.