CSS

CSS How To
كيفية إستخدام لغة CSS

ستتعرف علي طريق كتابة CSS المختلفة وهي في ملف HTML أو في ملف منفصل CSS والطرق الثلاثة CSS External Style - CSS Internal Style - CSS Inline Style.

التاريخ

06 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2249

المواضيع

24
الشروحات chevron_left CSS How To chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS How To
كيفية إستخدام لغة CSS

</> CSS How To
كيفية إستخدام لغة CSS

أوامر لغة CSS تُكتب في ثلاث أماكن بجوار لغة HTML طريقتين داخل ملف HTML وطريقة خارجية في ملف منفصل.


طرق كتابة CSS:

  • inline Style تُكتب لغة css بداخل خاصية style لأي عنصر.
  • Internal Style تُكتب لغة css في صفحة HTML بداخل عنصر <style > الزي يكُب في عنصر <head>.
  • External Style تُكتب لغة css في ملف منفصل تماماً عن ملف HTML وiذا الملف إمتدادة هو css ويتم ربطة بصفحة HTML في <head>عن طريق عنصر <link>.

</> CSS Inline Style
طريقة Inline Style في لغة CSS

تًكتب طريقة Inline Style بداخل العنصر في ملف HTML وهذة الطريقة تستخدم للسرعة وللتجارب وليست طريقة موصي بها ولكنها تُعد طريقة صحيحة.


  • Inline Style تستخدم للتجارب أو لسرعة إنجاز التنسيق.
  • Inline Style لا ينصح بها لأن هناك طرق أفضل.
  • Inline Style تُكتب بداخل خاصية style بداخل علامة البداية open tag لأي عنصر.
  • Inline Style كل عنصر في لغة HTML له خاصية style منفصلة وله تنسيق مختلف.
  • Declearation Block تتم الكتابة بداخل خاصية style علي هيئة declearation block الخاصية متبوعة بالقيمة والفاصل بينهم colon فاصلة غير منقوطة color:red.
  • style لا يمكن أن تتكرر خاصية style للعنصر فقط واحدة ولكن يمكن أن يتكرر declearation block أكثر من مرة.
  • Curly Braces لا تستخدم الأقواس المُجعدة { } مع طريقة Inline Style.
inline style syntax

طريقة كتابة inline style في لغة CSS.

<h1 style="color:red">This is a heading</h1>
multi style attribute

طريقة كتابة أكثر من خاصية style لنفس العنصر تُعد طريقة خاطئة.

<h1 style="color:red" style="background:yellow">This is a heading</h1>
style with declearation block

طريقة كتابة style أكثر من تنسيق لنفس العنصر بلغة css بتكرار كُتلة declearation block.

<h1 style="color:red;background:yellow">This is a heading</h1>
multi style for each element

إستخدام خاصية style لكل عنصر لعمل تنسيق مختلف في لغة CSS.

<h1 style="color:red">This is a heading</h1>

</> CSS Internal Style
طريقة Internal Style في لغة CSS

تًكتب طريقة Internal Style بداخل عنصر <style> في ملف HTML في منطقة عنصر <head> وهذة الطريقة تُعد طريقة شائعة وسريعة ولكن ليست طريقة موصي بها.


  • Internal Style تستخدم للتجارب أو لسرعة إنجاز التنسيق.
  • Internal Style لا ينصح بها لأن هناك طرق أفضل.
  • Internal Style تُكتب بداخل خاصية عنصر <style> في ملف HTML في منطقة عنصر <head>.
  •  <style> عنصر style لا يتكرر في صفحة HTML جميع التنسيقات لجميع العناصر تكتب في عنصر style واحد فقط في منطقة عنصر <head>.
  • Declearation Block تتم الكتابة بداخل عنصر style علي هيئة declearation block الخاصية متبوعة بالقيمة والفاصل بينهم colon فاصلة غير منقوطة color:red.
  • Curly Braces لا تستخدم الأقواس المُجعدة { } مع طريقة Inline Style.
Internal style syntax

تُكتب طريقة Internal style بداخل عنصر head في ملف HTML.

<style>
h1 {
  color: red;
}
</style>
multi style

كتابة أكثر من عنصر style بداخل head طريقة خاطئة

<head>
  <style>
    h1 {
      color: red;
    }
  </style>

  <style>
    h1 {
      background: yellow;
    }
  </style>
</head>
multi declearation

إضافة أكثر من تأثير وتنسيق لعنصر h1 بداخل عنصر style واحد عن طريبق كتابة أكثر من declearation.

<head>
  <style>
    h1 {
      color: red;
      background: yellow;
    }
  </style>
</head>

</> CSS External Style
طريقة External Style في لغة CSS

تُكتب طريقة  External Style في ملف css منفصل وتُعد هذة أفضل طريقة لأنها لسهولة تعديل أوامر css وأيضاً لأمكانية إستخدام نفس أوامر CSS مع أكثر من صفحة HTML.

  • External Style هي أفضل طريقة لأنها تعطي سهولة التعديل ولأستخدام نفس أوامر CSS مع أكثر من ملف HTML.


خطوات ربط ملف CSS بملف HTML:

  1. أنشئ ملف CSS جديد بجوار ملف HTML وقوم بتسميته أي إسم وليكن style ثم أحفظ الملف بصيغة css ليصبح mystyle.css.
  2. قم بإضافة عنصر <link> بداخل عنصر <head>
  3.  قم بإضافة خاصية rel بداخل عنصر <link> ثم قم بإضافة القيمة stylesheet بداخل خاصية rel.
  4.  قم بإضافة خاصية href لعنصر <link>  وحدد مسار ملف css مع إسم الملف  css/mystyle.css.
  5. قم بتحديد العنصر مباشرة عن طريق css selector سواء كان Tag Name أو Class Name أو ID Name.
  6. ثم قم بإضافة  Declaration أو أكثر بداخل الـ Curly Braces { } ونضع الـ Property والـ Value. 
CSS in external file

تكتب أوامر CSS مباشرة بداخل ملف CSS.

h1{color:red}
CSS external style

تكتب أوامر css في ملف منفصل وتحديد مسار ملف css بداخل عنصر link في head.

<head>
  <link rel="stylesheet" href="/css/mystyle.css">
</head>
مصطلحات الدرس
How To
How To

كيفية

Style
Style

نمط أو شكل

Inline
Inline

مضمن

Internal
Internal

داخلي

External
External

خارجي

Value
Value

قيمة

Head
Head

عنوان

Selector
Selector

محدد

Tag Name
Tag Name

اسم العلامة

Class Name
Class Name

اسم الفئة

ID Name
ID Name

اسم معرف الهوية

Curly Braces
Curly Braces

أقواس متعرجة

Declaration
Declaration

اعلان

Link Element
Link Element

عنصر Link

Property
Property

خاصية

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
Rel
Rel

Relation

Href
Href

Hypertext Reference

مرجع النص التشعبي
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات