CSS (Cascading Style Sheets)

CSS (cascading style sheets) ermöglicht das Formatieren von HTML/XML Tags und ist somit also für das Design einer Website verantwortlich. Größter Vorteil ist natürlich das strikte Trennen von Inhalt und Layout/Design (.html und .css). Das ermöglicht schnelles (und vor allem einheitliches) Ändern von Formatierungen.

Weitere Vorteile sind zum Beispiel:
1.Datenreduzierung (<h1> muss nur einmal formatiert werden und nicht in jedem HTML-Dokument)
2.Ermöglicht eine bessere Übersicht in den Dokumenten (Jeder der schon einmal einen Newsletter gemacht hat (dort wird das CSS nicht ausgelagert) weiß was ich meine).
3.Einbinden mehrerer CSS-Dateien (media, print, style-switcher, …)

Schreibweise
Selektor {Eigenschaft: Wert;}
h1 {font-size:18px;}
Die Überschrift h1 soll 18 Pixel groß sein.
Das kann auch kompliziert werden.

body#home .content_hide_all > h1:hover,
body#webdesign .content_hide_all > h1:hover {cursor: help;}

Wir lesen den Selektor von hinten:
Wenn ein h1 Element mit der Maus überstrichen (:hover) wird und es sich nur in der Verschachtelungsebene (>) (hier wird also die Vererbung eingeschränkt) von der Klasse  content_hide_all befindet und auf der Seite mit der ID (Individualformat) vom Body home oder webdesign ist, dann ist der Mauszeiger ein Fragezeichen.

Ziel einer solchen langen Anweisung ist es, das HTML-Markup so simpel und kurz zu halten wie es möglich ist.

Einbinden von CSS in das HTML:
1.im <head> als <style type=“text/css“>Hier kommt das CSS rein!</style> (wird beim Newsletter gemacht)
2.im <head> als Link <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> (das CSS wird hier ausgelagert)
3.als inline-style <li style="display:block">Text</li> (wird beim Newsletter gemacht)
4.als Import innerhalb einer CSS-Datei: @import url(screen/fancy/jquery.fancybox-1.3.1.css);

Links zu CSS:

Quizsammlung zum Thema CSS http://www.thestyleworks.de/quiz/index.shtml

 

Bewertung: 
0
Bisher keine Bewertung

Kommentare

Alles was hier steht über CSS ist richtig, geht aber meiner Meinung nach nicht ausreichend auf die CSS-Selektoren ein. Deshalb stelle ich hier einen Link ein der hoffentlich weiterhelfen kann!

http://css-selektoren.mozork.de/

 

 jendryschik.de/wsdev/einfuehrung/css/selektoren

 Ich finde diesen Link auch sehr hilfreich!

Bild von MarcoKunz

... hier reinsetzen.

Habe über Herrn Jendryschiks Seite gewissermaßen alle Grundlagen gelernt, von denen ich heute profitiere, wenn es darum geht Websites zu basteln und Pixeln zu sagen, wo am Bildschirm sie sich aufzuhalten haben (und dabei auszusehen haben).

Neues entsteht nicht durch den Intellekt,
sondern durch den Spielinstinkt, der aus innerer Notwendigkeit agiert.
Der kreative Geist spielt mit den Objekten, die er liebt.
Carl Gustav Jung

Hallo,

danke für die beiden Links. Ihr könnt jedoch die Links direkt inm Wiki (http://www.mediencommunity.de/content/u5-css-selektoren)ergänzen, statt nur zu kommentieren.
 

Grüße

Peter