easy bytes

Webdesign und Suchmaschinenoptimierung

• Startseite
• Webdesign
  • Layout Erstellung
  • Webseiten Redesign
  • Website Aktualisierungen
  • Content Management Systeme
  • Shopsysteme - eCommerce
  • PHP Programmierung
  • Webdesign Preisliste
• Marketing
  • SEA - Keyword-Advertising
    • Google Adwords
  • SEO - Suchmaschinenoptimierung
    • Keyword Recherche
    • Metatags Erstellung
    • Content Optimierung
    • Suchmaschinenanmeldung
    • Linkpopularität
  • SEO / SEA Preisliste
• Referenzen
  • Webdesign
  • Kunden Meinungen
• Skripte
  • Artikelverzeichnis CMS
  • News Script
  • Rezepte CMS
  • Bildergalerie Script
  • Kontaktformular Script
  • Kreditratenrechner Script
  • Newsletter Script
• Tutorials
  • Bannergrößen
  • CSS Tutorials
    • CSS abkürzen
    • CSS auslagern
    • bunte Scrollbalken
  • HTML Tutorials
    • vertikal zentrieren td
    • vertikal zentrieren div
  • PHP Tutorials
    • MySQL Verbindung
    • PHP statt Frames
  • mod_rewrite Hoster
    • Hosteurope
    • All-Inkl
    • Net Publics
  • Outlook einrichten
  • Partnerprogramme
  • PR-Webkataloge
  • Linktausch
    • Empfehlungen
    • mehr Empfehlungen
    • Weiteres
• Kontakt
  • Kontaktformular
  • Anfahrtsbeschreibung
  • Allgemeine Geschäftsbedingungen

CSS Abkürzungen - CSS abkürzen

In CSS ist es möglich umfangreiche Definitionen, die das gleiche Element beschreiben, zusammenzufassen (abzukürzen).

Angenommen wir haben eine Rahmenformatierung, die folgenderweise definiert ist:
border-width:1px; border-style:solid; border-color:#000000;

Das Ganze können wir abkürzen und erreichen genau den gleichen Effekt:
border:1px solid #000000;

Das gleiche gilt z.B. auch für die Schrift. Angenommen, wir haben eine Schrift so formatiert:
font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#000000;

Dieselbe Formatierung erreichen wir auch mit wesentlich weniger CSS Angaben:
font: Arial, Helvetica, sans-serif 12px bold #000000;

Für das padding Attribut gilt natürlich das Gleiche:
padding-top:10px; padding-right:0; padding-bottom:10px; padding-left:0px;

Dieselbe Formatierung erreichen wir auch mit folgenden Angaben:
padding: 10px 0 10px 0;

Und dieses CSS Statement können wir immer noch weiter abkürzen:
padding: 10px 0;

Die body, table, div und weitere Formatierungen von Hintergründen kann man auch als eine Abkürzung schreiben. Statt:
background-color: #FFFFFF; background-image: url(bildname.jpg); background-position: left top; background-repeat: no-repeat; background-attachment: fixed;

Setzen wir die kurze Form ein:
background: #FFFFFF url(bildname.jpg) left top no-repeat fixed;

CSS Abkürzungen für die Farbangaben:
color: #FFCC99; wird zu color: #FC9;

Das dürfte so einige CSS-Files um einige KB kleiner machen.
Viel Erfolg beim Einsetzen!