طرق استخدام css مع صفحة html

Ali Ahmed Alturkie · 5 أبريل 2021

ماهي طرق استخدام css مع صفحة html؟

عبدالباسط ابراهيم · 5 أبريل 2021

توجد العديد من الطرق مثل

عن طريق الوسم style في أعلى صفحة ال html

<style>
	<!--يتم وضع التنسيقات هنا-->
</style>

ال inline-style عن طريق الخاصية style للعنصر
```
<h1 style="color: red;"></h1>
```
ال style sheet وهو عن طريق ربط صفحة ال html بصفحة منفصلة تحتوي على تنسيقات الcss
```
<link rel="stylesheet" href="style.css">
```

ولكل طريقة استخدام ومميزات ولكن الطريقة الأحتراقية والشائعة هي ملف خاص بال css

تم التعديل في 5 أبريل 2021 بواسطة عبدالباسط ابراهيم
إضافة بعض المعلومات

بلال زيادة · 5 أبريل 2021

أولاً: يمكنك استخدام وسم

<style>
	p{
      color: red;
      
  }

</style>

ثانيا: يمكنك استخدام خاصية style.

<p style="color: red;">Hello</p>

ثالثاً: يمكنك تضمين ملف خارجي بهذا الشكل

<link rel="stylesheet" href="style.css" />

يمكنك وضع الوسم قبل وسم إغلاق

</head>

و style.css هو ملف التنسيقات التي توضع فيه جميع تنسيقات العناصر.

عبدالله عبدالرحمن11 · 5 أبريل 2021

هناك ثلاث طرق لاستخدام الCSS مع صفحات HTML

1- طريقة inline يعني اختر أي عنصر html ثم اضف style وضع داخلها نص ال CSS الذي تريده

<h1 style="color:blue;">عنوان</h1>

2- عن طريق كتابة العنصر style ووضع نص ال CSS الذي تريده داخلها

<style>
  h1 {color:blue;}
 
</style>

3- الطريقة الأخيرة هي عبر وضع كود CSS في ملف نصي منفصل ينتهي الملف ب css بدلاً من txt ويتم استدعائه في ملف html هكذا

الملف الخارجي بإسم styles.css وهذا مثال لكود css داخله

h1 {color:blue;}

وهذا ملف html وفيه كيفية إستدعاء الملف الخارجي

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

ويكون الإستدعاء داخل عنصر ال head

سامح أشرف · 5 أبريل 2021

يوجد ثلاث طرق فقط لتطبيق خواص CSS مع صفحة HTML:

وضع الخصائص في العناصر مباشرة بإستخدام الخاصية style، مثال:
```
<p style="color:red; font-size:2rem;">Some Content</p>
```

عمل عنصر style في داخل العنصر head، ثم وضع كل خصائص CSS فيه مع تحديد العناصر التي ترغب في تطبيق هذه الخواص عليها، مثال:

<html>
  <head>
    <title>Page Title</title>
    <style>
      p {
        color: red;
        font-size: 2rem;
      }
      
      a {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <p>some content</p>
    <a href="https://google.com/">Go to Google</a>
  </body>
</html>

عمل ملف بصيغة CSS وكتابة كل خصائص CSS فيه مباشرة (بدون كتابة الوسم style)، ثم ربط هذا الملف بصفحة HTML من خلال العنصر link، مثال:
ملف index.html

<html>
  <head>
    <title>Page Title</title>
    <link ref="stylesheet" href="main.css" />
  </head>
  <body>
    <p>some content</p>
    <a href="https://google.com/">Go to Google</a>
  </body>
</html>

ملف main.css:

p {
  color: red;
  font-size: 2rem;
}

a {
  color: white;
  background-color: black;
}

طرق استخدام css مع صفحة html

السؤال

Ali Ahmed Alturkie

4 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

بلال زيادة

عبدالله عبدالرحمن11

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية