CSS Lite mer
Ännu mer CSS
Vi introducerar ett bättre sätt att få in stilmallskod i en webbsidefil. Om vi har många webbsidor som tillsammans skapar en webbplats så känns det osmart att ha stilmallskod i varje fil. Ett bättre alternativ är då att lägga all stilmallskod i en separatfil som slutar med filändelsen ".css" . Sedan länkar vi in den filen i varje webbsida och när vi vill göra en designändring ändrar vi i den separata stilmallsfilen och skickar upp den filen till webbkontot(webbhotellet) och vips så ändrades designen i alla berörda sidor genom att de alla länkar in en och samma stilmallsfil.
Så här ser den htmlkoden ut:
Lämplig placering är efter head-taggen i head-elementet.
Lite mer om stilmallar. För att ändra design på ett block så använder vi en ny tagg "<div>" vilken fungerar som en p-tagg men har inga inbyggda default-inställningar, vilket gör att den passar perfekt till att rama in ett block eller flera block och hänga på lite egenskaper med class-egenskapen.
Vill vi ha lite specialinställningar för till exempel en liten text eller ett ord så använder vi "<span>" istället.
Ett litet(nåja) exempel:
Först den externa stilmallen
@charset "utf-8";
/* CSS Document */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
p {
font-size:12px;
}
h3 {
font-size:30px;
color:#ff00ff;
}
strong {
font-size:20px;
}
hr {
width:50%;
}
img {
width:400px;
}
a {
color:#6666ff;
font-size:16px;
text-decoration:none;
}
a:hover {
text-decoration:underline overline;
}
.special {
background-color:#000000;
font-size:24px;
font-weight:bold;
color:#ffffff;
}
.bg_white {
background-color:white;
}
.fontTimesNewRoman {
font-family:Times New Roman, serif;
}
.myfooter {
border-top:1px black solid;
text-align:center;
}
.myfooter a {
font-family:"Courier New", Courier, monospace;
font-size:85%;
color:black;
}Och så vår tidigare fil med inlänkningen och ny dagens pass punkter.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Demo 3</title>
<link href="css_demo3.css" rel="stylesheet">
<style> body {background-color: #ffffcc;
}
h3 {
text-align:center;
}
ol {
list-style-type:lower-roman;
}
hr {
width:80%;
margin-left: 0px;
}
img {
border-width:3px;
border-style:solid;
}
.red {
color:red;
}
.green {
color:green;
}
.blue {
color:blue;
}
.fontArial {
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
.fontVerdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px; /* OBS! Inget mellanrum mellan 12 och px. */
font-weight:bold;
}
.bild1 {
float:right;
}
.bild2 {
width:150px;
float:left;
margin-right:50px;
}
</style>
</head>
<body>
<h1>Idag ska vi titta på:</h1>
<ul>
<li>hur vi lägger stilmallskod i en separat fil som vi länkar in</li>
<li>vilken prioritet webbsidestilmallskod har kontra extern stilmallskod</li>
<li>div- och span-taggar</li>
<li>designar länkar (klickbar text)</li>
</ul>
<h3>Färger</h3>
<p>När vi ska tala om vilken färg vi vill ha kan vi i många falla använda
fördefinierade namn, som white, red, green, aqua, darkorange, steelblue.
<br />
<a href="http://www.w3schools.com/tags/ref_colornames.asp" target="_blank">
W3Schools lista med namn på färger.</a><br />
Men som du såg i listan så finns det lite mer kryptiska beskrivningar
som <strong>#ff0000</strong>. Detta är den hexadecimala(basen 16)
beskrivningen av röd. Man anger hur mycket som ska blandas av färgerna
<strong>Röd-Grön-Blå</strong> (RGB-kod). </p>
<div class="bg_white">Egentligen anger man tal mellan 0 och 255, men
datorn pratar bara ettor och nollor så för den är det hexadecimala systemet
mycket effektivare, därför får vi lära oss att ha en liten hum om vad de
olika delarna betyder. Efter #-tecknet så visar de två första positionerna
hur mycket rött det ska vara, sen nästa två positionerna visar grönt och de
sista två positionerna blått. </div> <p>
Varje position kan innehålla ett tal mellan 0-15, men för att det bara ska ta
en position översätts det till talen 0-9 och bokstäverna a-f (och som då
betyder a=10, b=11, ..., f=15). </p>
<div class="bg_white">Av de två positionerna som representerar
varje färg, så är första positionen är värd 16 och den andra 1, jämfört vårt
decimalsystem så skulle den första positionen vara värd 10 och den andra 1.
Ovan betyder då ff att vi ska ha f=15 gånger 16 och f=15 gånger 1,
dvs 15*16+15*1=255.<br /> Som sagt ni behöver inte förstå detta till 100%
men ni ska förstå om det är mycket eller litet av de tre ingående färgerna.
<br /> </div>
<p>Det hjälper säkert till att titta på följande uppställning:<br />
<a href="http://www.webdesignskolan.se" target="_blank">
www.webdesignskolan.se</a>
välj HTML grunder -> färgkoder- Hexadecimala färger </p>
<hr>
<h3>Textlayout</h3>
<p>
<img class="bild1" src="bilder/fargcirklar.jpg" alt="fargcirklar">
</p>
<h1>
<span class="red">F</span>
<span class="green">Ä</span>
<span class="blue">R</span>
<span class="red">G</span>
<span class="green">E</span>
<span class="blue">R</span>
<span class="red">N</span>
<span class="green">A</span>
<span class="blue">T</span>
<span class="red">A</span>
<span class="green">R</span>
<span class="blue">Ö</span>
<span class="red">V</span>
<span class="green">E</span>
<span class="blue">R</span>
</h1>
<p>Med flera färger blir det lite mera fart i webbsidan. Om du dessutom
kan byta teckensnitt, precis som i Word, blir det ännu lite roligare.
</p>
<p>
<img class="bild2" src="bilder/teckensnitt.jpg"
alt="Teckensnitt på bild"> Standard teckensnitt
brukar vara<span class="fontTimesNewRoman">
<span class="special">Times New Roman</span>
vilket oftast inte är snyggt.</span> <span class="fontArial">
<span class="special">Arial</span>
är ett klacklöst (utan serifer) teckensnitt som finns på surfarens
dator!</span><span class="fontVerdana">
<span class="special">Verdana</span>
är ett annat.</span>
</p>
<ol>
<li>face -> typsnitt</li>
<li>size -> storlek(fördefinierade)</li>
<li>color -> färg</li>
</ol>
<!-- Vi visar lite koder för specialtecken -->
<h3>Specialtecken</h3>
<p>Den här webbsidan är
© 2012 Värmdö Gymnasium!
</p>
<p>
<a href="http://www.w3schools.com/html/html_entities.asp" target="_blank">
W3Schools lista på specialtecken.</a>
</p>
<blockquote>Högerklickar du på sidan, så kan du välja att
få se själva koden som skapar denna sida.
</blockquote>
<div class="myfooter">
<a href="http://validator.w3.org/unicorn/
check?ucn_uri=referer&ucn_task=conformance">Unicorn</a>
</div>
</body>
</html>
Observera att inställningarna för hr som finns i den externa filen skrivs över av de som finns mellan style-taggarna i html-filen. Det gäller även bilden till vänster, den behåller 150px eftersom taggen använder en klass från den interna stilmallen medan den högra får bredden 400px från den externa stilmallen.
Det är den prioritering webbläsaren gör för inställningarna.
CSS Prioriteringar
Extern, "<head>", inline
Normalt så har en regel i head-elementet högre prioritet än regeln i en extern css-fil. På samma sätt har en "inline-style" inställning högre prioritet än regeln in head-elementet.
Specifitet
Specifitet är hur noga vi i css-filen har beskrivit elementet eller klass/id. Normalt kör en mer specifik regel över en mindre specifik.
Ett exempel:
a { /* css */ }
har normalt lägre prioritet än
body div .demo a { /* css */ }
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
XHTML and CSS Tutorial 25 Styling Links (thenewboston 6 min)