Webseitenbau
Home
Sitemap
 
Web Webseitenbau
Google English français  
↑ 2. 3. 8 HTML und/versus CSS

2.3.8 HTML und/versus CSS

-

1 Verwendung von Anführungszeichen

Während man im HTML-Dokument um hexadezimale Farbangaben Anführungszeichen (") setzen muss, darf man es im CSS-Stylesheet nicht.

a) Formatierung mit HTML (Angabe im Textbereich des HTML-Dokumentes)

Beipiel 1: 

<p style="background-color:lightpink">
Dieser Hintergrund heisst: <p 
style="background-color:lightpink"</p>

Dieser Hintergrund heisst:<p style="background-color:lightpink">

Beipiel 2:

Der Wert eines HTML-Attributs muss in Anführungszeichen stehen, wenn er Sonderzeichen oder Leerzeichen enthält.

<BODY BGCOLOR=#ffffff> ist falsch.
<BODY BGCOLOR="#ffffff"> ist richtig.

b) Formatierung mit CSS (Angabe im Stylesheet)

Beipiel 1: 

h1 {color: #FFFFFF}

Bei Schriftarten die Leerzeichen im Namen tragen, sollte man immer Anführungszeichen setzen:

h1 {font-family:'Trebuchet MS','Myriad Web',
Geneva, Arial,sans-serif}

Beipiel 2:

In Style-Deklarationen dürfen die Werte keine Anführungszeichen haben.

BODY {background-color: #CCFFCC} ist richtig.
BODY {background-color: "#CCFFCC"} ist falsch.

-

2 Unterschied der Formatierung von Tabellen mit HTML und CSS

⇒ Siehe auch Kapitel "Tabellen"

a) Beispiel: Breite und Höhe mit HTML resp. CSS formatieren

1) Breit und hoch mit HTML: 

<table border="1" width="60%">
<tr>
 <th width="50%" height="100">Titel 1</th>
 <th>Titel 2</th>
 <td>Titel 3</td>
</tr>
<tr>
 <td>Text 1.1</td>
 <td>Text 2.1</td>
 <td>Text 3.1</td>
</tr>
<tr>
 <td>Text 1.2</td>
 <td>Text 2.2</td>
 <td>Text 3.2</td>
</tr>
</table>
Titel 1 Titel 2 Titel 3
Text 1.1 Text 2.1 Text 3.1
Text 1.2 Text 2.2 Text 3.2

2) Breit und hoch mit CSS (CSS-Inline) 

<table border="1" style="width:60%">
<tr>
<th style="width:50%; height:100px">Titel 1</th>
  <th>Titel 2</th>
  <th>Titel 3</th>
</tr>
<tr>
 <td>Text 1.1</td>
 <td>Text 2.1</td>
 <td>Text 3.1</td>
</tr>
<tr>
 <td>Text 1.2</td>
 <td>Text 2.2</td>
 <td>Text 3.2</td>
</tr>
</table>
Titel 1 Titel 2 Titel 3
Text 1.1 Text 2.1 Text 3.1
Text 1.2 Text 2.2 Text 3.2
↑