summaryrefslogtreecommitdiffhomepage
path: root/de-de
diff options
context:
space:
mode:
Diffstat (limited to 'de-de')
-rw-r--r--de-de/css-de.html.markdown152
1 files changed, 77 insertions, 75 deletions
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
-<!-- you need to include the css file in your page's <head>: -->
+<!-- du musst die css-datei im <head>-bereich der seite erwähnen -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
-<!-- you can also include some CSS inline in your markup. However it is highly
-recommended to avoid this. -->
+<!-- es geht allerdings auch direkt, wobei diese methode nicht
+empfohlen ist -->
<style>
selector { property:value; }
</style>
-<!-- or directly set CSS properties on the element.
-This has to be avoided as much as you can. -->
+<!-- oder direkt am element (sollte aber gelassen werden) -->
<div style='property:value;'>
</div>
```
-## 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
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
```
-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/)