kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » Allmänna CSS märkningar

Allmänna CSS märkningar

Postad: 15 december 2007 | CSS-guider | No Comments
Lästid: 2 minuter

Denna guide tar upp 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.

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 kan läggas in inom body men helst i stilmallen.

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. Det här är ful-html, använd istället din stilmall.

<allowtransparency="true">

<body style="background-color:transparent;"></body>

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. Ful-html. Använd stilmallen.

<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. Ful-html. Använd din stilmall.

<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. Inline-style. Tillåtet.

<style type="text/css">
I stilmallen.
.scrollbox { padding: 5px; height: 150px; width: 150px; border: 1px solid #000000; overflow: auto; background-color: #FFFFFF;}</style>

Koden ger en scrollbox. 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 (i stilmallen) 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

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

Ger en oskärpa

filter: dropshadow(color=#202020,offx=10,offy=10,);

Ger en drop-shadow

filter: fliph;

Vänder bilden/texten horisontellt

filter: flipv;

Vänder bilden/texten vertikalt

filter: glow(color=#FF9F02, strength=10);

Glödande text/bild

filter: gray;

Filter som ger en gråskala

filter: xray;

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

filter: invert;

Ett filter som inverterar alla färger i bilden

filter:shadow(color=#202020, direction=150);

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

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