HTML / CSS

CSS

Beispiele für eine Style (CSS) Anweisung:

Hintergrundfarbe einer H1-Überschrift
Hintergrundfarbe für einen „math“-Absatz (CSS-Class - genutzt mit <p class='math'>)

<style>
h1 {    
  background: yellow;
}
p.math {
  background: green;
}
</style>

Beispiel für o.g. Style-Anweisungen in einem PHP-Script:

css-besispiel.php

<?php
  $basistitel = "Hallo Welt";
  $spezialtitel = "hallo Essen";
  $titel = $basistitel . ", " . $spezialtitel;
  $wert1 = 5;
  $wert2 = 2;
?>
<html>
<head><title><?php echo $titel; ?></title></head>
<style>
h1 {
  background: yellow;
}
p.math {
  background: green;
}
</style>
<body>
<?php
  echo "<h1>".$titel."</h1>";
 
  echo "<p>Der Titel der Seite lautet $titel</p>";
 
  echo "<p class='math'>Addition: " . ($wert1 + $wert2) . "</p>";
  $ergebnis = $wert1 - $wert2;
  echo "<p>Substraktion: {$ergebnis}</p>";
?>
</body>
</html>

<pre>-tag

Der <pre>-tag liefert eine vorformatierte Umgebung, die alle Inhalte inkl. aller Zeilenumbrüche und Whitespaces darstellt. Dies kann gut für DEBUG-Ausgaben im PHP genutzt werden.

//...
<pre>
<?php
  print_r($liste);
?>
</pre>
//...

Beispiele

Einfärben der Zeilen einer Tabelle

Überschrift (th) = hellblau
gerade Zeilen (tr) = hellgrau
ungerade Zeilen (tr) = weiss

<style>
table.colored_table th {
  background: lightblue;
}
table.colored_table tr:nth-child(even) {
  background: lightgray;
}
table.colored_table tr:nth-child(odd) {
  background: white;
}
</style>

Aufruf im HTML/PHP dann mit class

<table class="colored_table">

JBs Wiki

Seitenleiste

Anleitungen (HowTos)

Troubleshooting

Links

@work

Inhaltsverzeichnis

HTML / CSS

CSS

<pre>-tag

Beispiele

Einfärben der Zeilen einer Tabelle

JBs Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seitenleiste

Anleitungen (HowTos)

Troubleshooting

Links

@work

Inhaltsverzeichnis

HTML / CSS

CSS

<pre>-tag

Beispiele

Einfärben der Zeilen einer Tabelle

Seiten-Werkzeuge