Kürze dein CSS

artd2
Autor
Neues Mitglied

Mehr

20 Apr. 2007 09:56 #7059 von artd2

Kürze dein CSS wurde erstellt von artd2

Stylessheets können manchmal sehr sehr lange werden. Man sucht nach entsprechenden Informationen oft lange, trotz Firefoxerweiterung und anderen Helfern. Für die Übersichtlichkeit ist es sinnvoll Informationen zusammen zu fassen. Anbei einige Beispiele:

Beispiel 1: FONT Angaben:

Aus :

Code:

element {
  font-style:normal;
  font-variant:normal;
  font-weight:bold;
  font-size:1em;
  line-height:1.2em;
  font-family:georgia,"times new roman",serif;
}

wird:

Code:

element {
  font:bold 1em/1.2em georgia,"times new roman",serif;
}

Beispiel 2: Background Angaben:
Aus

Code:

element {
  background-color: #fff;
  background-image:url(image.png);
  background-repeat: no-repaet;
  background-position: 20px 100px;
  background-attachment: fixed;
}

wird:

Code:

element {
  background:#fff url(image.png) no-repeat 20px 100px fixed;
}

Beispiel 3: Border Angaben

Aus

Code:

element {
  border-width: 5px;
  border-style: solid;
  border-color: #fff;
}

wird

Code:

element { border: 5px solid #fff;
}

gilt auch für "outline"

Beispiel 4: Margin und Padding Angaben
Aus

Code:

element {
  margin-top: 1px;
  margin-right: 2px;
  margin-bottom: 3px;
  margin-left: 4px;
}

wird

/* Wert sind im Uhrzeigersinn: oben rechts unten links */

Code:

element {
  margin: 1px 2px 3px 4px;
}

Beispiel 5: list-style
Aus

Code:

element {
  list-style-type: square;
  list-style-position:inside;
  list-style-image:url(image.png);
}

wird

Code:

element {
  list-style:square inside url(image.png);
}

So ich hoffe diese kleine Anleitung hilft euch beim CSS Frühlingsputz
Liebe Grüsse
artd2

Joomla! Forum Schweiz wird Teil der D-A-CH Community

forum.joomla.de

Kürze dein CSS