ilj@flowsim.se stylesheets/ stilmallar på svenska 10 - css stilmallar och listor
	listor listor listor listor listor listor                   Så här kan man skriva för att skapa en lista:   <UL> <LI>listor</LI> <LI>listor</LI> </UL>   Resultatet ser ut så här:   listor listor   Om man vill att alla listor på sidan ska förses med röd text och röda markeringar kan man använda en stilmall som reglerar det. HTML-taggarna kan då se ut t ex så här:   <UL> <LI>trollsländor</LI> <LI>fjärilar</LI> <LI>dagsländor</LI> </UL>   Stilmallen som sätter färgen till röd kan se ut så här:   <STYLE TYPE="text/css"> <!-- UL {color: red;} --> </STYLE>   Resultatet blir en lista med röda markeringar och röd text: trollsländor fjärilar dagsländor Alla listor på samma sida behöver inte ha samma färg; man kan använda listor av olika typer (CLASS). Så här kan HTML-taggarna för en lista av klassen bluetext se ut:   <UL CLASS="bluetext"> <LI>listor</LI> <LI>listor</LI> <LI>listor</LI> </UL>   Stilmallen som sätter färgen till blå kan se ut så här:   <STYLE TYPE="text/css"> <!-- UL.bluetext {color: blue;} --> </STYLE>   Resultatet blir en lista med blå markeringar och blå text: listor listor listor Om man vill sätta typsnittet till Arial och låta varje post i listan markeras med en fyrkant kan stilmallen se ut så här:   <STYLE TYPE="text/css"> <!-- UL.bluetext {color: blue;list-style-type:square;font-family:'Arial'} --> </STYLE>   Resultatet blir en lista som ser ut så här: listor listor listor Man kan använda andra markeringar än cirklar och fyrkanter; square i stilmallen här ovanför kan bytas ut mot:   disc - fylld cirkel circle - cirkel square - fylld fyrkant decimal - arabiska siffror (1,2,3) lower-roman - romerska siffror (i,ii,iii) upper-roman - romerska siffor (I,II,III) lower-alpha - bokstäver (a,b,c) upper-alpha - bokstäver (A,B,C) none - inga markeringar alls   En färg på markeringarna och en annan på texten? Så här kan en sådan stilmall se ut:   <STYLE TYPE="text/css"> <!-- UL.greytext {color:#666666;list-style-type:square;font-family:Arial} LI.svartfyrkant {color: black;} --> </STYLE>   Själva listan ser ut så här:   <UL CLASS="greytext"> <LI CLASS="svartfyrkant">listor</LI> <LI CLASS="svartfyrkant">listor</LI> <LI CLASS="svartfyrkant">listor</LI> </UL>   Resultatet blir en lista med svarta fyrkanter och grå text: listor listor listor Olika färger på fyrkanterna i en och samma lista?   Så här kan stilmallen se ut:   <STYLE TYPE="text/css"> <!-- UL.greytext {color:#666666;list-style-type:square;font-family:Arial} LI.roedfyrkant {color: #990000;} LI.roedarefyrkant {color: #CC0000;} LI.roedastfyrkant {color: #FF0000;} --> </STYLE>   Själva listan ser ut så här:   <UL CLASS="greytext"> <LI CLASS="roedfyrkant">listor</LI> <LI CLASS="roedarefyrkant">listor</LI> <LI CLASS="roedastfyrkant">listor</LI> </UL>   Och resultatet: listor listor listor listor listor Använd font-size om du vill reglera storleken på texten, t ex   UL.stortext {font-size: 30px;}   Använd background-color om du vill ha en bakgrundsfärg under texten, t ex   UL.stortextmedbakgr {font-size: 30px;background-color: #CCCCCC}    listor  listor  listor  listor  listor   Hur man gör texten fet och kursiv? Se avsnitten om typsnitt och text under rubriken STYLESHEETS.   Mer om olika sorters listor finns under rubriken HTML   FLER STiLMALLSEXEMPEL: stilmallar & länkar stilmallar & tabeller bilder/färgändring cursor/muspekare stilmallsknappar stilmall & TEXTAREA stilmall & textrutor dynamiska tabeller första rad/bokstav listor/egna bilder IFRAME/ram rubriker/H-taggar rita med stilmallar - "skuggor" visa/gömma ytor t ex julkalender text-align bredd & höjd         Sidan gjordes av ilj@flowsim.se     Senast ändrad 13 mars 2004.   May 17, 2000   Den här sidan hör hemma i ett ramsystem hos: www.flowsim.se Stilmallar på svenska