	Startseite

	Finde uns

	Folge uns



	Referate / Hausarbeiten:
	- Biografie - Biologie - Chemie - Deutsch - Englisch - Französisch - Geografie - Geschichte - Informatik - Italienisch - Kunst - Latein - Mathematik - Musik - Philosophie - Physik - Politik - Psychologie - Sonstige - Sozialkunde - Spanisch - Sport - Technik - Wirtschaft

	Bachelorarbeiten:

	Referat suchen


	Bewerbungen:
	- Kostenlose Homepage erstellen

	Studium:
	- Studiengänge - Auslandsstudium - Studiengebühr - Das BAföG - Die ZVS - Stipendien - Die Mappe - Einschreibung - Leben & Wohnen - Behinderung - Praxissemester - Die Abschlüsse - Erster Student der Familie? - Work & Travel

	Lerntipps:
	- Gratis Ratgeber - Allgemein - Elternratgeber - Lernspiele - Lernumgebung - Inhaltsangabe Gedichtinterpretation - Gedichtanalyse - Literaturepochen

	Lernvideos:
	- Allgemein

	Impressum
	AGB
	Datenschutz
	Cookie Manager
	Auf dieser Seite findest du Referate, Inhaltsangaben, Hausarbeiten und Hausaufgaben zu (fast) jedem Thema. Die Referate bzw. Hausaufgaben werden von unseren Besuchern hochgeladen.

Vortrag zum Thema CSS - Referat

1. Was ist CSS?

• CSS heißt ausgesprochen Cascading Style Sheets
• ist eine Sprache um Websites zu formatieren
• CSS greift auf Sprachelemente von HTML zu und verleiht ihnen gewünschte Darstellungsmerkmale
• diese können für die ganze Seite gelten oder nur für einen Tag
• CSS vereinfacht die Gestaltung von Websites
• es gibt verschiedene Gruppen von Elementen
• als Beispiel 3 Gruppen mit je 2 Beispielen
o Allgemeine Angaben
 Hintergrundfarbe
background-color:black;
 Hintergrundbild
background-image:url(bild.jpg);

o Elemente zur Textformatierung
 Schriftart
font-family:arial;
 Schriftgröße (gängige Einheiten – px, %, em)
font-size:12px;

o Elemente zur Ausrichtung und Positionierung
 Festlegen eines Außenabstandes (gängige Einheiten - %, auto, px, em)
margin: 15px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
 Festlegen des Innenabstandes
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

2. Was sind die Vorteile bei der Erstellung von Websites mit CSS?

• Effektivität
o Formatierung in einer einzelnen Datei
o alle Formatierungen können in einer einzelnen Datei festgelegt werden
o eine Datei für jede Seite der Homepage

• Kosten- und Zeitersparung
o Senkung des Datentransfers und Speicherplatzersparnis
 HTML-Anweisungen werden auf Texte, Links und Bilder beschränkt
• kürzerer Quelltext
 Formatierung der einzelnen Elemente nicht mehr in der HTML-Datei sondern in der CSS-Datei
o Arbeits- und Erstellungszeitersparnis
 Änderung der Formatierung geschieht in der CSS-Datei
• damit sind nur wenige Handgriffe nötig um Layouts oder einzelne Formatierungen zu ändern
• ohne separate CSS-Datei bzw. Block Style müsste man jedes Element das geändert werden soll einzeln ändern und das auf jeder Seite

3. Was kann CSS...

• ... was HTML nicht kann?
o Formate für verschiedene Ausgabemedien
 Drucklayout
 Layout für Kleincomputer wie PDAs
 Sprachausgabe der Site (z.B. für Blinde)

o Style Switcher
 Änderung des Layouts mit einem Mausklick
 Damit kann der User sich das Layout aussuchen, was ihm persönlich am besten gefällt

o Komplexere Layouts durch die Benutzung von Boxen

o Formatierungen sind möglich, die mit reinem HTML entweder gar nicht oder nur über Umwege möglich sind
 z.B. Schriftgröße kann x-beliebig vergrößert werden
 in HTML ist die größte Überschrift H1

4. Wie verknüpft man HTML und CSS?

Direktformatierung des HTML-Dokuments (Inline Style)

