CSS في لغة HTML

الدرس التاسع : CSS

في أحد سنواتي الدراسية كنت أصمم موقع بلغة HTML , كنا نكتب في محرر النصوص Notepad , وصممت موقع صغير صفحاتة لا تتجاوز الثماني صفحات , وعندما رآه أستاذي كانت له تعليقات لا أري لها أهمية لكن كان لابد من تنفيذها , مثلا قال لي : عناوين الصفحات كلها تكون باللون الأحمر بدلا من الأزرق , مقاس خطوط الفقرات تقل درجة , تعليقات بالطبع  لا تسمت ولا تغني من جوع .

بالطبع الحل هو فتح كل صفحة واستخراج مصدرها (كما تعرفنا سابقا علي كيفيتها) , وتغيير في كود كل صفحة , من لون العناوين الي حجم خط الفقرات , بالطبع عملية شاقة ومملة في نفس الوقت إذا كان الموقع كبير , من هنا ظهرت تنقية Cascading Style Sheets  التي تستطيع ان تحل تلك الورطة في ثوان معدودة , والتي إعتبرها امتدادا للغة HTML , بل من صميم HTML ذاتها , وإن كانت مستقلة عنHTML  .

والشكل العام لصيغة CSS كالتالي :-

العنصر { التابع : "القيمة" }

P {font- family : "Tahoma"}

H1 { color : "green"}

*وإذا كان هناك أكثر من تابع لنفس العنصر نريد التحكم به , فتكون الصيغة العنصر { "القيمة" : التابع}

أو

العنصر {

التابع : "القيمة" ;

التابع : "القيمة"

}

P    { font- family : "Tahoma" ; color : "blue"}

OR

P    {

Font-family : "Tahoma" ;

Color : "blue"

}

*وإذا كان هناك أكثر من عنصر يشتركون في تابع واحد , تكون الصيغة كالتالي :-

1العنصر  , العنصر2 , العنصر 3 , { التابع : " القيمة "}

H1, h2, p  {font- family : " Tahoma"}

*إذا كان العنصر يمكن أن يأخذ أكثر من حالة فيتم التحديد عن طريق التصنيف ويكون كالتالي :-

p.clas1 { color : "red"}

p.clas2  {color : "orang"}

p.clas3 {color  :"green"}

p.clas4 {color : "blue"}

قم بتطبيق الكود التالي ليتضح المثال تماما أمامك

>HTML<

>Head< >Title< classes in Css >\Title<

>style<

p.clas1 { color : "red"}

p.clas2 { color : "orang "}

p.clas3 { color : "green"}

p.clas4 { :"blue"}

>\style<

>\Head<

>Body<

>p  class = "clas1" < الفقرة الأولي >\p<

>p class = "clas2 "< الفقرة الثانية >\p<

>p  class = "clas3 "< الفقرة الثالثة >\p<

>p  class = " clas4"< الفقرة الرابعة >\p<

>\Body<

>\HTML<

وتكون النتيجة بالشكل الآتي : -

لتطبيق التصنيف علي أكثر من عنصر :-

يمكنك وبكل سهولة أن تحذف العنصر الموجود أمام التصنيف هكذا :-

.clas1 { color : "red"}

.clas2 { color : "orang"}

.clas3 { color : " green"}

.clas4{  color : " blue"}

وبهذا الشكل يمكنك التعامل مع أي عنصر , وللتوضيح قم بتنفيذ الكود التالي :-

>HTML<

>Head<  >Title <  classes in Css  >\Title <

>style <

.clas1 { color : "red"}

.clas2 { color : "orang"}

.clas3 { color : "green"}

.clas4 { color : "blue"}

>\style<

>\Head<

>Body<

>p  class = " clas1 "< الفقرة الأولي >\p<

>h1 class = " clas2 "< الفقرة الثانية >\p<

>h4 class = " clas 3 "< الفقرة الثالثة >\p<

>h6 class = " clas4 "< الفقرة الرابعة  >\p<

>\Body<

>\HTML<

طرق إدراج الأنماط في صفحات الإنترنت :-

هناك ثلاث طرق لاستخدام الأنماط في صفحات HTML :-

1- بإستخدام ملف خارجي (يكون امتداد هcss)

