login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > CSS

Gegevens:
Geschreven door:
 Jeroen
Moeilijkheidsgraad:
 Gemakkelijk
Hits:
 27389
Punten:
Aantal punten:
  (3.79)
Aantal stemmen:
 14
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (6)
 

Tutorial:

CSS - Code netjes weergeven

1. Voorwoord
2. Foutieve code
3. Wat is dan beter?
4. Tabs
5. Je codes terug vinden
6. Afsluiting
1. Voorwoord
In deze tutorial ga ik je proberen te vertellen hoe je netjes en duidelijk de CSS code kan neerzetten. Let erop dat ik al mijn meningen als een feit neer zet in mijn tutorial.

 top
2. Foutieve code
De meeste, beginnende, mensen zetten hun code zo neer:

input, textarea, select { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;background-color: #f3f3f3;border: #999999 1px solid;padding: 1pt;}

Zo kun je natuurlijk onmogelijk snel even iets opzoeken. Daarvoor hebben ik natuurlijk dé oplossing!

 top
3. Wat is dan beter?
Ten eerst gaan we na elke ; op het eind een enter plaatsen. Dan ziet de code er zo uit:

input, textarea, select {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
 background-color: #f3f3f3;
 border: #999999 1px solid;
 padding: 1pt;
 }

Zoals je ziet kan je nu veel sneller iets terug vinden omdat het netejes onderelkaar staat. Maar kan het nog overzichtelijker? Dat kan het zeker!

 top
4. Tabs
Om het nog overzichtelijker te maken kan je gebruik maken van tabs. Een tab is alleen maar een paar spaties achter elkaar. (Je kan een tab invoegen door op Tab op je toetsenbord te drukken. Zo ziet de code met tabs eruit:

input, textarea, select {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
     background-color: #f3f3f3;
     border: #999999 1px solid;
     padding: 1pt;
 }


 top
5. Je codes terug vinden
Om je codes terug te vinden kan he gebruik maken van item-tags. Dit zijn simpele blokjes met tekst erin. Hier een voorbeeld:

/*-----------------------------------------------------
| input, textarea, select                                    |
-----------------------------------------------------*/

input, textarea, select {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
     background-color: #f3f3f3;
     border: #999999 1px solid;
     padding: 1pt;
 }


 top
6. Afsluiting
Dit was dan mijn tutorial. Hopelijk heb je er wat aan gehad. Voor vragen kun je mij een privé bericht sturen of je vraag stellen op het Forum.

ps; verzoeken zijn altijd welkom!

 top

« Vorige tutorial : Button Volgende tutorial : Media Types »

© 2002-2025 Sitemasters.be - Regels - Laadtijd: 0.016s