Einführung in CSS

Tutorials, Hilfestellungen und Diskussionen rund um HTML und CSS.

Einführung in CSS

Beitragvon Reika am 29. Jan 2012, 11:47

Dieses Tutorial ist eine kleine, leichte Einführung in die Nutzung von CSS für Anfänger und wissenshungrige.
Hier wird speziell das Angelegn und die saubere Handhabung eurer CSS angesprochen.





1. Saubere Anordnung


Zu aller erst solltet ihr eine saubere Ordnung in eure CSS bringen. Ein Beispiel wäre wie folgt:

Code: Alles auswählen
selektor {
   eigenschaft: wert;
   eigenschaft: wert;
   }


So sollte es nicht aussehen:

Code: Alles auswählen
selektor {eigenschaft:wert; eigenschaft:wert;}


Letztere Version spart zwar Platz, sorgt aber dafür, dass ihr unnötig scrollen/ suchen müsst und die CSS kann ganz schön chaotisch aussehen.




2. Kommentare

CSS-Kommentare sind sehr hilfreiche CSS-Elemente. CSS-Kommentare sind Texte, die ihr in eure CSS einfügen könnt, die NICHT für euer Layout übernommen werden:

Code: Alles auswählen
/* Ich bin ein Kommentar */


Damit könnt ihr euch beispielsweise einen Hinweis an einen Selektor machen:

Code: Alles auswählen
u {
   text-decoration: none; /* Sorgt dafür, dass die Unterlinie weg ist. */
   }





3. Deaktivieren von Selektoren durch Kommentare

Durch das Setzen von Kommentaren könnt ihr bestimmte Selektoren deaktivieren.

Code: Alles auswählen
/* Dieser Selektor wird nicht in der CSS übernommen, weil er bloß ein Kommentar ist.

selektor {
   eigenschaft: wert;
   eigenschaft: wert;
   }

*/





4. Gruppeneinteilung durch Kommentare

Ebenso könnt ihr durch Kommentare eure Selektoren in Gruppen einteilen, um euch selber einen besseren Überblick zu verschaffen.

Code: Alles auswählen
/* Texthervorhebungen */

...

/* Linkformatierungen */

...





5. Die ID's

IDs sind Selektoren, die ihr selber erstellen könnt. Beispielsweise möchtet ihr eine DIV-Box für eure Texte erstellen, so funktioniert das wie folgt:

Code: Alles auswählen
#deinname {
   eigenschaft: wert;
   eigenschaft: wert;
   }


Ganz wichtig hierbei ist: Vor dem Namen des Selektors müsst ihr eine Raute '#' setzen!
Natürlich muss diese ID auch in euer HTML-Dokument eingebunden werden:

Code: Alles auswählen
<div id="deinname">blubb</div>


ID's werden in HTML mit id="" vergeben.

Ganz wichtig ist: Ein ID-Selektor ist ein "eindeutiger" Selektor, deshalb darf er pro Dokumentenstruktur nur 1 mal verwendet werden!




6. Die Klassen

Ein Klassen-Selektor ist ähnlich wie ein ID-Selektor. Ihr könnt sie nach Belieben benennen, erstellen und im Gegensatz zu ID-Selektoren auch nach Belieben verwenden.

Eine Klasse beginnt in der CSS mit einem Punkt '.' Das sieht so aus:

Code: Alles auswählen
.deinname {
   eigenschaft: wert;
   eigenschaft: wert;
   }


Die Klassen sind innerhalb des HTML-Dokumentes mit folgendem Code zu vergeben:

Code: Alles auswählen
<div class="deinname"></div>


Eine Klasse ist kein "eindeutiges" Element und kann daher so oft vergeben werden, wie ihr möchtet.




7. CSS-Teilung

Sollte eure CSS-Datei nun trotz guter Anordnung immer noch extrem lang und groß sein, könnt ihr sie in mehrere Dateien spalten.
Diese teilen wir beispielsweise nun in 3 CSS-Dateien:
Code: Alles auswählen
style.css
navi.css
text.css


Diese müssen selbstverständlich alle in euren HEAD-Tag eingebunden werden:

Code: Alles auswählen
<head>
...
 <link href="style.css" rel="stylesheet">
 <link href="navi.css" rel="stylesheet">
 <link href="text.css" rel="stylesheet">
...
</head>


Wenn alle CSS-Dateien eingebunden sind, greift eure HTML-Datei automatische auf alle drei Stylesheets zu und somit sind eure seperaten Stylesheets sauber und übersichtlich. =)




Bei Fragen zu diesem Tutorial, gerne her damit! Bei spezifischen Fragen, bitte postet diese in den HTML/CSS-Tutorial-Bereich.
Bild
Benutzeravatar
Reika
Silber
Silber
 
Beiträge: 500
Registriert: 02.2009
Wohnort: In hell ♥
Geschlecht: weiblich

Zurück zu "HTML/ CSS"


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron