From 837eb79185828dbe1be55b667b90c22eeb8b27e9 Mon Sep 17 00:00:00 2001 From: kyr Date: Sat, 28 Dec 2013 02:15:25 +0100 Subject: added one half of the translated stuff --- de-de/css-de.html.markdown | 226 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 226 insertions(+) create mode 100644 de-de/css-de.html.markdown (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown new file mode 100644 index 00000000..0f186748 --- /dev/null +++ b/de-de/css-de.html.markdown @@ -0,0 +1,226 @@ +--- +language: css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] +translators: + - ["Kyr", "http://github.com/kyrami"] +lang: de-de +--- + +In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwickliung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. +CSS ist die allgemeine Sprache, die dazu da ist, damit man den HTML-Code und die Designelemente von Webseiten (strikt) unterscheiden kann. + +Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente anzuvisieren und ihnen stilistische Eigenschaften zu geben. + +CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist. + +**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich einen CSS-Playground wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. +In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet. + + +```css +/* kommentare werden in sternchen-schrägstrichkombinationen gepackt (genauso wie hier!) */ + +/* #################### + ## SELEKTOREN + ####################*/ + +/* Eigentlich ist die häufigste Anwendungsweise von CSS sehr simpel */ +selektor { eigenschaft: wert; /* mehr eigenschaften...*/ } + +/* der selektor wird dazu benutzt, ein element auf der seite anzuvisieren + +Aber man kann auch alle Elemente auf einer Seite anvisieren! */ +* { color:red; } /* farbe:rot */ + +/* +Wenn wir so ein Element auf einer Seite haben: + +
+*/ + +/* kann man es so bei seiner klasse anvisieren */ +.eine-klasse { } + +/*oder bei beiden klassen! */ +.eine-klasse.klasse2 { } + +/* oder beim namen des tags */ +div { } + +/* oder bei seiner id */ +#eineId { } + +/* oder daran, dass es ein Attribut hat! */ +[attr] { font-size:smaller; } + +/* oder daran, dass das attribut einen bestimmten wert hat*/ +[attr='wert'] { font-size:smaller; } + +/* beginnt mit einem wert*/ +[attr^='wert'] { font-size:smaller; } + +/* oder endet mit */ +[attr$='rt'] { font-size:smaller; } + +/* oder sogar nur beinhaltet */ +[attr~='er'] { font-size:smaller; } + + +/* was aber nich wichtiger ist, ist dass man alle diese kombinieren kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, da es mit einem leerzeichen zwei verschiedene selektoren wären*/ +div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ + +/* man kann auch ein element daran festmachen, wie sich die übergeordneten elemente verhalten!*/ + +/*es muss allerdings ein direktes kind sein */ +div.some-parent > .class-name {} + +/* or any of it's parents in the tree */ +/* the following basically means any element that has class "class-name" +and is child of a div with class name "some-parent" IN ANY DEPTH */ +div.some-parent .class-name {} + +/* warning: the same selector wihout spaaace has another meaning. +can you say what? */ +div.some-parent.class-name {} + +/* you also might choose to select an element based on it's direct +previous sibling */ +.i-am-before + .this-element { } + +/*or any sibling before this */ +.i-am-any-before ~ .this-element {} + +/* There are some pseudo classes that allows you to select an element +based on it's page behaviour (rather than page structure) */ + +/* for example for when an element is hovered */ +:hover {} + +/* or a visited link*/ +:visited {} + +/* or not visited link*/ +:link {} + +/* or an input element which is focused */ +:focus {} + + +/* #################### + ## PROPERTIES + ####################*/ + +selector { + + /* Units */ + width: 50%; /* in percent */ + font-size: 2em; /* times current font-size */ + width: 200px; /* in pixels */ + font-size: 20pt; /* in points */ + width: 5cm; /* in centimeters */ + width: 50mm; /* in millimeters */ + width: 5in; /* in inches */ + + /* Colors */ + background-color: #F6E /* in short hex */ + background-color: #F262E2 /* in long hex format */ + background-color: tomato /* can be a named color */ + background-color: rgb(255, 255, 255) /* in rgb */ + background-color: rgb(10%, 20%, 50%) /* in rgb percent */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ + + /* Images */ + background-image: url(/path-to-image/image.jpg); + + /* Fonts */ + font-family: Arial; + font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ + font-family: "Courier New", Trebuchet, Arial; /* if first one was not found + browser uses the second font, and so forth */ +} + +``` + +## Usage + +Save any CSS you want in a file with extension `.css`. + +```xml + + + + + + + +
+
+ +``` + +## Precedence + +As you noticed an element may be targetted by more than one selector. +and may have a property set on it in more than one. +In these cases, one of the rules takes precedence over others. + +Given the following CSS: + +```css +/*A*/ +p.class1[attr='value'] + +/*B*/ +p.class1 {} + +/*C*/ +p.class2 {} + +/*D*/ +p {} + +/*E*/ +p { property: value !important; } + +``` + +and the following markup: + +```xml +

