• Browser Kompabilität
  • Unterschiede CSS <-> HTML
  • Vorteile CSS
  • Was ist CSS?
  • Willkommen
  • CSS Beispiele

    • apfel.org
    • asien.org
    • Austauschschueler.de
    • Autokredit.de
    • balkonmöbel.net
    • billard-kicker.de
    • billardtisch.org
    • brettspiel.net
    • computerspiele.com
    • deko.net
    • Diät.de
    • domfolio.de
    • einrichtung.com
    • fahrraeder.org
    • gameaudio.net
    • gartengeraete.org
    • gartenhaus
    • geburtstagsgeschenke.net
    • gutscheindatenbank.de
    • Gutscheinpony.de
    • hifianlagen.net
    • Holz-im-Garten.de
    • hundeleine.com
    • jacken.org
    • kaffeeshop.net
    • kaffeevollautomat.de
    • kamera.org
    • Kinderbett.net
    • kinderwagen.org
    • kinofilme.org
    • kopfhörer.net
    • kopieren.net
    • kreditangebote.com
    • küche.org
    • Lacadena.de
    • landhausmode.biz
    • lichterkette.net
    • massageliegen.com
    • meingutscheincode.de
    • mietwagenmarkt.de
    • mobiltelefone.net
    • Modebrands.net
    • Moderatgeber.de
    • musiknews.net
    • navigationssysteme.com
    • notebook.org
    • prepaid-handy.org
    • schmuck.org
    • schrank.og
    • solaranlage.org
    • sommerurlaub.net
    • tftmonitore.de
    • tintenstrahldrucker.org
    • trachtenmode-dirndl.com
    • vasen.net
    • weihnachtsgeschenk.com
    • westerland.org
    • witzedatenbank.de
    • wunschkredit.org

Blog Related CSS

CSS Features, Downloads, Beispiele und vieles mehr

apfel.org

Die Seite apfel.org nutzt ein Wordpress-Design (Theme), das vom Themedesigner Solostream
(solostream.com) programmiert wurde. Das klassische und ansprechende Layout mit dem Namen „WP-Clear 1.0 Basic“ beruht auf mehreren CSS-Dateien, die alle relevanten Fakten zur richtigen Interpretation der Seite durch den Browser, festhalten.

Die einzelnen CSS-Dateien sind im Verzeichnis  themes/wp-clear-basic/ untergebracht, in der Datei style.css werden die wichtigsten Eigenschaften für das Layout definiert. In der Datei style.php file
können User-definierte Änderungen gespeichert werden und in style-2.css können individuelle Variationen festgehalten werden.

Betrachtet man die wichtige Datei style.css, dann erkennt man sofort, dass hier die Grunddaten des Themes abgespeichert sind: Die id #body {background:#fff; text-align: left; margin: 0; padding: 0; line-height: 1.5em; color:#000; font-size:9pt;font-family:arial,helvetica,sans-serif;} legt fest, dass die Seite über einen weissen Hintergrund mit schwarzer, linksbündiger Schrift der Größe 9pt und der Schriftfamilie Arial/ Helvetica verfügt. Die nächste id, #wrap definiert dann die ersten Formelemente des Themes: Der entsprechende Code #wrap {clear: both; margin: 0 auto; padding:10px; width:960px; background:#fff;}legt fest, dass die Seite direkt am oberen Rand des Bildschirmfensters dargestellt wird, dass die Inhalte auf einer Breite von 960 Pixel dargestellt werden und dass die Seitenabstände zum linken und rechten Browserfenster immer gleich sind. Zusätzlich wird definiert, dass alle Elemente einen Innenabstand von 10 px haben.

Weiter geht es dann im Code mit den Angaben #header, #content, #sidebar und #footer. Auch hier werden wieder die Basisinfos in der style.css festgehalten.

Im nächsten Teil der CSS-Datei (Headings) werden dann die Schriftgrößen und Farben für die Überschriften h1 bis h6 definiert. Danach folgen die Links und die Bilder. Bis zum Ende der relativ umfangreichen CSS-Datei werden noch viele unterschiedliche Eigenschaften, die für die Browser wichtig sind, beschrieben. Dabei hält sich der Programmierer immer an die für Wordpress  typischen Vorgaben. Lediglich in einem Detail, den „Tables“ greift er auf etwas ältere Codeelemente zurück.

Insgesamt ist das Theme „WP-Clear 1.0 Basic“ sehr gut programmiert und ermöglicht der Seite apfel.org mit all seinen Apple Produkten und News einen rundherum gelungenen Webauftritt.

Blog Related CSS