CSS code help

[Jerome.]

Hallo, ik heb voor informatica een site moeten bouwen met een .css bestand erbij, maar ik heb DreamWeaver gebruikt en nu worden er vragen gesteld over mijn code.

Kunnen jullie misschien zeggen waar de verschillende onderdelen in de code voor staan? Als dit zou kunnen echt onwijs bedankt.

@charset "utf-8";
body {
   font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
   background-color: #333333;
   margin: 0;
   padding: 0;
   color: #FFF;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Vanwege de verschillen in sommige browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
   padding: 0;
   margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
   margin-top: 0;     /* verwijderen van de bovenste marge kan een probleem krijgen waar de marges kunnen ontsnappen uit hun div. De resterende ondermarge houdt deze weg van alle elementen die volgen. */
   padding-right: 15px;
   padding-left: 15px; /* het toevoegen van de padding aan de zijkanten van de elementen binnen de divs, in plaats van de divs zelf, krijgt ontdoen van elke box model wiskunde. Een geneste div met padding kant kan ook worden gebruikt als een alternatieve methode. */
}
a img { /* Deze selector verwijdert het standaard blauwe randje die je in sommige browsers om een plaatje heen ziet staan and deze met een link werkt. */
   border: none;
}

/* ~~ Waaronder de groep van selectors dat de hover effect te creëren - styling voor de links van uw site moet in deze volgorde blijven. ~~ */
a:link {
   color: #FFFFFF;
   text-decoration: underline; /* tenzij je stijl je links naar uiterst unieke kijk, het is het beste om te onderstrepen is snelle visuele identificatie */
}
a:visited {
   color: #6E6C64;
   text-decoration: underline;
}
a:hover, a:active, a:focus { /* deze groep selecteurs zal een toetsenbord navigator dezelfde hover ervaring geven als de persoon die een muis gebruikt. */
   text-decoration: none;
}

/* ~~deze vaste breedte container omringt de andere divs~~ */
.container {
   width: 960px;
   background-color: #333333;
   margin: 0 auto; /* de waarda aan de zijkanten gekoppeld aan die van de breedte centreren de lay-out */
}

/* ~~ de header is geen breedte gegeven. het neemt de hele inhoud van je lay-out in beslag.  ~~ */
.header {
   background-color: #ADB96E;
}

/* ~~ Colommen voor de lay-out ~~ 


1 ) Padding wordt alleen op de bovenkant en / of onderkant van de divs geplaatst . De elementen binnen deze divs hebben padding op hun kant . Dit bespaart  vanaf elke " box model wiskunde " . Houd in gedachten , als je een bijwerking padding of grens toe te voegen aan de div zelf , zal het worden toegevoegd aan de breedte die wirdt gedefinieert om de * totale * breedte te creëren . U kunt ook kiezen om de opvulling van het element in de div te verwijderen en plaats een tweede div binnen het zonder breedte en de opvulling nodig voor uw ontwerp .

2 ) geen marge is gegeven aan de kolommen aangezien al geopperd . Als je marge moet toevoegen , vermijd dat hij aan de kant dat je drijvende richting ( bijvoorbeeld : een rechtermarge op een div set naar rechts zweven ) . Vaak kan opvullen worden gebruikt. Verklaring aan de heerschappij van de div om een ​​bug waar sommige versies van Internet Explorer het dubbele van de marge temmen : voor divs waar deze regel moet worden doorbroken , dient u een " inline scherm " add .

3 ) Omdat klassen kan meerdere keren worden gebruikt in een document ( en een element kan zijn meerdere klassen toegepast ) , zijn de kolommen toegewezen klassennamen plaats van ID's. Zo kunnen twee zijbalk divs gestapeld worden indien nodig . Deze kunnen zeer eenvoudig worden veranderd in ID's als dat uw voorkeur , zolang je alleen zult gebruiken ze een keer per document .

4 ) Als u liever uw nav op de links in plaats van rechts , gewoon drijven deze kolommen de tegengestelde richting (alle links in plaats van alle rechts) en ze zullen maken in omgekeerde volgorde. Er is geen noodzaak om de divs bewegen in de HTML-broncode .

*/
.sidebar1 {
   float: right;
   width: 180px;
   background-color: #999999;
   padding-bottom: 10px;
}
.content {

   padding: 10px 0;
   width: 780px;
   float: right;
}

/* ~~ Deze groep selectors geven de lijst in het .contect gebied ruimte ~~ */
.content ul, .content ol { 
   padding: 0 15px 15px 40px; /* deze padding spiegeld de rechter padding in de headers and paragraaf regels boven. Padding werdt aan de onderkant geplaatst om andere elementen op de lijst and de linkerkant te plaatsen. */
}