• innerhalb des HTML-Tags mit dem Attribute style
• Schema:
style=”css-Element: Wertangabe;”
• Beispiel:
<div style=“padding: 20px“>Hallo</div>
• nach diesem Schema können alle HTML-Elemente formatiert werden (z.B. table, p, td usw.)
• wenn mitten im Wort oder Satz, dann benutzt man das <span> Element
• Beispiel:
<p style=“test-align:center, font-weight:bold;“> Bedecke deinen Himmel Zeus<br>
<span style=“color:red“>mit Wolkendunst</span><br>
und übe dem Knaben gleich…
</p>
• so sieht es im Browser aus:

Bedecke deinen Himmel Zeus
Mit Wolkendunst
Und übe dem Knaben gleich…

• das <span> Element ersetzt das <font> Element, dass zwar noch häufig verwendet wird, aber auf der „Abschussliste“ steht

Formatierung einer kompletten HTML-Datei (Block Style)

• alle Formatierungen für die aktuelle Seite werden in den <head> Bereich geschrieben
• Schema:
Selektor {css-Element:Wertangabe; }
• Beispiel:
<head>
<style type=“text/css“>
<!—
body { margin: 10px; }

#IDname {
font: 12px arial;
padding: 40px 0 20px 0;
}
.CLASSname {
color: silver;
background: red;
}
p {
margin: 10px;
border: 1px solid black;
}
-->
</style>
</head>
• Formatierungen gelten für die ganze Seite
• die einzelnen HTML-Elemente müssen nicht mehr separat formatiert werden
• .CLASSname
o stellt eine Klasse dar, die verschiedenen Elementen innerhalb der Seite zugewiesen werden kann
o z.B. wird ein <p> Element anders formatiert als alle anderen
o Klassen dürfen mehrmals im Dokument vorkommen
• ID’s (#IDname)
o dürfen nur einmal im Dokument vorkommen dürfen
o Definiert ein ganz spezielles Element in der Seite eindeutig
 Zuweisen von Klassen und ID’s:
<div id=“IDname“>
<p>Die Sonne scheint</p>
<p class=“CLASSname“>Die Sonne scheint immer noch</p>
</div>
• Inline Style ist ranghöher als der Block Style, also überlagert ein eventuelles Inline Style den Block Style für diese Element

Separate CSS-Datei

• Stylesheetsangaben genauso geschrieben wie im Block Style, aber nicht in die HTML-Datei, sondern in eine CSS Datei geschrieben (Textdatei mit der Erweiterung „css“)
• eine Datei mit allen Formatierungen für alle Seiten
• es kann das komplette Layout in der Datei festgelegt werden
• schnelle Änderung der Formatierung oder des Layouts aller Seiten durch Veränderungen in der CSS-Datei
• die Datei muss in alle Seiten angebunden werden
• man kann mehrere CSS-Dateien einbinden
• 2 Möglichkeiten

/> o Möglichkeit 1
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
o Möglichkeit 2
<style type=”text/css”>
!<--
@import url(style.css);
-->

verschiedene Style Sheets für verschiedene Medien

• man kann CSS-Formate für verschiedene Medien erstellen
o z.B.:
 all = alle Medientypen
 screen = Bildschirmanzeige
 print = Druck
 handheld = webfähige Organizer/Kleincomputer

• 4 Möglichkeiten zum Einbinden der CSS-Formate
o <link> Element
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“style.css“>
o <style> Element
<style type=“text/css“ media=“screen“>

</style>
o @import
<style type=“text/css“>

</style>
o @media
<style type=“text/css“>

</style>
• @import und @media müssen nicht unbedingt als Blockstyle in den <head> der HTML-Datei geschrieben werden
• können auch in die CSS-Datei geschrieben werden (ohne das <style> Element)

5. Was gibt es für Probleme mit CSS?

• Darstellungsprobleme wegen unterschiedlicher Browser
o Stylesheets werden in verschiedenen Browsern verschieden dargestellt
o das geht von geringen Abweichungen bis zu groben Fehldarstellungen
o außerdem gibt es einige CSS-Formate die bestimmte Browser gar nicht kennen und damit gar nicht anzeigen

• Testbrowser
o Man sollte bei der Erstellung von Websites mit CSS (aber auch ohne) darauf achten, dass man verschiedene Browser zum Anschauen nutzt, denn sonst kann die Site z.B. in dem Internet Explorer gut aussehen, aber schon im Opera nicht mehr ansehnlich sein. Außerdem sollte man auch ältere Versionen der Browser nutzen, denn nicht jeder User hat die neusten Versionen auf seinem PC.
o Browser die man unbedingt nutzen sollte:
 Mozilla
• http://mozilla.org/
 Netscape
• ftp://ftp.netscape.com/pub/communicator
 Opera
• ftp://ftp.opera.com/pub/opera/
 Internet Explorer
• http://www.microsoft.com/windows/ie_intl/de/download/default.asp

• Jedem Browser sein eigenes CSS
o unterschiedliche CSS-Dateien die unterschiedlich eingebunden werden
 man kann die Einbindung der CSS-Dateien als so genannte Browserweiche nutzen
 die mit <link> eingebundenen CSS-Dateien können von allen Browsern interpretiert werden
 die mit @import eingebundenen CSS-Dateien können von älteren Browsern nicht interpretiert werden, sie werden also vor dem Browser versteckt
 man erstellt also ein Layout was von neueren Browsern interpretiert werden kann und bindet diese CSS-Datei mit @import ein
 außerdem erstellt man von der CSS-Datei eine Kopie und verändert dort die Formate die bei älteren Browsern zu Fehldarstellungen führen so, dass sie von älteren Browsern interpretiert werden können
 diese zweite CSS-Datei wird dann mit <link> eingebaut
 damit sieht zwar das Layout in älteren und neueren Browsern verschieden aus, aber es werden keine User ausgeschlossen, da in jedem Browser das Layout ordnungsgemäß angezeigt wird

o Conditional Comments
 weitere Möglichkeit dem Internet Explorer nur für ihn zugängliches CSS einzubinden
 sind spezielle Kommentare welche im IE nicht wie in anderen Browsern als normale Kommentare behandelt werden
 die Inhalte dieser Kommentare können dargestellt werden



</style>
<![endif]-->

• Style-Angaben beeinflussen sich gegenseitig
o falsche Reihenfolge der Anker-Pseudo-Klassen
 Reihenfolge muss eingehalten werden, damit sich die Pseudo-Klassen nicht überlagern
A:link { color: red } /* noch nicht besuchter Link */
A:visited { color: blue } /* schon besuchter Link */
A:hover { color: yellow } /* Benutzer ‘hovert’ */
A:active { color: lime } /* Link wird angewählt */

o Auslassen von generischen Schriftfamilien
 man sollte immer eine der generischen Schriftfamilien (fantasy, cursive, monospace, sans-serif oder serif) als letzte Alternative angeben um dem Browser bessere Wahlmöglichkeiten zu lassen, wenn die anderen Schriftarten auf dem PC nicht zu finden sind
H2 { font-family: Arial, Helvetica, Geneva, sans-serif }

o Anführungszeichen in CSS
 in HTML müssen hexadezimale Farbangaben in Anführungszeichen gesetzt werden
 das darf man in CSS nicht
H1 { color: #808000 }
 Schriftarten die Leerzeichen im Namen tragen, sollten immer in Anführungszeichen gesetzt werden
H1 { font-family: “Times New Roman“, “Comic Sans MS”, sans-serif }

6. Wie bastelt man Layouts mit CSS?

• Layout mit Boxen/Layer
o Die meisten Layouts für Websites sind auf Tabellen aufgebaut
o Netscape hat die Layer erfunden (Layer sind ähnlich den Boxen)
 aber nur Netscape (ab Version 4.0) können die Layer interpretieren
o mit CSS gibt es eine neue Möglichkeit Layouts zu erstellen – Boxen
 Können von allen Browsern interpretiert werden
o was sind Boxen?
 Boxen sind eine Möglichkeit des absoluten Positionierens
 Mit Boxen können Elemente angeordnet und ausgerichtet werden
 Beispiele:
• drei Boxen, eine oben, zwei darunter nebeneinander, flexibel
• zwei Boxen, flexibel, überlappend, nebeneinander
• drei Boxen, zwei übereinander, eine links, flexibel
• sieben Boxen, drei kleine oben und unten nebeneinander, eine zentrale große Box
• vier <div> Bereiche mit fester Breite
o Was sind die Vorteile von Boxen?
 Mit Tabellen ist die Strukturierung einer Website sehr eingeschränkt und meist nur mit Verschachtelungen zu bewerkstelligen, was sehr undurchsichtig ist
• Umso mehr eine Tabelle verschachtelt ist, desto höher ist die Gefahr

Quelle(n) für dieses Referat: http://css.fractatulum.net/

Kommentare zum Referat Vortrag zum Thema CSS: