أنماط HTML - CSS
CSS تعني أوراق الأنماط المتتالية.
يوفر CSS الكثير من العمل. يمكنه التحكم في تخطيط العديد من صفحات الويب دفعة واحدة.
CSS = الأنماط والألوان
ما هو CSS؟
تستخدم أوراق الأنماط المتتالية (CSS) لتنسيق تخطيط صفحة الويب.
باستخدام CSS ، يمكنك التحكم في اللون ، والخط ، وحجم النص ، والتباعد بين العناصر ، وكيفية وضع العناصر وتخطيطها ، وما هي صور الخلفية أو ألوان الخلفية التي سيتم استخدامها ، وشاشات العرض المختلفة للأجهزة وأحجام الشاشات المختلفة ، و أكثر بكثير!
تلميح: الكلمة المتتالية تعني أن النمط المطبق على عنصر أصلي سينطبق أيضًا على جميع العناصر الفرعية داخل العنصر الرئيسي. لذلك ، إذا قمت بتعيين لون النص الأساسي على "أزرق" ، فستحصل أيضًا جميع العناوين والفقرات وعناصر النص الأخرى داخل النص على نفس اللون (ما لم تحدد شيئًا آخر)!
باستخدام CSS
يمكن إضافة CSS إلى مستندات HTML بثلاث طرق:
- مضمنة - باستخدام
styleالسمة داخل عناصر HTML - داخلي - باستخدام
<style>عنصر في<head>القسم - خارجي - باستخدام
<link>عنصر للربط بملف CSS خارجي
الطريقة الأكثر شيوعًا لإضافة CSS هي الاحتفاظ بالأنماط في ملفات CSS الخارجية. ومع ذلك ، في هذا البرنامج التعليمي سوف نستخدم الأنماط المضمنة والداخلية ، لأن هذا أسهل في التوضيح ، ويسهل عليك تجربته بنفسك.
مضمنة CSS
يتم استخدام CSS المضمن لتطبيق نمط فريد على عنصر HTML واحد.
يستخدم CSS المضمن styleسمة عنصر HTML.
يضبط المثال التالي لون نص <h1>العنصر على اللون الأزرق ، ولون نص <p>العنصر إلى اللون الأحمر:
مثال
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS داخلي
يتم استخدام CSS داخلي لتحديد نمط لصفحة HTML واحدة.
يتم تعريف CSS داخلي في <head>قسم صفحة HTML ، داخل <style>عنصر.
يقوم المثال التالي بتعيين لون النص لجميع <h1>العناصر (في تلك الصفحة) إلى اللون الأزرق ، ولون النص لجميع <p>العناصر إلى اللون الأحمر. بالإضافة إلى ذلك ، سيتم عرض الصفحة بلون خلفية "مسحوق أزرق":
مثال
<!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>
CSS خارجي
يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات 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":
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
نصيحة: باستخدام ورقة أنماط خارجية ، يمكنك تغيير مظهر موقع ويب بأكمله ، عن طريق تغيير ملف واحد!
ألوان وخطوط وأحجام CSS
هنا ، سوف نوضح بعض خصائص CSS شائعة الاستخدام. سوف تتعلم المزيد عنها لاحقًا.
colorتحدد خاصية CSS لون النص الذي سيتم استخدامه.
font-familyتحدد خاصية CSS الخط الذي سيتم استخدامه.
font-sizeتحدد خاصية CSS حجم النص الذي سيتم استخدامه.
مثال
استخدام خصائص لون وعائلة الخط وحجم الخط في 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
تحدد خاصية CSS borderحدًا حول عنصر HTML.
نصيحة: يمكنك تحديد حد لجميع عناصر HTML تقريبًا.
مثال
استخدام خاصية CSS border:
p {
border: 2px
solid powderblue;
}
حشوة CSS
paddingتحدد خاصية CSS مساحة (مسافة) بين النص والحد.
مثال
استخدام حدود CSS وخصائص المساحة المتروكة:
p {
border: 2px
solid powderblue;
padding: 30px;
}
هامش CSS
marginتحدد خاصية CSS هامشًا (مسافة) خارج الحدود.
مثال
استخدام حدود CSS وخصائص الهامش:
p {
border: 2px
solid powderblue;
margin: 50px;
}
ارتباط بـ CSS خارجي
يمكن الرجوع إلى أوراق الأنماط الخارجية بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.
مثال
يستخدم هذا المثال عنوان URL كاملًا للارتباط بورقة أنماط:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
مثال
يرتبط هذا المثال بورقة أنماط موجودة في مجلد html على موقع الويب الحالي:
<link rel="stylesheet" href="/html/styles.css">
مثال
يرتبط هذا المثال بورقة أنماط موجودة في نفس المجلد مثل الصفحة الحالية:
<link rel="stylesheet" href="styles.css">
يمكنك قراءة المزيد حول مسارات الملفات في الفصل مسارات ملفات HTML .
ملخص الفصل
- استخدم
styleسمة HTML للتصميم المضمن - استخدم
<style>عنصر HTML لتعريف CSS الداخلي - استخدم
<link>عنصر HTML للإشارة إلى ملف CSS خارجي - استخدم
<head>عنصر HTML لتخزين عناصر <style> و <link> - استخدم
colorخاصية CSS لألوان النص - استخدم
font-familyخاصية CSS لخطوط النص - استخدم
font-sizeخاصية CSS لأحجام النص - استخدم
borderخاصية CSS للحدود - استخدم
paddingخاصية CSS للمساحة داخل الحدود - استخدم
marginخاصية CSS للمساحة خارج الحدود
نصيحة: يمكنك معرفة المزيد عن CSS في دروسنا في CSS .
تمارين HTML
علامات نمط HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .