كيفية استخدام كود CSS في HTML | دروس HTML5

 

كيفية استخدام كود CSS في HTML


في هذا الدرس، سننظر في كيفية استخدام كود CSS في HTML. نريد أن نقدم لك مقدمة موجزة عن CSS لتسهيل فهم الدروس المستقبلية. سنغطي هذه اللغة بالكامل في دورة CSS.


مقدمة في CSS

CSS تعني C Ascading S tyle S Heets تعني الأنماط المتتالية. 

تحدد CSS كيفية ظهور عناصر HTML على الشاشة أو على الورق أو في وسائط أخرى.

تقدم CSS الكثير لنا. يمكنه التحكم في مظهر صفحات الويب المتعددة في وقت واحد.

يمكن إضافة CSS إلى عناصر HTML بثلاث طرق:

مضمن - يستخدم سمات النمط في عناصر HTML
داخلي - استخدام عنصر <style> في قسم <head>
خارجي - استخدام ملفات CSS الخارجية

الطريقة الأكثر شيوعًا لإضافة CSS هي الاحتفاظ بالأنماط في ملفات CSS منفصلة. ومع ذلك ، فإننا نستخدم الطرق المضمنة والداخلية في هذه البرامج التعليمية لأن هذه الطرق أسهل في الشرح.

طريقة مضمنة في CSS 

يتم استخدام CSS في طريقة Inline لتطبيق نمط فريد على عنصر معين في HTML.

يتم تطبيق CSS على عنصر HTML في الطريقة المضمنة باستخدام سمة النمط.

 في المثال التالي يغير لون النص في <h1> إلى اللون الأزرق. 

<h1 style="color:blue;">This is a Blue Heading</h1>

الطريقة الداخلية في 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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

الطريقة الخارجية في CSS

تُستخدم صفحة نمط خارجية (ملف منفصل يحتوي على كود CSS) لتحديد نمط صفحات الويب المتعددة.

داخل صفحة النمط الخارجية، يمكنك تغيير مظهر جميع صفحات الويب الخاصة بك عن طريق تغيير هذا الملف.

لاستخدام صفحة النمط الخارجية، قم أولاً بإنشاء ملف بامتداد CSS ثم أدخل رمز النمط الخاص بك فيه.

ثم ضع رابط هذا الملف في قسم <head> من صفحة HTML.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/Uploads/Courses/HTML/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

يمكن كتابة صفحة نمط خارجية بواسطة أي محرر نصوص. يجب ألا يحتوي هذا الملف على أي كود HTML ويجب أن يكون بامتداد css. ليتم حفظها.

صفحة النمط الخارجية المستخدمة في المثال أعلاه هي كما يلي:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

الخطوط في 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 محيط عنصر HTML.

p {
border: 1px solid powderblue;
}

المساحة المتروكة في CSS

تحدد خاصية padding المسافة بين النص وحدود العنصر في HTML.

p {
border: 1px solid powderblue;
padding: 30px;
}

الهامش في CSS

تحدد خاصية الهامش المسافة بين الحافة الدائرية للعنصر وعناصر HTML الأخرى على تلك الصفحة.

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="http://www.arabicness.com/html/styles.css">

يشير المثال التالي إلى ملف النمط الموجود في مجلد html الموجود في جذرالموقع.

<link rel="stylesheet" href="/html/styles.css">

يشير المثال التالي إلى ملف النمط الموجود في نفس المجلد مثل ملف HTML للصفحة الحالية.

<link rel="stylesheet" href="styles.css">



كلمات مفتاحية: