login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:
Tutorials > CSS > CSS - Code netjes weergeven
Pagina:

Reacties op de tutorial CSS - Code netjes weergeven


Offline  Fenrir
Gepost op: 23 december 2004 - 18:16
PHP expert
Ik zet persoonlijk de css zo neer:

h2, h3, h4
{ //notice de enter
color: #445566; //tabs werken hier niet, maar deze moet dus eigenlijk een beetje naar rechts
}

Offline  Jeroen
Gepost op: 23 december 2004 - 18:26
Onbekend
Dat is inderdaad ook een manier. Alleen is die allereerste enter niet nodig (na h2.. { enter). En het verbeterd niet de overzichtelijkheid. Maar dit is ook een manier .

Offline  Maarten
Gepost op: 23 december 2004 - 22:47
Erelid
Het is niet "de" forum maar "het" forum 

Offline  Metalhead
Gepost op: 04 januari 2005 - 12:37
HTML gevorderde
Waar je de enter neer zet is persoonlijk....
Ik vind
iets
{
iets
}
ook veel duidelijker (en het verbetert wel de overzichtelijkheid omdat je accolades onder elkaar staan...)

en ik vind
color: rgb(0,0,255);
ook veel duidelijker dan
color: #0000FF;

Offline  Jeroen
Gepost op: 04 januari 2005 - 13:30
Onbekend
Over die RBG moet jezelf weten, maar ik ken helemaal geen RGB kleuren in die style, Alleen zwart en wit. Maar met de #000000 ken ik zowat alles (alle primaire kleuren en secendaire kleuren)

Offline  Thomas
Gepost op: 07 oktober 2014 - 12:13
Moderator
Ik weet niet of de beschreven methode in de tutorial echt fijn werkt.

Naarmate je opmaak uitgebreider en daarmee complexer wordt is het niet alleen belangrijk dat je een enkele stijlregel makkelijk kunt lezen, maar ook snel inzage kunt krijgen in de structuur en de onderlinge samenhang, zowel binnen de stylesheet alsook tussen stylesheets.

Ik gebruik meestal de volgende vuistregels bij het opstellen van stylesheets:
- op elke regel staat één complete stijlregel

- het blok met CSS-eigenschappen (het deel tussen {accolades}) is "ingesprongen" zodat deze definities altijd op dezelfde plek beginnen (dit leest een stuk prettiger en oogt rustiger)

(- sommige mensen gaan zelfs zover dat ze de CSS attributen in alfabetische volgorde van links naar rechts uitschrijven, maar daar ben ik niet echt een fan van)

- de volgorde van de stijlregels verloopt "van simpel naar complex", dat wil zeggen, je begint met de algemene regels (bijvoorbeeld complete tabellen of tabelregels) en eindigt met specifieke regels (die bijvoorbeeld betrekking hebben op een specifieke tabelkolom of een element daarbinnen)

- de stijlregels zijn zelf gegroepeerd in blokken die bij elkaar horen, deze blokken zijn gescheiden door een witregel

- de stylesheet zelf heeft bij voorkeur één specifiek doel, deze is bijvoorbeeld bestemd voor de (algemene) opmaak van je maintemplate of formulier

- je zou nog verder kunnen gaan en ook een systematiek kunnen bedenken voor de naamgeving en directory-structuur van je stylesheets

- het is meestal niet verstandig om stijlregels direct aan HTML-elementen te koppelen ("hardcoding"); als je niet per se classes nodig hebt om iets op te maken, geef dan op zijn minst het "bovenste" element een class; bijvoorbeeld: je gebruikt een tabel voor het structureren / opmaken van formulieren, ken dan een class aan de table-tag toe en gebruik dit als uitgangspunt om de rest van je opmaak aan op te hangen (bijvoorbeeld: table.form {}, of gebruik een "wrapper": div.form table {}); hiermee voorkom je het "hard koppelen" van opmaak aan HTML-elementen

- gebruik /* commentaar */ om extra toelichting te geven, hiermee kun je bijvoorbeeld aangeven dat een stylesheet voortborduurt op een ander stylesheet

- vermijd het gebruik van id's voor opmaak; een id is in wezen bedoeld voor het uniek identificeren van een element, maar niet zozeer voor het opmaken daarvan; id's zijn weer handig voor gebruik in JavaScript/jQuery; als je id's gebruikt voor zowel opmaak als koppelingen dan kan het soms niet direct duidelijk zijn welke afhankelijkheden er allemaal zijn en of je de naamgeving dus zonder consequenties kunt wijzigen (hetzelfde geldt voor classes waar JavaScript aan refereert); het beste is om deze zoveel mogelijk gescheiden te houden (vermijd dus het gebruik van id's), of, als dit niet mogelijk is, dat uit de naamgeving duidelijk wordt dat er een afhankelijkheid is met andere functionaliteit

Voorbeelden:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @CHARSET "UTF-8";
  2. table.node-tree                         { table-layout: fixed; width: 100%; border: 0; border-collapse: collapse; margin: 0; padding: 0; color: #000000; }
  3. table.node-tree tr                      { line-height: 25px; background-color: #ffffff; border-bottom: 1px solid #efefef; }
  4. table.node-tree .level-0                { background-color: #b0b0b0; }
  5. table.node-tree .level-1                { background-color: #c0c0c0; }
  6. table.node-tree .level-2                { background-color: #d0d0d0; }
  7. table.node-tree .level-3                { background-color: #e0e0e0; }
  8. table.node-tree .level-4                { background-color: #f0f0f0; }
  9. table.node-tree tr td                   { height: 25px; border: 0; margin: 0; padding: 0; }
  10. table.node-tree tr td a                 { color: #000000; }
  11. table.node-tree tr td .invisible        { color: #990000; }
  12. table.node-tree tr td .access-rights    { color: #ff0000; }
  13. /* with CSS3 you could do something like table.fixed td:nth-of-type(3) for the 3rd column */
  14. /* @see http://stackoverflow.com/questions/4185814/fixed-table-cell-width */
  15. table.node-tree tr td.title             { width: 80%; }
  16. /*
  17. if you float elements in a block, and use another block element inside this block,
  18. the latter block will fill out the remaining space automatically
  19. @see http://stackoverflow.com/questions/8252518/how-to-fill-100-of-remaing-width
  20. */
  21. table.node-tree tr td.title img         { height: 25px; float: left; }
  22. table.node-tree tr td.title a.page      { display: block; height: 100%; overflow: hidden; }
  23. table.node-tree tr td.title span        { display: block; height: 100%; overflow: hidden; }
  24. table.node-tree tr td.updown            { width: 7%; }
  25. table.node-tree tr td.updown a          { float: left; display: block; width: 25px; height: 25px; }
  26. table.node-tree tr td.updown a:hover    { background: #ffa0a0; }
  27. table.node-tree tr td.updown a.up       { background-image: url(../images/up.gif); background-repeat: no-repeat; }
  28. table.node-tree tr td.updown a.down     { background-image: url(../images/down.gif); background-repeat: no-repeat; }
  29. table.node-tree tr td.updown img        { float: left; width: 25px; height: 25px; }
  30. table.node-tree tr td.actions           { width: 13%; }
  31. table.node-tree tr td.actions a         { display: block; float: right; width: 20px; height: 25px; text-align: center; }
  32. table.node-tree tr td.actions a:hover   { background-color: #ffa0a0; }


css code - Bekijk de code zonder highlighting - Klap code in 
  1. @CHARSET "UTF-8";
  2. /* continuation of style.css */
  3. div.navigation                  { background-color: #ffb0b0; }
  4. div.navigation ul               { }
  5. div.navigation li               { }
  6. div.navigation li a             { color: #000000; }
  7. div.navigation li a.active      { background-color: #ff9090; }
  8. div.navigation li a:hover       { background-color: #ff7070; }
  9.  
  10. div.navigation-two              { background: #ffe0e0; }
  11. div.navigation-two ul           { }
  12. div.navigation-two li           { }
  13. div.navigation-two li a         { color: #000000; }
  14. div.navigation-two li a.active  { background-color: #ffc0c0; }
  15. div.navigation-two li a:hover   { background-color: #ffa0a0; }
  16.  
  17. div.admin                       { width: 800px; margin: 25px; }

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.031s