Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

JavaScript.nu / HTML-kurs / Style Sheets (CSS)

Style Sheets - CSS

Style Sheets
3 sätt
Attribut
Exempel
Span Style
Typsnitt
Marginaler
Länkar
Relaterat:
Kurs i
DHTML


Style sheets är något som man kan ha på sin sida så att man kan ändra t.ex. textstorlek, textfärg, understrykningar på länkar etc.
Jag vill dock varna för att alla webbläsare inte kan hantera style sheets och därför ignorerar allt som görs med style sheets och visar sidan som om style sheets inte hade funnits.
Style sheets fungerar med Internet Explorer 3.0 och Netscape 4.0 eller bättre av respektive webbläsare. Om denna text är grön klarar din webbläsare av Style Sheets.

Många av de saker man kan göra med style sheets kan man också göra med vanliga HTML-taggar, så det kan lätt hända att man som nybörjare tycker att style sheets är onödigt, vilket givetvis inte stämmer.
Som jag redan sagt så fungerar inte style sheets på alla webbläsare, men vad som än värre är, det fungerar olika på olika webbläsare. De har nämligen olika stöd för style sheets, dvs. de gamla webbläsarna förstår inta alla nya kommandon som de nya webbläsarna förstår.
Så man bör inte överdriva användandet av style sheets. Så länge som man kan göra det man önskar med vanlig HTML så kan det vara att föredra, fast att åtminstone kunna förstå grunderna i style sheets är nödvändigt om man vill ha kunskap nog att skapa en lite mer avancerad hemsida.


Man kan använda style sheets på tre olika sätt på sin hemsida:
  1. Detta är det jobbigaste sättet om man bara vill ändra en sidas style sheets. Här använder man en ".css-fil" (= Cascading Style Sheets-fil). Det man sedan kan göra är att man i sina vanliga sidor länkar till denna sida så att alla ens sidor kan få använda .css-filen som en mall för hur de ska se ut.

    Det gör du på följande sätt:

    1. Skapa en sida med dina style sheets.
      T.ex. kan filens innehåll se ut så här:
      BODY {background-color: yellow; margin: 20px -10px -10px}
      H1 {font: bold 30pt "Courier New"; color: red; text-align: left}
      H2 {font: bold 15pt Arial; color: blue; text-align: right}
      P {font: 15pt Arial; color: blue}
      
      Spara filen som ett_namn.css. Filen ska ligga i samma mapp som din ".html-fil".

    2. Skriv detta mellan <HEAD> och </HEAD> på de sidor som ska använda sig av de style sheets kommandon som du skrivit i filen:
      <LINK REL=STYLESHEET HREF="ett_namn.css" TYPE="TEXT/CSS">

  2. Ett annat sätt är att man har style sheets i sin HEAD-tagg. Detta gör man genom att skriva:
    <STYLE TYPE="TEXT/CSS">
    <!--
    
    Här skriver man det som ska ändras
    
    //-->
    </STYLE>
    
    Anledningen till att man har <!-- och //--> är att alla webbläsare som inte klarar av style sheets annars kommer att tro att det man skrivit är vanlig text som besökaren ska läsa. Därför skrivs det ut på hemsidan med dessa webbläsare. Man lurar då webbläsaren genom att sätta dessa kommentarstaggar (<!-- och //-->) runt kommandona som man skriver så att webbläsaren tror att det ska vara dold text (och inte skrivas ut). De nya webbläsarna som klarar av style sheets ignorerar <!-- och //-->, eftersom de vet att man skrivit det för att gamla webbläsare inte ska skriva ut kommandona.

    Här är exempel på vad man kan skriva:

    <STYLE TYPE="TEXT/CSS">
    <!--
    
    P {text-align: center; font-weight: light}
    A {line-height: 50pt}
    FONT {font-weight: bold}
    
    //-->
    </STYLE>
    
  3. Detta sätt är att man skriver in style sheets i taggar. Ett exempel kan vara:
