info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-12 01:34:19 +02:00
Code Issues Releases Wiki Activity

translated css to german

Browse Source
This commit is contained in:
kyr
2014-01-02 17:30:48 +01:00
parent 4fe001ec8a
commit fb72fe9256
1 changed files with 77 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
de-de/css-de.html.markdown
View File

@@ -72,155 +72,157 @@ kann - man sollte nur mit der leerzeichensetzung vorsichtig sein,
da es mit einem leerzeichen zwei verschiedene selektoren wären*/ da es mit einem leerzeichen zwei verschiedene selektoren wären*/
div.eine-klasse[attr$='rt'] { } /* so ist es richtig */ 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 */ /*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 */ /* oder jeder seiner eltern in der struktur */
/* the following basically means any element that has class "class-name" /* das folgende heißt also dass jedes element mit der klasse 'klassen-name' und dem
and is child of a div with class name "some-parent" IN ANY DEPTH */ elternteil IN JEDER TIEFE ausgewählt wird */
div.some-parent .class-name {} div.ein-elternteil .klassen-name {}
/* warning: the same selector wihout spaaace has another meaning. /* achtung: dasselbe ohne das leerzeichen hat eine andere bedeutung
can you say what? */ kannst du mir sagen, was? */
div.some-parent.class-name {} div.ein-elternteil.klassen-name {}
/* you also might choose to select an element based on it's direct /* man kann auch ein element nach seinem direkten vorherigen zwilling
previous sibling */ auswählen */
.i-am-before + .this-element { } .ich-bin-vorher + .dieses-element { }
/*or any sibling before this */ /*oder jeden zwilling davor */
.i-am-any-before ~ .this-element {} .ich-kann-jeder-davor-sein ~ .dieses-element {}
/* There are some pseudo classes that allows you to select an element /* es gibt ein paar pseudoklassen, die sich basierend auf dem
based on it's page behaviour (rather than page structure) */ 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 {} :hover {}
/* or a visited link*/ /* oder eine bereits besuchten link*/
:visited {} :visited {}
/* or not visited link*/ /* oder einen noch nicht besuchten link*/
:link {} :link {}
/* or an input element which is focused */ /* oder ein eingabeelement, das zurzeit im fokus steht */
:focus {} :focus {}
/* #################### /* ####################
## PROPERTIES ## EIGENSCHAFTEN
####################*/ ####################*/
selector { selector {
/* Units */ /* einheiten */
width: 50%; /* in percent */ width: 50%; /* in prozent */
font-size: 2em; /* times current font-size */ font-size: 2em; /* mal der derzeitigen schriftgröße */
width: 200px; /* in pixels */ width: 200px; /* in pixeln */
font-size: 20pt; /* in points */ font-size: 20pt; /* in punkten */
width: 5cm; /* in centimeters */ width: 5cm; /* in zentimetern */
width: 50mm; /* in millimeters */ width: 50mm; /* in millimetern */
width: 5in; /* in inches */ width: 5in; /* in zoll */
/* Colors */ /* farben */
background-color: #F6E /* in short hex */ background-color: #F6E /* in kurzem hex */
background-color: #F262E2 /* in long hex format */ background-color: #F262E2 /* in langem hex */
background-color: tomato /* can be a named color */ background-color: tomato /* kann auch eine genannte farbe sein */
background-color: rgb(255, 255, 255) /* in rgb */ background-color: rgb(255, 255, 255) /* in rgb */
background-color: rgb(10%, 20%, 50%) /* in rgb percent */ background-color: rgb(10%, 20%, 50%) /* in rgb prozent */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ background-color: rgba(255, 0, 0, 0.3); /* in semi-transparentem rgb */
/* Images */ /* bilder */
background-image: url(/path-to-image/image.jpg); background-image: url(/path-to-image/image.jpg);
/* Fonts */ /* schriften */
font-family: Arial; font-family: Arial;
font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ font-family: "Courier New"; /* wenn der name ein leerzeichen beinhält, kommt er in
font-family: "Courier New", Trebuchet, Arial; /* if first one was not found gänsefüßchen */
browser uses the second font, and so forth */ 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 ```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' /> <link rel='stylesheet' type='text/css' href='filepath/filename.css' />
<!-- you can also include some CSS inline in your markup. However it is highly <!-- es geht allerdings auch direkt, wobei diese methode nicht
recommended to avoid this. --> empfohlen ist -->
<style> <style>
selector { property:value; } selector { property:value; }
</style> </style>
<!-- or directly set CSS properties on the element. <!-- oder direkt am element (sollte aber gelassen werden) -->
This has to be avoided as much as you can. -->
<div style='property:value;'> <div style='property:value;'>
</div> </div>
``` ```
## Precedence ## Wichtigkeit
As you noticed an element may be targetted by more than one selector. ein element kann von mehr als einem selektoren angezielt werden.
and may have a property set on it in more than one. und kann auch eine eigenschaft mehr als einmal zugewiesen bekommen.
In these cases, one of the rules takes precedence over others. in diesen fällen gibt es regeln, die wichtigkeit von selektoren einführen.
Given the following CSS: wie haben dieses CSS:
```css ```css
/*A*/ /*A*/
p.class1[attr='value'] p.klasse1[attr='wert']
/*B*/ /*B*/
p.class1 {} p.klasse1 {}
/*C*/ /*C*/
p.class2 {} p.klasse2 {}
/*D*/ /*D*/
p {} p {}
/*E*/ /*E*/
p { property: value !important; } p { property: wert !important; }
``` ```
and the following markup: und das folgende markup:
```xml ```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value'> <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p> </p>
``` ```
The precedence of style is as followed: die wichtigkeit der stile ist wie folgt:
Remember, the precedence is for each **property**, not for the entire block. (die wichtigkeit gilt nur für **eigenschaften**, nicht für ganze blöcke)
* `E` has the highest precedence because of the keyword `!important`. * `E` hat die größte wichtigkeit wegen dem schlüsselwort `!important`.
It is recommended to avoid this unless it is strictly necessary to use. man sollte diese form aber vermeiden.
* `F` is next, because it is inline style. * `F` ist als nächstes, da es direkt an dem element definiert ist.
* `A` is next, because it is more "specific" than anything else. * `A` ist als nächstes, da es "spezifischer" als alle anderen ist.
more specific = more specifiers. here 3 specifiers: 1 tagname `p` + spezifischer = mehr zuweisungen: 1 tagname `p` +
class name `class1` + 1 attribute `attr='value'` klassenname `klasse1` + 1 attribut `attr='value'`
* `C` is next. although it has the same specificness as `B` * `C` ist als nächstes obwohl es genau so ist wie `B`
but it appears last. aber es erscheint als letztes.
* Then is `B` * dann ist `B`
* and lastly is `D`. * und als letztes `D`.
## Compatibility ## Kompabilität
Most of the features in CSS2 (and gradually in CSS3) are compatible across die meisten features von CSS sind in allen browsern verfügbar.
all browsers and devices. But it's always vital to have in mind the compatiblity man sollte jedoch immer darauf achten, wenn man etwas mit CSS
of what you use in CSS with your target browsers. 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/) * [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/) * [QuirksMode CSS](http://www.quirksmode.org/css/)