====== 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]]