Schnipsel - Code Schnipsel (Snippets) zu Wordpress, PHP, HTML, CSS, jQuery » CSS

CSS – mit wenig Klassen auskommen

David Hellmann — Wed, 08 Jul 2009 08:13:23 +0000

Wenn man sein CSS gut schreibt dann kann man sich viele klasse sparen. Wenn man zum Beispiel verschiende Absätze- oder Headlineformatierungen haben möchte kann man über das Elternelement leicht auf das Kind zugreifen und muss dafür nicht extra eine Klasse vergeben. Folgendes Beispiel soll das zeigen.

Wir haben folgendes HTML


	
	
		Headline for sticky Post here
		
			Content here
		
	
 
	
	
		Headline for normal Post here
		
			Content here

Dazu folgendes CSS

#content .stickypost, #content .post {
	width:500px;
	border-bottom:1px dotted #aaa;
	float:left;
	clear:both	;
	etc...	
}
 
.stickypost h2, .post h2 {
	font:bold 18px/23px Arial;
	color:#666;
	etc...
}
 
.stickypost h2 {
	color:#d40000;
	etc...
}
 
.stickypost p, .post p {
	font:normal 13px/18px Arial;
	color:#444;
	margin:10px 0;
	etc...
}
 
.stickypost p {	
	font:normal 15px/20px Arial;
	etc...
}

Ergebnis

Man hat ohne irgendwelche Klassen zu vergeben trotzdem genug Einfluss auf die Elemente.

Clearfix – Das einschließen von Floats

David Hellmann — Sun, 24 May 2009 01:39:39 +0000

Ein gutes Beispiel wäre folgendes: Man erstellt eine Seite wo der Inhalt zentriert sein soll. Das ganze passiert mittels "margin: 0 auto"; Ein Float kann man hier nicht hinzufügen da sonst der Container nicht mehr mittig ist. Problem ist jetzt aber wenn der Container zum Beispiel eine Hintergrundfarbe hätte und in dem Container jetzt ein weiterer wäre der "float:left" hätte und der Inhalt diesen wäre höher als der Container in dem ersteckt würde er nicht mehr eingeschlossen sein. Das führt dazu das der gefloatete Container über den anderen drüber geht und das nicht wirklich gut ist :) Hier kommt "clearfix" zum Einsatz.

/* Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* Clearfix Patches für den IE */
.clearfix { display: inline-block; }
 
/* Vor IE5/Mac verstecken mit dem Commented Backslash Hack \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende des Versteckspiels für den IE5/Mac */

Das einfach in die CSS File und dem Container der die Seite zentriert ein "class="clearfix"" mitgeben und schon umschließt der Container den gefloateten wieder vollkommen. Die class kann man dann natürlich auf viele Sachen anwenden innerhalb der Seite und ist deswegen eine ganz gute Möglichkeit. Wenn ich ehrlich bin hab ich diese Methode bisher aber fast noch nicht genutzt da ich eh immer fast alles floate. Sollte ich aber vielleicht öfters mal tun. Ist einfach und effektiv.

Firebug Lite einbinden

Thomas Aull — Thu, 21 May 2009 14:09:19 +0000

Firebug ist das Webentwicklertool für den Firefox. Leider kommt es aber dann und wann vor, dass manche Probleme nur in anderen Browsern auftreten, zum Beispiel im geliebten Internet Explorer. Für diesen Zweck gibt es Firebug Lite, eine abgespeckte, auf JavaScript basierende Version von Firebug. Das ganze kann man so in seine Seite einbinden und dann direkt lostesten.

Simlper CSS Reset

David Hellmann — Mon, 11 May 2009 15:59:12 +0000

Es macht Sinn ein paar Sachen in einer neuen CSS Datei zu resetten. Aber nicht jedes Element einzeln sondern einfach ein paar grundlegende Dinge.

* {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-weight:normal;
}

CSS Background Kurzschreibweise

David Hellmann — Sat, 25 Apr 2009 08:18:17 +0000

Background formatierung mit nur einer Zeile.

.background-kurz {
	background:#000 url(images/background.jpg) 0px 0px fixed repeat;
	/* statt #000 (Farben) kann man auch: transparent nutzen.
	    statt pixel angaben kann man auch: left, bottom, top, center, right nutzen.
	    statt fixed wäre auch scroll möglich oder weglassen
	    statt repeat wäre auch no-repeat, repeat-x oder repeat-y möglich */
}

Linkrahmen entfernen

David Hellmann — Thu, 23 Apr 2009 14:51:32 +0000

Ganz einfach den gepunkteten Rahmen entfernen der auftaucht wenn man Links anklickt.

/** HIDING FOCUSRING */
a:active, a { 
	outline: none; 
}
 
:focus { 
	-moz-outline-style: none; 
}
 
:-moz-any-link:focus {
	outline: none;
}

CSS Font Kurzschreibweise

David Hellmann — Wed, 22 Apr 2009 11:50:43 +0000

Schriftformatierung mit nur einer Zeile.

1
2
3

.font-kurz {
	font:bold 18px/25px Georgia, "Times New Roman", Times, serif;
}

CSS Font Families

David Hellmann — Wed, 22 Apr 2009 10:47:43 +0000

Ein paar Font Families.

Verdana

1
2
3

.verdana {
	font-family:Verdana, Geneva, sans-serif;
}

Georgia

1
2
3

.georgia {
	font-family:Georgia, "Times New Roman", Times, serif;
}

Courier New

1
2
3

.courier-new {
	font-family:"Courier New", Courier, monospace;
}

Arial

1
2
3

.arial {
	font-family:Arial, Helvetica, sans-serif;
}

Arial Black

1
2
3

.arial-black {
	font-family:"Arial Black", Gadget, sans-serif;
}

Tahoma

1
2
3

.tahoma {
	font-family:Tahoma, Geneva, sans-serif;
}

Trebuchet MS

1
2
3

.trebuchet-ms {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

Times New Roman

1
2
3

.times-new roman {
	font-family:"Times New Roman", Times, serif;
}

Palatino Linotype

1
2
3

.palatino-linotype {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

Lucida Sans Unicode

1
2
3

.lucida-sans-unicode {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

Lucida Console

1
2
3

.lucida-console {
	font-family:"Lucida Console", Monaco, monospace;
}

MS Serif

1
2
3

.ms-serif {
	font-family:"MS Serif", "New York", serif;
}

Comic Sans MS

1
2
3

.comic-sans-ms {
	font-family:"Comic Sans MS", cursive;
}