CSS - Medieteknik - Södertörns högskola

ƒ Förkunskaper:
CSS
{}
Tim Berners Lees vision
webbläsarkriget
W3C
strukturtagg <h1>
layout-tagg <font size="6">
ƒ Kurslitteratur:
Anne Diedrichs
Medieteknik Södertörns Högskola
Bakgrund
Detta beror på
ƒ den hastiga utveckling som html
genomgick i skuggan av webbläsarkriget.
Krigets första offer:
standardiseringssträvanden
ƒ försöken att göra layout med ett språk som
hade helt andra syften
Niederst Robbins, Learning Web Design
kap 11-17
2-delad lösning enligt W3C
ƒ Strukturen
En strängare version av HTML och XHTML dvs. strict =
bättre strukturerad kod, taggar och attribut som bara handlar
om layout blir icke rekommenderade (depricated)
Vad var/är problemet?
Ett väl strukturerat html/xhtml-dokument brukade
bli nerskräpat av taggar som bara försöker styra
utseendet t.ex. font-taggen, tabellceller som
bara ska skapa luft och inte har nåt innehåll
m.m.
Detta gör den maskinläsbara koden mindre
användbar och dokumentstrukturen svår att
återvinna för andra behov
Vad fick man på köpet?
ƒ Bättre struktur
ƒ Helt andra och mycket bättre layoutmöjligheter
ƒ Möjlighet att ha alternativa layouter för olika
medier t.ex. skärm, utskrift, handdator
ƒ Utseendet
All layout får en egen standard vid sidan av html/xhtml:
Överlappande formatmallar - Cascading stylesheets
CSS1 kom redan 1996 CSS2 1998
CSS3 diskuteras f.n. Delvis implementerat
Fungerar för både xml och html och xhtml
ƒ Bättre möjlighet till personlig anpassning av en
sidas utseende
ƒ Rationellare arbetssätt eftersom en stilmall styr en
hel sida eller en hel sajt.
Det går lätt och snabbt att göra kraftfulla förändringar
av utseende/utformning
1
Dags för "allt om CSS"
Hur går det till?
ƒ skrivs i textformat
Består av regler (rules)
ƒ Vad menas med överlappande - cascading?
Flera olika stil/formatmallar kan samverka i ett enda
dokument
ƒ Vad är formatmall-stilmall?
Jfr word?
ƒ Boktips
Allt av Eric Meyer och Andy Clarke (ingår i MWP2)
ƒ kan infogas direkt i xhtml-sidan eller i
separata text-dokument
ƒ Använd:
Anteckningar/ Notepad
Crimson
Notepad ++
Dreamweaver
...
h1 {color: red;}
selektor {egenskap: värde;}
selector {property: value;}
Denna regel skulle färga alla rubriker av
nivå 1 röda
egenskap: värde
Var placeras style-reglerna?
kallas deklaration eng. declaration
Bäst:
I ett separat dokument - länkad eller importerad stilmall
Då kan det användas på så många sidor man vill t.ex.
hela sajten
Exempel
Om man har flera deklarationer skiljs dessa
åt med ett semikolon ;
h1 {color : red;}
<h1> En viktig rubrik </h1>
h1 {color: red;
background-color: green}
Denna regel skulle göra alla rubriker av nivå
1 röda med grön bakgrund
Exempel
Näst bäst:
I sidans head, innanför taggen <style> </style>
Då gäller det för alla taggar i hela sidan
Exempel
Sämst:
Direkt i en tag i form av attributet style
Gäller bara för just den taggen
Exempel
Men samtliga fungerar och kan användas samtidigt
2
Kaskaden - dvs hur samspelar
olika samtidiga stylesheets?
Alla samverkar så länge de inte är motstridiga
Annars inträder en hackordning dvs kaskaden som
fungerar nästan lika i olika webbläsare
1. Användaren bestämmer (vissa webbläsare tillåter
användaren att använda ett eget stylesheet)
2. Därefter den mest specifika stilmallen
eller html-taggen t.ex.
<font color="green"> Grön text </font>
<p style="color:green"> Grön text </p>
3. stildeklarationer i sidans huvud
4. länkad stilmall
5. webbläsarens inbyggda stilmall
Border är ett exempel på en
egenskap som inte ärvs
p {border:solid thin green;}
man får border runt hela stycket
men slipper en extra border runt <em>
Arv - inheritance
För att CSS ska fungera som tänkt krävs att sidan har en
korrekt struktur, t.ex. att taggarna nästlas på rätt sätt.
(Lökskal - först in, sist ut)
Textfärg är ett exempel på en
egenskap som ärvs
En mening med ett betonat ord
p {color:red;}
<p> En mening med ett betonat
<em>ord</em><p>
En tagg inuti en annan tagg ärver vissa av
egenskaperna från "föräldern"
Lite exempel på vad man kan
göra med CSS
ƒ www.meyerweb.com
ƒ www.csszengarden.com
ƒ www.webdesignskolan.com
gör att hela meningen blir grön,
även ordet innanför <em>-taggen
Selektorer
Att välja ut vilken del av dokumentet
som ska påverkas
Därefter mer om:
selektor {egenskap: värde;}
selector {property: value;}
.
3
I första hand använder man dokumentets
struktur dvs de taggar som redan finns
Kombinera taggar som
selektorer
p {font-family:verdana;}
Med komma-tecken emellan så används
alla selektorerna
body {margin:10%;}
h1 {color:#FF0000;}
a {text-decoration:none;}
strong {color:#FFFFFF;
background:#000000;}
h1, h2 {color:#FF0000;}
h1 strong {color:#FF0000;}
bara de strongtaggar som ingår i h1 blir
röda, alltså varken bara h1 eller bara
strong
Både h1 och h2 blir röda
fler varianter finns....
Exempel
När taggarna och dokumentstrukturen inte räcker till...
Man kan också använda
attributet id
Först då börjar man ändra I html-koden för att nå avsedd
effekt
<p id="varning"> OBS! </p>
i html-koden skriver man t.ex.
<p class="varning">Se upp!</p>
då hänvisar man till detta i stilmallen med
i sin style skriver man
.varning {color:#FF0000;}
/* obs punkten */
Med mellanslag emellan
selektorerna så använder man
dokumentets hierarki
Detta är en kommentar i CSS
Effekten blir att enbart det stycke som "klassats" som
varning blir rött exempel
#varning {color:#FF0000;}
/* obs brädgårdstecken */
Skillnad attributen class och id
Enda skillnaden är att alla "id" måste vara unika,
medan "class" kan användas många gånger på
samma sida
<div> och <span> kan bli vanliga taggar i koden
när man använder css.
Finns det ingen färdig tagg att hänga sin class
eller id på så skapar man en...
<div> är ett block-element
<span> är ett inline-element
4
Pseudo-klasser
Fångar istället ett visst "läge" (state).
a:link {color: green;}
gäller för alla länkar så länge de inte är besökta
andra pseudo-klasser just för länkar är
a:visited
a:hover
a:active
Shorthand - förkortat skrivsätt
color: #CC6699;
font-family: Verdana;
font-size: 120%;
line-height: 110%;
font-weight: bold;
margin-top: 2px;
margin-right: 5px;
margin-bottom: 2px;
margin-left: 5px;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 4em;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00FF00;
border-right-color: #00FF00;
border-bottom-color: #00FF00;
border-left-color: #00FF00;
Egenskaper
Med CSS kan man ändra på “allt”
Vilket element som helst kan få en
bakgrundsbild, marginaler, bli osynligt...
Box-modellen (standardversionen)
border
margin
padding
{background:url(grafik/bg.gif);}
{margin-top: 30px;}
{display: none;}
{line-height: 10%;}
{float: left;}
kan istället skrivas:
width (elementets bredd)
Värden
ƒ color: #CC6699;
Mått finns både relativa och absoluta:
ƒ margin: 2px 5px;
ƒ pixlar, em (font-höjd), ex (x-höjd), %, cm,
ƒ padding: 1em 2em 3em 4em;
mm, points, pica
ƒ border: thin solid #00FF00;
Absoluta mått funkar INTE på en webbsida
men stylesheets kan användas även för
andra medier...
ƒ font: bold 120%/110% Verdana;
5
Färger:
ƒ red
ƒ #FF0000
ƒ rgb(100%, 0%, 0%)
ƒ #F00
ƒ rgb(255,0,0)
Fler värden
ƒ Sökvägar:
Validera! Både html och CSS
ƒ http://jigsaw.w3.org/css-validator/
url(sökväg/filnamn)
ƒ Nyckelord (olika för olika egenskaper):
none, bold, underline, thin,
outset, sans-serif
6