Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- webdesign:css [2009/11/12 23:57] – st
+++ webdesign:css [2013/12/12 13:37] (aktuell) – [Boxen mit (abgerundeten) Ecken] st
@@ Zeile 1: / Zeile 1: @@
+====== CSS ======
+[[wpde>CSS]] ist heute die Standard-Stylesheetsprache (d.h. Desginvorlagesprache) für das Web.
+Es ermöglicht eine Trennung des Layouts von anderen Elementen (Inhalt, Programmierung).
+  * **Einbindungsmöglichkeiten**: Formatanweisungen können per
+    - Browser-Standard
+    - **Externem** style sheet (.css-Datei <nowiki><link rel="stylesheet" media="screen" type="text/css" href="/wiki/lib/exe/css.php" /></nowiki>
+    - **Internes** style sheet (innerhalb des <head> tags)
+    - **Inline** (innerhalb eines HTML-Elements): höchste Priorität
+  * **Bausteine**
+    * **Element** (zeigt auf **einen** html-Tag z.B. kann man dem <p>-Tag mit z.B. p { margin-left: 100px; } gibt allen <p>-tags einen (100-Pixel) linken Einzug.
+    * **wiederverwendbare** **class** die Anweisung .name{Formatanweisungen} gibt allen <div class="name"> oder <em class="name"> die Formatanweisungen
+    * **Id** arbeitet wie die Klasse, darf aber nur **einmal** verwendet werden. z.B. <div id="footer"> bekommt die Formatanweisungen aus #footer{Formatanweisungen}
+===== Links =====
+  * [[http://edition-w3c.de/TR/1998/REC-CSS2-19980512/|Cascading Style Sheets, Level 2]]
+  * [[http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/|53 CSS-Techniques you couldn´t live without]]
+  * [[http://www.w3schools.com/css/|CSS Tutorial]]
+  * [[http://www.css4you.de/index.html|CSS 4 you]]
+  * [[http://de.selfhtml.org/css/|Selfhtml zu CSS]]
+  * [[http://friendlybit.com/css/beginners-guide-to-css-and-standards/|Beginners guide to CSS and standards]]
+  * [[http://friendlybit.com/css/how-to-structure-large-css-files/|How to structure large CSS files]]
+  * [[http://www.css4you.de/|deutschsprachige CSS-Referenz]]
+  * [[http://jigsaw.w3.org/css-validator/|W3 CSS-Validator]]
+  * [[http://www.validome.org/|Selfhtml Validator]]
+  * [[http://www.csszengarden.com/|CSSZenGarden]] - überzeugende CSS-Demonstration: eine Seite in 350 Designs betrachten durch einen sog. [[http://www.stichpunkt.de/css/switch.html|"Style Switcher"]].
+  * [[http://tom.me.uk/html-to-css/center-vertically.html|HTML to CSS: Center the page vertically and horizontally]]
+  * [[http://woorkup.com/2009/10/09/a-methodic-approach-to-css-coding-four-bubbles-model/|a methodic to css coding: four bubbles model]]
+  * [[http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html|Optimize browser rendering]]
+  * [[http://www.heise.de/ix/artikel/Allen-recht-1058764.html|Media Queries von CSS3 - Selektion von Stylesheets je nach Anzeigegerät]]
+===== CSS-Bugs und workarounds =====
+  * [[http://www.thenoodleincident.com/tutorials/box_lesson/workarounds.html|CSS-box-workarounds]]
+  * [[wpde>Conditional Comments]]
+  * [[http://www.heise.de/developer/CSS-Debugging-CSS-Hacks-versus-Conditional-Comments--/artikel/144149|CSS-Debugging: CSS-Hacks versus Conditional Comments]]
+  * [[http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/|Really simple CSS trick for equal height columns]]
+===== CSS-Templates =====
+  * [[http://intensivstation.ch/templates/|Dynamische basis  und Freeflux CSS TEMPLATES]]
+  * [[http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts|Perfect multi-column CSS liquid layouts - iPhone compatible]] - [[http://matthewjamestaylor.com/blog/perfect-3-column.htm|The Perfect 3 Column Liquid Layout]] (hab ich für die Seite verwendet)
+  * [[http://www.drweb.de/weblog/weblog/?p=701|Free CSS Layouts - Download]]
+  * [[http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/|Fixed width CSS Layout]] [[http://www.code-sucks.com/css%20layouts/faux-css-layouts/|Fixed width CSS Layout #2]]
+  * [[http://www.solucija.com/home/css-templates/|Free CSS/xHTML Templates]]
+  * [[http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html|CSS Box-Lessons]]
+  * [[http://blog.highresolution.info/index.php?/highresolution/comments/yaml_variationen_barrierefreiheit/|YAML Variationen & Barrierefreiheit]]
+==== CSS-Menus ====
+  * [[http://cssmenumaker.com/|anpassbare CSS Menus]]
+  * [[http://www.13styles.com/|CSS Menus @ 13styles]]
+  * [[http://www.cssplay.co.uk/menus/menu_builder_flyout.html|cssplay Menu Builder]]
+  * [[http://www.listulike.com/generator/|List-u-Like CSS Generator]]
+  * [[http://jscook.yuanheng.org/JSCookMenu/MenuBuilder.html#help|Menu Builder for JSCookMenu]]
+  * [[http://webstandard.kulando.de/post/2010/03/05/css3-transition-tutorial-menu-mit-slide-effekt-im-apple-style|CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style]]
+===== CSS Frameworks =====
+==== Yaml ====
+Yaml (Yet Another Multicolumn Layout) ist ein (X)HTML/CSS-[[wpde>Framework]].
+[[http://www.yaml.de/de/home.html|Robuste & Flexible Layouts einfach erstellen]]
+[[http://www.joomla-template-yaml.de/|Joomla! Template basierend auf dem YAML CSS-Framework]]
+[[http://yaml.t3net.de/|YAML in der Praxis einsetzen]]
+=== YAML und Typo3 ===
+  * [[http://yaml.t3net.de/|YAML in der Praxis einsetzen]]
+  * [[http://www.yaml.de/|YAML Homepage]]
+  * [[http://yaml.t3net.de/Newsdetails.31+M598087dec57.0.html|Beispieltemplate]]
+  * [[http://www.yaml.de/artikel/modifikation/grundvariationen.html|YAML Varianten]]
+===== Boxen mit (abgerundeten) Ecken =====
+  * [[http://www.cssplay.co.uk/boxes/snazzy.html|Snazzy Borders]]
+  * [[http://www.w3.org/Style/Examples/007/roundshadow.html|Rounded corners and shadowed boxes]]: Beispiel mit 5 Grafiken und recht Menu das stehen bleibt (ohne Frames).
+  * [[http://www.html.it/articoli/nifty/index.html|Nifty Corners]]
+===== Farbverläufe mit CSS =====
+[[http://www.css3factory.com/linear-gradients/|CSS Gradient Generator]]
+===== Tabellen =====
+[[http://friendlybit.com/css/style-tables-with-css/|Style tables with CSS]]
+===== Aufzählungen =====
+[[http://de.selfhtml.org/css/eigenschaften/listen.htm|Listenformatierung incl. Aufzählungszeichen]]