HTML أنماط CSS
CSS تعني C hecading S tyle S heets.
يصف CSS كيفية عرض عناصر HTML على الشاشة .
CSS يوفر الكثير من العمل . يمكنه التحكم في تصميم صفحات الويب المتعددة مرة واحدة.
يمكن إضافة CSS إلى عناصر HTML بثلاث طرق:
- مضمن – باستخدام سمة النمط في عناصر HTML
- داخلي – باستخدام
<style>في<head> - خارجي – باستخدام ملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة CSS ، هي الحفاظ على الأنماط في ملفات CSS منفصلة. ومع ذلك ، سنستخدم هنا التصميم الداخلي والمضمّن ، لأن هذا أسهل في التوضيح ، وأسهل بالنسبة لك لتجرب بنفسك.
مضمن
يتم استخدام CSS المضمّنة لتطبيق نمط فريد على عنصر HTML واحد.
يستخدم CSS المضمن سمة النمط لعنصر HTML.
يعين هذا المثال لون نص <h1>العنصر إلى اللون الأزرق:
<h1 style="color:blue;">This is a Blue Heading</h1>
داخلي
يتم استخدام 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>This is a heading</h1><p>This is a paragraph.</p></body></html>
خارجي
يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات HTML.
باستخدام ورقة أنماط خارجية ، يمكنك تغيير شكل موقع الويب بالكامل ، عن طريق تغيير ملف واحد!
لاستخدام ورقة أنماط خارجية ، أضف رابطًا في <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: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}الخطوط
colorتحدد خاصية CSS لون النص المراد استخدامه.
font-familyتحدد خاصية CSS الخط الذي سيتم استخدامه.
font-size تحدد خاصية CSS حجم النص المراد استخدامه.
<!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 الحدود
borderتحدد خاصية CSS حدًا حول عنصر HTML:
p {
border: 1px solid powderblue;
}
الحشو
paddingتحدد خاصية CSS حشوة (مسافة) بين النص والحد:
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS الهامش
marginتحدد خاصية CSS هامش (مسافة) خارج الحدود:
p {
border: 1px solid powderblue;
margin: 50px;
}
سمة المعرف
لتعريف نمط معين لعنصر خاص واحد ، أضف id إلى العنصر:
<p id="p01">I am different</p>ثم حدد نمطًا للعنصر ذي المعرف المحدد:
#p01 {
color: blue;
}
ملاحظة: يجب أن يكون معرف العنصر فريدًا داخل الصفحة ، بحيث يتم استخدام محدد الهوية لتحديد عنصر فريد واحد!
السمة الصفية
لتعريف نمط لأنواع خاصة من العناصر ، أضف class إلى العنصر:
<p class="error">I am different</p>ثم حدد نمطًا للعناصر ذات الفئة المحددة:
p.error {
color: red;
}
المراجع الخارجية
يمكن الرجوع إلى أوراق الأنماط الخارجية بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.
يستخدم هذا المثال عنوان URL كاملاً لربط ورقة أنماط:
<link rel="stylesheet" href="https://www.platformspot.com/html/styles.css">يرتبط هذا المثال بورقة أنماط موجودة في مجلد html على موقع الويب الحالي:
<link rel="stylesheet" href="/html/styles.css">يرتبط هذا المثال بورقة أنماط موجودة في نفس المجلد مثل الصفحة الحالية:
<link rel="stylesheet" href="styles.css">
ملخص الفصل
- استخدم
styleللتصميم المضمن - استخدم
<style>لتعريف CSS الداخلي - استخدم
<link>للإشارة إلى ملف CSS خارجي - استخدم
<head>لتخزين عناصر <style> و <link> - استخدم
colorلألوان النص - استخدم
font-familyلخطوط النص - استخدم
font-sizeلأحجام النص - استخدم
borderللحدود - استخدم
paddingللمساحة داخل الحدود - استخدم
marginللمساحة خارج الحدود
علامات نمط HTML
| الوسم | الوصف |
|---|---|
| <style> | يحدد معلومات النمط لمستند HTML |
| <link> | يعرّف الارتباط بين مستند ومورد خارجي |
One Comment