HomeArtikelDownloadsForum
PCFreunde.deArtikelTutorialsProgrammierenCSS-Grundlagen
Besucher online: 27
Hinweis
Diese Seite steht zum Verkauf.
Mehr Infos

Schnellsuche

Kategorien
Mittwoch, 8. Juli 2009 Seite 1/3
CSS-Grundlagen
CSS (Cascading-Stylesheet-Document) ist eine nicht wegdenkbare Web-Technologie, die bei modernen Websites zur Formatierung, Positionierung und Verschönerung verwendet wird. Dieses Tutorial beschreibt die Grundlagen dieser wichtigen Technik.
Was ist CSS?
CSS ist die Abkürzung von "Cascading Stylesheet Document". Es hilft einem Webentwickler das Aussehen einer Seite zu gestalten. Mehr oder weniger ist CSS eine Erweiterung für HTML. Man könnte also sagen HTML ist für den Inhalt verantwortlich und CSS ist für das Design zuständig.

Daraus folgt, dass man für CSS auch HTML benötigt. Für HTML benötigt man aber nicht zwingend CSS. Man könnte auch sagen, dass man für das Design einen Inhalt braucht, nicht aber ein Design für den Inhalt. Trotzdem hat heute jede Website ein mehr oder weniger ansprechendes Design, für das meist/immer CSS verantwortlich ist.

Für die Beispiele wird der Editor Topstyle verwendet.

Ein CSS Dokument hat die Endung *.css und besitzt kein Grundgerüst. Dadurch wird der Code übersichtlicher. In CSS arbeitet man mit Teilbereichen. Beispielsweise weist man im HTML-Code dem Inhalt-Bereich der Website den Namen "content" zu und in CSS möchte man die Schrift Orange färben. Das würde dann so aussehen:
#content {
color: #FF4500;
}
Die offene Klammer zeigt den Beginn der Formatierung des Bereichs an, die geschlossene schließt ihn wieder. Wichtig ist auch das Semikolon (;) am Ende der Zeile, da dieses die Anweisung abschließt. Das "#FF4500" ist ein Farbcode, dargestellt im Hexadezimalsystem.

Der Farb-Code steht in diesem Fall für Orange.

Jetzt haben wir die CSS-Datei, aber haben in der HTML-Datei noch nicht den Bereich "content" festgelegt. Dies geschieht mit einem DIV-Container. Wie man einen solchen benutzt wird im nächsten Kapitel beschrieben.
Weiter
© Copyright PCFreunde.de
Autor des Artikels
874 Punkte
Dieser Artikel wurde bisher
3.427 mal gelesen.
Schreiben des Artikels
(+150 Punkte)
Bitte melde dich an und bewerte diesen Artikel!
16 von 22 Mitgliedern
finden diesen Artikel gut
(+256 Punkte)
Inhaltsverzeichnis
Kommentare
Schreib uns deine Meinung zu diesem Artikel - einfach registrieren und los!
Kommentar schreiben
 
htmlfreak
09.07.2009 15:08
Hallo, top! + von mir!

Aber müsste es nich heißen

#content {
color: #FF4500;
}
`?

Meines Wissens nach muss bei einer ID ein # vornedran, bei Klassen ein . (Punkt) oder nicht?

Gruß,
htmlfreak.

PS: Wenns auch so geht, mist hab ich mir soo viel Arbeit gemacht
 
L3oop
09.07.2009 17:17
Hallo,

htmlfreak hat recht.

content {
color: #FF4500;
}

Da fehlt das # oder . vor dem content.

Aber sonst wirklich gut!
Du hättest vielleicht noch padding und position ansprechen sollen.

Gruß L3oop
 
SHADOWBEAST
10.07.2009 13:39
Danke!
Ich werde mal schnell bitten das man das ändert!
MfG. Maximilian :mrgreen:
 
Ascer
20.07.2009 03:28
nettes kurzes einfaches tut :)

Vermisse allerdings color bei den Schriftformatierungen. Wenn du schon die wichtigen zusammenfasst, würde ich das auf jeden Fall auch dort mit rein setzen, da die Schriftfarbe durchaus auch sehr wichtig ist^^

Ebenso hast du noch einen Fehler dadrin..
font-style legt nur fest ob "normal", "oblique" (schräggestellt) oder "italic" (kursiv) geschrieben werden soll, aber NICHT fett oder unterstrichen.

Für fett wäre font-weight:bold; zuständig und für unterstrichen text-decoration:underline;

Würd ich auch noch korrigieren ;)

Ansonsten hast du's schön umschrieben für Anfänger, wobei ich vielleicht noch ein gaaanz bissl drauf eingangen wäre, was Selektoren überhaupt sind, anstatt einfach nur so einige zu nennen...so fehlt ein wenig das Hintergrundwissen bzw. das Allgemeine um später tiefer in die Materie vorzudringen..

soo..jetzt hör ich mal auf zu klugscheissen^^

und beende mein post mit:
however -> nice job


gruß,

Ascer
 
bitsnack
22.07.2009 13:19
ich schliesse mich Ascer an.

Irgendwie wurde alles so "unflexibel" beschrieben.
Anstatt einfach zu sagen wie man id's und classes selektiert hätte man eher beschreiben sollen wie selektoren wirklich funktionieren.
 
Alle BeiträgeKommentar schreiben
Community Login
eMail:
Passwort:
Auto-Login