CSS Stil Sayfası Kullanma
Bunu değiştir:
<link rel="stylesheet" href="">
Buna:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Stil sayfasını kullanmak için, stil vermek istediğiniz HTML öğelerine bir sınıf eklemelisiniz:
<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 İskeleti
<!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>
Nasıl çalıştığını görmek için "Kendiniz Deneyin" düğmesine tıklayın!
Konteynerin arka plan rengini deniz mavisinden siyaha değiştirmeyi deneyin.
Onu sen mi yaptın?
Tebrikler!
Bir stil sayfası kullanmanın temellerini yeni öğrendiniz.
Okumaya devam edin!
Nasıl Duyarlı Olunur?
HTML Kodu
<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>
Kart Nasıl Oluşturulur
Gerçekten gelişmiş bir şeye hazır mısınız?
HTML'de bir Kartvizite ne dersiniz?
Hem resim hem de metin dahil.
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>