+

+``` + +The precedence of style is as followed: +Remember, the precedence is for each **property**, not for the entire block. + +* `E` has the highest precedence because of the keyword `!important`. + It is recommended to avoid this unless it is strictly necessary to use. +* `F` is next, because it is inline style. +* `A` is next, because it is more "specific" than anything else. + more specific = more specifiers. here 3 specifiers: 1 tagname `p` + + class name `class1` + 1 attribute `attr='value'` +* `C` is next. although it has the same specificness as `B` + but it appears last. +* Then is `B` +* and lastly is `D`. + +## Compatibility + +Most of the features in CSS2 (and gradually in CSS3) are compatible across +all browsers and devices. But it's always vital to have in mind the compatiblity +of what you use in CSS with your target browsers. + +[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this. + +## Further Reading + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) + -- cgit v1.2.3 From 4fe001ec8a179bc3ade8eb529a1df1fb20baf740 Mon Sep 17 00:00:00 2001 From: kyr Date: Sat, 28 Dec 2013 02:17:04 +0100 Subject: spelling fixes --- de-de/css-de.html.markdown | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index 0f186748..e212e555 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -67,7 +67,9 @@ div { } [attr~='er'] { font-size:smaller; } -/* was aber nich wichtiger ist, ist dass man alle diese kombinieren kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, da es mit einem leerzeichen zwei verschiedene selektoren wären*/ +/* was aber noch wichtiger ist, ist dass man alle diese kombinieren +kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, +da es mit einem leerzeichen zwei verschiedene selektoren wären*/ div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ /* man kann auch ein element daran festmachen, wie sich die übergeordneten elemente verhalten!*/ -- cgit v1.2.3 From fb72fe9256a604a0e5dac164709b5ac24595e40d Mon Sep 17 00:00:00 2001 From: kyr Date: Thu, 2 Jan 2014 17:30:48 +0100 Subject: translated css to german --- de-de/css-de.html.markdown | 152 +++++++++++++++++++++++---------------------- 1 file changed, 77 insertions(+), 75 deletions(-) (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index e212e555..da6489ee 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -72,155 +72,157 @@ kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, da es mit einem leerzeichen zwei verschiedene selektoren wären*/ div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ -/* man kann auch ein element daran festmachen, wie sich die übergeordneten elemente verhalten!*/ +/* man kann auch ein element daran festmachen, wie sich die übergeordneten +elemente verhalten!*/ /*es muss allerdings ein direktes kind sein */ -div.some-parent > .class-name {} +div.ein-elternteil > .klassen-name {} -/* or any of it's parents in the tree */ -/* the following basically means any element that has class "class-name" -and is child of a div with class name "some-parent" IN ANY DEPTH */ -div.some-parent .class-name {} +/* oder jeder seiner eltern in der struktur */ +/* das folgende heißt also dass jedes element mit der klasse 'klassen-name' und dem +elternteil IN JEDER TIEFE ausgewählt wird */ +div.ein-elternteil .klassen-name {} -/* warning: the same selector wihout spaaace has another meaning. -can you say what? */ -div.some-parent.class-name {} +/* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung +kannst du mir sagen, was? */ +div.ein-elternteil.klassen-name {} -/* you also might choose to select an element based on it's direct -previous sibling */ -.i-am-before + .this-element { } +/* man kann auch ein element nach seinem direkten vorherigen zwilling +auswählen */ +.ich-bin-vorher + .dieses-element { } -/*or any sibling before this */ -.i-am-any-before ~ .this-element {} +/*oder jeden zwilling davor */ +.ich-kann-jeder-davor-sein ~ .dieses-element {} -/* There are some pseudo classes that allows you to select an element -based on it's page behaviour (rather than page structure) */ +/* es gibt ein paar pseudoklassen, die sich basierend auf dem +seitenverhalten, nämlich nicht auf der seitenstruktur auswählen +lassen können */ -/* for example for when an element is hovered */ +/* zum beispiel, wenn über ein element mit dem mauszeiger gefahren wird */ :hover {} -/* or a visited link*/ +/* oder eine bereits besuchten link*/ :visited {} -/* or not visited link*/ +/* oder einen noch nicht besuchten link*/ :link {} -/* or an input element which is focused */ +/* oder ein eingabeelement, das zurzeit im fokus steht */ :focus {} /* #################### - ## PROPERTIES + ## EIGENSCHAFTEN ####################*/ selector { - /* Units */ - width: 50%; /* in percent */ - font-size: 2em; /* times current font-size */ - width: 200px; /* in pixels */ - font-size: 20pt; /* in points */ - width: 5cm; /* in centimeters */ - width: 50mm; /* in millimeters */ - width: 5in; /* in inches */ + /* einheiten */ + width: 50%; /* in prozent */ + font-size: 2em; /* mal der derzeitigen schriftgröße */ + width: 200px; /* in pixeln */ + font-size: 20pt; /* in punkten */ + width: 5cm; /* in zentimetern */ + width: 50mm; /* in millimetern */ + width: 5in; /* in zoll */ - /* Colors */ - background-color: #F6E /* in short hex */ - background-color: #F262E2 /* in long hex format */ - background-color: tomato /* can be a named color */ + /* farben */ + background-color: #F6E /* in kurzem hex */ + background-color: #F262E2 /* in langem hex */ + background-color: tomato /* kann auch eine genannte farbe sein */ background-color: rgb(255, 255, 255) /* in rgb */ - background-color: rgb(10%, 20%, 50%) /* in rgb percent */ - background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ + background-color: rgb(10%, 20%, 50%) /* in rgb prozent */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem rgb */ - /* Images */ + /* bilder */ background-image: url(/path-to-image/image.jpg); - /* Fonts */ + /* schriften */ font-family: Arial; - font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ - font-family: "Courier New", Trebuchet, Arial; /* if first one was not found - browser uses the second font, and so forth */ + font-family: "Courier New"; /* wenn der name ein leerzeichen beinhält, kommt er in + gänsefüßchen */ + font-family: "Courier New", Trebuchet, Arial; /* wenn der erste nicht gefunden wird, wird + der zweite benutzt und so weiter */ } ``` -## Usage +## Benutzung -Save any CSS you want in a file with extension `.css`. +speichere das css, das du benutzen willst mit der endung '.css'. ```xml - + - + - +
``` -## Precedence +## Wichtigkeit -As you noticed an element may be targetted by more than one selector. -and may have a property set on it in more than one. -In these cases, one of the rules takes precedence over others. +ein element kann von mehr als einem selektoren angezielt werden. +und kann auch eine eigenschaft mehr als einmal zugewiesen bekommen. +in diesen fällen gibt es regeln, die wichtigkeit von selektoren einführen. -Given the following CSS: +wie haben dieses CSS: ```css /*A*/ -p.class1[attr='value'] +p.klasse1[attr='wert'] /*B*/ -p.class1 {} +p.klasse1 {} /*C*/ -p.class2 {} +p.klasse2 {} /*D*/ p {} /*E*/ -p { property: value !important; } +p { property: wert !important; } ``` -and the following markup: +und das folgende markup: ```xml

