|
CSS (Stilmallar)Stilmallar är ett sätt att styra utseendet på en HTML sida. Införandet av stilmallar var ett bra sätt att så långt det går separera den informationsbärande delen av dokumentet, text och bild, från stil- eller designattribut. Silmallar eller CSS (Cascading Style Sheats) som det kallas på HTML språk kan användas på en mängd olika sätt. Jag tänker börja med det enklaste sättet att applicera en stil eller utseende på en sida. Låt oss börja med ett exempel på en sida som innehåller rubriker, paragrafer och en länk. Stilattributen läggs här någonstans mellan <head> och </head>. OBS! Kom ihåg att det är viktigt att stänga taggar som man öppnar, <style> stängs med </style>. Om du vill ha hjälp att hitta färgkoder finns det en webbfärgtabell här. <html>
<head>
<title>CSS Exempel 1</title>
<style type="text/css">
<!--
/* Så här skriver man CSS kommentarer */
/* body kommer att styra utseendet på dokumentkroppen */
body {
background-color: rgb(255,204,0); /* bakgrundsfärg för dokumentet */
color: rgb(0,0,0); /* textfärg */
font-size: 11pt; /* fontstorlek */
/* Fontfamilj bestämmer i vilken ordning typsnitt kommer att väljas.
Om klienten inte har det första typsnittet installerat i sin dator
kommer det andra typsnittet i listan att väljas, osv */
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}
/* Sätt en färg för alla rubriker */
h1, h2, h3, h4, h5, h6 { color: rgb(51,51,51); }
/* Sätter storleken på rubriker */
h1 {font-size: 22pt;}
h2 {font-size: 16pt;}
h3 {font-size: 12pt;}
/* 48 pixlar marginal till vänster om alla stycken */
p { margin-left: 48px; }
/* Länkattribut */
a {
color: rgb(0,102,153);
text-decoration: none;
}
a:visited { color: rgb(51,51,204); }
a:hover { color: rgb(153,255,0); text-decoration: underline; }
/* Här slutar stilmallen */
-->
</style>
</head>
<body>
<h1>Rubriker H1</h1>
<h2>Rubriker H2</h2>
<h3>Rubriker H3</h3>
<h4>Rubriker H4</h4>
<h5>Rubriker H5</h5>
<h6>Rubriker H6</h6>
<p>
<b>Fet Text (Bold)</b>
<br />
<i>Kursiv Text (Italic)</i>
<p>
<p>Lorem ipsum dolor sit amet, <b>consectetur</b> adipiscing elit...</p>
<p>Aenean <i>ac lacus sed ligula</i> laoreet mollis eget sagittis est...</p>
<p>Fusce rutrum purus cursus metus pretium vitae eleifend velit...</p>
<p>
<a href="an_annan_sida.html">Detta är en länk</a>
</p>
</body>
</html>
Länkad stilmallI ovanstående exempel så skrev vi stilmallen direkt i HTML dokumentet. Ett bättre sätt är att separera stilmallen från dokumentet och lägga det som en fil utanför. Skapa en mapp som heter "css", gå in i den och skapa ett nytt text-dokument, öppna och klistra in denna kod (samma som ovan) och döp sedan om filen till "stilmall.css". /* Så här skriver man CSS kommentarer */
/* body kommer att styra utseendet på dokumentkroppen */
body {
background-color: rgb(255,204,0); /* bakgrundsfärg för dokumentet */
color: rgb(0,0,0); /* textfärg */
font-size: 11pt; /* fontstorlek */
/* Fontfamilj bestämmer i vilken ordning typsnitt kommer att väljas.
Om klienten inte har det första typsnittet installerat i sin dator
kommer det andra typsnittet i listan att väljas, osv */
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}
/* Sätt en färg för alla rubriker */
h1, h2, h3, h4, h5, h6 { color: rgb(51,51,51); }
/* Sätter storleken på rubriker */
h1 {font-size: 22pt;}
h2 {font-size: 16pt;}
h3 {font-size: 12pt;}
/* 48 pixlar marginal till vänster om alla stycken */
p { margin-left: 48px; }
/* Länkattribut */
a {
color: rgb(0,102,153);
text-decoration: none;
}
a:visited { color: rgb(51,51,204); }
a:hover { color: rgb(153,255,0); text-decoration: underline; }
/* Här slutar stilmallen */
Nu kan du ta bort stilmallen i HTML-dokumentet och skriva en länk till den du nyss skapat genom att skriva in följande kodsnutt någonstans mellan <head> och </head> <html> <head> <title>CSS Exempel 1</title> <link rel="stylesheet" rev="stylesheet" href="css/stilmall.css" /> </head> <body> ...
Class och IDEn annan fördel är att man kan tilldela HTML taggar klasser och id. Använder man ID så ska detta namn vara unikt och får endast förekomma 1 gång i dokumentet. Ett klassnamn (eng. class) kan återanvändas på många ställen. Ett "class" exempel: <style type="text/css"><!--
.ettKlassNamn { color: rgb(155,0,0); }
--></style>
<p class="ettKlassNamn">Denna text styrs av klassen "ettKlassNamn".</p>
<p class="ettKlassNamn">Denna text styrs också av klassen "ettKlassNamn".</p>
<p class="ettKlassNamn">Denna text styrs också av klassen "ettKlassNamn".</p>
Ett "id" exempel: <style type="text/css"><!--
#ettUniktNamn { font-size: 11px; }
#ettAnnatNamn { font-size: 9px; }
--></style>
<p id="ettUniktNamn">Denna text styrs av id "ettUniktNamn".</p>
<p id="ettAnnatNamn" class="ettKlassNamn">Denna text styrs av id "ettAnnatNamn"
men också av klassen "ettKlassNamn".</p>
CSS syntaxen är i mitt tycke kanska enkel och självbeskrivande om man förstår engelska. CSS syntaxen är inte "case sensitive*" (på svenska, stora eller små bokstäver). För enkelhetens skull brukar jag alltid skriva både HTML och CSS med små bokstäver. Principen är att man först talar om vilken HTML-tagg man vill styra, till exempel "body" för att styra "<body>" taggen, "p" för att styra "<p>" taggen. Bakom denna deklaration grupperar man attributen med krullparenteser "{ ... }". Attributen skrivs sedan i tur och ordning. Först med attributnamn, till exempel "font-size" för fontstorlek, sedan kolon ":" och sist attributvärdet, till exempel "11pt" som ger en textstorlek på 11 punkter. Attributet avslutas sedan med semikolon ";". Att lära sig namnen och vilka attributvärden man kan skriva med CSS tänker jag inte ta upp här. Jag tycker det är bättra att lära sig genom exempel. Fullständig dokumentation om CSS hittar du hos w3.org. Titta på nedanstående CCS kod och se up du får ut något av den body {
font-family: verdana, helvetica, arial;
font-size: 9px;
font-weight: normal;
color: #444444;
border: 1px solid #445566;
margin: 4px;
padding: 12px;
width: 800px;
height: 600px;
background: #000;
text-align: center;
}
h1 {
/*font-variant: small-caps;*/
color: #655443;
}
table {
background: #cecece;
}
table.tabtest {
background: #999999;
border: 0px solid #445566;
border-width: 1px;
border-top-color: #444444;
border-left-color: #444444;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
}
td {
font-family: helvetica, arial;
font-size: 11px;
font-weight: normal;
}
td.bildcell {
width: 160;
height: 160;
font-family: helvetica, arial;
font-size: 11px;
font-weight: normal;
background: #000000;
}
td.blankcell {
font-family: helvetica, arial;
font-size: 11px;
font-weight: normal;
background: #dfdfdf;
padding: 8px;
}
td.r1 {
font-family: helvetica, arial;
font-size: 12px;
font-weight: bold;
background: #c9c9c9;
}
td.r2 {
font-family: helvetica, arial;
font-size: 11px;
font-weight: normal;
background: #efefef;
}
*Case sensitive kommer av engelskans upper case och lower case. Det är en gammal trycktekniksterm som betyder "översta lådan" och "nedersta lådan". Översta lådan innehöll blytyper med stora bokstäver och den nedre lådan små bokstäver.
CSS LänkarCascading Style Sheets, level 1 (engelska) Bra exempel på HTML, CSS, med mera (engelska)
"CSS", Hans E Andersson: 2010-11-24 16:25:18, ändrad: 2013-03-08 16:01:34
|