CSS - Revision history

Mm at 23:47, 6 January 2016

2016-01-06T23:47:59Z

← Older revision		Revision as of 23:47, 6 January 2016
Line 6:		Line 6:
	* [http://de.wikipedia.org/wiki/Barrierefreies_Internet Barrierefreies Internet] (z.B. für Hör- und Sehgeschädigte)		* [http://de.wikipedia.org/wiki/Barrierefreies_Internet Barrierefreies Internet] (z.B. für Hör- und Sehgeschädigte)
	* Dynamische Darstellung mit [[JavaScript]] möglich (z.B. Ein-/Ausblenden von Ebenen)		* 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.		* Noch dynamischer geht es mit [[AJAX]] bzw [[xhr]], hier werden Seiteninhalte nachgeladen, ohne dass ein erneutes Laden der kompletten Seite erforderlich ist.
	* Einfaches Erstellen von Templates und Skins für [[Webapps\|Web Applications]] mit Datenbankanbindung		* Einfaches Erstellen von Templates und Skins für [[Webapps\|Web Applications]] mit Datenbankanbindung

Mm: Formate fixes & clenaup

2011-10-10T07:15:04Z

Formate fixes & clenaup

← Older revision		Revision as of 07:15, 10 October 2011
Line 97:		Line 97:
	== Formate ==		== Formate ==
	=== Syntax ===		=== Syntax ===
	<source lang="CSS"> ~~selektor~~ { Eigenschaft: ~~wert~~; }</source>		<source lang="CSS"> Selektor { Eigenschaft: Wert; }</source>
	oder auf englisch:		oder auf englisch:
	<source lang="CSS"> selector { property: value; }</source>		<source lang="CSS"> selector { property: value; }</source>

	Der Selektor bestimmt auf ~~welchen~~ Abschnitte oder Elemente ~~deines~~ HTML-~~Dokumentes~~ die Formatierung angewandt wird. Die Eigenschaft definiert, was verändert wird (z.B. Farbe), der ~~Wert, wie dies geschieht~~ (z.B. 'Rot')		Der Selektor bestimmt, auf welche Abschnitte oder Elemente des HTML-Dokuments die Formatierung angewandt wird. Die Eigenschaft definiert, was verändert wird (z.B. Farbe) sowie den Wert der Eigenschaft (z.B. 'Rot')


			''Selektoren werden auch als Klassen (Class) bezeichnet.''


Line 114:		Line 117:
	\|-		\|-
	\| HTML Tags		\| HTML Tags
	\| HTML-Tag Formate<ref>Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.</ref>		\| HTML-Tag Formate <ref>Es können selbstverständlich nur Selektoren aus bestehenden HTML-Tags gewählt werden.</ref>
	\| <source lang="CSS">selector</source >		\| <source lang="CSS">selector</source >
	\| <source lang="CSS">p { color:red; }</source>		\| <source lang="CSS">p { color:red; }</source>
Line 120:		Line 123:
	\|-		\|-
	\| Custom Class		\| Custom Class
	\| Eigene Formate<ref>Es müssen eigene Namen (ohne Sonderzeichen!) vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.</ref>		\| Eigene Formate <ref>Es müssen eigene Namen (ohne Sonderzeichen!) vergeben werden, die üblicherweise entweder die grafischen Eigenschaften oder die Zugehörigkeit zu bestimmten Layout-Elementen klar benennt.</ref>
	\| <source lang="CSS">.selector</source >		\| <source lang="CSS">.selector</source >
	\| <source lang="CSS">.red { color:red; }</source>		\| <source lang="CSS">.red { color:red; }</source>
Line 126:		Line 129:
	\|-		\|-
	\| ID		\| ID
	\| Universelle ID<ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref>		\| Universelle ID <ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref>
	\| <source lang="CSS">#selector</source >		\| <source lang="CSS">#selector</source >
	\| <source lang="CSS">#myID {color:red;}</source>		\| <source lang="CSS">#myID {color:red;}</source>

JanD: /* Formate */

2011-10-09T19:55:38Z

Formate

← Older revision		Revision as of 19:55, 9 October 2011
Line 97:		Line 97:
	== Formate ==		== Formate ==
	=== Syntax ===		=== Syntax ===
	<source lang="CSS">selector { property: value; }</source>		<source lang="CSS"> selektor { Eigenschaft: wert; }</source>
			oder auf englisch:
			<source lang="CSS"> selector { property: value; }</source>

	~~''Selektoren werden auch als Klassen~~ (~~Class~~) ~~bezeichnet~~.''		Der Selektor bestimmt auf welchen Abschnitte oder Elemente deines HTML-Dokumentes die Formatierung angewandt wird. Die Eigenschaft definiert, was verändert wird (z.B. Farbe), der Wert, wie dies geschieht (z.B. 'Rot')


Line 126:		Line 128:
	\| Universelle ID<ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref>		\| Universelle ID<ref>Die ID darf nur ein einziges Mal vergeben sein. Üblicherweise werden IDs zur Positionierung von Layout-Elementen (Boxen) verwendet.</ref>
	\| <source lang="CSS">#selector</source >		\| <source lang="CSS">#selector</source >
	\| <source lang="CSS">#myID { ~~position~~:~~fixed; left:25px~~; }</source>		\| <source lang="CSS">#myID {color:red;}</source>
	\| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source>		\| <source lang="HTML4Strict"><div id="myID"><p>Text</p></div></source>
	\|}		\|}

	<references/>		<references/>


	== Eigenschaften ==		== Eigenschaften ==

Md: /* Browser- & Konfigurationsweichen mit CSS */

2010-11-10T10:48:10Z

Browser- & Konfigurationsweichen mit CSS

