Med dessa egenskaper är det möjligt att klassificera elementen i olika kategorier, exempelvis alla blockelementen för sig.
Med den här egenskapen kan man speciefiera om och hur ett element visas. Egenskapen kan ha värdena block, inline, list-item och none.
block Detta värde öppnar en ny box för blockelementen, exempelvis P eller H1, som är relativ till andra närliggande boxar. Block är utgångsvärde.
inline Detta värde öppnar en ny box för inline elementen, exempelvis EM eller STRONG som visas på samma linje som föregående element.
list-item Detta värde öppnar en ny blockbox och lägger till postmarkeringar, exempelvis LI.
none Detta värde stänger av display.
P,H1 { display: block }
EM,STRONG { display: inline }
LI { display: list-item }
IMG { display: none }
Flytande och ersättningselement kan visas som både block och inline.
Den här egenskapen specifierar hur mellanslag som finns i ett element, t.ex. ett textavsnitt, skall behandlas. Egenskapen kan ha värdena normal, pre och nowrap.
normal Detta värde gör att mellanrum på mer än ett tecken ignoreras. Normal är också utgångsvärdet.
pre Detta värde gör att texten uppför sig som att den vore innaför <PRE>-märket, dvs texten är preformaterad.
nowrap Detta värde medför att nya rader endast kan infogas med märket <BR>.
P { white-space: normal }
P.preform { white-space: pre }
Egenskaper för listor erbjuder möjligheter att formge listor. Med dessa egenskaper kan man bestämma vilken typ av märken som ska märka ut de olika listelementen. Det går också bra att använda sig av en URL till en bild man vill ha som markör. När man använder sig av dess möjligheter, så ersätter den vlda markören, webbläsarens förinställda standardmarkör, vanligtvis en svart punkt.
Den här egenskapen specifierar vilken typ av listpunkt-markör som ska visas. värdet none bestämmer att ingen markör ska visas. Annars finns det tre olika typer av markörer: glypher, numeriska system och alfabetiska system.
<UL STYLE="{ list-style-type: disc }">
<LI>
...
</UL>
<UL STYLE="{ list-style-type: circle }">
<LI>
...
</UL>
<UL STYLE="{ list-style-type: square }">
<LI>
...
</UL>
<OL STYLE="{ list-style-type: decimal }">
<LI>
...
</OL>
<OL STYLE="{ list-style-type: decimal-leading-zero }">
<LI>
...
</OL>
<OL STYLE="{ list-style-type: lower-roman }">
<LI>
...
</OL>
<OL STYLE="{ list-style-type: upper-roman }">
<LI>
...
</OL>
<OL STYLE="{ list-style-type: lower-alpha }">
<LI>
...
</OL>
<OL STYLE="{ list-style-type: upper-alpha }">
<LI>
...
</OL>
Den här egenskapen gör att man kan använda sig av en bild för att markera de olika listelementen. När bilden är tillgänglig kommer den att ersätta den förinställda listmarkören.
<UL STYLE="{ list-style-image: url(gifs\html\yl_di.gif); margin: 10px }">
<LI>
...
</UL>
Den här egenskapen bestämmer vilken position som struktureb med markörerna ska ha i förhållande till innehållsstrukturen. Egenskapen kan ha värdena outside och inside.
<UL STYLE="{ list-style-image: url(gifs\html\yl_di.gif);
list-style-position: outside }">
<LI>
...
</UL>
<UL STYLE="{ list-style-image: url(gifs\html\yl_di.gif);
list-style-position: inside }">
<LI>
...
</UL>
Denna egenskap är ett kortkommando för de tre föregående listegenskapen, vilket gör att man
kan bestämma egenskaperna på en plats i ett stylesheet.
Ett exempel:
UL { list-style: square inside }
Tabellmodellen i CSS baseras på tabellmodellen i HTML 4.0, i vilken strukturen av en tabell närmast motsvarar tabellens visuella layout. I den här modellen, består en tabell av en valfri rubrik och valfritt antal rader av celler. Tabellmodellen sägs vara "radprioterande" eftersom författaren specifierar rader och inte kolumner, utryckligen i dokumentspråket. Kolumner erhålls först när alla rader har specifierats - den första cellen av varje rad tillhör den första kolumnen, den andra till den andra kolumnen, etc. Rader och kolumner kan grupperas struktuellt och denna gruppering återspeglas i presentationen.
Alltså, består tabellmodellen av tabeller, rubriker, rader, radgrupper, kolumner, kolumngrupper, och celler.
Den här egenskapen speciefierar vilken position rubrik-boxen ska ha i förhållande till tabell-boxen. Egenskapen kan ha värdena top, bottom, left, och right.
| Topprubrik |
|---|
| top Värdet top placerar rubrikboxen ovanför
tabellboxen. För att åstadkomma denna tabell skriver man innanför HEAD-taggarna: TABLE { margin-left: auto; margin-right: auto; border: outset 5pt; }
CAPTION { caption-side: top; width: auto;
margin-bottom: 10em; text-align: right }
TH { padding: 3pt }
TD { border: inset 5pt; padding: 3pt }
|
bottom Värdet bottom placerar rubrikboxen under tabellboxen.
left Värdet left placerar rubrikboxen till vänster om tabellboxen.
right Värdet right placerar rubrikboxen till höger om tabellboxen.
Egenskapen table-layout kontrollerar algorithmen för att visa tabellcellerna, raderna och kolumnerna. Egenskapen kan ha värdena fixed och auto vilka har följande mening:
fixed Detta värde använder den fastsällda tabell layout algorithmen.
auto Detta värde använder någon automatisk tabell layout algorithm.
Med denna (fasta) algorithm, är den horisontella layoten av tabellen inte av innehållet i cellerna; den är bara beroende av tabellens bredd, bredden på kolumnerna, och ramarnas eller cell mellanrummet.
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999