12 kunder online
Innehåll och struktur
CSS - (Cascading Style Sheets) är stilmallar som
tillåter både den som skapar dokument och den som läser
dem att använda sin egen stilmall. I praktiken har CSS använts
till att formge dokument när det gäller färg, teckensnitt,
justering av text och objekt mm. En enda CSS-mall kan styra tusentals
dokument och det är då enkelt att ändra formateringen
genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre
och möjliggjort formateringar och effekter som inte fanns i HTML
standarden. En av fördelarna med CSS är att flera
mallar kan användas och de har då företräde inbördes
så att en "huvudmall" med de övergripande formateringarna
kan ersättas på en lägre nivå av en "lokal
mall" som då gäller före huvudmallen. CSS är
liksom XML/XHTML ett steg mot att separera innehåll och struktur
i dokument. All formatering bör ske i externa mallar vilket gör
att mängden kod i själva dokumentet minskar avsevärt och
gör att sidorna laddas snabbare i webbläsaren. Då samma
mall används för varje dokument behöver inte webbläsaren
läsa in formateringsanvisningar på nytt varje gång en
ny sida anropas.
Tillgänglighet
En målsättning med CSS är att läsaren ska kunna
påverka
utseendet av dokumentet när sidorna läses i webbläsaren
vilket inte alltid har varit populärt bland författarna av
dokumenten då förändringar kan påverka webbplatsens
layout. Detta har i praktiken inneburit att vissa grupper har utestängts
från att använda många platser på Internet.
Syn- och hörselskadade och andra har haft svårigheter att
ta del av innehåll på sidorna trots att det finns programvaror
för
tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas och
då gäller detta inte bara de som har svårt att läsa
dokumenten på en PC. Ett av målen för W3C är
att göra webbaserat innehåll tillgängligt på fler
plattformar
än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter
för talsyntes och punktskrift (Braille). Genom att strukturera
dokumenten på rätt sätt ska alltså både
synskadade och hörselskadade kunna ta del av innehållet.
Det innebär
att många webbplatser som byggts med layout som första prioritet
inte fungerar om de använder tex Frames, Iframes, Imagemaps, java,
javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer,
Flash, Shockwave, PDF-dokument osv. Många funktioner som används
idag går då¨alltså bort helt.
Läs
mer om W3C och webbstandards »
CSS levels
CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som
bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet
att formge hela dokument med positionerade rektangulära områden
(boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2
har förbättrats och finns i version CSS21 men kommer att ersättas
av CSS3 som idag inte är helt färdig. Håll
dig uppdaterad om alla specifikationer i CSS genom att besöka W3C
för mer information: CSS1 » - CSS2 » - CSS3 »
Läs mer om: CSS-effekter » - CSS-positionering » - CSS-menyer » - CSS-layout »
När du använder CSS för att formatera en sida kan du infoga CSS-formateringen på tre sätt:
Det här är den vanligaste användningen av CSS där ett externt dokument som innehåller formateringen kopplas till alla de sidor som ska tillämpa formatet. Namnet på CSS-mallen måste ha filtilläget .css och namnet på mallen i exemplet nedan är "mall.css".
Den här metoden är mest effektiv, om formateringen ska ändras behöver du bara göra det i ett enda mall-dokument. Här uppfylls målet med att separera innehåll och struktur i dokumenten.
Så här kan koden för sidorna som kopplas till mallen se ut:
CSS-mallen "mall.css" innehåller formateringen av rubriken <H1>:
... och när rubriken <H1> används i sidan formateras den enligt den externa CSS-mallen:
Du kan koppla flera externa CSS-mallar till samma dokument. Om samma selektorer förekommer i båda mallarna men med olika formatering gäller den mall som angivits senast i radvis ordning. I exemplet nedan gäller alltså "mall2.css" före "mall.css":
CSS-formatering angiven direkt i dokumentet kan användas när vissa sidor ska avvika från huvudmallens formatering. Den här metoden är inte lika effektiv som att använda en extern CSS-mall. Om formateringen ska ändras måste det utföras i varje dokument som använder formateringen.
Här formateras rubriken <H1> direkt i dokumentet:
Den här metoden är minst effektiv och här uppfylls inte målet med att separera innehåll och struktur i dokumenten. CSS-formateringen anges i anslutning till de elementsom ska formateras. När formatet ska användas i ett nytt elememnt måste CSS-koden anges på nytt och det innebär att sidorna innehåller mycket kod och tar längre tid att laddas i webbläsaren.
Så här kan koden se ut när rubriken <H1> formateras direkt i elementet:
CLASS kan användas som attribut till alla element och det ger dig möjlighet att använda olika format på samma typ av element. Om du vill tilldela elementet <P> olika format kan du alltså lägga till attributet CLASS och det class-namn som ska användas:
<p class="textformat1">text här...</p>
<p class="textformat2">annan text här...</p>
Här tillämpas formateringen med CLASS som attribut till <P>:
Här är classerna angivna i CSS-mallen. Notera den inledande punkten i classnamnet som är viktig och måste finnas med:
... här är resultatet i webbläsaren:
Du kan ha flera mallar med de namn du själv anger som som tex:
.teckensnitt2
.textcolor
.bakgrundsfarg
.kantlinje
.kantlinje2
CLASS kan också användas på angivet område i ett element sk inline element. Om du bara vill formatera några ord inom <P> kan du omluta området som ska formateras med <SPAN>:
<p>Här är <span class="textformat2">några ord</span> formaterade...</p>
Här används <SPAN> för att omsluta de delar av texten som ska formateras:
... här är resultatet i webbläsaren:
Storlekar på framförallt text men även boxar (områden) kan anges med olika enheter och den vanligaste enheten för text i HTML var tidigare "size" som utgick ifrån en standardstorlek (default) och angav storlek i 7 steg (läs mer om font size i HTML grunder »). CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm. Problemet med pixlar är att IE och vissa andra webbläsare inte kan förstora dem om användaren vill se texten i större storlek. Den här guiden har textstorlek angiven i em och kan förstoras i både Firefox och i Internet Explorer och med tanke på framtida tillgänglighet är det en fördel - se informationen i början av guiden »
Textstorlekar kan anges i enheterna:
Enheterna "pt", "pica" och "ems" har traditionellt använts i typografin och trycksaker och det är förmodligen "punkter" (pt) som är mest allmänt använt i tex ordbehandling.
Enheten em är ursprungligen ett horisontellt mått som utgår från bredden på bokstaven "M". Två bindestreck ihop (--) kallas för "em-dash" och har samma bredd som bokstaven "M". Endast ett bindestreck (-) kallas "en-dash". Begreppet "em" har inte samma betydelse i CSS som i typografin då bokstaven "M" inte finns i alla länders teckenuppsättningar. Alla teckenuppsättningar har däremot en höjd på tecknen och "em" används i CSS som en enhet för höjd på tecken.
Enheten em är betydelsefull i CCS för att skapa skalbara dokument som fungerar på flera enheter och du bör alltså använda "em" som enhet för både text och områden (boxar). Em är relativ till andra element och utgår alltså från tidigare formatering. Om du anger textstorlek för "brödtexten" <P> till "10 pixlar" så kan du formatera radhöjd, teckenmellanrum, rubriker, storlek på boxar mm relativt till texten genom att ange "em" som enhet på dessa element.
Klicka här
för att se exempel på användning av "em" i text
TIPS! Fler exempel och information om enheter finns i guiden CSS-positionering »
Tillämpa CSS-formateringen i en extern mall eller direkt i dokumentet. OBS! Ta bort all eventuell tidigare HTML-formatering för att CSS-formateringen ska gälla.
Läs mer i avsnittet ovan: CSS med olika metoder »
För att använda samma teckensnitt och storlek på all text i ett dokument kan innehållet i CSS-mallen "textmall.css" se ut så här:
Klicka
här för att se exemplet
Notera att formateringen anges för flera märken för att även texten som finns i tabellceller <TD> , stycketext <P> och listor <LI> ska formateras. Det kan fungera att bara ange textstorleken inom <BODY> men vissa webbläsare använder då inte formateringen i tabellceller eller listor. Att ange samma formatering för de element du använder på din sida är en metod att säkerställa att formateringen verkligen fungerar i de flesta webbläsare.
Textfärg på all text i hela dokumentet <BODY> kan du ange så här:
...formatering av både teckensnitt och textfärg kan se ut så här::
Tillämpa CSS-formateringen endast på de märken (taggar) och objekt du använder i ditt dokument. Om du inte använder tabeller <TABLE> kan du alltså hoppa över formateringen av <TD>.
Ett effektivt sätt att enkelt kunna byta formatering av Rubrikerna i dokument är att koppla dem till de vanliga märkena för "heading" H1-H6. Då kan du formatera "brödtexten" enligt avsnittet om teckensnitt ovan men ha olika storlekar på rubrikerna genom att tilldela märkena <H1> till <H6> egna storlekar och teckensnitt. Då kan innehållet i CSS-mallen "textmall.css" (eller inom <HEAD> på aktuell sida) se ut så här:
Klicka
här för att se exemplet
Även bakgrundsfärgen kan du ange i din CSS-mall vilket gör det enkelt att byta färg på alla sidor. Både teckensnitt och bakgrundsfärg för hela sidan anges i märket <BODY>. Då kan innehållet i CSS-mallen "textmall.css" (eller inom <HEAD> på aktuell sida) se ut så här:
Bakgrundsfärg, teckensnitt och teckenfärg för hela sidan kan du ange inom <BODY>:
Klicka
här för att se exemplet
För att ange vilken bakgrundsbild som skall användas gör du på samma sätt som med bakgrundsfärg. I exemplet nedan används både en bakgrundsbild och en bakgrundsfärg i samma nyans (bakgrundsfärgen syns ju i webbläsaren den tid det eventuellt tar för bakgrundsbilden att laddas ner):
Klicka
här för att se exemplet
Här anges bakgrundsbild tillsammans med bakgrundsfärg och teckensnitt:
CSS ger fler möjligheter att bestämma bakgrundsbildens position, egenskaper och upprepning.
Klicka
här för att se exemplet
Klicka
här för att se exemplet
Klicka
här för att se exemplet
Klicka
här för att se exemplet
Pseudo-classes är en benämning på information som kan användas i CSS selektorer men inte finns som HTML-kod. Det är egentligen en form av "fiktiva taggar" som gör det möjligt att tex ange egenskaper för länkar. HTML använder elementet <A HREF> men det finns inga andra attribut till märket som anger om en länk har använts (besökts). Däremot finns det funktioner i webbläsaren som som tilldelar länkarna egenskaper om de besökts eller ej. Genom att använda pseudo-classes till <A HREF> kan du själv bestämma egenskaperna med CSS.
Selektorerna som används för länkar <A HREF> är:
a:link = länk
a:visited = länk som användaren klickat på
a:active = länk som välj (klickas på) av användaren
a:hover = länk som muspekaren förs över (hovras över)
CSS-koden nedan använder alla selektorerna tilldelade olika format:
... här är resultatet i webbläsaren:
Klicka
här för att se exemplet
Att ta bort understrykningen i länkar är något som används i menyer där man ju kan förstå att alla menyval är länkade. Om du vill ta bort understrykningen på länkar i övrigt bör du se till att de har en färg eller annat kännetecken som gör att dina besökare förstår att det är klickbara länkar.
Koden nedan tar bort understrykning på länkar, besökta länkar och aktiva länkar:
OBS! Tänk på att dina besökare kanske letar efter det typiska länkutseendet (blå och understruken) och kan missa dina länkar om de inte är utmärkande på något annat sätt.
Genom att ta bort understrykning och ändra färg på länkarna kan du få dina menyer mm att passa in bättre i din övriga layout.
Koden nedan ändrar färg på länkar och besökta länkar och ger bakgrundsfärg vid hovring:
OnMouseOver (rollover, hover) är läget när du för muspekaren över en länkad text. Med CSS kan du tilldela text och bildlänkar olika OnMouseOver-effekter. Exemplet nedan tar bort understrykningen av länkar men visar understrykning vid OnMouseOver.
Koden kan se ut så här:
OBS! Selektorn a:hover måste placeras efter a:link och a:visited. Om du använder bakgrundsfärg som hover-effekt kommer den annars inte att synas.
Det finns flera andra rollover-effekter och du ser några exempel nedan.
Klicka
här för att se alla exemplen ovan
Du kan styra radavståndet i hela din text eller i vissa stycken
genom att använda CSS-kod. Det är ju oftast bättre att
ha luft i texten och ha ett normalstort teckensnitt än att förstora
teckensnittet för att fylla upp en sida. När du använder
avståndsangivelser i CSS så kan du använda olika måttenheter
för att ange avstånden.
Vanliga mått är:
points
(pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc),
procent (%).
Class-namnet i exemplet nedan är .linespacing och koden kan se ut så här:
...tillämpa classen på ett stycke <P> eller tabellcell <TD>
Om du bara vill formatera några ord inom <P> kan du omluta området som ska formateras med <SPAN>. Exemplet nedan formaterar endast den text som omsluts av <span>:
| normalt radavstånd | 20 pixlar |
| .linespacing {line-height: 20px} | |
Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).
|
Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). |
| 200 % | 20 punkter |
| .linespacing {line-height: 200%} | .linespacing {line-height: 20pt} |
Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). |
Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). |
Justering av text höger, vänster, centrerad eller marginaljustering. Du kan även ange avstånd mellan orden eller bokstäverna.
Class-namnet i exemplet nedan är .justering och koden kan se ut så här:
(För tillämpning av formateringen se ovan » )
| full justering (marginaljustering) | första radens indrag |
| .justering {text-align: justify;} | .justering {text-indent: 20px;} |
Full justering av texten används ofta i tidningsartiklar eller ordbehandling i kolumner och kallas i CSS för "justify". För bästa resultat ska egentligen vissa ord avstavas men ännu finns ingen bra metod för detta varken i HTML eller i CSS. Naturligtvis kan du också ange vänsterjustering (left), högerjustering (right), och centrering (center) på samma sätt som i HTML men fördelen är ju att du kan ändra all justering i en extern CSS-mall.
|
Första radens indrag i en text är också en formatering som används i tidningsartiklar och ordbehandling. Varje nytt stycke börjar då med indragen text och det passar bra att samtidigt formatera avståndet mellan stycken <P> och radavstånd för att få full kontroll över textflödet. Här är formateringen tillämpad på stycken <P> och varje nytt stycke inleds med det angivna indraget. |
| avstånd mellan ord | avstånd mellan bokstäver |
| .justering {word-spacing: 10px;} | .justering {letter-spacing: 3px;} |
Avstånd mellan ord är (liksom avstånd mellan bokstäver) kanske inte är den mest använda formateringen men du kanske har användning av den ändå? Avstånden mellan orden kan anges med olika mått som tex: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). |
Avstånd mellan bokstäver är (liksom avstånd mellan ord) kanske inte är den mest använda formateringen men du kanske har användning av den ändå? Avstånden mellan bokstäverna kan anges med olika mått som tex: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%). |
Punktlistor <UL> eller numrerade listor <OL> kan formateras med CSS. Förutom att formatera hela listan han du formatera varje listelement <LI>.
CSS-kod till punktlista med cirkel som symbol:
... formaterar alla punktlistor <UL> i dokumentet:
CSS-kod till punktlista med punkt som symbol:
... formaterar alla punktlistor <UL> i dokumentet:
CSS-kod till punktlista med rektangel som symbol:
... formaterar alla punktlistor <UL> i dokumentet:
För att få olika format punktlistor i samma dokument använder du en class som selektor:
...tillämpa classen på de listområden <UL> som ska ha formateringen:
Egna bilder kan användas som symbol i punktlistorna:
CSS-kod till punktlista med bild som symbol:
För att få olika format punktlistor i samma dokument använder du en class som selektor:
...tillämpa classen på de listområden <UL> som ska ha formateringen:
Numrerade listor <OL> formateras enligt samma pricip som punktlistorna ovan. De olika egenskaper du kan använda ser du i exemplen nedan:
Med hjälp av CSS kan du få en färgad bakgrund på bokstäver, ord eller hela rader.
I den här texten har ett ord färgad bakgrund. CSS-koden som använder class-selektor ser ut så här:
Tillämpa formateringen på del av text genom att omsluta området med <SPAN>:
Tillämpa formateringen på ett element:
Du kan formatera tex rubriker <H1> till <H7>:
Om du vill använda flera olika färger skapar du en egen class för varje färg:
Tillämpa formateringen på del av text genom att omsluta området med <SPAN>:
Det går även bra att använda en bild som bakgrund till en text istället för en färg. Då är det viktigt att tänka på om bilden skall upprepas eller inte. Om den utgör ett mönster så bör den kanske upprepas. Om det är ett vanligt fotografi som i det här exemplet så kan det vara idé att låsa den så att den inte upprepas. Generellt så är det nog bättre att använda bilder som bakgrunder i tabeller, tabellceller eller lager. Då kan du ju samtidigt se till att textmassan har samma bredd i alla tänkbara bildskärmsupplösningar.
Använd ett eget class-namn som i exemplet:
...tillämpa bakgrundsbilden på ett element:
Kantlinjer som endast ska synas runt tabellen och inte runt cellerna går att få utan CSS men då måste du oftast använda en tabell i en annan tabell - nästlade tabeller. Med CSS kan du ange kantlinjen direkt i önskad del av tabellen och dessutom ange typ av kantlinje.
OBS! När du använder CSS för kantlinje i tabell måste du ta bort den HTML-formaterade tabellkantlinjen. Ange alltid border="0" för tabellen:
Tabellen nedan har en kantlinje som består av punkter (dotted):
| Cell1 | Cell2 |
| Cell3 | Cell4 |
Använd ett eget class-namn:
...tillämpa formateringen på tabellen:
Cellerna nedan har en kantlinje som består av punkter (dotted):
| Cell1 | Cell2 |
| Cell3 | Cell4 |
...tillämpa formateringen på celler:
Tabellen nedan har kantlinje över och under:
| Cell1 | Cell2 |
| Cell3 | Cell4 |
| Cell5 | Cell6 |
Använd ett eget class-namn:
Cellerna nedan har kantlinje under:
| Cell1 | Cell2 |
| Cell3 | Cell4 |
| Cell5 | Cell6 |
| Cell7 | Cell8 |
| Cell9 | Cell10 |
Använd ett eget class-namn:
...tillämpa formateringen på tabellcellerna:
Fler exempel på kantlinjetyper:
| border: 1px dashed #003366 | border: 1px solid #003366 |
border: 3px double #003366} |
border: 5px groove #CCCC66 |
Kantlinjer kan du tillämpa på andra element än tabeller. Du kan ha kantlinjer på stycken <P>, rubriker <H1-6> och andra områden med <DIV> <SPAN>:
Det här är ett stycke <P> som har samma kantlinje som tabellerna ovan. Som du ser så sträcker sig kantlinjen från kant till kant i hela styckets längd...
...tillämpa classen direkt i stycket <P>:
<DIV> som kan liknas vid en typ av "box" och genom att omsluta flera element så kan du ge dem samma egenskaper. Läs mer om boxar i guiden CSS layout »
Om du vill tillämpa en formatering på flera märken samtidigt kan du omsluta området med <DIV>:
Det här är en stycketext <P>, en tabell <TABLE> och en bild <IMG> som har samma kantlinje genom att använda <DIV> för att omsluta hela området som ska ha kantlinjen. Du kan omsluta flera olika element som tex <table> - <p> - <img> - <h1>
Använd <DIV> för att formatera områden med olika element.
...tillämpa classen i en omslutande <DIV>:
Skuggor i tabellceller är inte CSS utan användning av bakgrundsbilder som utgör skuggan i varje cell läs mer här »
Vid längre texter som är uppdelad i avsnitt eller kapitel som ska skrivas ut på egna sidor kan du använda CSS för att ange avsnittsbrytningar. Du kan ange att brytningar ska ske före eller efter vissa märken som tex <P> <H> <TR> <LI>
OBS! Fungerar inte tillsammans med <BR> och <HR>. Du kan inte heller ange sidbrytningar inom positionerade objekt.
Då du förmodligen inte vill ha en sidbrytning efter varje stycke eller rubrik passar det bättre att ange en egen anpassad mall och sedan tillämpa den på just det stycke eller den rubrik du vill ha brytning före/efter:
page-break-after: always
ger sidbrytning efter det område eller märke
du tillämpat mallen på.
page-break-before: always
ger sidbrytning före det område eller märke
du tillämpat mallen på.
Tillämpa mallen på det märke eller område du vill ha på egna sidor vid utskrift. I exemplet är den tillämpad på ett stycke <P>:
Klicka
här för att se exempel på sidbrytning
skriv ut »
till sidans topp