diff options
Diffstat (limited to 'de-de')
| -rw-r--r-- | de-de/css-de.html.markdown | 179 | ||||
| -rw-r--r-- | de-de/markdown-de.html.markdown | 256 |
2 files changed, 345 insertions, 90 deletions
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: <div class='eine-klasse klasse2' id='eineId' attr='wert' /> */ -/* 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 -<!-- du musst die css-datei im <head>-bereich der seite erwähnen --> +<!-- du musst die CSS-Datei im <head>-bereich der seite einbinden --> <link rel='stylesheet' type='text/css' href='filepath/filename.css' /> -<!-- es geht allerdings auch direkt, wobei diese methode nicht +<!-- Einbindung funktioniert auch inline, wobei diese Methode nicht empfohlen ist --> <style> selector { property:value; } </style> -<!-- oder direkt am element (sollte aber gelassen werden) --> +<!-- Oder direkt auf einem Element (sollte aber vermieden werden) --> <div style='property:value;'> </div> ``` -## 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 <p style='/*F*/ property:value;' class='class1 class2' attr='value'> </p> ``` -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 diff --git a/de-de/markdown-de.html.markdown b/de-de/markdown-de.html.markdown new file mode 100644 index 00000000..6a90980b --- /dev/null +++ b/de-de/markdown-de.html.markdown @@ -0,0 +1,256 @@ +--- +language: markdown +contributors: + - ["Dan Turkel", "http://danturkel.com/"] +translators : + - ["Frederik Ring", "https://github.com/m90"] + - ["Philipp Fischbeck", "https://github.com/PFischbeck"] +filename: markdown-de.md +lang: de-de +--- + +Markdown wurde im Jahr 2004 von John Gruber kreiert. Ziel ist und war eine +Syntax, in der sich Dokumente leicht schreiben *und* lesen lassen. Außerdem +sollte Markdown sich leicht nach HTML (und in andere Formate) konvertieren +lassen. + +```markdown +<!-- Markdown ist eine Obermenge von HTML - jede valide HTML-Datei ist also +automatisch valides Markdown - was heisst dass wir jedes HTML-Element (also auch +Kommentare) in Markdown benutzen können, ohne dass der Parser sie verändert. +Jedoch kann man innerhalb eines solchen HTML-Elements dann kein Markdown +mehr verwenden. --> + +<!-- Es existieren unterschiedliche Markdown-Parser und -Dialekte, die sich in +manchen Punkten unterscheiden. Diese Einführung wird versuchen, zu erläutern, +welche Features überall verfügbar sind, und welche davon parser-spezifisch sind --> + +<!-- Überschriften --> +<!-- HTML-Überschriften <h1> bis <h6> lassen sich einfach durch ein Voranstellen +der entsprechenden Anzahl an Hashes (#) auszeichnen --> +# Das ist eine <h1> +## Das ist eine <h2> +### Das ist eine <h3> +#### Das ist eine <h4> +##### Das ist eine <h5> +###### Das ist eine <h6> + +<!-- Für die Elemente <h1> und <h2> gibt es in Markdown noch Sonderformen --> +Das ist eine h1 +============= + +Das ist eine h2 +------------- + +<!-- Einfaches Textstyling --> +<!-- Jeglicher Text lässt sich mit Markdown leicht als kursiv oder +auch als fett auszeichnen --> + +*Dieser Text ist kursiv.* +_Genau wie dieser._ + +**Dieser Text ist fett.** +__Genau wie dieser.__ + +***Dieser Text ist beides*** +**_Dieser auch!_** +*__Und dieser genau so!__* + +<!-- In "Github Flavored Markdown", dem von Github verwendeten Dialekt / Parser, +gibt es auch noch durchgestrichenen Text: --> + +~~Dieser Text wird durchgestrichen dargestellt.~~ + +<!-- Absätze sind eine oder mehrere zusammenhängende Zeilen Text, und werden +durch eine oder mehrere Leerzeilen voneinander abgesetzt. --> + +Das ist ein Absatz. Ich kann immer noch nicht glauben, wie viel Spaß das macht !?! + +Jetzt bin ich schon bei Absatz 2. +Hier ist dann immer noch Absatz 2! + + +Jetzt ist das dann Nummer drei! + +<!-- Sollte man jemals ein <br />-Tag einfügen wollen, kann man einen Absatz +mit zwei oder mehr Leerzeichen beenden, und danach einen neuen Absatz beginnen. --> + +Ich höre mit zwei Leerzeichen auf (markiere mich, und du siehst es). + +Über mir ist wohl ein <br />! + +<!-- Zitate werden ganz einfach mit einem > ausgezeichnet. --> + +> Das ist ein Zitat. Du kannst Zeilenumbrüche +> entweder manuell hinzufügen und ein `>` vor jeder Zeile einfügen, oder du kannst deine Zeilen einfach immer länger und länger werden lassen, die Umbrüche werden dann automatisch erzeugt. +> Solange sie mit einem `>` beginnen, macht das keinen Unterschied. + +> Auch möglich ist es, den Text +>> mehrstufig einzurücken. +> Nicht schlecht, oder? + +<!-- Listen --> +<!-- <ul>s können mit Sternen, Pluszeichen oder Minuszeichen erzeugt werden --> + +* Punkt auf der Liste +* Punkt auf der Liste +* Anderer Punkt auf der Liste + +oder + ++ Punkt auf der Liste ++ Punkt auf der Liste ++ Noch ein Punkt auf der Liste + +oder + +- Punkt auf der Liste +- Punkt auf der Liste +- Ein letzter Punkt auf der Liste + +<!-- <ol>s werden mit einer Zahl gefolgt von einem Punkt erzeugt --> + +1. Punkt eins +2. Punkt zwei +3. Punkt drei + +<!-- Auch wenn es keine gute Idee sein mag: du müsstest die einzelnen Punkte +nicht mal korrekt numerieren --> + +1. Punkt eins +1. Punkt zwei +1. Punkt drei +<!-- (Das sieht genau so aus wie das Beispiel eins weiter oben) --> + +<!-- Man kann Listen auch verschachteln --> + +1. Punkt eins +2. Punkt zwei +3. Punkt drei + * Unterpunkt + * Unterpunkt +4. Punkt vier + +<!-- Code-Blöcke --> +<!-- Blöcke von Programmcode (also ein <code>-Element) kannst du auszeichnen, +indem du eine Zeile mit vier Leerzeichen oder einem Tabulator einrückst --> + + Das ist Quellcode + Das hier auch + +<!-- Der Code kann natürlich auch wiederum eingerückt sein --> + + my_array.each do |item| + puts item + end + +<!-- Innerhalb normalen Texts kannst du Code mit Backticks ` auszeichnen --> + +Hermann hatte nicht die leiseste Ahnung, was dieses `go_to()` bedeuten könnte! + +<!-- In "Github Flavored Markdown" gibt es für Code nocheinmal eine +besondere Syntax --> + +\`\`\`ruby <!-- in "echt" musst du die Backslashes entfernen: ```ruby ! --> +def foobar + puts "Hallo Welt!" +end +\`\`\` <!-- hier auch keine Backslashes, nur ``` --> + +<-- der obige Block muss nicht extra eingerückt werden, außerdem fügt Github +Syntax-Highlighting für die nach dem ``` angegebene Sprache hinzu --> + +<!-- Horizontale Linie (<hr />) --> +<!-- Trenner lassen sich einfach mit drei (oder mehr) Sternen oder Bindestrichen +erzeugen (egal ob mit oder ohne Leerzeichen dazwischen)--> + +*** +--- +- - - +**************** + +<!-- Hyperlinks --> +<!-- Eines der besten Features von Markdown ist das kinderleichte Erzeugen von +Hyperlinks: Einfach den Linktext in eckige Klammern [] setzen, gefolgt von +einer mit runden Klammern () umschlossenen URL. --> + +[Klick mich!](http://test.de/) + +<!-- Man kann dem Link auch noch ein title-Attribut geben --> + +[Klick mich!](http://test.at/ "Link zu Test.at") + +<!-- Relative Pfade funktionieren natürlich auch --> + +[Zu meiner Musiksammlung](/music/). + +<!-- URLs lassen sich auch über Referenzen festlegen --> + +[Klick mich][link1], um mehr über mich herauszufinden! +[Hier kannst du auch mal draufklicken][foobar], wenn es dich interessiert. + +[link1]: http://test.de/ "Wahnsinn!" +[foobar]: http://foobar.ch/ "Erstaunlich!" + +<!-- Das title-Attribut wird entweder mit Anführungszeichen oder Klammern +umschlossen (oder gleich ganz weggelassen). Die Referenzen können an jeder +Stelle im gesamtem Dokument vorkommen, als ID kann alles verwendet werden, solange +es dokumentweit eindeutig ist. --> + +<!-- Man kann den Linktext auch als implizite Referenz benutzen --> + +[Das][] ist ein Link. + +[das]: http://dasisteinlink.at/ + +<!-- Das ist aber eher unüblich. --> + +<!-- Bilder --> +<!-- Bilder funktionieren genau wie Links, nur dass man noch ein Ausrufezeichen +voranstellt! --> + + + +<!-- Referenzen funktionieren auch hier genau wie erwartet --> + +![Das ist das alt-Attribut][meinbild] + +[meinbild]: relative/urls/gehen/auch.jpg "hier wäre noch Platz für einen title" + +<!-- Bonusfeatures --> +<!-- Auto-Links --> + +<http://testwebseite.de/> ist das selbe wie +[http://testwebseite.de/](http://testwebseite.de/) + +<!-- Automatische Links für E-Mail-Addressen --> + +<foo@bar.com> + +<!-- Maskieren --> + +Ich würde *diesen Teil gerne mit Sternen umschließen*, doch ohne dass er kursiv +wird. Also mache ich folgendes: \*Ich umschließe diesen Text mit Sternen\*! + +<!-- Tabellen --> +<!-- Tabellen gibt es bis jetzt nur in "Github Flavored Markdown". +Zudem sind sie ziemlich mühselig, aber wenn du es wirklich wissen willst: --> + +| Spalte1 | Spalte2 | Spalte3 | +| :----------- | :------: | ------------: | +| linksbündig | mittig | rechtsbündig | +| blah | blah | blah | + +<!-- oder das selbe in grün: --> + +Spalte1 | Spalte2 | Spalte3 +:-- | :-: | --: +Ganz schön hässlich | vielleicht doch lieber | wieder aufhören + +<!-- Das war's! --> + +``` + +Mehr Informationen gibt es in [John Gruber's offiziellem Blog-Post](http://daringfireball.net/projects/markdown/syntax) +und bei Adam Pritchards [grandiosem Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). +Infos zu Github Flavored Markdown [gibt es hier](https://help.github.com/articles/github-flavored-markdown).
\ No newline at end of file |