UHU-StartseiteInformatikKurseW-Seminar App-ProgrammierungHTML5
Ein kurzer Blick in die Cascading-Style-Sheets


Basis Html-Datei
<!DOCTYPE html> <!-- Start für HTML5 --> <html lang="de"> <head> <!-- Informationen für/über das gesamte Dokument --> <meta charset=utf-8> <link rel="stylesheet" type="text/css" href="base.css" /> <title>Verwendung von Stylesheets</title> </head> <body> <!-- Anfang des dargestellten Bereiches --> <span class='button2'; onclick="alert('Hello world!')">Klick mich!</span> </body> </html>





CSS-Datei (base.css)
.button{ background-color: red; font-size: 30px; } .button2{ background-color: #80D0FF; color:#001080; font-size: 20px; font-family: Candara; border-radius: 4px; border: 1px solid #000040; cursor:pointer; }





Fensterhintergrundfarbe
.button{ background-color: red; font-size: 30px; } .button2{ background-color: #100140; color:#F0D0F0; font-size: 20px; font-family: Shruti; border-radius: 10px; border: 1px solid #000040; cursor:pointer; } body{ background-color: gray; border: 5px solid black; border-radius: 5px; }





Indem einer Style-Definition der Name eines Tags vorangestellt wird ("body"), kann man diesem Tag ein Standard-Style zuordnen. Im obigen Fall wird der Hintergrund für die Textdarstellung auf grau gesetzt und mit einem schwarzen Rand versehen.


Links
Es gibt sehr viele verschiedene Auszeichnungsmöglichkeiten. Hier ein paar Adressen, bei denen man alle wichtigen style-Attribute findet:

optimal sichtbar mit Firefox Formeln mit asciimath Druckversion