Was ist CSS?
CSS steht für Cascading Style Sheets _ _
CSS beschreibt, wie HTML- Elemente dargestellt werden sollen
CSS-Beispiel
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Klicken Sie auf die Schaltfläche „Try it Yourself“, um zu sehen, wie es funktioniert.
CSS-Syntax
Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock :
Der Selektor zeigt auf das HTML-Element zum Stil (h1).
Der Deklarationsblock (in geschweiften Klammern) enthält eine oder mehrere durch Semikolon getrennte Deklarationen.
Jede Deklaration enthält einen CSS-Eigenschaftsnamen und einen Wert, getrennt durch einen Doppelpunkt.
Im folgenden Beispiel sind alle <p>-Elemente zentriert, rot und haben eine Schriftgröße von 32 Pixel:
Beispiel
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Dasselbe Beispiel kann auch so geschrieben werden:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Externes Stylesheet
Ein CSS-Stylesheet kann in einer externen Datei gespeichert werden:
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Externe Stylesheets werden mit <link> -Tags mit HTML-Seiten verknüpft:
Beispiel
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Inline-Stil
Beispiel
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Kaskadierende Reihenfolge
Wenn für HTML-Elemente unterschiedliche Stile angegeben sind, werden die Stile mit der folgenden Priorität in neue Stile kaskadiert :
- Priorität 1: Inline-Stile
- Priorität 2: Externe und interne Stylesheets
- Priorität 3: Browser-Standard
- Wenn verschiedene Stile auf derselben Prioritätsebene definiert sind, hat der letzte die höchste Priorität.
Beispiel
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS-Demo - Eine HTML-Seite - Mehrere Stile!
Hier zeigen wir eine HTML-Seite, die mit 4 verschiedenen Stylesheets angezeigt wird.
Klicken Sie auf die Stylesheet-Schaltflächen (1-4), um die Seite mit verschiedenen Stilen anzuzeigen.
Vollständiges CSS-Tutorial
Dies war eine kurze Beschreibung von CSS.
Ein vollständiges CSS-Tutorial finden Sie unter W3Schools CSS Tutorial .
Eine vollständige CSS-Referenz finden Sie unter W3Schools CSS Reference .