Verwendung eines CSS-Stylesheets
Ändere das:
<link rel="stylesheet" href="">
Dazu:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Um das Stylesheet zu verwenden, müssen Sie den HTML-Elementen, die Sie formatieren möchten, eine Klasse hinzufügen:
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
HTML / CSS-Skelett
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Klicken Sie auf die Schaltfläche „Probieren Sie es selbst“, um zu sehen, wie es funktioniert!
Versuchen Sie, die Hintergrundfarbe des Behälters von blaugrün auf schwarz zu ändern.
Hast du es gemacht?
Herzliche Glückwünsche!
Sie haben gerade die Grundlagen der Verwendung eines Stylesheets gelernt.
Lesen Sie weiter!
Wie man reagiert
HTML Quelltext
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
So erstellen Sie eine Karte
Bereit für etwas wirklich Fortgeschrittenes?
Wie wäre es mit einer Visitenkarte in HTML?
Inklusive Bild und Text.
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>