Stylesheets på svenska 8

ilj@flowsim.se Stylesheets på svenska 8 stylesheets Cascading Style Sheets (css) - några exempel
	exempel 1 h6 h5 h4 h3 h2 h1
	Stylesheetet placerar man lämpligen mellan HEAD-taggarna i början av den aktuella HTML-sidan eller på en separat stylesheet-sida som kan användas av flera sidor (se nedan). Här följer det stylesheet som reglerar hur ovanstående Headings ser ut: <STYLE TYPE="text/css"> <!-- H6 {text-align:center; background-color:#666666; color:white; width:400px;} H5 {text-align:center; background-color:#666666; color:white;width:400px; border-color:black; border-width:4px;border-style:outset;} H4 {text-align:center; background-color:#666666; color:white; border-color:black;border-width:4px; border-style:inset;} H3 {text-align:center; background-color:#666666; color:white; border-color:black; border-width:4px; border-style:inset; text-transform:uppercase;} H2 {text-align:center; background-color:#666666; color:white; border-color:black; border-width:4px; border-style:outset; text-transform:uppercase; text-decoration:underline;} H1 {text-align:center; background-color:#666666; color:white; border-color:black; border-width:4px; border-style:outset; text-transform:uppercase; text-decoration:blink; --> </STYLE> Förklaringar till stilmallen här ovanför: H6 Allt som placeras mellan H6-taggar kommer alltså att centreras och skrivas i vitt på en grå bakgrund. H5 Text mellan H5-taggar ser likadan ut som den mellan H6-taggar förutom att bakgrundsrutan förses med en ram (border) som är 4px bred och svart. H4 Text mellan H4-taggar får en ram som är inset till skillnad från H2-taggarnas ram som är outset. H3 Allt som skrivs mellan H3-taggar kommer automatiskt att skrivas med versaler. H2 "text-decoration" består här i att allt mellan H2 -taggar blir understruket och ... H1 här består "text-decoration" i att allt mellan H1-taggar kommer att blinka. Om man vill bestämma att allt mellan H1-taggar ska skrivas med röd färg skriver man alltså så här: H1 {color:red;} De tecken som används är krullparenteser, kolon och semikolon.
	exempel 2 den här texten är placerad mellan BLOCKQUOTE-taggar; allt som på den här sidan placeras mellan de taggarna kommer att se ut så här: svart, kursiv, fet och understruken text på röd bakgrund och med första raden en bit indragen (text-indent)
	Och här är koden som ser till att allt, som på den här sidan står mellan BLOCKQUOTE-taggar, ser ut som i rutan ovan: <STYLE TYPE="text/css"> <!-- BLOCKQUOTE {width:340px;font-weight:bold; text-indent:10%; text-align:justify; color:black; background-color:red;font-size:12pt; font-style:italic;text-decoration:underline;} --> </STYLE>
	exempel 3 Den här texten är placerad mellan PRE-taggar; den är fet (bold), överstruken och har försetts med en ram av typen groove.
	Att allt mellan PRE-taggar på den här sidan ser ut som i rutan ovan beror på följande kod: <STYLE TYPE="text/css"> <!-- PRE {text-align:center; border-style:groove; border-width:1px; border-color:teal; font-weight:bold;font-size:12pt; text-decoration:line-through;} --> </STYLE>
	Stylesheetet kan placeras i HTML-sidans HEAD-del (alltså någonstans mellan HEAD-taggarna). Man kan använda ett och samma stylesheet för flera HTML-sidor. Då skapar man helt enkelt ett separat stylesheet som man länkar till från HTML-sidorna. Om stylesheet och HTML-sida ligger i samma katalog kan en sådan länk se ut här: <LINK REL="stylesheet" TYPE="text/css" HREF="mitt_stylesheet.html"> I exemplen på den här sidan har följande bestämningar använts: color t ex black background-color t ex white border-style outset \| inset \| groove \| ridge \| solid \| double \| none border-color t ex red border-width t ex 6pt align left \| right font-weight bold \| bolder \| lighter \| normal font-style italic \| normal font-size t ex 10pt font-family t ex Helvetica text-indent t ex 10% text-align left \| center \| right \| justify text-decoration underline \| line-through \| blink \| none text-transform uppercase \| lowercase \| capitalize \| none De röda H-rubrikerna i exemplet högst upp på sidan (där ingen bredd - width - angetts i stilarket) ser i Netscape 4.0 ut så här: I MIE 4.0 ser det ut så här: Mer om stilmallar under rubriken STYLESHEETS på www.flowsim.se Sidan gjordes av ilj@flowsim.se Fungerar bäst med Netscape 4.0+. Senast ändrad 13 februari 1998. Den här sidan hör hemma i ett ramsystem hos: www.flowsim.se Stilmallar på svenska