Site index
Portals
Artikelen
Software
Links
ContactSlim CSSen
2 berichten
• Pagina 1 van 1
Slim CSSen
door Theo » 14 Aug 2008 13:32
Inleiding
Wanneer een webmaster een website maakt probeert hij de webpagina zo geoptimaliseerd mogelijk te maken. Vooral wanneer men gebruik maakt van een gratis host met weinig dataverkeer is dat handig. Een nog groter voordeel van optimalisatie is dat het zorgt voor overzicht. Je kunt optimaliseren zien als compacter maken. Minder code betekent meer overzicht. Niet alleen HTML en PHP zijn te optimaliseren, maar ook CSS.
Meerdere elementen in één keer stylen
In CSS is het mogelijk om meerdere elementen in één keer te stylen. Je ziet vaak dat webmasters elk apart element een font-family toe kennen:
CSS
Dit kan ook in één keer:
CSS
Je ziet dus dat je meerdere elementen in één keer kan stylen door ze te scheiden door een komma. Een ander goed voorbeeld hiervan zijn links. Vaak wil mena:link , a:active en a:visited hetzelfde en a:hover anders. Dit kun je makkelijk realiseren door enkel de a en a:hover te stylen:
CSS
Child elements
Wanneer een element geen stijl meekrijgt vanuit de stylesheet neemt hij de stijl van zijn moeder element over. Het is dus niet nodig om elk element apart (of in één regel) eenfont-family toe te kennen wanneer je dit bij het <body> element doet. Je kunt dus in één keer je hele pagina een lettertype geven door de <body> een lettertype te geven:
CSS
Elementen in elementen
Het volgende stuk is erg bruikbaar wanneer je gebruik maakt van tabellen en/of lijsten. Het is namelijk mogelijk om elementen binnen een bepaald element te stylen zonder ze allemaal van eenclass of id te voorzien. Een ideaal voorbeeld zijn de cellen in een tabel. Stel dat je twee tabellen hebt. Je wilt tabel1 rode letters geven en tabel2 groen letters. Dat kan zo:
CSS
HTML
Je ziet dus dat elketd een class krijgt toegewezen. Je kunt je dat besparen door de CSS anders te gebruiken:
CSS
HTML
Je styled dus het element binnen een ander element door deze te scheiden met een spatie. Zo kun je ook bijvoorbeeld bepaalde gedeeltes binnen een paragraaf blauw kleuren met deze methode:
CSS
HTML
Waarden optimaliseren
Wanneer je CSS attributen gebruikt alsmargins , paddings , borders etc... kun je dit optimaliseren. Dit uitleggen is het handigst met een extreem voorbeeld. We hebben een div en die moet:
CSS
Nu gaan we het optimaliseren:
CSS
Je ziet dat dit aanzienlijk wat tekens scheelt. Even een kleine samenvatting om waarden te optimaliseren:
Wanneer een webmaster een website maakt probeert hij de webpagina zo geoptimaliseerd mogelijk te maken. Vooral wanneer men gebruik maakt van een gratis host met weinig dataverkeer is dat handig. Een nog groter voordeel van optimalisatie is dat het zorgt voor overzicht. Je kunt optimaliseren zien als compacter maken. Minder code betekent meer overzicht. Niet alleen HTML en PHP zijn te optimaliseren, maar ook CSS.
Meerdere elementen in één keer stylen
In CSS is het mogelijk om meerdere elementen in één keer te stylen. Je ziet vaak dat webmasters elk apart element een font-family toe kennen:
CSS
- Code: Alles selecteren
p
{
font-family: "Lucida Grande", Arial, sans-serif;
}
h1
{
font-family: "Lucida Grande", Arial, sans-serif;
}
td
{
font-family: "Lucida Grande", Arial, sans-serif;
}
Dit kan ook in één keer:
CSS
- Code: Alles selecteren
p,h1,td
{
font-family: "Lucida Grande", Arial, sans-serif;
}
Je ziet dus dat je meerdere elementen in één keer kan stylen door ze te scheiden door een komma. Een ander goed voorbeeld hiervan zijn links. Vaak wil men
CSS
- Code: Alles selecteren
a
{
color: red;
text-decoration: underline;
}
a:hover
{
color: green;
text-decoration: none;
}
Child elements
Wanneer een element geen stijl meekrijgt vanuit de stylesheet neemt hij de stijl van zijn moeder element over. Het is dus niet nodig om elk element apart (of in één regel) een
CSS
- Code: Alles selecteren
body
{
font-family: Arial, sans-serif;
font-size: .9em;
}
Elementen in elementen
Het volgende stuk is erg bruikbaar wanneer je gebruik maakt van tabellen en/of lijsten. Het is namelijk mogelijk om elementen binnen een bepaald element te stylen zonder ze allemaal van een
CSS
- Code: Alles selecteren
.rood
{
color: red;
}
.groen
{
color: green;
}
HTML
- Code: Alles selecteren
<table id="tabel1">
<tr>
<td class="rood">Tekst</td>
<td class="rood">Tekst</td>
<td class="rood">Tekst</td>
</tr>
</table>
<table id="tabel2">
<tr>
<td class="rood">Tekst</td>
<td class="rood">Tekst</td>
<td class="rood">Tekst</td>
</tr>
</table>
Je ziet dus dat elke
CSS
- Code: Alles selecteren
#tabel1 td
{
color: red;
}
#tabel2 td
{
color: green;
}
HTML
- Code: Alles selecteren
<table id="tabel1">
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
</table>
<table id="tabel2">
<tr>
<td>Tekst</td>
<td>Tekst</td>
<td>Tekst</td>
</tr>
</table>
Je styled dus het element binnen een ander element door deze te scheiden met een spatie. Zo kun je ook bijvoorbeeld bepaalde gedeeltes binnen een paragraaf blauw kleuren met deze methode:
CSS
- Code: Alles selecteren
p span
{
color: blue;
}
HTML
- Code: Alles selecteren
<p>Dit is een paragraaf. Binnen deze paragraaf willen wij graag een gedeelte blauw hebben. <span>Het betreft dit gedeelte.</span> Probeer het zelf maar eens.</p>
Waarden optimaliseren
Wanneer je CSS attributen gebruikt als
- aan alle zijden verschillende margins hebben;
- een achtergrondkleur hebben en een achtergrond plaatje hebben, die rechtsbovenin uitgelijnd is, gefixeert is en zich niet herhaalt;
- een rand hebben.
CSS
- Code: Alles selecteren
div#mar
{
/* de margins: */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
/* de achtergrond: */
background-attachment: fixed;
background-color: #ffff66;
background-image: url(plaat.jpg);
background-position: top right;
background-repeat: no-repeat;
/* de randen: */
border-width: 1px;
border-style: dotted;
border-color: #0099FF;
}
Nu gaan we het optimaliseren:
CSS
- Code: Alles selecteren
div#mar
{
margin: 1px 2px 3px 4px;
background: fixed #ffff66 url(plaat.jpg) top right no-repeat;
border: 1px dotted #0099ff;
}
Je ziet dat dit aanzienlijk wat tekens scheelt. Even een kleine samenvatting om waarden te optimaliseren:
- background: attachment, color, image, position, repeat;
border: width, style, color;
font: style, variant, weight, size, family;
list-style: image, position, type;
margin: top, right, bottom, left;
padding: top, right, bottom, left;
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
Re: Slim CSSen
door Baby Ghost » 04 Dec 2008 16:21
Kleine toevoeging op
margin: top, right, bottom, left;
Je kan namelijk ook 3 waardes gebruiken.
margin: 1px 2px 3px; /* zelfde voor padding en ook border */
De 1px staat voor de boven kant, de 2px staat voor links en rechts en 3px voor de onderkant.
Kleuren codes als #000000 kunnen afgekort worden naar #000;
zelfde met #FF0000, deze wordt dan #F00 en als laatste voorbeeld #FF0099 en deze wordt dan #F09.
Je kan namelijk ook 3 waardes gebruiken.
De 1px staat voor de boven kant, de 2px staat voor links en rechts en 3px voor de onderkant.
Kleuren codes als #000000 kunnen afgekort worden naar #000;
zelfde met #FF0000, deze wordt dan #F00 en als laatste voorbeeld #FF0099 en deze wordt dan #F09.
Bryan.
"Make everything as simple as possible, but not simpler" - Albert Einstein
"Make everything as simple as possible, but not simpler" - Albert Einstein
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
2 berichten
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast