مقدمة
مرحبًا بكم في الدرس الثالث من دورة تعلم HTML! الآن بعد أن تعلمنا كيفية إنشاء صفحات ويب باستخدام HTML، سننتقل إلى تعلم كيفية تنسيق هذه الصفحات وجعلها أكثر جاذبية باستخدام CSS. CSS، أو Cascading Style Sheets، هي اللغة التي تُستخدم لتحديد كيف تبدو العناصر في صفحات الويب.
1. ما هو CSS؟
CSS هي لغة تُستخدم لوصف مظهر صفحة الويب من حيث الألوان، الخطوط، التخطيطات، وغيرها من عناصر التصميم. باستخدام CSS، يمكنك جعل صفحات الويب الخاصة بك أكثر جاذبية وجمالًا، مما يعزز من تجربة المستخدم.
2. كيفية تضمين CSS في صفحات HTML
هناك ثلاث طرق لتضمين CSS في صفحات HTML:
- التضمين الخارجي (External CSS)
- التضمين الداخلي (Internal CSS)
- التضمين المضمّن (Inline CSS)
2.1 التضمين الخارجي (External CSS)
تُستخدم ملفات CSS الخارجية لتخزين جميع قواعد التنسيق في ملف منفصل بامتداد .css. يمكنك ربط ملف CSS بصفحة HTML باستخدام وسم <link> داخل <head>.
<!DOCTYPE html>
<html>
<head>
<title>مثال على التضمين الخارجي</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>مرحبًا بكم في صفحتي</h1>
<p>هذه فقرة مُنسقة باستخدام CSS خارجي.</p>
</body>
</html>محتويات ملف styles.css:
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: green;
}2.2 التضمين الداخلي (Internal CSS)
يتم تضمين CSS الداخلي داخل وسوم <style> داخل وسم <head> في صفحة HTML.
<!DOCTYPE html>
<html>
<head>
<title>مثال على التضمين الداخلي</title>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: green;
}
</style>
</head>
<body>
<h1>مرحبًا بكم في صفحتي</h1>
<p>هذه فقرة مُنسقة باستخدام CSS داخلي.</p>
</body>
</html>2.3 التضمين المضمّن (Inline CSS)
يتم تضمين CSS المضمّن داخل وسم HTML نفسه باستخدام خاصية style.
<!DOCTYPE html>
<html>
<head>
<title>مثال على التضمين المضمّن</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">مرحبًا بكم في صفحتي</h1>
<p style="font-size: 16px; color: green;">هذه فقرة مُنسقة باستخدام CSS مضمّن.</p>
</body>
</html>3. القواعد الأساسية في CSS
3.1 القواعد الأساسية
تتكون قواعد CSS من ثلاثة أجزاء:
- المُحدِّد (Selector): يُحدد العنصر الذي ستنطبق عليه القاعدة.
- الخاصية (Property): تُحدد الخاصية التي تريد تغييرها.
- القيمة (Value): تُحدد قيمة الخاصية.
selector {
property: value;
}مثال:
p {
color: red;
font-size: 20px;
}4. الأمثلة العملية
4.1 تنسيق النصوص
يمكنك استخدام CSS لتنسيق النصوص بطرق مختلفة مثل تغيير اللون، الحجم، الخط، التباعد، وغيرها.
h1 {
color: blue;
font-family: Arial, sans-serif;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
color: green;
}4.2 تنسيق الخلفية
يمكنك تغيير خلفية الصفحة أو أي عنصر باستخدام خاصية background.
body {
background-color: #f0f0f0;
}
div {
background-image: url('background.jpg');
background-size: cover;
}4.3 تنسيق الحدود
تُستخدم خاصيات الحدود لإضافة حدود حول العناصر.
div {
border: 2px solid black;
padding: 10px;
}4.4 تنسيق الأبعاد
يمكنك تحديد أبعاد العناصر باستخدام خاصيات العرض (width) والارتفاع (height).
img {
width: 100px;
height: 100px;
}5. تطبيقات عملية
مثال 1: إنشاء صفحة ذات تصميم جذاب
لنقم بإنشاء صفحة تحتوي على عنوان، فقرة، وصورة، ونطبق عليها تنسيقات CSS لتحسين مظهرها. جرب كتابة الكود التالي في محرر النصوص الخاص بك:
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الجذابة</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>مرحبًا بكم في صفحتي الجذابة</h1>
<p>هذه صفحة ويب مصممة باستخدام HTML وCSS.</p>
<img src="image.jpg" alt="صورة جميلة">
</body>
</html>محتويات ملف styles.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #0056b3;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
text-align: justify;
padding: 0 20px;
}
img {
display: block;
margin: 20px auto;
width: 50%;
height: auto;
}مثال 2: إنشاء تخطيط معقد باستخدام CSS
لنقم بإنشاء تخطيط صفحة يحتوي على رأس، محتوى رئيسي، وشريط جانبي.
<!DOCTYPE html>
<html>
<head>
<title>تخطيط الصفحة</title>
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1>تخطيط الصفحة</h1>
</header>
<div class="container">
<main>
<h2>المحتوى الرئيسي</h2>
<p>هذا هو المحتوى الرئيسي للصفحة.</p>
</main>
<aside>
<h2>الشريط الجانبي</h2>
<p>هذا هو الشريط الجانبي للصفحة.</p>
</aside>
</div>
<footer>
<p>حقوق النشر © 2024</p>
</footer>
</body>
</html>محتويات ملف layout.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #0056b3;
color: white;
text-align: center;
padding: 10px 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex: 2;
padding: 20px;
}
aside {
flex: 1;
background-color: #f0f0f0;
padding: 20px;
}
footer {
margin-top: 20px;
}6. تمرين عملي
حان الوقت لتطبيق ما تعلمته. حاول إنشاء صفحة HTML تحتوي على:
- عنوان رئيسي (H1) يحمل اسم الموقع.
- فقرة تعريفية بالموقع.
- قائمة غير مرتبة تحتوي على روابط لأقسام الموقع.
- جدول يعرض بيانات خدمات الموقع.
- نموذج لجمع بيانات المستخدمين.
- صورة تعبر عن هدف الموقع.
- فيديو ترويجي للموقع.
- مقطع صوتي يقدم رسالة ترحيبية.
الحل المقترح:
<!DOCTYPE html>
<html>
<head>
<title>موقعي المتكامل</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>مرحبًا بكم في موقعي</h1>
<p>هذا الموقع يقدم مجموعة متنوعة من الخدمات التي تلبي احتياجاتكم.</p>
<h2>أقسام الموقع</h2>
<ul>
<li><a href="#services">الخدمات</a></li>
<li><a href="#contact">اتصل بنا</a></li>
<li><a href="#about">عن الموقع</a></li>
</ul>
<h2 id="services">الخدمات</h2>
<table border="1">
<tr>
<th>الخدمة</th>
<th>الوصف</th>
</tr>
<tr>
<td>تصميم مواقع</td>
<td>نحن نقدم خدمة تصميم مواقع احترافية.</td>
</tr>
<tr>
<td>تطوير
تطبيقات</td>
<td>نحن نطور تطبيقات مخصصة تلبي احتياجاتك.</td>
</tr>
</table>
<h2 id="contact">اتصل بنا</h2>
<form action="/submit" method="post">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email">
<br>
<label for="message">رسالة:</label>
<textarea id="message" name="message"></textarea>
<br>
<input type="submit" value="إرسال">
</form>
<h2 id="about">عن الموقع</h2>
<img src="about.jpg" alt="صورة تمثل هدف الموقع">
<br>
<video width="320" height="240" controls>
<source src="promo.mp4" type="video/mp4">
متصفحك لا يدعم تشغيل الفيديو.
</video>
<br>
<audio controls>
<source src="welcome.mp3" type="audio/mpeg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
</body>
</html>محتويات ملف styles.css:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1, h2 {
color: #0056b3;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
text-align: justify;
padding: 0 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 5px 0;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
form {
width: 80%;
margin: 20px auto;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #0056b3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #003f8a;
}
img {
display: block;
margin: 20px auto;
width: 50%;
height: auto;
}
video, audio {
display: block;
margin: 20px auto;
}7. مراجعة شاملة
قبل أن ننهي هذا الدرس، دعنا نراجع ما تعلمناه:
- فهمنا ماهية CSS وكيفية تضمينها في صفحات HTML.
- تعلمنا القواعد الأساسية لـ CSS وكيفية استخدامها لتنسيق النصوص، الخلفيات، الحدود، والأبعاد.
- طبقنا الأمثلة العملية على تنسيق صفحات الويب باستخدام CSS.
8. خاتمة
في هذا الدرس، تعلمنا كيفية استخدام CSS لتنسيق صفحات الويب الخاصة بك وجعلها أكثر جاذبية. تأكد من ممارسة كتابة الأكواد وتجريب أمثلة مختلفة لتحسين مهاراتك. في الدرس التالي، سنتعلم كيفية استخدام CSS المتقدم لتحسين تخطيطات صفحات الويب بشكل أكثر احترافية. أراك في الدرس القادم!
