CSS: Difference between revisions

From Medien Wiki
Line 96: Line 96:
<source lang="CSS">selector { property: value; }</source>
<source lang="CSS">selector { property: value; }</source>


Der selector wird auch als class bezeichnet
Selektoren wird auch als Klassen (Class) bezeichnet.


Übersicht Selektoren:
 
=== Übersicht Selektoren/Formate:===
{| {{Template:Prettytable}}
{| {{Template:Prettytable}}
|-
|-
Line 108: Line 109:
|-
|-
| HTML Tags
| HTML Tags
| Format für bestehende HTML-Tags
| HTML-Tag Formate<ref>Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden</ref>
| Selektor heißt: <tt>tag</tt>
| <source lang="CSS">selector</source >
| <source lang="CSS">p { color:red; }</source>
| <source lang="CSS">p { color:red; }</source>
| <source lang="HTML4Strict"><p>Text</p></source>
| <source lang="HTML4Strict"><p>Text</p></source>
|-
|-
| Custom Class
| Custom Class
| Eigene Formate
| Eigene Formate<ref>Es müssen eigene Namen vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.</ref>
| Selektor beginnt mit einem Punkt <tt>.</tt>
| <source lang="CSS">.selector</source >
| <source lang="CSS">.red { color:red; }</source>
| <source lang="CSS">.red { color:red; }</source>
| <source lang="HTML4Strict"><p class="red">Text</p></source>
| <source lang="HTML4Strict"><p class="red">Text</p></source>
|-
|-
| ID
| ID
| Universelle ID (Box System)
| Universelle ID<ref>Die ID darf nur ein einziges Mal vergeben sein! Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet</ref>
| Selektor beginnt mit einer Raute <tt>#</tt>
| <source lang="CSS">#selector</source >
| <source lang="CSS">#myID { position:fixed; left:25px; }</source>
| <source lang="CSS">#myID { position:fixed; left:25px; }</source>
| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source>
| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source>
|}
|}
<references/>


== Editieren von Stylesheets ==
== Editieren von Stylesheets ==

Revision as of 01:36, 29 November 2009

CSS (Cascading Style Sheets) ist eine Technik, die die vollständige Trennung von Inhalt und Design ermöglicht. Diese Trennung ist elementar für dynamische Inhalte und bringt in der Praxis sehr viele Vorteile mit sich. Wenn z.B. das Design einer Seite geändert werden soll, muss man keine Inhalte mehr konvertieren, sondern passt einfach das Stylesheet an!

Vorteile der Trennung von Inhalt und Design:

  • Neue Designs einfach umzusetzen ohne Inhalte ändern zu müssen
  • Designs passen sich an Endgeräte an (verschiedene CSS für z.B. großen Desktop / mobile Endgeräte mit sehr kleinen Bildschirmen / Ausdruck / ...)
  • Barrierefreies Internet (z.B. für Hör- und Sehgeschädigte)
  • Dynamische Darstellung mit JavaScript möglich (z.B. Ein-/Ausblenden von Ebenen)
  • Noch dynamischer geht es mit AJAX, das eine Kombination von PHP und JavaScript ist.
  • Einfaches Erstellen von Templates und Skins für Web Applications mit Datenbankanbindung

Zur Verdeutlichung sei auf die Seite CSS Zen Garden verwiesen, die diesen Design-Ansatz hervorragend demonstriert. Die HTML-Datei bleibt immer gleich, nur das CSS wird geändert und das Design radikal anders dargestellt.

Einbinden von CSS

Stylesheets können intern und extern im <head> oder inline (in individuellen Tags) mit <tag style="background-color:red"> eingebunden werden:


Inline (Body)

Nicht sehr sinnvoll im Hinblick auf die Trennung von Inhalt und Design ist das Einbinden von Styles in Tags (inline style): 

<html> 
<head> 
	<title>020 CSS (Inline)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
</head>  
<body> 
	<p style="background:grey; text-align:right; font-size:32px; margin:0 0 40px 0; padding-right:20px">
	Hallo <span style="color:red">Welt</span></p>  
</body> 
</html>



Intern (Head)

Möglich, aber nicht optimal ist das Einbinden eines Stylesheets im Header (intern): 

<html> 
<head> 
	<title>21 CSS (Head)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
	<style type="text/css"> <!--
		p {
			background:grey;
			text-align:right;
			font-size:32px;
			margin:0 0 40px 0;
			padding-right:20px;
		}
		strong, b { color:red; }
		.bold { font-weight:bold; }		
	-->	</style> 
</head> 
<body>
	<p>Hallo <span style="red">Welt</span></p>
</body> 
</html>



Extern (Head)

Optimal ist das Einbinden eines Stylesheets in den Header als Link (Referenz) zu einer externen CSS-Datei:

HTML-Datei: 

<html> 
<head> 
	<title>020 CSS (Inline)</title> 
	<meta http-equiv="content-type" content="text/html; charset=UTF8"/> 
	<link rel="stylesheet" type="text/css" href="022_style.css" /> 
</head>
<body> 
	<p>Hallo <span style="red">Welt</span></p>
</body> 
</html>


CSS-Datei: 

/* My Custom CSS Style */
p {
	background:grey;
	text-align:right;
	font-size:32px;
	margin:0 0 40px 0;
	padding-right:20px;
}
.red { color:red; }
strong, .bold { font-weight:bold; }


Formate und Eigenschaften

Syntax: 

selector { property: value; }

Selektoren wird auch als Klassen (Class) bezeichnet.


Übersicht Selektoren/Formate:

Class Beschreibung Syntax Beispiel CSS Beispiel HTML
HTML Tags HTML-Tag Formate[1] 
selector
 
p { color:red; }
 
<p>Text</p>
Custom Class Eigene Formate[2] 
.selector
 
.red { color:red; }
 
<p class="red">Text</p>
ID Universelle ID[3] 
#selector
 
#myID { position:fixed; left:25px; }
 
<div id="myID"><p>Text</p></div>
  1. ↑ Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden
  2. ↑ Es müssen eigene Namen vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.
  3. ↑ Die ID darf nur ein einziges Mal vergeben sein! Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet

Editieren von Stylesheets

Neben der manuellen Editierung in einem Texteditor, gibt es viele komfortable Tools, die das sehr übersichtlich erledigen:

Ressourcen

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=CSS&oldid=846"