CSS - Cascading Style Sheets

Förkunskaper: 1-6.
Sankar du menyn till höger klicka här

Innehåll

Vad är CSS ?

 CascadingStyleSheets eller som det förkortas CSS är en samling regler på hur ett HTML-dokument ska formateras eller helt enkelt ett stilspråk. Dessa regler kan finnas i själva HTML-dokumentet, som en extern fil [*.css] eller direkt i taggen. CSS har funnits sedan i oktober -94 men inte förrän InternetExplorer 3.0 började stödja CSS som det börjades att användas med högre frekvens. Med CSS kan man styra ett obegränsat sidors formatering med en enda mall.

Med CSS kan du påverka layouten betydligt mer än endast med HTML-taggar på grund av att samma taggar kan var olika formaterade beroende på vad den har för ID & CLASS, mer om det lite senare. CSS ger dig även möjlighet att bestämma radavstånd, indrag, samt marginaler. Men en sak ska man lägga på minnet när man arbetar med CSS och det är att det är mycket viktigt att stänga alla taggar eftersom annars "ärver" nästa tagg samma formatering som taggen före.

CSS-Mall

 Exempel på en CSS-mall "inbyggt" i HTML-dokumentet, återfinns mellan <HEAD> & </HEAD>. Eftersom de läsare som inte stödjer CSS inte ska visa reglerna som vanlig text skrivs de som en kommenter, "gömd text".

<STYLE TYPE="TEXT/CSS">
   <!--
      element { attribut:värde } /* Detta är en kommentar i en CSS-Mall */
   -->
</STYLE>

<STYLE TYPE="TEXT/CSS">
   <!--
      element { attribut:värde ; attribut:värde }
   -->
</STYLE>

Som du ser av exemplet här ovan så användas ett semikolon som separator om man vill har två eller fler attribut:värde. Nu vet du hur en mall skrivs helt allmänt nu ska vi titta lite närmare på hur man formaterar all text i alla stycken blå. Först och främst så bli elementet för ett stycke P och attributet heter color och värdet(färgen) vi ville ha var ju blå, blue. Då sätter vi samman detta till en CSS-mall,

<STYLE TYPE="TEXT/CSS">
   <!--
      P { color:blue }
   -->
</STYLE>

Om vi utökar detta lite och säger att vi vill ha en gul bakgrund också så blir mallen så här,

