Home » CSS » Allmänna CSS märkningar

Allmänna CSS märkningar

Postad: 15.12.2007

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.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.
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

  1. h1 { font-family: verdana, arial, tahoma; font-size: 20px}

Rubrik med stort teckensnitt

  1. h2 { font-family: verdana, arial, tahoma; font-size: 18px;}

Rubrik med mellanstor teckensnitt

  1. h3 { font-family: verdana, arial, tahoma; font-size: 16px;}

Rubrik med mindre teckensnitt

  1. body { background-color: #FFFFFF;}

Bakgrundsfärg

  1. body {background: #FFFFFF url(din_bakgrundsbild.jpg);}

Formaterar bakgrundsbilden och bakgrundsfärgen

  1. body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top;}
  1. body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top no-repeat;}

Formaterar bakgrundsbilden så den inte upprepar sig

  1. body {background: #FFFFFF url(din_bakgrundsbild.jpg) left top repeat;}

Formaterar bakgrundsbilden så den upprepar sig

  1. a:link { text-decoration: none; color: #FFFFFF;}

Obesökt länk

  1. a:visited { text-decoration: none; color: #FFFFFF;}

Besökt länk

  1. a:active { text-decoration: none; color: #FFFFFF;}

Aktiv länk

  1. a:hover { text-decoration: none; color: #FFFFFF;}

Mouseover länk

  1. ul { list-style-type: circle;}

Formaterar listan med en cirkel

  1. ul { list-style-image: url(din_bild.jpg);}

Formaterar listan med din egen bild

  1. style="filter: blur(add=1, direction=100, strength=25);"

Ger en oskärpa

  1. style="filter: dropshadow(color=#202020,offx=10,offy=10,);"

Ger en drop-shadow

  1. style="filter: fliph;"

Vänder bilden/texten horisontellt

  1. style="filter: flipv;"

Vänder bilden/texten vertikalt

  1. style="filter: glow(color=#FF9F02, strength=10);"

Glödande text/bild

  1. style="filter: gray;"

Filter som ger en gråskala

  1. style="filter: xray;"

Påminner om föregående filter. Ger ett röntgenliknande utseende på bilden

  1. style="filter: invert;"

Ett filter som inverterar alla färger i bilden

  1. style="filter:shadow(color=#202020, direction=150);"

Ger en enkel skugga som du själv anger värdet i direction

  1. style="filter:chroma(color=#FFFFFF);"

Släpper igenom färgen och gör bilden/färgen genomskinlig.

Andra textegenskaper – text-decoration:

  1. Underline

En understrukning

  1. Overline

En linje ovanför

  1. Line-through

Genomstrykning

  1. Overline Underline

Ger en linje både ovanför som under