``` -The precedence of style is as followed: -Remember, the precedence is for each **property**, not for the entire block. +die wichtigkeit der stile ist wie folgt: +(die wichtigkeit gilt nur für **eigenschaften**, nicht für ganze blöcke) -* `E` has the highest precedence because of the keyword `!important`. - It is recommended to avoid this unless it is strictly necessary to use. -* `F` is next, because it is inline style. -* `A` is next, because it is more "specific" than anything else. - more specific = more specifiers. here 3 specifiers: 1 tagname `p` + - class name `class1` + 1 attribute `attr='value'` -* `C` is next. although it has the same specificness as `B` - but it appears last. -* Then is `B` -* and lastly is `D`. +* `E` hat die größte wichtigkeit wegen dem schlüsselwort `!important`. + man sollte diese form aber vermeiden. +* `F` ist als nächstes, da es direkt an dem element definiert ist. +* `A` ist als nächstes, da es "spezifischer" als alle anderen ist. + spezifischer = mehr zuweisungen: 1 tagname `p` + + klassenname `klasse1` + 1 attribut `attr='value'` +* `C` ist als nächstes obwohl es genau so ist wie `B` + aber es erscheint als letztes. +* dann ist `B` +* und als letztes `D`. -## Compatibility +## Kompabilität -Most of the features in CSS2 (and gradually in CSS3) are compatible across -all browsers and devices. But it's always vital to have in mind the compatiblity -of what you use in CSS with your target browsers. +die meisten features von CSS sind in allen browsern verfügbar. +man sollte jedoch immer darauf achten, wenn man etwas mit CSS +programmiert. -[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this. +[QuirksMode CSS](http://www.quirksmode.org/css/) ist eine der besten quellen dafür. -## Further Reading +## Weiterlesen * [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) * [QuirksMode CSS](http://www.quirksmode.org/css/) -- cgit v1.2.3 From f13427127597c966417a8e5e00f4c0f2788f4486 Mon Sep 17 00:00:00 2001 From: kyr Date: Thu, 2 Jan 2014 17:38:25 +0100 Subject: spelling, punctuation and more translation --- de-de/css-de.html.markdown | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index da6489ee..e03b3174 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -14,7 +14,7 @@ Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente anzuvisieren und ihn CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist. -**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich einen CSS-Playground wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. +**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet. @@ -79,11 +79,11 @@ elemente verhalten!*/ div.ein-elternteil > .klassen-name {} /* oder jeder seiner eltern in der struktur */ -/* das folgende heißt also dass jedes element mit der klasse 'klassen-name' und dem -elternteil IN JEDER TIEFE ausgewählt wird */ +/* das folgende heißt also, dass jedes element mit der klasse 'klassen-name' +und dem elternteil IN JEDER TIEFE ausgewählt wird */ div.ein-elternteil .klassen-name {} -/* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung +/* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung, kannst du mir sagen, was? */ div.ein-elternteil.klassen-name {} @@ -91,7 +91,7 @@ div.ein-elternteil.klassen-name {} auswählen */ .ich-bin-vorher + .dieses-element { } -/*oder jeden zwilling davor */ +/* oder jeden zwilling davor */ .ich-kann-jeder-davor-sein ~ .dieses-element {} /* es gibt ein paar pseudoklassen, die sich basierend auf dem @@ -101,7 +101,7 @@ lassen können */ /* zum beispiel, wenn über ein element mit dem mauszeiger gefahren wird */ :hover {} -/* oder eine bereits besuchten link*/ +/* oder einen bereits besuchten link*/ :visited {} /* oder einen noch nicht besuchten link*/ @@ -135,14 +135,14 @@ selector { background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem rgb */ /* bilder */ - background-image: url(/path-to-image/image.jpg); + background-image: url(/pfad-zum-bild/image.jpg); /* schriften */ font-family: Arial; font-family: "Courier New"; /* wenn der name ein leerzeichen beinhält, kommt er in - gänsefüßchen */ + apostrophe */ font-family: "Courier New", Trebuchet, Arial; /* wenn der erste nicht gefunden wird, wird - der zweite benutzt und so weiter */ + der zweite benutzt, und so weiter */ } ``` @@ -171,7 +171,7 @@ empfohlen ist --> ein element kann von mehr als einem selektoren angezielt werden. und kann auch eine eigenschaft mehr als einmal zugewiesen bekommen. -in diesen fällen gibt es regeln, die wichtigkeit von selektoren einführen. +in diesen fällen gibt es regeln, die die wichtigkeit von selektoren einführen. wie haben dieses CSS: -- cgit v1.2.3 From 0b2a283db4bc622aaca3c23daa3c39dfd9297db1 Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 29 Jan 2014 23:30:28 -0800 Subject: Updated a lot of filenames --- de-de/css-de.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index e03b3174..8909b251 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -5,6 +5,7 @@ contributors: translators: - ["Kyr", "http://github.com/kyrami"] lang: de-de +filename: learncss-de.css --- In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwickliung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. -- cgit v1.2.3 From c3dc01418092cc13e13ce0c81da2c8ef7208f228 Mon Sep 17 00:00:00 2001 From: m90 Date: Sun, 21 Sep 2014 10:57:16 +0200 Subject: fix lots of typos, weird phrasings and translation errors --- de-de/css-de.html.markdown | 179 ++++++++++++++++++++++----------------------- 1 file changed, 89 insertions(+), 90 deletions(-) (limited to 'de-de/css-de.html.markdown') diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown index 8909b251..23c1df94 100644 --- a/de-de/css-de.html.markdown +++ b/de-de/css-de.html.markdown @@ -8,107 +8,106 @@ lang: de-de filename: learncss-de.css --- -In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwickliung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. -CSS ist die allgemeine Sprache, die dazu da ist, damit man den HTML-Code und die Designelemente von Webseiten (strikt) unterscheiden kann. +In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwicklung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard. +Durch Verwendung von CSS lässt sich eine strikte Trennung zwischen HTML-Code und Designelementen erreichen. -Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente anzuvisieren und ihnen stilistische Eigenschaften zu geben. +Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente innerhalb eines Dokuments auszuwählen und ihnen visuelle Eigenschaften zu geben. CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist. -**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. +**HINWEIS:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich eine CSS-Sandbox wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen. In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet. ```css -/* kommentare werden in sternchen-schrägstrichkombinationen gepackt (genauso wie hier!) */ +/* Kommentare werden in Sternchen-Schrägstrichkombinationen gepackt (genauso wie hier!) */ /* #################### ## SELEKTOREN ####################*/ -/* Eigentlich ist die häufigste Anwendungsweise von CSS sehr simpel */ +/* Eigentlich ist das grundlegende CSS-Statement sehr simpel */ selektor { eigenschaft: wert; /* mehr eigenschaften...*/ } -/* der selektor wird dazu benutzt, ein element auf der seite anzuvisieren +/* Der Selektor wird dazu benutzt, ein Element auf der Seite auszuwählen. -Aber man kann auch alle Elemente auf einer Seite anvisieren! */ +Man kann aber auch alle Elemente auf einer Seite auswählen! */ * { color:red; } /* farbe:rot */ /* -Wenn wir so ein Element auf einer Seite haben: +Angenommen wir haben folgendes Element auf einer Seite:
*/ -/* kann man es so bei seiner klasse anvisieren */ +/* kann man es so über seine Klasse auswählen */ .eine-klasse { } -/*oder bei beiden klassen! */ +/* oder über beide Klassen! */ .eine-klasse.klasse2 { } -/* oder beim namen des tags */ +/* oder über den Namen des Tags */ div { } -/* oder bei seiner id */ +/* oder über seine Id */ #eineId { } -/* oder daran, dass es ein Attribut hat! */ +/* oder darüber, dass es ein Attribut hat! */ [attr] { font-size:smaller; } -/* oder daran, dass das attribut einen bestimmten wert hat*/ +/* oder auch darüber, dass das Attribut einen bestimmten Wert hat */ [attr='wert'] { font-size:smaller; } -/* beginnt mit einem wert*/ -[attr^='wert'] { font-size:smaller; } +/* beginnt mit dem übergebenen Wert */ +[attr^='we'] { font-size:smaller; } -/* oder endet mit */ +/* endet damit */ [attr$='rt'] { font-size:smaller; } -/* oder sogar nur beinhaltet */ +/* oder beinhaltet einen Teil davon */ [attr~='er'] { font-size:smaller; } -/* was aber noch wichtiger ist, ist dass man alle diese kombinieren -kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, -da es mit einem leerzeichen zwei verschiedene selektoren wären*/ +/* Noch wichtiger ist aber die Möglichkeit, all das miteinander kombinieren +zu können - man sollte hierbei nur mit der Leerzeichensetzung vorsichtig sein, +ein Leerzeichen macht es zu zwei verschiedenen Selektoren */ + div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ -/* man kann auch ein element daran festmachen, wie sich die übergeordneten -elemente verhalten!*/ +/* Man kann auch ein Element über seine Elternelemente auswählen */ -/*es muss allerdings ein direktes kind sein */ +/* > wählt ein direktes Kind aus */ div.ein-elternteil > .klassen-name {} -/* oder jeder seiner eltern in der struktur */ -/* das folgende heißt also, dass jedes element mit der klasse 'klassen-name' -und dem elternteil IN JEDER TIEFE ausgewählt wird */ +/* Mit einem Leerzeichen getrennt kann man alle Elternelemente ansprechen */ +/* Das folgende heißt also, dass jedes Element mit der Klasse 'klassen-name' +und dem Elternteil IN JEDER TIEFE ausgewählt wird */ div.ein-elternteil .klassen-name {} -/* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung, +/* Achtung: das selbe ohne das Leerzeichen hat eine andere Bedeutung, kannst du mir sagen, was? */ div.ein-elternteil.klassen-name {} -/* man kann auch ein element nach seinem direkten vorherigen zwilling +/* Man kann ein Element auch nach seinem direkten Nachbarelement auswählen */ .ich-bin-vorher + .dieses-element { } -/* oder jeden zwilling davor */ +/* Oder über jedes Geschwisterelement davor */ .ich-kann-jeder-davor-sein ~ .dieses-element {} -/* es gibt ein paar pseudoklassen, die sich basierend auf dem -seitenverhalten, nämlich nicht auf der seitenstruktur auswählen -lassen können */ +/* Mit Pseudoklassen lassen sich Elemente anhand ihres momentanen Zustands +auf der Seite auswählen (anstatt über die Seitenstruktur) */ -/* zum beispiel, wenn über ein element mit dem mauszeiger gefahren wird */ +/* Zum Beispiel, wenn über ein Element mit dem Mauszeiger gefahren wird */ :hover {} -/* oder einen bereits besuchten link*/ +/* Oder einen bereits besuchten Link*/ :visited {} -/* oder einen noch nicht besuchten link*/ +/* Oder einen noch nicht besuchten Link*/ :link {} -/* oder ein eingabeelement, das zurzeit im fokus steht */ +/* Oder ein Eingabeelement, das zurzeit im Fokus steht */ :focus {} @@ -117,64 +116,64 @@ lassen können */ ####################*/ selector { - - /* einheiten */ - width: 50%; /* in prozent */ - font-size: 2em; /* mal der derzeitigen schriftgröße */ - width: 200px; /* in pixeln */ - font-size: 20pt; /* in punkten */ - width: 5cm; /* in zentimetern */ - width: 50mm; /* in millimetern */ - width: 5in; /* in zoll */ - - /* farben */ - background-color: #F6E /* in kurzem hex */ - background-color: #F262E2 /* in langem hex */ - background-color: tomato /* kann auch eine genannte farbe sein */ - background-color: rgb(255, 255, 255) /* in rgb */ - background-color: rgb(10%, 20%, 50%) /* in rgb prozent */ - background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem rgb */ - - /* bilder */ + + /* Einheiten */ + width: 50%; /* in Prozent */ + font-size: 2em; /* mal der derzeitigen Schriftgröße */ + width: 200px; /* in Pixeln */ + font-size: 20pt; /* in Punkten */ + width: 5cm; /* in Zentimetern */ + width: 50mm; /* in Millimetern */ + width: 5in; /* in Zoll */ + + /* Farben */ + background-color: #F6E /* in kurzem Hex */ + background-color: #F262E2 /* in langem Hex */ + background-color: tomato /* kann auch eine benannte Farbe sein */ + background-color: rgb(255, 255, 255) /* in RGB */ + background-color: rgb(10%, 20%, 50%) /* in RGB Prozent */ + background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem RGB */ + + /* Bilder */ background-image: url(/pfad-zum-bild/image.jpg); - - /* schriften */ + + /* Schriften */ font-family: Arial; - font-family: "Courier New"; /* wenn der name ein leerzeichen beinhält, kommt er in - apostrophe */ - font-family: "Courier New", Trebuchet, Arial; /* wenn der erste nicht gefunden wird, wird - der zweite benutzt, und so weiter */ + font-family: "Courier New"; /* wenn der Name ein Leerzeichen beinhält, kommt er in + Anführungszeichen */ + font-family: "Courier New", Trebuchet, Arial; /* wird die erste Schriftart + nicht gefunden, wird die zweite benutzt, usw. */ } ``` ## Benutzung -speichere das css, das du benutzen willst mit der endung '.css'. +Speichere das CSS, das du benutzen willst mit der endung '.css'. ```xml - + - - +
``` -## Wichtigkeit +## Spezifität -ein element kann von mehr als einem selektoren angezielt werden. -und kann auch eine eigenschaft mehr als einmal zugewiesen bekommen. -in diesen fällen gibt es regeln, die die wichtigkeit von selektoren einführen. +Ein Element kann natürlich auch von mehr als einer Regel in einem Stylesheet +angesprochen werdenm und kann eine Eigenschaft auch öfters als einmal zugewiesen +bekommen. In diesen Fällen gibt es Regeln, die die Spezifität von Selektoren regeln. -wie haben dieses CSS: +Wir haben dieses CSS: ```css /*A*/ @@ -194,34 +193,34 @@ p { property: wert !important; } ``` -und das folgende markup: +und das folgende Markup: ```xml