2- بكتابة الكود كما سبق في منطقة الرأس Head) )

3- بكتابة الكود في العنصر المراد تطبيق النمط عليه ( Inline) أي في نفس السطر .

بإستخدام ملف خارجي (بإمتداد CSS ) :-

تعتبر تلك الطريقة الحل تاعملي لمصممي صفحات الانترنت خصوصا إذا كان المشروع المطلوب تنفيذه متعدد الصفحات , حيث تكتب جميع أكواد Css في ملف خارجي وفي ملف HTML تستدعي ذلك الملف .

قم بفتح Notepad وإكتب فيها الكود التالي ثم احفظها بإسم try.css :-

P  {

Font-family : "Tahoma"

}

h 1 {

color : " red"

}

ثم قم بتصميم الصفحة التالية :-

>HTML<

>Head<  >Title< in try. Css >\Title<

>link  rel = " stylesheet" type = " href= try.css"<

>\Head<

>Body<

>p< الفقرة الأولي  >\p<

>h 1 < الفقرة الثانية >\p<

>\Body<

>\HTML<

إدراج النمط عن طريق منطقة الرأس ( Head) :-

وهذا إذا كان مطلوبا تطبيق ذلك النمط علي صفحة واحدة فقط وقد سبق تطبيق  مثال عليه حيث يوضع النمط بين < style>      <\style> .

إدراج النمط داخل العنصر (في نفس السطر Inline ) :-

ويعتبر نظام عقيم ولا يضيف جديد لفائدة css حيث يمكنك كتابته مع العنصر هكذا :-

>p style =" font-size :12pt"< Example >\p<

>p style =" font-size : bold"< Example2>\p<

التعليقات في Css :-

يمكنك وضع التعليقات لكن تختلف الطريقة عن كيفيتها في HTML حيث تكون كالأتي :-

إذا كان التعليق سطر واحد\\

*\

إذا كان التعليق سطر واحد أو أكثر

*\

 

وتلك هي نفسها المستخدمة في اللغات المتقدمة لتصميم الصفحات مثل JavaScript,php Asp

لمحة عن المتغيرات المستعملة مع CSS :-

تحديد نوع الخط	Font-family
تحديد حجم الخط	Font-size
تحديد حالة الخط (سميك –مائل-تحته خط)	Font-weight
تحديد لون الخط	Font-color
تحديد لون الخلفية	Background-color
تحديد صورة في الخلفية	Background-image
تحديد كيفية تكرار الصورة في الخلفية ويأخذ أحد القيم :- للتكرار حتي تملأ الصفحة : repeat لعدم التكرار: no-repeat للتكرار أفقيا : repeat-x للتكرار رأسيا : repeat-y	Background-repeat
لتحديد لون إطارات الجدول	Border-color
لتحديد سمك إطارات الجدول ويأخذ رقما أو أحد القيم التالية :- حدود رفيعة: Thin حدود متوسطة السمك : Medium حدود سميكة : Thick	Border-width
لتحديد شكل إطارات الجدول ويأخذ أحد القيم التالية :- حدود مزدوجة: Doubled   حدود منقوطة: Dotted حدود سميكة: Solid Inset & Outset	Border-style
لتحديد لون الإطار الأيسر للجدول	Border-left-color
لتحديد لون الإطار الأيمن للجدول	Border-right-color
لتحديد لون الإطار العلوي للجدول	Border-top-color
لتحديد لون الإطار السفلي للجدول	Border-bottom-color
لتحديد سمك الإطار الأيسر للجدول	Border-left-width
لتحديد سمك الإطار الأيمن للجدول	Border-right-width
لتحديد سمك الإطار العلوي للجدول	Border-top-width
لتحديد سمك الإطار السفلي للجدول	Border-bottom-width

 

ملحوظة هناك عناصر من HTML لايمكنها التعامل مع CSS مثل <BR> , <Frameset>  <Frame>

ليس هناك شخص مطالبا بحفظ كل تلك المتغيرات ولا يقتصر Css علي تلك المتغيرات فمازال هناك العشرات والمئات التي تضاف يوميا من قبل المطورين ومن خلال عملك ستتعرف علي متغيرات جديده.