Benutzer-Werkzeuge
html_css
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| — |
html_css [2015/06/01 09:21] (aktuell) admin angelegt |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| + | ======= 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'>) | ||
| + | <code css> | ||
| + | <style> | ||
| + | h1 { | ||
| + | background: yellow; | ||
| + | } | ||
| + | p.math { | ||
| + | background: green; | ||
| + | } | ||
| + | </style> | ||
| + | </code> | ||
| + | Beispiel für o.g. Style-Anweisungen in einem PHP-Script: | ||
| + | <file php 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> | ||
| + | </file> | ||
| + | |||
| + | ===== <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. | ||
| + | |||
| + | <code php> | ||
| + | //... | ||
| + | <pre> | ||
| + | <?php | ||
| + | print_r($liste); | ||
| + | ?> | ||
| + | </pre> | ||
| + | //... | ||
| + | </code> | ||
| + | |||
| + | ===== Beispiele ===== | ||
| + | |||
| + | ====Einfärben der Zeilen einer Tabelle==== | ||
| + | * Überschrift (th) = hellblau | ||
| + | * gerade Zeilen (tr) = hellgrau | ||
| + | * ungerade Zeilen (tr) = weiss | ||
| + | <code css> | ||
| + | <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> | ||
| + | </code> | ||
| + | |||
| + | Aufruf im HTML/PHP dann mit class | ||
| + | <code html> | ||
| + | <table class="colored_table"> | ||
| + | </code> | ||
html_css.txt · Zuletzt geändert: 2015/06/01 09:21 von admin
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
