Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Einfache Einbindung von CSS



Ranking: +4   Kommentare: 9   |   Bewertung: Keine Berechtigung!  

Einbindung von CSS



Inline Style
Soll nur ein einzelnes Element innerhalb eines Dokuments formatiert werden, so bietet sich die Formatierung über Inline-Stile an. Dafür muss man direkt im Dokument welches man formatieren möchte sogenannte Attribute notieren.

Welches ? -> Das Attribut Style

Als Werte werden die CSS Eigenschaften geschrieben.




Beispiel: Wir wollen roten Text auf Blauen Hintergrund.
Das sieht dann so aus:


<p style="color: red; background-color; blue; "></p>


Eingebettetes Stylesheet



Eingebettete Stylesheets sind die richtige Wahl, wenn Formate für mehrere Elemente innerhalb einer (X)HTML-Datei gelten sollen, aber nicht fpr mehrere (X)HTML-Dateien. (MERKE!). Hierfür schreibt man am besten die CSS-Angaben in den Dokumentenkopf, innerhalb des head-Bereichs.

Eingeleitet werden die Stylesheet Angaben durch das Element style, dem als Attribut der MIME-Typ text/css zugewiesen ist !.

Code:


<style type="text/css"> ... </style>



Darauf folgt in XHTML ein CDATA Abschnitt. Die CDATA Kennzeichnung muss selber wiederum durch CSS Kommentare /* und */ geschützt werden. Innerhalb dieses CDATA Bereichs stehen die eigentlichen CSS Angaben !.

Dann schreibt man das (X)HTML Element, für das die Formatierungen gelten sollen, im Beispiel gleich zum einen <h1></h1> und zum anderen <p></p>

Zitat :

<style type="text/cc">

/* <![CDATA[ */

h1 {
background-color: blue;
color: white;
}

p {
background-color: white;
color: blue;
}

/* ]]> */

</style>




Hinter den Elementen fassen geschweifte Klammern due CSS-Angaben zusammen. In beiden Fällen wird einem Hinter und eine Vordergrundfarbe festgelegt. Damit erhalten alle Überschriften der 1. Ebenen (<h1>) einen blauen Hintergrund un eine weiße Textfarbe; alle Absätze (<p>) haben einen weißen Hintergrund und eine blaue Schriftfarbe. Und hier jetzt einmal das eingebettete Stylesheet im Gesammtzusammenhang...




Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Designnation Tutorial by z9n</title>

<style type="text/css">

/* <!CDATA[ */



<!-- Stylesheet für h1 -->

h1 {

    background-color: blue;

    color: white;

    }

    

<!-- Stylesheet für h2 -->    

h2 {

    background-color: blue;

    color: white;

    }

    

<!-- Stylesheet für p -->

p    {

    background-color: white;

    color: blue;

    }



/* ]]> */

</style>

</head>

<body>



<h1> Tutorial by z9n das ist gut </h1>

<p> Tutorial by z9n das ist gut  </p>



<h2> Tutorial by z9n das ist gut  </h2>

<p> Tutorial by z9n das ist gut  </p>



</body>

</html>






Ich hoffe dieses Tutorial konnte euch weiterhelfen.
Bei aktuellen Fragen wendet euch an [ MAIL: JChamier@gmx.de ]

Wie immer einen schönen Tag und fleißig lernen ;)

Euer z9n

Veröffentlicht von: deleted_1330623064
Veröffentlicht am: 16 Jan. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS HTML Stylesheet tutorial z9n


Themenverwandte Tutorials


Kommentar(e) (9)


Crash sagt:

Das nichts über externe Stylesheets erwähnt wird ist wirklich ein Manko. Besser wäre es gewesen, wenn auch Alternative Stil-Dateien erklärt worden wären.

Desweiteren sollte man Den Inhalt von (und auch ) nur als CDATA markieren, wenn man auch wirklich XHTML sendet. Unabhängig ob Transitional oder Strict. Und /* */ braucht man dann auch nicht herum zu machen.

9 Feb. 2008 19:09:01 • Antworten


ashiso sagt:

Diese Frage solltest du dir besser selber beantworten =)
Warum dieser scharfe Ton meinerseits?
Ich habe gestern Abend mal ein wenig in den verschiedenen "Tutorials" gestöbert.
Dabei viel mir auf, dass so gut wie jeder eine Menge Fehler gemacht hat.
Nun sind Tutorials aber dazu da, Anfängern die Thematik näher zu bringen
- aber möglichst so, dass der Anfänger es _richtig_ macht.

Dein Tutorial ist an und für sich eine gute Idee, verbesser es einfach ein wenig. ;)

5 Feb. 2008 12:34:44 • Antworten


deleted_1330623064 sagt:

Wozu mache ich dann eigentlich noch Tutorials ?

5 Feb. 2008 01:47:22 • Antworten


ashiso sagt:

"Stylesheet für X" ist nicht dein ernst oder?
Ein Stylesheet ist bezeichnender Weise kein Selektor.
Für XHTML 1.0 Transitional sind außerdem die XML-Escapes nicht notwendig.
Darüber hinaus habe ich noch nie HTML Kommentare in einem Stylesheet gesehen....

4 Feb. 2008 22:16:19 • Antworten


deleted_1330623064 sagt:

Ist halt klar ^^ Nur, war mein erstes Tut und ich habe mir gedacht fängst du mit was ganz einfachem an. Extern ist immer besser... kann bald mal eins machen wo ne externe verlinkung mit so einigen css attributen erklärt ist. Danke aber für die Kritik :)

17 Jan. 2008 16:12:33 • Antworten


Marit sagt:

also ich würde auch eher erklären, wie man die css-datei extern verlinkt. am besten noch mit der unterscheidung der verschiedenen browser.

die beiden varianten die hier beschrieben sind sind nicht sehr zu empfehlen.

17 Jan. 2008 15:06:08 • Antworten


deleted_1356256480 sagt:

also ich habs gleich richtig gelernt, und verstehe nicht, warum ich es auch erst """""falsch"""" lernen soll

16 Jan. 2008 19:54:16 • Antworten


deleted_1330623064 sagt:

"inhalt und layout wird strikt getrennt" Ich versuche Leuten CSS näher zu bringen. Ist klar das du später Externe verlinkungen im Head stehen hast nur, ich denke ... man muss immer irgentwo klein anfangen. Sei mir net böse ;P

Zuletzt bearbeitet am: 16 Jan. 2008 18:34:46

16 Jan. 2008 18:32:59 • Antworten


deleted_1356256480 sagt:

inhalt und layout wird strikt getrennt... das kannste vllt mit html machen... aber wenn du schon xhtml benutzt, kannst du es auch gleich ganz richtig machen

16 Jan. 2008 17:50:30 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder