Created
June 28, 2012 12:05
-
-
Save 01-Scripts/3010958 to your computer and use it in GitHub Desktop.
Cascading Style Sheets (CSS) zur Gestaltung von HTML-Dokumenten nutzen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> | |
| <head> | |
| <title>Codeschnipsel: Cascading Style Sheets-Demo - by 01-Scripts.de</title> | |
| <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> | |
| <meta name="author" content="Michael Lorer - www.01-scripts.de" /> | |
| <meta name="description" content="Cascading Style Sheets (CSS) zur Gestaltung von HTML-Dokumenten nutzen" /> | |
| <!-- Lizenziert unter Creative Commons Namensnennung 3.0 Deutschland (CC BY 3.0) | |
| http://creativecommons.org/licenses/by/3.0/de/ --> | |
| <link rel="stylesheet" media="all" href="style.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <h1>h1: Codeschnipsel: Cascading Style Sheets-Demo - by 01-Scripts.de</h1> | |
| <p><a href="http://www.01-scripts.de">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Donec id quam in lacus congue convallis sed ac diam. In id ante purus, at commodo orci. Sed nisl massa, consequat sed dignissim quis, facilisis ut dui. Maecenas ac felis mauris. Donec elementum dui mattis dolor gravida id dapibus quam scelerisque. Morbi velit nisl, consectetur sit amet congue ut, eleifend vel magna. Phasellus non lectus non augue tincidunt euismod ut non elit. Nam id elit magna.</p> | |
| <h2>h2: Codeschnipsel: Cascading Style Sheets-Demo - by 01-Scripts.de</h2> | |
| <p>Ein <i class="klasse1">Text</i> mit <b class="klasse1">verschiedenen</b> <span class="klasse1">Auszeichnungselementen</span></p> | |
| <p>Ein <i class="klasse2">Text</i> mit <b class="klasse2">verschiedenen</b> <span class="klasse2">Auszeichnungselementen</span></p> | |
| <p style="margin-top: 100px;" class="small">Dieser Beitrag ist unter der <a href="http://creativecommons.org/licenses/by/3.0/de/">Creative Commons Namensnennung 3.0 Deutschland</a> lizensiert.<br /> | |
| Bearbeitung, Nutzung & Verbreitung ist ausdrücklich gestattet.</p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Überschrfiten 1. Ordnung */ | |
| h1 { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 20px; | |
| color:#FF0000 | |
| } | |
| /* Überschrfiten 2. Ordnung */ | |
| h2 { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 16px; | |
| color:#00FF00 | |
| } | |
| /* Links */ | |
| a:link { | |
| color:#000099; | |
| font-weight: bold; | |
| text-decoration:underline; | |
| } | |
| /* bereits besuchte Links */ | |
| a:visited { | |
| color:#0000FF; | |
| font-weight: bold; | |
| text-decoration:none; | |
| } | |
| /* Links beim darüberfahren mit der Maus */ | |
| a:hover { | |
| color:#FF0000; | |
| text-decoration:none; | |
| } | |
| /* aktive Links */ | |
| a:active { | |
| color:#000000; | |
| text-decoration:none; | |
| } | |
| /* Eigenschaften für eigene Klassen: */ | |
| .klasse1 { | |
| text-decoration: underline; | |
| } | |
| /* Eigenschaften für einen bestimmtes Element einer Klassen: */ | |
| span.klasse2 { | |
| text-decoration: overline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Try it online: http://jsfiddle.net/3PJyf/1/