CSS = أنماط وألوان
التصميم HTML مع CSS
CSS لتقف على صفحات الطرز المتراصة
يمكن إضافة التصميم لعناصر HTML في 3 طرق:
- مضمنة - باستخدام سمة نمط في عناصر HTML
- الداخلية - باستخدام <style> عنصر في HTML <head> القسم
- الخارجية - باستخدام واحد أو أكثر من ملفات CSS الخارجية
الطريقة الأكثر شيوعا لإضافة التصميم، هو الحفاظ على الأنماط في ملفات CSS منفصلة. ولكن، في هذا البرنامج التعليمي، ونحن نستخدم التصميم الداخلي، لأنه من الأسهل للتظاهر، والأسهل بالنسبة لك أن تحاول ذلك بنفسك.
يمكنك معرفة المزيد عن CSS في منطقتنا دروس CSS .
مضمنة التصميم (Inline CSS)
يستخدم التصميم المضمنة في تطبيق أسلوب فريد من نوعه إلى عنصر HTML واحد:
يستخدم التصميم المضمنة في style السمة.
يتغير هذا المثال لون النص من <h1> عنصر إلى اللون الأزرق:
التصميم الداخلي (Internal CSS)
يستخدم التصميم الداخلي لتعريف نمط لصفحة HTML واحد.
ويعرف التصميم الداخلي في <head> مقطع من صفحة HTML، ضمن <style> العنصر:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> انها محاولة لنفسك » التصميم الخارجي (External CSS)
يستخدم ورقة أنماط خارجية لتحديد نمط العديد من الصفحات.
مع ورقة نمط خارجية، يمكنك تغيير شكل كامل الموقع عن طريق تغيير ملف واحد!
لاستخدام ورقة أنماط خارجية، إضافة وصلة إليها في <head> قسم من صفحة HTML:
مثال
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> انها محاولة لنفسك » ورقة نمط خارجية يمكن أن يكتب في أي محرر نصوص. يجب أن لا يحتوي الملف على أية علامات HTML. يجب حفظ ملف ورقة الاسلوب مع .css التمديد.
هنا هو كيف يمكن لل" styles.css " النظرات:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS الخطوط
وCSS color الملكية تحدد لون النص لاستخدامها في عنصر HTML.
وCSS font-family وتعرف ممتلكات الخط لاستخدامه للعنصر HTML.
وCSS font-size الملكية تحدد حجم النص ليتم استخدامها لعنصر HTML.
مثال
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> انها محاولة لنفسك » صندوق CSS نموذج
كل عنصر HTML يحتوي على مربع حوله، حتى لو كنت لا يمكن رؤيته.
وCSS border تحدد ملكية حد واضح حول عنصر HTML:
وCSS padding تحدد الملكية الحشو (space) داخل الحدود:
وCSS margin تحدد الملكية هامش (space) خارج الحدود:
الأمثلة CSS فوق استخدام px لتحديد الأحجام بالبكسل.
و id السمة
كل الأمثلة أعلاه استخدام CSS لأسلوب عناصر HTML بشكل عام.
لتحديد نمط خاص للعنصر واحد خاص، أولا إضافة سمة id لعنصر:
<p id="p01">I am different</p>ثم تعريف نمط لعنصر معين مع id :
و class سمة
لتعريف نمط لنوع خاص ( class ) من العناصر، إضافة class السمة إلى العنصر:
<p class="error">I am different</p>الآن يمكنك تحديد نمط مختلف لعناصر مع فئة معينة:
استخدام id لمعالجة single العنصر. استخدام class لمعالجة groups من العناصر.
ملخص الفصل
- استخدام HTML style سمة لتصفيف مضمنة
- استخدام HTML <style> عنصر لتحديد CSS الداخلي
- استخدام HTML <link> عنصر للإشارة إلى ملف CSS الخارجي
- استخدام HTML <head> عنصر لتخزين <style> و <link> العناصر
- استخدام CSS color الملكية للألوان النص
- استخدام CSS font-family الملكية لالخطوط النص
- استخدام CSS font-size الملكية لأحجام النص
- استخدام CSS border الممتلكات للحدود عنصر مرئية
- استخدام CSS padding الملكية لمساحة داخل الحدود
- استخدام CSS margin الملكية لمساحة خارج الحدود
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
HTML نمط الكلمات
| بطاقة | وصف |
|---|---|
| <style> | يحدد نمط المعلومات عن وثيقة HTML |
| <link> | يحدد العلاقة بين وثيقة والموارد الخارجية |