Mischa: CSS Code vereinfachen, zusammenfassen, verkleinern

SELF-Forum

CSS Code vereinfachen, zusammenfassen, verkleinern

Mischa
– Informationen zu den Bewertungsregeln

Ich habe eine Tabelle die ich mit CSS formatiere, soweit OK, nun möchte ich den CSS Code vereinfach, zusammenfassen bzw. verkleinern so das der CSS Teil einfach kleienr wird. Vielleicht kann mir jemand dabei etwas helfen

[code lang=css]  
  
  
<html>  
<head>  
	<title>test</title>  
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
<style type="text/css">  
  
	  
.red_top10  
{  
	border: 1px solid #08064D;  
	width:250px;  
	  
}	  
  
.red_top10_titel_links  
{  
	padding:2px;  
	font-size: 12px;  
	font-weight: bold;  
	background:#08064D;color:#fff;  
	text-align:center;  
}  
  
.red_top10_titel_rechts  
{  
	padding:2px;  
	font-size: 12px;  
	font-weight: bold;  
	background:#08064D;color:#fff;  
	text-align:left;  
}  
  
.red_top10_content  
{  
	padding:2px;  
	font-size: 12px;  
	font-weight: bold;  
	border-top: 1px solid #08064D;  
	border-right: 1px solid #08064D;  
	width:30px;  
	text-align:center;  
}	  
  
.red_top10_content_text  
{  
	padding:2px;  
	font-size: 12px;  
	border-top: 1px solid #08064D;  
}	  
  
  
</style>	  
	  
</head>  
<body>  
		  
<table class="red_top10" cellspacing=0 cellpadding=0>  
<tr>  
	<th class="red_top10_titel_links">Nr</th>  
	<th class="red_top10_titel_rechts">Titel</th>  
</tr>  
  
<tr>  
	<td class="red_top10_content">1</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">2</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">3</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">4</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">5</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">6</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">7</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">8</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">9</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
  
<tr>  
	<td class="red_top10_content">10</td>  
	<td class="red_top10_content_text">Inhalt bzw. Content der Tabelle</td>  
</tr>  
</table>  
  
</body>  
</html>  
  
  
  
  

~~~[/code]
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Code vereinfachen, zusammenfassen, verkleinern

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Mischa:

    nuqneH

    Ich habe eine Tabelle die ich mit CSS formatiere, soweit OK, nun möchte ich den CSS Code vereinfach, zusammenfassen bzw. verkleinern so das der CSS Teil einfach kleienr wird.

    Bevor wir uns dem CSS-Teil (ohne Deppenleerzeichen) widmen, zuerst das Markup:

    DOCTYPE fehlt. Quirksmodus ist keine gute Idee.

    ISO 8859-1 ist  keine gute Idee. Verwende UTF-8! Die Angabe der Zeichncodierung als erstes im 'head'; im 'title' können ja schon Nicht-ASCII-Zeichen vorkommen.

    Sämtliche Darstellungsangaben machst du per CSS, HTML -Attribute wie @cellspacing und @cellpadding entsorgt du umweltgerecht.

    Ebenso sämtliche Klassen bei 'th'- und 'td'-Elementen. Wenn alle Elemente derselben Klasse angehören, ist das ein sicheres Indiz dafür, dass die Klasse unsinnig ist.

    Linke und rechte Spalte könntest du mit der Pseudoklasse :first-child unterscheiden. Sinnvoller ist es, die Zeilenkopfzellen auch als solche auszuzeichnen, also als 'th'.

    Die Spaltenköpfe kommen in 'thead', die Daten in 'tbody':

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
    <title>test</title>  
  </head>  
  <body>  
    <table class="red_top10">  
      <thead>  
        <tr>  
          <th>Nr</th>  
          <th>Titel</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <th>1</th>  
          <td>Inhalt bzw. Content der Tabelle</td>  
        </tr>  
        <tr>  
          <th>2</th>  
          <td>Inhalt bzw. Content der Tabelle</td>  
        </tr>  
      <tbody>  
    </table>  
  </body>  
</html>

    Wobei zu überlegen ist, ob anstelle der Klasse "red_top10" nicht eine ID angebracht wäre.

    Nachdem das Markup fertig ist, nun das Stylesheet:

    Du möchtest zusammenfallende Rahmen. [CSS2 §17.6] Wenn du überall dieselbe Schriftgröße haben willst, ist es unsinnig, diese für verschieden Zellen mehrfach anzugeben.

    table.red_top10  
{  
  border-collapse: collapse;  
  font-size: 12px;  
  width: 250px;  
}  
  
table.red_top10 th, table.red_top10 td  
{  
  border: 1px solid #08064D;  
  padding: 2px;  
  text-align: left;  
}  
  
table.red_top10 thead  
{  
  background: #08064D;  
  color: #FFF;  
}  
  
table.red_top10 th:first-child  
{  
  text-align: center;  
  width: 30px;  
}

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. CSS Code vereinfachen, zusammenfassen, verkleinern

    Jean-Max
    – Informationen zu den Bewertungsregeln

    Bounjoun Mischa,

    Ich habe eine Tabelle die ich mit CSS formatiere, soweit OK, nun möchte ich den CSS Code vereinfach, zusammenfassen bzw. verkleinern so das der CSS Teil einfach kleienr wird. Vielleicht kann mir jemand dabei etwas helfen

    Die Eigenschaften, die Du mehrmals brauchst gruppieren. Statt:

     .red_top10_titel_links  
 {  
 	padding:2px;  
 	font-size: 12px;  
 	font-weight: bold;  
 	background:#08064D;color:#fff;  
 	text-align:center;  
 }  
  
 .red_top10_titel_rechts  
 {  
 	padding:2px;  
 	font-size: 12px;  
 	font-weight: bold;  
 	background:#08064D;color:#fff;  
 	text-align:left;  
 }

    zum Beispiel:

     .red_top10_titel_links, .red_top10_titel_rechts {  
 	padding: 2px;  
 	font-size: 12px;  
 	font-weight: bold;  
 	background: #08064D;  
         color: #fff  
 }  
 .red_top10_titel_links { text-align: center }  
 .red_top10_titel_rechts { text-align: left }

    Dann solltest Du eiheintlich schreiben: entweder Leerzeichen nach dem Doppelpunkt, oder gar keins. Aber bitte konsequent. Sieht schöner aus und wirkt übersichtlicher.

    Adiou.

    --
    Ich bin eigentlich ganz anders, aber ich komme so selten dazu. - Ödön von Horwáth
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln