استخدام ورقة أنماط CSS
غير هذا:
<link rel="stylesheet" href="">
الى هذا:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
لاستخدام ورقة الأنماط ، يجب إضافة فئة إلى عناصر HTML التي تريد تصميمها:
<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
<!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>
انقر فوق الزر "جربها بنفسك" لترى كيف يعمل!
حاول تغيير لون خلفية الحاوية من البط البري إلى الأسود.
هل فعلتها؟
تهانينا!
لقد تعلمت للتو أساسيات استخدام ورقة الأنماط.
استمر في القراءة!
كيف تكون مستجيب
كود HTML
<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>
كيف تصنع بطاقة
هل أنت جاهز لشيء متقدم حقًا؟
ماذا عن بطاقة العمل في HTML؟
بما في ذلك كل من الصورة والنص.
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>