اذهب إلى المحتوى
  • 0

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

Ali Ahmed Alturkie

السؤال

Recommended Posts

  • 1

هناك ثلاث طرق لاستخدام ال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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

  • عن طريق الوسم style في أعلى صفحة ال html 
    <style>
    	<!--يتم وضع التنسيقات هنا-->
    </style>

     

  • ال inline-style عن طريق الخاصية style للعنصر
    <h1 style="color: red;"></h1>

     

  • ال style sheet وهو عن طريق ربط صفحة ال html بصفحة منفصلة تحتوي على تنسيقات الcss
    <link rel="stylesheet" href="style.css">

     

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

تم التعديل في بواسطة عبدالباسط ابراهيم
إضافة بعض المعلومات
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

<style>
	p{
      color: red;
      
  }

</style>

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

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

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

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

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

</head>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

     

  2. عمل عنصر 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>

     

  3. عمل ملف بصيغة 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;
    }

     

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...