← Older revision		Revision as of 10:48, 10 November 2010
Line 228:		Line 228:
	</source>		</source>

	Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung <tt>@~~medie~~ print { ... }</tt> in einer CSS-Datei gleichbedeutend mit der Anweisung <tt><link media="print" ...></tt> in einer HTML-Datei.		Die @media Direktive kann übrigens auch in HTML eingebunden werden. So ist die Anweisung <tt>@media print { ... }</tt> in einer CSS-Datei gleichbedeutend mit der Anweisung <tt><link media="print" ...></tt> in einer HTML-Datei.

	Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier:		Weitere Browserweichen für CSS, Javascript und Herstellerabhängige Varianten findet man z.B. hier:

Md at 10:32, 3 November 2010

2010-11-03T10:32:25Z

← Older revision		Revision as of 10:32, 3 November 2010
Line 42:		Line 42:
	<style type="text/css"> <!--		<style type="text/css"> <!--
	p {		p {
	background:grey;		background-color:grey;
	text-align:right;		text-align:right;
	font-size:32px;		font-size:32px;
Line 83:		Line 83:

	p {		p {
	background: grey;		background-color: grey;
	text-align: right;		text-align: right;
	font-size: 32px;		font-size: 32px;

Md at 10:29, 3 November 2010

2010-11-03T10:29:40Z

← Older revision		Revision as of 10:29, 3 November 2010
Line 25:		Line 25:
	</head>		</head>
	<body>		<body>
	<p style="background:grey; text-align:right; font-size:32px; margin:0 0 40px 0; padding-right:20px">		<p style="background-color:grey; text-align:right; font-size:32px; margin:0 0 40px 0; padding-right:20px">
	Hallo <span style="color:red">Welt</span></p>		Hallo <span style="color:red">Welt</span></p>
	</body>		</body>

WSebastian: /* Editieren von Stylesheets */

2010-06-09T10:43:52Z

Editieren von Stylesheets

← Older revision		Revision as of 10:43, 9 June 2010
Line 266:		Line 266:
	bietet ab Version 4 einen komfortablen Debugger für Webseiten an (Konsole, HTML, CSS, Script-Debugger und Ressourcen-Analyse). Zum Aktivieren in den Safari-Einstellungen "Erweitert" den Punkt ''"Menü 'Entwickler' in der Menüleise anzeigen"''. Danach kann man per Rechtsklick Elemente inspizieren ("Element-Informationen").		bietet ab Version 4 einen komfortablen Debugger für Webseiten an (Konsole, HTML, CSS, Script-Debugger und Ressourcen-Analyse). Zum Aktivieren in den Safari-Einstellungen "Erweitert" den Punkt ''"Menü 'Entwickler' in der Menüleise anzeigen"''. Danach kann man per Rechtsklick Elemente inspizieren ("Element-Informationen").
	=== Browser integration: Firefox ===		=== Browser integration: Firefox ===
	Die Add-ons [https://addons.mozilla.org/de/firefox/addon/60 Web ~~Developper~~] und [https://addons.mozilla.org/de/firefox/addon/1843 Firebug] sind für Webentwickler mit Mozilla Firefox schier unverzichtbar.		Die Add-ons [https://addons.mozilla.org/de/firefox/addon/60 Web Developer] und [https://addons.mozilla.org/de/firefox/addon/1843 Firebug] sind für Webentwickler mit Mozilla Firefox schier unverzichtbar.

	== Ressourcen ==		== Ressourcen ==

Mm: added webkit overview

2010-05-15T13:08:58Z

added webkit overview

← Older revision		Revision as of 13:08, 15 May 2010
Line 184:		Line 184:
	* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!		* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!
	* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!		* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!
			* [http://css-infos.net/properties/webkit.php Alle Webkit-Properties]

	=== Attribut-Selektoren ===		=== Attribut-Selektoren ===
Line 276:		Line 277:
	* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!		* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!
	* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!		* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!
			* [http://css-infos.net/properties/webkit.php Alle Webkit-Properties]

	* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS		* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS

Mm: /* Ressourcen */

2010-05-14T00:49:08Z

Ressourcen

← Older revision		Revision as of 00:49, 14 May 2010
Line 273:		Line 273:
	* [http://css-technik.de/ CSS-Technik] - Tutorials, Ressourcen, Skripte		* [http://css-technik.de/ CSS-Technik] - Tutorials, Ressourcen, Skripte
	* [http://openbook.galileocomputing.de/kit/itkomp16002.htm#Rxx355kap16002040004031F02F100 Galileo OpenBook] (Kapitel CSS)		* [http://openbook.galileocomputing.de/kit/itkomp16002.htm#Rxx355kap16002040004031F02F100 Galileo OpenBook] (Kapitel CSS)
	* [http://www.css3.com/ css3 reference] - the newest techniques for modern browsers!
			* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!
			* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!

	* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS		* [http://code.google.com/p/zen-coding/ Zen-Coding] - Text-Expander for HTML/CSS

Mm: css3 info & links

2010-05-14T00:48:45Z

css3 info & links

← Older revision		Revision as of 00:48, 14 May 2010
Line 179:		Line 179:

	== Advanced CSS ==		== Advanced CSS ==
			=== CSS3 ===

			Die neuesten CSS-Funktionen für Browser der neuesten Generation bringen viele Erweiterungen, die das Gestalten mit CSS einfacher machen; angefangen von Schatten (text-shadow, box-shadow) bis hin zu mehrspaltigen Layouts:
			* [http://www.css3.info/ css3.info] - the newest techniques for modern browsers!
			* [http://www.css3.com/ css3.com reference] - the newest techniques for modern browsers!

	=== Attribut-Selektoren ===		=== Attribut-Selektoren ===