CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(→Links) |
|||
| Zeile 10: | Zeile 10: | ||
* Datei anlegen: index.html | * Datei anlegen: index.html | ||
<pre> | <pre> | ||
<!DOCTYPE html> | |||
<html> | <html> | ||
<head> | <head> | ||
| Zeile 16: | Zeile 16: | ||
</head> | </head> | ||
<body> | <body> | ||
<h1>Try it!</h1> | <div class="sheet"> | ||
<h1>Try it!</h1> | |||
<div class="region1 right"> | |||
This is a paragraph with right alignment. | |||
</div> | |||
<div class="region2"> | |||
<div class="error">Error found</div> | |||
<div class="warning">Warning: it is dangerous</div> | |||
</div> | |||
<div class="region1 middle"> | |||
< | This is a paragraph too, but with center alignment. | ||
</div> | |||
<div> | |||
</body> | </body> | ||
</html> | </html> | ||
</pre> | </pre> | ||
* Datei anlegen: tutorial.css | * Datei anlegen: tutorial.css | ||
<pre> | <pre> | ||
h1, h2, h3 { | |||
background-color: | border-bottom: 1px blue solid; | ||
} | |||
.sheet { | |||
background-color: #cc; | |||
margin: 1em; | |||
padding: 1em; | |||
} | } | ||
.region1 { | .region1 { | ||
| Zeile 41: | Zeile 48: | ||
.region2 { | .region2 { | ||
background-color: white; | background-color: white; | ||
} | } | ||
.error { | .error { | ||
color: red; | color: red; | ||
border: 0.1em solid red; | |||
} | } | ||
.warning { | .warning { | ||
color: blue; | color: blue; | ||
} | |||
.middle { | |||
text-align: center; | |||
} | |||
.right { | |||
text-align: right; | |||
} | } | ||
</pre> | </pre> | ||
* Datei index.php im Browser öffnen. | * Datei index.php im Browser öffnen. | ||
Version vom 19. September 2023, 17:49 Uhr
Links
Zielsetzung
Cascading Style Sheets (CSS) ist eine Sprache, mit der HTML-Inhalte mit Formateigenschaften ausgestattet werden. Das dient der Trennung von Inhalt (HTML) und Form (CSS).
Schnellkurs
- Datei anlegen: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tutorial.css">
</head>
<body>
<div class="sheet">
<h1>Try it!</h1>
<div class="region1 right">
This is a paragraph with right alignment.
</div>
<div class="region2">
<div class="error">Error found</div>
<div class="warning">Warning: it is dangerous</div>
</div>
<div class="region1 middle">
This is a paragraph too, but with center alignment.
</div>
<div>
</body>
</html>
- Datei anlegen: tutorial.css
h1, h2, h3 {
border-bottom: 1px blue solid;
}
.sheet {
background-color: #cc;
margin: 1em;
padding: 1em;
}
.region1 {
background-color: lightgreen;
margin: 1em 33%;
}
.region2 {
background-color: white;
}
.error {
color: red;
border: 0.1em solid red;
}
.warning {
color: blue;
}
.middle {
text-align: center;
}
.right {
text-align: right;
}
- Datei index.php im Browser öffnen.