``` -die wichtigkeit der stile ist wie folgt: -(die wichtigkeit gilt nur für **eigenschaften**, nicht für ganze blöcke) - -* `E` hat die größte wichtigkeit wegen dem schlüsselwort `!important`. - man sollte diese form aber vermeiden. -* `F` ist als nächstes, da es direkt an dem element definiert ist. -* `A` ist als nächstes, da es "spezifischer" als alle anderen ist. - spezifischer = mehr zuweisungen: 1 tagname `p` + - klassenname `klasse1` + 1 attribut `attr='value'` -* `C` ist als nächstes obwohl es genau so ist wie `B` - aber es erscheint als letztes. -* dann ist `B` +Die Spezifität der Stile ist wie folgt: +(die Spezifität gilt nur für **einzelne Eigenschaften**, nicht für ganze Blöcke) + +* `E` hat die größte Spezifität wegen dem Schlüsselwort `!important`. + man sollte diese Form aber vermeiden. +* `F` ist als nächstes dran, da es direkt an dem element definiert ist. +* Dann folgt `A`, da es "spezifischer" als alle anderen ist. + spezifischer = mehr Zuweisungen: 1 Tagname `p` + + Klassenname `klasse1` + 1 Attribut `attr='value'` +* `C` kommt als nächstes, obwohl es genau so ist wie `B`, + es erscheint aber später im Stylesheet. +* dann kommt `B` * und als letztes `D`. -## Kompabilität +## Kompatibilität -die meisten features von CSS sind in allen browsern verfügbar. -man sollte jedoch immer darauf achten, wenn man etwas mit CSS -programmiert. +Die meisten Features von CSS sind in allen Browsern verfügbar. Man sollte +jedoch immer darauf achten die benutzten Features auf Verfügbarkeit in den +vom Projekt unterstützten Browser zu überprüfen. -[QuirksMode CSS](http://www.quirksmode.org/css/) ist eine der besten quellen dafür. +[QuirksMode CSS](http://www.quirksmode.org/css/) oder [Can I Use](http://caniuse.com/) sind zwei der besten Quellen dafür. ## Weiterlesen -- cgit v1.2.3