• 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

Asien.org

Die Webseite asien.org ist eine schön gestaltete Webseite zum Themenkreis „Asien“, die die Blogsoftware „Wordpress“ nutzt um die Inhalte der Webseite im Browser darzustellen. Doch die meisten Surfer, die auf dieser Seite landen, werden dieses Detail wohl kaum merken, denn mit einem der klassischen Blogs hat die asien.org wohl kaum etwas zu tun.

Warum asien.org aber – obwohl es sich ganz offensichtlich nicht um ein Blog handelt - dennoch unter Wordpress läuft? Ganz einfach: Wordpress wird – obwohl ursprünglich nur für die Verwendung in Blogs gedacht – heute sehr gerne auch als CMS (Contentmanagementsystem) verwendet. Denn seit Wordpress 2.0 unterstützt dieses Script auch den Aufbau und die Verwaltung von statischen Seiten.

Wie die meisten Seiten, die unter Wordpress laufen, verwendet daher auch asien.org ein „Theme“ um die Inhalte der Seite optisch so zu präsentieren, wie es der Inhaber der Seite gerne haben möchte. In diesem Fall handelt es sich um das Theme „Asien“ das vom Programmierer Domfolio mithilfe der Software „Artisteer“ geschrieben wurde. „Asia“ ist ein Theme, das über eine fixe Breite verfügt, Widgets unterstützt und seine Inhalte in drei Kolumnen präsentiert. Wir wollen im folgenden Text ein wenig in die Datei style.css sehen um das Theme etwas besser kennen zu lernen und auch um die Besonderheiten eines Themes anzusehen, das mit Hilfe von Artisteer gestaltet wurde.

Beginnen wir also mit den ersten Codezeilen, die – wie üblich - die allgemeinsten Informationen des Layouts beinhalten. In den ersten Zeilen werde die Größen, Formen und Farben der Webseite und der auf der Webseite verwendeten Schriften festgehalten. Dies liest sich folgender Maßen: {margin: 0.5em 0; font-family: Georgia, “Times New Roman”, Times, Serif; font-style: normal; font-weight: normal; font-size: 12px; letter-spacing: 1px;} Dieser Codeschnipsel sagt uns also, dass ein Randabstand der Breite 0.5em eingehalten wird, dass die bevorzugte Schrift des Themes Georgia (oder falls die nicht geladen ist: „Times New Roman“) ist und dass die Schriftgröße normalerweise 12 Punkt (normal und nicht fett) beträgt.  Auch der nächste Codeschnipsel ist noch äußerst üblich: body {margin: 0 auto; padding: 0; color: #484E46; background-color: #D4CCAA; background-image: url(’images/page_t.jpg’); background-repeat: repeat; background-attachment: scroll; background-position: top left;}

Diese Codezeile bedeutet, dass im Bereich „body“ die bevorzugte Textfarbe #484E46 ist (die ist ein mittleres Grau) und dass die bevorzugte Hintergrundfarbe # D4CCAA (ein helles beige) ist. Außerdem wird für den Hintergrund auch noch eine Grafikdatei definiert, nämlich das Bild  page_t.jpg, das wiederholt wird. (background-repeat: repeat;) In den Anfängen des Themes entspricht  also der von der Software Artisteer entworfene Code durchaus dem Code, den auch ein menschlicher Programmierer schreiben würde.

Steigt man allerdings etwas tiefer in die CSS-Datei ein, dann findet man immer wieder einzelne Codeabschnitte, die von Artisteer erzeugt wurden, die sehr komplex sind, und die ein menschlicher Programmierer so wahrscheinlich nicht schreiben würde. So ist zum Beispiel die Überschrift der Größe h2 (also die zweitgrößte Überschrift) an insgesamt 31 unterschiedlichen Stellen im Code definiert. Wer also ein bestimmtes Detail an der h2 ändern möchte, muss eventuell bis zu 31 unterschiedliche Codestellen ändern!

Bafög - damit man sich das Auslandssemester leisten kann!

Dass die Seite asia.org dennoch eine sehr gelungene Seite ist steht außer Zweifel. Aber der von Artisteer erzeugte Code in der CSS-Datei ist ausgesprochen kompliziert und würde von einem menschlichen Programmierer wohl kaum in dieser Art geschrieben werden.

Blog Related CSS