<FONT STYLE="font-size: 25pt">TEXT</FONT>
<B STYLE="color: gold">TEXT</B>
<A STYLE="font-family: 'Comic Sans MS'" HREF="hemsida.shtml">TEXT</A>
Här är alltså STYLE ett attribut.
Detta sätt kan (om man vill) kombineras med de två ovanstående sätten. Om du då t.ex. har skrivit...
<STYLE TYPE="TEXT/CSS">
<!--
A {line-height: 50pt}
//-->
</STYLE>
...I HEAD men du har skrivit...
<A STYLE="A {line-height: 30pt}" HREF="hemsida.shtml">TEXT</A>
...På sidan så gäller 30pt, eftersom style-attributen (när man skriver värdet inom en tagg) har högre prioritet än de andra två sätten.
Här har jag listat upp några vanliga attribut som man kan använda. Det finns fler, fast dessa är några vanliga som kan vara värda att känna till.
Kom ihåg att det du ska skriva (exemplet) inte ska ha måsvingarna ({ och }) om du skriver detta i ett attribut (STYLE="värde"). Måsvingarna ska bara finnas om du ska skriva detta längst upp på sidan (i HEAD) eller i en separat .css-fil (dvs. måsvingarna behövs bara för metod 1 och 2 ovan).
ATTRIBUT BESKRIVNING VÄRDEN EXEMPEL
background-color
bakgrundsfärg
färgnamnet eller RGB-koden
{background-color: red}
{background-color: rgb(0,255,0)}
{background-color: #00FFFF}
background-image
bakgrundsbild
URL:en till bilden,
ingen bild
{background-image: url(bild.gif)}
{background-image: none}
background-attachment
bakgrundsscrollning
scroll / fixed
{background-attachment: fixed}
background-repeat
bakgrundsupprepning
repeat / repeat-x
repeat-y / no-repeat
{background-repeat: no-repeat}
color
färgen som texten får
rgb-koden eller
färgens namn se ex.
{color: red}
cursor
muspekarens utseende
auto / crosshair / default pointer / move / text / wait / help / hand / n-resize / ne-resize / e-resize / se-resize / s-resize / sw-resize / w-resize / nw-resize
{cursor: crosshair}
font-size
storleken på texten
points (pt) / inches (in)
pixels (px) / cm (cm)
xx-small / x-small / small
medium / large / x-large
xx-large / larger / smaller
{font-size: 22pt}
font-family
typsnittet
namnet på typsnittet
{font-family: "Comic Sans MS"}
font-weight
tjockleken
light / medium / bold
extra-bold
{font-weight: bold}
font-style
kursiv text
italic / normal
{font-style: italic}
margin-left
vänstermarginal
points (pt) / cm (cm)
inches (in) / pixels (px)
{margin-left: 2in}
margin-right
högermarginal
points (pt) / cm (cm)
inches (in) / pixels (px)
{margin-right: 4px}
margin-top
översta
topmarginalen
points (pt) / cm (cm)
inches (in) / pixels (px)
{margin-top: 7cm}
margin-bottom
nedersta
bottenmarginalen
points (pt) / cm (cm)
inches (in) / pixels (px)
{margin-bottom: 9cm}
text-align
textens justering
left / center / right
{text-align: center}
text-indent
indrag av
texten
points (pt) / cm (cm)
inches (in) / pixels (px)
{text-indent: 3cm}
line-height
radens höjd
points (pt) / cm (cm)
inches (in) / pixels (px)
{line-height: 5in}
text-decoration
hur texten ska
förändras
underline / none
line-through / italic
{text-decoration: none}

Man skriver ut dessa värden med ett separerande semikolon (;).
Alltså kan man skriva så här för att endast en FONT-tagg ska ändras med style sheets:
<FONT STYLE="font-size: 32pt; color: gray">TEXT</FONT>

...För att få detta resultat:
TEXT

Skulle jag däremot vilja att all text som finns på min sida inom FONT-taggarna (texten som finns mellan <FONT> och </FONT>) ska bli som texten ovan så skriver jag så här mellan <HEAD> och </HEAD>:

<STYLE TYPE="TEXT/CSS">
<!--

FONT {font-size: 32pt; color: gray}

//-->
</STYLE>
Skulle jag vilja att all text som kommer efter <P> ska bli som texten ovan (gråfärgad och förstorad) så skulle jag bara byta ut FONT mot P.

Om jag t.ex. hade skrivit ovanstående kod-snutt inom HEAD och sedan skrivit detta...
Text 1 - <FONT>Text 2</FONT> - Text 3
...Här så hade resultatet blivit...
Text 1 - Text 2 - Text 3


Vill man ändra ett par ord till något speciellt skriver man:
<SPAN STYLE="color: red">Dessa ord blir röda</SPAN>
(Är inte texten röd för dig så fungerar detta inte för dig).
När du skriver namnen på olika typsnitt (t.ex. arial, wild latin, times new roman etc.) så kom ihåg att skriva citat (") runt namnet om namnet innehåller mellanrum. T.ex. ska du inte skriva:
FONT {font-family: Comic Sans MS, Arial, sans-serif, wild latin}
...utan skriv...
FONT {font-family: "Comic Sans MS", Arial, sans-serif, "wild latin"}

Om du skriver allt i ett attribut så får du använda ' istället för ".
Ett exempel:
<FONT STYLE="font-family: 'Comic Sans MS', Arial, sans-serif, 'wild latin'">TEXT</FONT>


När du ändrar sidans marginaler så kan du alltid använda negativa värden.
Om du t.ex. vill att sidan ska vara tom en bra bit på höger och vänster sida så kan du skriva:
<STYLE TYPE="TEXT/CSS">
<!--

BODY {margin-right: 100px; margin-left: 100px}

//-->
</STYLE>

Om du vill ändra utseendet på t.ex. länkar kan du använda mer än bara A. Du kan ange t.ex:
A:link    används då man menar en länk som inte har använts
A:visited används då man menar en länk som har använts
A:active  används då man menar en länk som är nedtryckt
A:hover   används då man har musen över länken    (fungerar bara i Explorer)
Vill du t.ex. att dina länkar ska var utan understrykning kan du skriva:
<STYLE TYPE="TEXT/CSS">
<!--

A {text-decoration: none}

//-->
</STYLE>






Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]