Erweiterte Suche

CSS Kommentare

CSS Kommentare sind fast identisch mit den mehspaltigen PHP Kommentaren. Sie sind leicht anzuwenden und können bei vielen Stylesheets für eine Gewisse Übersichtlichkeit zu sorgen.

Code

Das Kommentar wird mit /* eingeleitet und mit */ beendet und kann über mehrere Spalten gehen.

/*Ich bin ein einfaches Kommentar*/
tag {
margin : 10px;
} /*Ich
bin
ein
mehrspaltiges
Kommentar*/
tag {
margin : 10px;
}
 

Strukturierung durch Kommentare

Sie werden in dem Beispiel sehen wie übersichtlich es durch Unterteilung in verschiedene Abschnitte wird. Gerade mit Syntax Highlighting ist der Code besser zu überblicken.

/*Header Stylesheets*/
#header {
width : 100%;
height : 200px;
background-color : #ff0000;
}
#header h1 {
font-size : 1.5em;
margin : 0 auto;
color : #0000ff;
font-family : Arial, Verdana, sans-serif;
}
#header img {
margin : 15px 10px 30px 5px;
}
/*Navigation Stylesheets*/
#navi {
float : left;
padding : 10px;
width : 200px;
}
#navi ul {
width : 100%;
height : 100%;
background-color : #c9c9c9;
list-style : none;
}
#navi ul li {
width : 100%;
height : 30px;
}
#navi ul li a {
font-size : 1.2em;
color : #000;
display : block;
}
/*Content Stylesheets*/
#content {
float : left;
width : 600px;
height : 100%;
}
#content h2 {
font-size : 1em;
font-family : Arial, Verdana, sans-serif;
font-weight : bold;
color : #000;
text-align : center;
}
#content img {
margin : 0 auto;
}
#content p {
margin-top : 16px;
font-size : 1em;
font-family : Arial, Verdana, sans-serif;
}
/*Footer Stylesheets*/
#footer {
clear : both;
color : #999;
}
#footer p {
font-size : 0.75em;
text-align : center;
color : #fff;
}
#footer a {
color : #fff;
float : left;
}

Dieser Effekt bei einem größerem Code noch besser Sichtbar.

Stylesheets auskommentieren

In der Entwicklungsphase einer Website ist es nützlich den Browser darauf hinzuweisen, dass er auskommentiere Codestellen einfach ignorieren soll, später kann man sie wieder löschen.

/*
#header {
width : 100%;
height : 200px;
background-color : #ff0000;
}
*/
#header {
width : 100%;
height : 100px;
background-color : #0000ff;
}

Erkärende Kommentare

Natürlich können Sie auch Codestellen erklären oder Hinweise hineinschreiben.

/*Diese CSS Datei muss überarbeitet werden*/
#header {
width : 100%;
height : 200px;
background-color : #ff0000; /*#ff0000 = rot*/
}

Seien Sie kreativ und nutzen Sie Kommentare auch für andere Probleme.

Performance

Jedes Kommentar muss vom Browser mit geladen werden und erhöht den Traffic. Bei kleinen Seiten merkt man kaum einen Unterschied bei mehreren Tausendbesuchern wird man eventuell einen kleinen Zeitunterschied spüren, daher sollten Sie nicht mit der Verwendung übertreiben.

Letzte Aktualisierung: 14.02.10

Kommentare

Bernd schrieb:19.8.2010 11:43 Uhr

Die Kommentare sind vorbildlich erklärt.

Aber 7 + 1? sind ???????? Fragezeichen.
gebe ich unten 8 Fragezeichen ein,funktioniert das Absenden nicht.

Freundliche Grüße
bernd

Kommentar schreiben