<STYLE TYPE="TEXT/CSS">
   <!--
      P { color:blue ; background-color:#FFFF00 }
   -->
</STYLE>
 		  el.   <STYLE TYPE="TEXT/CSS">
   <!--
      P,H3 { color:blue ; background-color:yellow }
   -->
</STYLE>

Som du kan se av mallen här ovan så har jag två bestämmelse det ena är blå text det andra gul bakgrund dessa attribut:värden separeras med ett semikolon ; skulle man vilja ha någon mer bestämmelse är det bara att fylla på med det men glöm inte att det andra semikolonet då blir mellan den andra och tredje bestämmelsen.

Om man vill att två element ska ha samma bestämelser behöver man bara skriva bestämelsen en gång, man separerar elementen med ett komma. Exempelvis om vi vill ha blå text i alla stycken och gul bakgrund på rubrik av tredje graden blir det så här,

<STYLE TYPE="TEXT/CSS">
   <!--
      P,H3 { color:blue ; background-color:#FFFF00 }
   -->
</STYLE>
 		el. <STYLE TYPE="TEXT/CSS">
   <!--
      P,H3 { color:blue ; background-color:yellow }
   -->
</STYLE>

Om du t.ex. vill ha olika formateringar på rubrik av samma grad i ett HTML-dokument får man använda så kallade CLASS för att särskilja rubrikerna. CLASS skrivs efter elemenetet, elementet och CLASS separeras med en punkt. Här nedan ser du ett exempel som bestämmer att rubriker av fjärde graden i CLASS a ska vara blå text och i CLASS b ska ha röd text med teckensnittet Arial.

<STYLE TYPE="TEXT/CSS">
   <!--
      H4.a { color:blue }
      H4.b { color:red ; font-family:Arial }
   -->
</STYLE>

HTML-koden blir då,

<H4 CLASS=a>Rubrik av fjärde graden i CLASS a</H4>
och
<H4 CLASS=b>Rubrik av fjärde garden i CLASS b</H4>

När man skapar regler kan man också skapa individuellt namngivna regler så kallade ID. ID och CLASS kan används samtidigt, det gör det möjligt att skapa individuella skillnader. Ett ID skrivs alltid med ett # förre och är känsliga för stora och små bokstäver.

<STYLE TYPE="TEXT/CSS">
   <!--
      H4.a { color:blue ; font-family:Arial }
      #A { color:red }
   -->
</STYLE>

HTML-koderna kommer att se ut så här,

<H4 CLASS=a>Rubrik av fjärde graden med CLASS a</H4>
 och
<H4 CLASS=a ID=A>Rubrik av fjärde graden med CLASS a samt ID A</H4>

Det spelar ingen roll om du skriver reglerna med gemener eller versaler du kan till och med blanda, med undantag från en del udda teckensnitt. Det är väl också bäst att säga att långt ifrån alla webbläsare stödjer CSS, och de flesta som stödjer det i dags läget är mycket buggiga.

Olika CSS-Mallar

 Som jag nämt tidigare i detta dokument så kan man skriva CSS-mallarna på tre olika sätt det som jag har behandlat hitils är den mall som är "inbyggd" i själv HTML-dokumentet och återfinns mellan <HEAD> & </HEAD>. Jag tänkte titta lite närmare på de övriga två. Vi tar och börjar med den variant som har en extern fil.

.css

CSS-mallen skrivs lika dant i en extern fil som när den är inbyggd enda skillnaden är att man inte skriver några HTML-taggar utan skrivs direkt i .css filen som sparas i rent textformat [ASCII]. Ex. på en .css fil.

    BODY { color:red ; font-family:Arial }
    H3 { color:yellow }
    P { color:blue ; background-color:yellow }
    P.a { color:blue ; background-color:yellow ; font-family:Times }

För att få in den externa CSS-mallen i HTML-dokumentet skriver man som nedan även denna tagg återfinns mellan <HEAD> & </HEAD>.

<LINK REL="StyleSheet" HREF="fil.css" TYPE="TEXT/CSS">

Denna metod är mycket användbar om man har många dokument som man vill formatera efter en om samma mall eftersom man lägger in <LINK>-taggen i varje HTML-dokument sedan är det bara att spara .css-filen och man kan då ändra många sidors formatering och vipps har man sparat en hel del arbete och inte minst tid.

StyleSheets direkt i taggen

Nu till det sista alternativet det som är mest användbar om du till exempel vill styra ett stycke i ett helt dokument eftersom det då blir mer jobb att göra en mall än att bara skriva in regeln efter STYLE= Med <DIV>-taggen kan du bestämma regler för en tabell, flera sycken m.m.

Ex. på en rubrik av tredje graden med blå text och grön bakgrund

<H3 STYLE="color:blue;background-color:green">Rubrik</H3>

Yttligare ett exempel men med <DIV>-taggen.

<DIV STYLE="color:blue;font-family:Arial;margin-left:20pt">

<TABLE BORDER=0>
<TR>
    <TD>Cell 1</TD><TD>Cell 2</TD>
</TR>
<TR>
    <TD>Cell 1</TD><TD>Cell 2</TD>
</TR>
</TABLE>

</DIV>

Länkar

 När det gäller att bestämma regler för länkar [A-taggen] är det lite specielt, skriver du bara emelmentet A så kommer det att beröra alla sorters länkar [neutral länk, aktiv länk och besökt länk]. Men ibland vill man även kunna reglera varje del. Och då blir elementen så som i tabellen ned,

ElementBeskrivning
A"Alla sorters" länkar
A:linkNeutral länk
A:activeAktiv länk, under "klick"
A:visitedBesökt länk

Ex. om du vill ha en röd länk som inte har någon understryckning blir CSS-mallen så här.

<STYLE TYPE="TEXT/CSS">
   <!--
      A { color:red ; text-decoration:none }
   -->
</STYLE>

Listor & CSS

 När det gäller listor [<UL> & <OL>] är det lite specielt tycker jag nog. Det är så att skriver man UL som element så menar man hela listan. Men man kan även skriva UL UL LI som element då menar man alla punkter i listan som har två <UL> föräldrar. Låter det krångligt jag ska visa.

<STYLE TYPE="TEXT/CSS">
   <!--
      UL UL LI { color:red }
   -->
</STYLE>

Och HTML-kodenblir så här,

<UL>
<LI>Punkt 1
<LI>Punkt 2
  <UL>
      <LI>Underpunkt 1
      <LI>Underpunkt 2
  </UL>
<LI>Punk 3
<LI>Punk 4
</UL>

Och det blir så här, [OBS detta är fejkat p.g.a. att lång ifrån alla webbläsare klarar av att vissat detta.]

  • Punkt 1
  • Punkt 2
    • Underpunkt 1
    • Underpunkt 2
  • Punk 3
  • Punk 4

Marginaler

 Med CSS kan du bestämma alla marginalers längd. Med attributet margin kan du bestämma alla dessa marginaler, (top, right, bottom & left). Dett gör i nedanstående ordning.

{ margin: 2pt } /* alla marginaler är 2pt */
{ margin: 1pt 2pt } /* top & bottom = 1pt, right & left = 2pt */
{ margin: 1pt 2pt 3pt } /* top=1pt, right=2pt, bottom=3pt, left=2pt */

Se attribut:värde tabellen för mer info om margin-top, margin-right, margin-bottom och margin-left.

Sankar du menyn till höger klicka här

© 1997 Carl Adell.
Senast uppdaterad .