CSS in HTML en Eruit
CSS in HTML
Je kent het tegenwoordig wel, CSS, de macht onder de opmaak. Hoewel CSS goed wordt gemaakt, met veel problemen (Dank U Microsoft), doen mensen toch nog iets fout. Nou zou je denken wat doen mensen fout nou kijk maar:
Index.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Welcome</title>
</head>
<body>
<div>
<div>
<img src="header.jpg" width="700" height="300" alt="XXX">
</div>
<div style="width: 700px; height: 1000px">
<h1><span style="font-size: 16pt; font-family: Serif">Welcome</span></h1>
<span style="font-size: 10pt">
<span style="font-family:Arial">
<span style="color: #ffffff">
<span style="background-color: #000000">
Some text
</span>
</span>
</span>
</span>
</div>
</div>
</body>
</html>
<head>
<title>Welcome</title>
</head>
<body>
<div>
<div>
<img src="header.jpg" width="700" height="300" alt="XXX">
</div>
<div style="width: 700px; height: 1000px">
<h1><span style="font-size: 16pt; font-family: Serif">Welcome</span></h1>
<span style="font-size: 10pt">
<span style="font-family:Arial">
<span style="color: #ffffff">
<span style="background-color: #000000">
Some text
</span>
</span>
</span>
</span>
</div>
</div>
</body>
</html>
Als ik dit zie dan ga ik zowat over mijn nek, figuurlijk gesproken. Dit soort HTML zie je vaak bij dreamweaver gemaakte websites. Ik kan nu al zeggen, als de website telkens weer dit hele HTML en CSS zooitje moet herladen dan kan dat bij grote websites veel tijd kosten. Natuurlijk niet te vergeten bandbreedte. Laten we snel verder gaan en kijken naar de oplossing, die eigenlijk super simpel is.
CSS uit HTML
De oplossing is heel simpel, er is altijd gezegd door CSS goeroe’s houdt opmaak en HTML apart, door gebruik te maken van id's en classes. Dus laten we dat doen.
Index.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div>
<div id=top></div>
<div id="content">
<h1>Welcome</h1>
Some text
</div>
</div>
</body>
</html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div>
<div id=top></div>
<div id="content">
<h1>Welcome</h1>
Some text
</div>
</div>
</body>
</html>
Style.css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#top {
Background: #fff url(header.jpg) no-repeat center;
Width:700px;
Height:300px;
}
#content {
Width:700px
Height:1000px;
Font-size:10pt;
Font-family:Arial;
Background-color:#000; //000 is short tag voor 000000
Color:#fff;
}
H1 {
Font-size:16pt;
Font-family: Serif;
}
Background: #fff url(header.jpg) no-repeat center;
Width:700px;
Height:300px;
}
#content {
Width:700px
Height:1000px;
Font-size:10pt;
Font-family:Arial;
Background-color:#000; //000 is short tag voor 000000
Color:#fff;
}
H1 {
Font-size:16pt;
Font-family: Serif;
}
Ik heb hier alleen id's gebruikt, omdat er maar één content is en niet twee etc. Als je meer van hetzelfde wilt gebruiken dan heb je classes nodig. Denk eraan om id's op te roepen in css gebruik de #(hekje) en voor classes de .(punt).
Dankzij dit zal de snelheid toenemen en bandbreedte afnemen, waarom, omdat een extern CSS bestand wordt opgeslagen in een cache en zolang niks veranderd er altijd is. Dit zorgt ervoor dat bij een tweede bezoek de opmaak klaar is en alleen de HTML hoeft worden opgehaald. Dan er nog een toefje bij het is overzichterlijker. Dit was natuurlijk simpel laten we nu verder gaan naar AJAX.
« vorige pagina | volgende pagina »