Allmänna CSS märkningar
Man kan laborera en hel del på sin hemsida genom att använda css.
Här hittar du en del värden som är användbara, både vanliga som mindre vanliga. OBS! Beskrivning till respektive kod finns under varje kod. Var också aktsam om att alla koder kanske inte heller passerar valideringen.
style="overflow:auto;" Döljer hela scrollisten. Attributet ska läggas in inom body
style="border: 1px solid #000000;" Ger bland annat din iframe en tunn ram. Läggs direkt i iframens html-kod.
Prova också på att använda attributen: dotted – dashed – ridge – groove – outset- inset.
<allowtransparency ="true"> <body style="background-color:transparent;"> </body></allowtransparency>Första koden läggs in i html-koden på din iframe.
Kod nummer 2 läggs in på varje sida som ska visas i din iframe. Gör den sidan som ska visas i din iframe transparent.
<body style="filter: Alpha(Opacity=50);"> </body>Vill du inte ha det helt transparent lägger du in ovanstående kod på de sidor du vill ska vara halvt transparenta. Du kan givetvis själv ändra inställning på siffrorna beroende på hur stor transparens du vill ha.
<style type="text/css"><!-- body { border: 5px #000000 solid;} --> </style> Inramad webbsida. Kodden läggs in i head. Prova också på att använda attributen: dotted – dashed – ridge – groove – outset.
<style type="text/css">
<!-- .scrollbox { padding: 5px; height: 150px; width: 150px; border: 1px solid #000000; overflow: auto; background-color: #FFFFFF;} --></style>Gör en scrollbox. Koden läggs i head:
Sedan måste du lägga in ett class-märke i body där du vill ha din scrollbox, görs lämpligen så här :
<div class="scrollbox;"> </div>Eftersom detta är en scrollbox gjord i css så innebär det att du även kan lägga till de vanliga formateringsattributen för scrollisten i boxen.
body { font-family: verdana, arial, tahoma; font-size: 10px;}Formaterar texten i body
p { font-family: verdana, arial, tahoma; font-size: 10px;}Formaterar texten i ett stycke
li{ font-family: verdana, arial, tahoma; font-size: 10px;}Formaterar texten i en lista
table{ font-family: verdana, arial, tahoma; font-size: 10px;}Formaterar texten i en tabell
td { font-family: verdana, arial, athoma; font-size: 10px;}Formaterar texten i en tabellcell
tr { font-family: verdana, arial, tahoma; font-size: 10px}Formaterar texten i tabellraden
h1 { font-family: verdana, arial, tahoma; font-size: 20px}
Rubrik med stort teckensnitt
h2 { font-family: verdana, arial, tahoma; font-size: 18px;}
Rubrik med mellanstor teckensnitt
h3 { font-family: verdana, arial, tahoma; font-size: 16px;}
Rubrik med mindre teckensnitt
body { background-color: #FFFFFF;}
Bakgrundsfärg
body {background: #FFFFFF url(din_bakgrundsbild.jpg);}
Formaterar bakgrundsbilden och bakgrundsfärgen
body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top;}
body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top no-repeat;}
Formaterar bakgrundsbilden så den inte upprepar sig
body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top repeat;}
Formaterar bakgrundsbilden så den upprepar sig
a:link { text-decoration: none; color: #FFFFFF;}
Obesökt länk
a:visited { text-decoration: none; color: #FFFFFF;}
Besökt länk
a:active { text-decoration: none; color: #FFFFFF;}
Aktiv länk
a:hover { text-decoration: none; color: #FFFFFF;}
Mouseover länk
ul { list-style-type: circle;}
Formaterar listan med en cirkel
ul { list-style-image: url(din_bild.jpg);}
Formaterar listan med din egen bild
style="filter: blur(add=1, direction=100, strength=25);"
Ger en oskärpa
style="filter: dropshadow(color=#202020,offx=10,offy=10,);"
Ger en drop-shadow
style="filter: fliph;"
Vänder bilden/texten horisontellt
style="filter: flipv;"
Vänder bilden/texten vertikalt
style="filter: glow(color=#FF9F02, strength=10);"
Glödande text/bild
style="filter: gray;"
Filter som ger en gråskala
style="filter: xray;"
Påminner om föregående filter. Ger ett röntgenliknande utseende på bilden
style="filter: invert;"
Ett filter som inverterar alla färger i bilden
style="filter:shadow(color=#202020, direction=150);"
Ger en enkel skugga som du själv anger värdet i direction
style="filter:chroma(color=#FFFFFF);"
Släpper igenom färgen och gör bilden/färgen genomskinlig.
Andra textegenskaper – text-decoration:
Underline
En understrukning
Overline
En linje ovanför
Line-through
Genomstrykning
Overline Underline
Ger en linje både ovanför som under