جدول المحتويات
تصميم HTML مع CSS
أوراق الأنماط المتتالية (بالإنجليزية: Cascading Style Sheets) اختصارًا: سي إس إس (بالإنجليزية:
CSS) هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى المستند المكتوب (بلغة مثلا إتش تي إم إل) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامة.
يصف
CSS كيفية عرض عناصر
HTML على الشاشة أو الورق أو في وسائط أخرى.
CSS يوفر الكثير من العمل ويمكنه التحكم في تصميم صفحات الويب المتعددة مرة واحدة.
يمكن إضافة
CSS إلى عناصر
HTML بثلاث طرق:
- Inline او المتداخل - باستخدام سمة النمط Style في عناصر HTML
- Internal او داخلي- باستخدام عنصر <style> في قسم <head>
- External او خارجي - باستخدام ملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة
CSS هي الحفاظ على الأنماط في ملفات
CSS منفصلة ومع ذلك سنستخدم هنا التصميم الداخلي والمضمّن لأن هذا أسهل في التوضيح.
المتداخل Inline CSS
يتم استخدام
CSS المتداخل لتطبيق نمط فريد على عنصر
HTML واحد
يستخدم
CSS المتداخل سمة النمط
style لعنصر
HTMLيعين هذا المثال لون نص العنصر
<h1> إلى اللون الأزرق:
- الكود:
-
<h1 style="color:blue;">عنوان باللون الازرق</h1>
الداخلي Internal CSS
يتم استخدام
CSS داخلي لتحديد نمط لصفحة
HTML واحدة
يتم تعريف
CSS داخلي في قسم
<head>بصفحة
HTML ضمن عنصر
<style> - الكود:
-
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>عنوان</h1>
<p>فقرة</p>
</body>
</html>
الخارجي Internal CSS
يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات الـ
HTMLباستخدام ورقة أنماط خارجية يمكنك تغيير شكل موقع الويب بالكامل عن طريق تغيير ملف واحد!
لاستخدام ورقة أنماط خارجية أضف رابطًا إليها في قسم
<head> لصفحة
HTML - الكود:
-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> عنوان</h1>
<p> فقرة</p>
</body>
</html>
يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص يجب ألا يحتوي الملف على أي كود
HTML ويجب أن يتم حفظه بملحق
cssإليك كيف يكون ملف "
styles.css":
- الكود:
-
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}