ul.nav {
   list-style: none; /* haalt de lijst marker weg */
   border-top: 1px solid #666; /* zorgt voor een top grens bij de links - alle andere worden geplaatst door een border aan de onderkant van de lijst */
   margin-bottom: 15px; /* creëert een ruimte tussen de navigatie en de informatie daaronder */
}
ul.nav li {
   border-bottom: 1px solid #666; /* zorgt voor een scheiding van de ''button'' */
}
ul.nav a, ul.nav a:visited { /* door deze selectors samen te voegen wordt verzekerd dat als je op links klinkt je er nog steeds op kan klikken ook al ben je er al geweest. */
   padding: 5px 5px 5px 15px;
   display: block; /* dit zorgt ervoor dat een bepaald gebied reageert door een klik van de muis. */
   width: 160px;  /* deze breedte maakt de het mogelijk om er bij IE6 op te klikken */
   text-decoration: none;
   background-color: #999999;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* verandert de achtergrond van de text kleur for muis en keyboard navigators  */
   background-color: #ADB96E;
   color: #FFF;
}

/* ~~ The footer ~~ */
.footer {
   padding: 10px 0;
   background-color: #333333;
   position: relative;/* zortgt ervoor dat internet explorer 6 de lay-out goed weergeeft */
   clear: both; /* deze ''clear'' zorgt ervoor dat de .container begrijpt waar de colommen zijn en behoud */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* dit zorgt ervoor dat een element kan zweven and de rechterkant van de website */
   float: right;
   margin-left: 8px;
}
.fltlft { /* dit zorgt ervoor dat een element kan zweven aan de linkerkant van de website */
   float: left;
   margin-right: 8px;
}
.clearfloat { /* 
Bij gebruik van float: left of float: recht op een bestanddeel opmaken, zal je een manier moeten vinden om dit gedrag te resetten voor de rest van de css lay-out. De clearfloat klasse is een gemeenschappelijke oplossing, toepassen op een <br /> of <div> tag. */
   clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
.container .content h1 {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .content table tr td {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li a {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li a {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li a {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li a {
   font-family: Georgia, Times New Roman, Times, serif;
}
.container .sidebar1 .nav li a {
   font-family: Georgia, Times New Roman, Times, serif;
}

[stegisoft]

body {

font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

background-color: #333333;

margin: 0;

padding: 0;

color: #FFF;

}

Dat is voor de achtergrondkleur, lettertype van de pagina (standaard)

a img { /* Deze selector verwijdert het standaard blauwe randje die je in sommige browsers om een plaatje heen ziet staan and deze met een link werkt. */

border: none;

}

Afbeelding zonder rand.

/* ~~ Waaronder de groep van selectors dat de hover effect te creëren - styling voor de links van uw site moet in deze volgorde blijven. ~~ */

a:link {

color: #FFFFFF;

text-decoration: underline; /* tenzij je stijl je links naar uiterst unieke kijk, het is het beste om te onderstrepen is snelle visuele identificatie */

}

a:visited {

color: #6E6C64;

text-decoration: underline;

}

a:hover, a:active, a:focus { /* deze groep selecteurs zal een toetsenbord navigator dezelfde hover ervaring geven als de persoon die een muis gebruikt. */

text-decoration: none;

}

Dat zijn kleuren van de link op de pagina.

Bijvoorbeeld: a:visited = dat is als je reeds had geklikt.

/* ~~deze vaste breedte container omringt de andere divs~~ */

.container {

width: 960px;

background-color: #333333;

margin: 0 auto; /* de waarda aan de zijkanten gekoppeld aan die van de breedte centreren de lay-out */

}

Dat wordt meestal in DIV gedaan.

Dat bepaald de achtergrondkleur en lettertype enz.

Idem voor sidebar en header

ul.nav {

list-style: none; /* haalt de lijst marker weg */

border-top: 1px solid #666; /* zorgt voor een top grens bij de links - alle andere worden geplaatst door een border aan de onderkant van de lijst */

margin-bottom: 15px; /* creëert een ruimte tussen de navigatie en de informatie daaronder */

}

ul.nav li {

border-bottom: 1px solid #666; /* zorgt voor een scheiding van de ''button'' */

}

ul.nav a, ul.nav a:visited { /* door deze selectors samen te voegen wordt verzekerd dat als je op links klinkt je er nog steeds op kan klikken ook al ben je er al geweest. */

padding: 5px 5px 5px 15px;

display: block; /* dit zorgt ervoor dat een bepaald gebied reageert door een klik van de muis. */

width: 160px; /* deze breedte maakt de het mogelijk om er bij IE6 op te klikken */

text-decoration: none;

background-color: #999999;

}

Dat is de achtergrondkleur, lettertype enz. van menu.

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* verandert de achtergrond van de text kleur for muis en keyboard navigators */

background-color: #ADB96E;

color: #FFF;

}

De kleuren van de link van menu

/* ~~ The footer ~~ */

.footer {

padding: 10px 0;

background-color: #333333;

position: relative;/* zortgt ervoor dat internet explorer 6 de lay-out goed weergeeft */

clear: both; /* deze ''clear'' zorgt ervoor dat de .container begrijpt waar de colommen zijn en behoud */

}

Dat zijn de kleuren , lettertype enz. van de voetgedeelte van de pagina.

De rest heeft te maken met de pagina.

Bijvoorbeeld h1 is de grootte van lettertype.

Verder kan je zelf uitzoeken op de pagina en zo heb ik dat ook gedaan bij mijn website.

9 december 2013 aangepast door stegisoft

[Jerome.]

Bedankt hier ga ik zeker wat aan hebben !