http://vonpepel.com/ref/css/ - Senaste uppdatering 20 juni 1998CSS © Eva von Pepel
* [ CSS-referensbok ] * [ Referensböcker ] *
Den har hänt en hel del sedan CSS1 publicerades. Dels kom W3C med en ny HTML-rekommendation, HTML 4.0 (http://www.w3.org./TR/REC-html40), dels med en ny CSS-rekommendation, CSS2 (http://www.w3.org/TR/REC-CSS2/). HTML 4.0 åtskiljer struktur från presentation och tillåter inga s.k. stilistiska element (tex FONT) och attribut (t ex ALIGN). Numera ska all formatering av HTML-dokument ske via stilmallar.
CSS2 bygger på CSS1. Ett giltigt CSS1-dokument är också ett giltigt CSS2-dokument. I CSS2 finner du en mängd nya funktioner. Några få CSS1-egenskaper har dock ändrat sin betydelse. En mängd olika nya funktioner har tillkommit. De är:
I externa och inbäddade mallar måste stilspråket uppges; nya typer av externa stilmallar, Mediatyper; värdet 'inherit'; paginerade dokument; relativ och absolut placering av element; nya pseudoklasser och pseudoelement; Aural style sheets (talmallar); internationaliseringsegenskaper så som olika stilar för numrering av listor, text som kan presenteras i två riktningar, stöd för språkspecifika citattecken; mekanism för val av fonter inklusive möjlighet till fontnedladdning; tabeller, nya typer av boxar utöver "block" och "inline"; möjlighet till kontroll av innehållet; maximal och minimal bredd/höjd; nya selektorer; dynamiskt genererat innehåll; räknare och automatisk numrering; textskuggor; systemfärg och -fonter; markörer, deskriptorer
Till skillnad från HTML 3.2 kräver HTML 4.0 att standardstilspråk uppges. Det kan du göra på följande sätt:
Content-Style-Type: text/css
<HEAD> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD>
<LINK REL=Stylesheet HREF="stil.css" TYPE="text/css">
<HEAD> <STYLE type="text/css"> ..... </STYLE> </HEAD>
Ett obegränsat antal externa stilmallar kan länkas med ett HTML-dokument. En mall kan föreslå formateringen för en typ av medium (t ex skärm), en annan mall kan föreslå formateringen för en annan typ av medium (t ex skrivare). En mall kan föreslå en specifik stil, en annan mall kan föreslå en annan stil. Du kan länka alla dessa mallar med dokumentet och låta användaren välja den stil som passar honom/henne bäst.
Författaren kan förse användaren med en serie ömsesidigt exklusiva stilmallar som han/hon kan välja mellan. Dessa stilmallar kallas alternativa stilmallar.
En av dessa alternativa stilar kan författaren specificera som föredragen stil, dvs en gällande stil i fall då användaren inte väljer någon annan. Bara en stil kan specificeras som föredragen. Om fler än ett LINK element används för att specificera föredragen stil gäller stilen enligt det första LINK elementet. Om elementet META eller HTTP-headern används för att specificera föredragen stil gäller dessa istället för den som specificerats med hjälp av LINK.
Dessa alternativa stilar, inklusive författarens föredragna stil, kan grupperas under ett gemensamt namn. När användaren väljer en namngiven stil bör www-klienten tillämpa alla stilmallar med detta namn.
När författaren själv väljer en stil som www-klienten ska tillämpa, utöver de två ovan nämnda, kallas denna mall för persistent (framhärdande). Om stilmallar tillämpas, dvs om www-klienten stödjer dem och om användaren inte har stilmallmöjligheten avstängd, gäller alltid denna stil.
Denna stil gäller alltid.
<LINK REL="stylesheet" href="stil.css" type="text/css">
Attributet TITLE gör denna stil till föredragen stil.
<LINK REL="stylesheet" href="stil3.css" type="text/css" TITLE="Stora fonter">
Värdet "alternate stylesheet" samt attributet TITLE gör denna stil till alternativ stil som kan väljas istället för den föredragna stilen
<LINK REL="alternate stylesheet" href="stil4.css" type="text/css" TITLE="Små fonter">
Tre stilmallar sammanlänkade till en. Den första mallen deklarerar marginaler, den andra tabeller och den tredje fonter. Genom att ge alla mallar samma namn, i det här fallet "Samtida" kopplas de samman till en mall, dvs dokumentet formateras med alla mallar samtidigt. Denna stil kommer att tillämpas som föredragen mall.
<LINK REL=stylesheet HREF="marginaler.css" TITLE="Samtida" TYPE="text/css">
<LINK REL=stylesheet HREF="tabeller.css" TITLE="Samtida" TYPE="text/css">
<LINK REL=stylesheet HREF="fonter.css" TITLE="Samtida" TYPE="text/css">
Om användaren väljer "Samtida"-stil, gäller båda "Samtida-mallar" tillsammans med föredragen "bas.css". Om användaren väljer stilen "Stora fonter" kommer bara den och "bas.css" att gälla.
<LINK REL="alternate stylesheet" HREF="marginaler.css" TITLE="Samtida" TYPE="text/css">
<LINK REL="alternate stylesheet" HREF="tabeller.css" TITLE="Samtida" TYPE="text/css">
<LINK REL="alternate stylesheet" HREF="fonter.css" TITLE="Stora fonter" TYPE="text/css">
<LINK REL=stylesheet HREF="bas.css" TYPE="text/css">
Med CSS2 kan du föreslå hur dokumenten ska presenteras i olika medier, t ex skapa en mall för skärmpresentation, en annan för utskrift och en tredje för braille-anordningar. De olika medierna specificeras med hjälp av attributet MEDIA (HTML) och/eller den nya regeln @media (CSS). Listan av tillgängliga värden kommer att utökas men f.n. kan du använda följande medier:
Följande exempel talar om var versionen som är anpassad för utskrift finns:
<LINK media="print" title="Svensk manual - postscript" type="application/postscript" rel="alternate" href="manualer/postscriptsv.ps">
Om dokumentet är anpassat för fler mediatyper listar du alla typer och separerar dem med ett komma:
<LINK media="print, screen" rel="alternate" href="dok.html">
@import url("tala.css") aural;
@media print { /* deklarationer anpassade för utskrift */}
eller (Observera den nya regeln @media)
@media screen, print { deklarationer för båda typerna }
Några av egenskaperna är unika för ett specifikt medium, till exempel kan egenskaper specifika för språksyntesiser "media=aural" knappast användas av något annat medium. Andra egenskaper kan tillämpas för fler än ett medium.
Ett nytt värde som kan tilldelas alla egenskaper. Värdet låter elementet ärva förälders databeräknade egenskaper, t ex egenskaper som beräknas på basis av relativa värden.
Med den nya CSS-regeln @page kan du föreslå dokumentens paginering, inklusive riktning, storlek, marginaler. Med hjälp av pseudoklasser kan du i detalj specificera vilken stil som gäller på vilken sida. Sidbrytningen kan till exempel ske före varje H1 eller "boxvis" om du sätter varje sida i sin egen box. Dokumentpaginering är främst anpassad till mediatypen print men kan med framgång även användas av mediatypen projector. Sidbrytningar kan inte finnas i boxar med absolut placering.
@page
'page'
Värden: <identifier> | auto (utgångsvärde: auto)
Kan tilldelas: blockelement
Arv: ja
'size'
Värden: <length>{1,2} | auto | portrait | landscape | inherit (utgångsvärde: auto)
Kan tilldelas: sidans kontext
Arv: gäller ej
@page skapar en box och om regeln förekommer ensam, dvs utan några tillägg, gäller den alla sidor. Vill du skapa dubbla eller unika sidor får du använda pseudoklaser; :first - gäller endast första sidan, :left - gäller alla vänstersidor, :right - gäller alla höger- sidor, namn - gäller sida och även en del av sida, t ex något element, med det specifika namnet. Samma namn måste ges det aktuella elementet. Till detta använder du egenskapen page som refererar till en rektangulär area som representerar en sida. För att specificera sidans storlek använder du egenskapen size som kan ange absoluta (fasta mått) eller relativa (skalningsbara)
@page { size 29.7cm 21cm; margin: 2cm }
@page :left {margin-left: 4cm; margin-right: 3cm}
@page :right {margin-left: 3cm; margin-right: 4cm}
@page tabeller {size: landscape}
TABLE {page: tabeller}
'page-break-before',
'page-break-after'
Värden: auto | always | avoid | left | right | inherit (auto)
Kan tilldelas: blockelement
Arv: nej
'page-break-inside'
Värden: avoid | auto | inherit (utgångsvärde: auto)
Kan tilldelas: blockelement
Arv: ja
Dessa 5 egenskaper används för formatering av sidbrytningar samt anger på vilken sida (höger eller vänster) det efterföljande innehållet ska börja. Varje sidbrytning avslutar layouten i den befintliga boxen och det efterföljande innehållet börjar alltid i en ny box.
page-break-before skapar sidbrytning före något element, t ex H1, eller den uppgivna boxen.
page-break-after skapar sidbrytning efter något element, t ex DIV, eller den uppgivna boxen.
page-break-inside skapar sidbrytning inuti något element eller den uppgivna boxen.
'orphans' , 'widows'
Värden: <integer> | inherit (utgångsvärde: 2)
Kan tilldelas: blockelement
Arv: ja
Egenskapen orphans specificerar ett minimum antal rader i ett stycke som måste lämnas vid sidans slut medan egenskapen window specificerar ett minimum antal rader som måste lämnas vid sidans början.
'position'
Värden: static | relative | absolute | fixed | inherit (utgångsvärde: static)
Kan tilldelas: alla element
Arv: nej
Box offset: 'top', 'right', 'bottom', 'left'
Värden: <length> | <percentage> | auto | inherit (utgångsvärde: auto)
Kan tilldelas: element med egenskapen "position"
Arv: nej
'z-index'
Värden: auto | <integer> | inherit (utgångsvärde: auto)
Kan tilldelas: element med egenskapen "position"
Arv: nej
Med egenskaperna position och float (värden: left, right, none och inherit) kan du bestämma den exakta placeringen av boxar (se avsnittet Struktur - format). Använder du float som skapar "flytande boxar" ska du även uppge boxens bredd - width. Flytande boxar kan överlappa boxar som följer flödet. Använd egenskapen clear (värden: none, left, right, both, inherit) för boxsida/sidor som inte överlappas. Boxplaceringen beror på det specificerade värdet:
static - en vanlig box som följer flödet
relative - boxens placering beräknas i förhållande till static
absolute - boxen är tagen ur flödet och dess placering i förhållande till andra boxar specificeras med egenskapen top, right, bottom, left och ej float
fixed - boxens placering beräknas som absolute men dessutom är den fixerad till någon referens, t ex media.
CSS-boxar placeras horizontellt, vertikalt samt längs z-axeln och är formaterade så att en box ligger ovanpå en annan. Med egenskapen z-index kan du placera boxar längs z-axeln och på så sätt skapa lager.
(4 kolumner, varje upptar 25%)
<DIV style="float: left; width: 25%">Kolumn 1</DIV> <DIV style="float: left; width: 25%">Kolumn 2</DIV> <DIV style="float: left; width: 25%">Kolumn 3</DIV> <DIV style="float: left; width: 25%">Kolumn 4</DIV>
<DIV style="position: relative; width: 200px; height: 100px"> <DIV style="position: absolute; top: 0; left: 0; width: 200px"> <IMG src="bild.gif" alt="Någon bild"> </DIV> <DIV style="position: absolute; top: 20%; left: 20%; width: 200px">Text</DIV>
@media screen
{ H1#first { position: fixed } }
@media print { H1#first { position: static }}
<DIV style="float: left; width: 50%"> <P>Stycke 1</P></DIV> <DIV style="float: left; width: 50%"> <P>Stycke 2</P></DIV>
<STYLE type="text/css">
.lager
{
position: absolute;
left: 2cm;
top: 2cm;
width: 3cm;
height: 3cm;
}
</STYLE>
<P><IMG class=lager src="bild.gif" alt="Någon bild" style="z-index: 1"></P>
<DIV class=lager style="z-index: 3"> (division 1) Denna division visas ovanpå bilden</DIV>
<DIV> (division 2) Denna division kommer allra först</DIV>
<DIV class=lager style="z-index: 2"> (division 3) Denna division kommer att visas under divisionen 1 men ovanpå bilden </DIV>
:link :visited :active
:first-child :hover :focus :lang
Denna pseudoklass matchar det element som är första barn till något annat element, t ex
P:first-child { text-indent: 20pt }
<DIV>
<P>Detta och bara detta stycke inuti denna
division indenteras</P>
<P>Detta stycke berörs inte</P>
</DIV>
Tillsammans med :active tillåter dessa dynamiska pseudoklasser en ändring i elementpresentation.
:hover ändrar elementet när användaren designerar det, t ex med muspekaren, utan att aktivera det medan
:focus gäller när elementet har fokus, t ex tar emot tangentbordshändelser eller någon form av texinmatning. Exemplet ...
A:active:hover {background: red; color: white}
... kommer att visa alla aktiva länkar (när man klickar på dem) på röd bakgrund och med vita fonter. Observera att CSS2, till skillnad från CSS1, tillåter att fler än en pseudoklass (och även vanliga klasser) tilldelas selektorer.
:lang pseudoklass tillåter dig att specificera selektorens språk så att till exempel specifika för språkets tecken kan presenteras. Exemplet ...
HTML:lang(fr) { quotes: '« ' ' »' }
... talar om att hela dokumentet är på franska. Regeln deklarerar även hur citaten ska presenteras. Observera att egenskapen quotes är ny.
:first-line :first-letter
:left :right :namn :before :after
Pseudoelementen :left, :right, :namn beskrivs ovan. :before :after används för att infoga genererat innehåll före eller efter elementets innehåll. Det som ska infogas deklarerar du genom egenskapen content (ny). Exemplet ...
P.obs:before { content: "Observera: " }
P.obs { border: solid red }
... kommer att infoga strängen "Observera" före varje stycke med klassen obs och dessutom rama in detta stycke, inklusive strängen, med en röd ram. Innehållet content kan även vara en extern fil.
'content'
Värden: [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit (utgångsvärde: tom sträng)
Kan tilldelas: före och efter pseudo-element (:before och :after)
Arv: nej
Media: all
Med hjälp av egenskapen content tillsammans med pseudoelementen :before och :after kan du generera ett innehåll i dokumentet. Utöver en textsträng som beskrivs ovan kan du infoga följande:
Citattecken före eller efter något element, t ex elementet Q (kort citat). Exemplet nedan infogar röda tecken (själva texten påverkas inte).
Q:before {content: open-quote; color: red}
Q:after {content: close-quote; color: red}
Om du inte vill infoga tecknet men ändå minska nivån på nästlagda citat använder du egenskaperna no-open-quote, no-close-quote
En extern fil innehållande information som ska infogas, t ex en audiofil som ska spelas efter varje division
@media aural {
DIV:after { content: url("musik.wav")}}
Infoga attributvärde, t ex aternativ text som presenteras ifall bilden inte kan visas
IMG:before { content: attr(alternativ text)
Vidare introducerades en mängd nya egenskaper som tillåter en nästan valfri numrering av listposter och deras formatering. F.n. (juni 1998) stödjer inte någon www-klient dessa egenskaper.
Universalselektor. Dessa selektorer matchar namn av varje elementtyp. Om innehåll av varje element är på svenska skriver du:
*[LANG=sv]
Barnselektor. Dessa selektorer matchar element som är barn till något element Om alla P element som finns direkt i BODY (är barn till BODY) ska presenteras i rött skriver du:
BODY > P {color: red; background: transparent}
Angränsande syblingselektorer. Dessa selektorer matchar om båda element har samma förälder samt ett av dem följer direkt efter det andra. Om H1 och H2 har samma förälder (BODY) samt H2 följer direkt efter H1 och du vill förminska avståndet mellan dem skriver du:
H1 + H2 { margin-top: -5mm }
[att]
att står för attribut och representerar ett specifikt, namngivet attribut som måste matcha det uppgivna för att deklarationen ska gälla. Om du inte vill stryka under alla element A med attributet HREF skriver du:
A[href] { text-decoration: none }
[att=val]
val står för value och representerar ett speciellt värde som är tilldelat det specificerade attributet. Om elementen med attributet class vars värde är exempel ska vara blåa skriver du:
SPAN[class=exempel] {color:blue; background:transparent}
[att~=val]
Selektorn matchar om det specifika attributets värde är en lista på ord (en mening) separerade med ett mellanslag och ett av dessa ord är lika med ordet angivet i val. Den nedan deklarerade stilen gäller elementen IMG endast om de innehåller attributet ALT vars värde innehåller ordet Eva.
IMG [alt~=Eva] {deklarationer}
[att|=val]
Selektorn matchar om det specifika attributets värde är en lista på ord (en mening) separerade med ett bindestreck som börjar med ordet uppgivet i val.
http://vonpepel.com/ref/css/ - Senaste uppdatering 20 juni 1998