درس 2: كيف تعمل تقنية CSS؟

في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML. الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي. القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة: باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر: body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS: لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن. تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل. الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

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

قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات: default.htm

My first stylesheet

style.css

body { background-color: #FF0000; }
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف. قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!

الدرس 3: الألوان والخلفيات

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

• color
  
• background-color
  
• background-image
  
• background-repeat
  
• background-attachment
  
• background-position
  
• background
  

لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML. فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم

، المثال أدناه سيقوم بتوضيح كيفية تحويل كل

إلى اللون الأحمر: h1 { color: #ff0000; }

• شاهد المثال
  

الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)). خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر. العنصر يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر . يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري و

. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }

• شاهد المثال
  

لاحظ أننا قمنا بتفعيل خاصيتين للعنصر

وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة. الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر. فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك. لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر وحدد مسار الصورة: body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }

• شاهد المثال
  

انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif"). تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة. في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat. القيمةالوصفمثال

Background-repeat: repeat-x	الصورة ستتكرر أفقياً	شاهد المثال
background-repeat: repeat-y	الصورة ستتكرر عمودياً	شاهد المثال
background-repeat: repeat	الصورة ستتكرر أفقياً وعمودياً	شاهد المثال
background-repeat: no-repeat	لن تتكرر بأي شكل	شاهد المثال

مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل:: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }

• شاهد المثال
  

تثبيت صورة الخلفية "background-attachment"

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

Background-attachment: scroll	الصورة ستتحرك مع الصفحة	شاهد المثال
Background-attachment: fixed	الصورة ستبقى ثابتة	شاهد المثال

المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

• شاهد المثال
  

مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة. هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح. هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
الجدول أدناه يوضح بالمزيد من الأمثلة القيمةالوصفمثال

background-position: 2cm 2cm	هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة	شاهد المثال
background-position: 50% 25%	هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة	شاهد المثال
background-position: top right	هذه الصورة وضعت في أعلى يمين الصفحة	شاهد المثال

المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

• شاهد المثال
  

جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس. باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة. فمثلاً يمكن اختصار هذه الأسطر: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
background-color | background-image | background-repeat | background-attachment | background-position إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال: background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left. ملخص

في هذ الدرس تعلمت طرقاً جديدة لا يمكنك تطبيقها باستخدام HTML فقط، المتعة تستمر في

الدرس 4: الخطوط

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

• font-family
  
• font-style
  
• font-variant
  
• font-weight
  
• font-size
  
• font
  

نوع الخطوط "font-family"

الخاصية font-family تستخدم لوضع قائمة خطوط تطبق على حسب الأولوية على عنصر أو صفحة ما، إذا لم يجد المتصفح الخط الأول ضمن قائمة الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض الخط التالي، وهكذا حتى يجد الخط المناسب. هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة. أسماء الخطوطأمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".أسماء عامةالأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة. الاختلاف بين أنواع الخطوط يوضح في المثال التالي: عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده. فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

• شاهد المثال
  

العناوين التي حددت باستخدام العنصر

ستعرض باستخدام خط "Arial"، إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين. لاحظ كيف أننا وضعنا اسم خط "Times New Roman" بين علامتي تنصيص لأن اسمه يحوي مسافات ولذلك يجب أن يوضع بين علامتي تنصيص. طراز الخط "font-style"

الخاصية font-style تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو oblique، في المثال أدناه كل عناوين

ستظهر بشكل مائل. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}

• شاهد المثال
  

تباين الخط "font-variant"

الخاصية font-variant تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر: إذا اختيرت القيمة small-caps للخاصية font-variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط. h1 {font-variant: small-caps;} h2 {font-variant: normal;}

• شاهد المثال
  

وزن الخط "font-weight"

الخاصية font-weight تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}

• شاهد المثال
  

حجم الخط "font-size"

حجم الخط يمكن تحديده بالخاصية font-size. هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

• شاهد المثال
  

هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'. في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟ جمع كل خصائص الخط "font"

استخدام font الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد. فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر

: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل: p { font: italic bold 30px arial, sans-serif; }
قائمة قيم الخاصية font ترتب بهذا الشكل:
font-style | font-variant | font-weight | font-size | font-family ملخص

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

الدرس 5: النصوص

تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص، سنتحدث عن هذه الخصائص في هذا الدرس:

• text-indent
  
• text-align
  
• text-decoration
  
• letter-spacing
  
• text-transform
  

وضع فارغ قبل أول سطر "text-indent"

الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر

: p { text-indent: 30px; }

• شاهد المثال
  

محاذاة النص "text-align"

خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات. في المثال أدناه النص في رأس الجدول

الدرس 6: الروابط

يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط (مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ) الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes. ما هي الفئة المزيفة؟

الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML. لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم لذلك يمكننا أن نستخدم a كمنتقي في CSS: a { color: blue; }
الرابط له عدة حالات، فمثلاً يمكن أن يزوره المستخدم أو لا يفعل، لذلك يمكنك أن تستخدم فئة مزيفة لكي تحدد شكلاً مختلفاً للرابط الذي زاره المستخدم عن الرابط الذي لم يزره بعد. a:link { color: blue; } a:visited { color: red; }
استخدم a:link وa:visited للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي a:active أما a:hoverفهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط. سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة. الفئة المزيفة: link

الفئة المزيفة :link تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها. في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح. a:link { color: #6699CC; }

• شاهد المثال
  

الفئة المزيفة: visited

الفئة المزيفة :visited تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق: a:visited { color: #660099; }

• شاهد المثال
  

الفئة المزيفة: active

الفئة المزيفة :active تستخدم للروابط النشطة. في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء: a:active { background-color: #FFFF00; }

• شاهد المثال
  

الفئة المزيفة: hover

الفئة المزيفة :hover تستخدم عندما يكون مؤشر الفأرة فوق الرابط. يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل: a:hover { color: orange; font-style: italic; }

• شاهد المثال
  

المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط

هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة :hover. مثال 1أ: وضع مسافات بين الحروف

كما تتذكر في الدرس 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية letter-spacing، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة: a:hover { letter-spacing: 10px; font-weight:bold; color:red; }

• شاهد المثال
  

مثال 1ب: الحروف الكبيرة والصغيرة

في الدرس 5 ألقينا نظرة على الخاصية text-transform والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

• شاهد المثال
  

في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب! مثال 2: إزالة السطر من أسفل الرابط

أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟ يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك. على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية text-decoration يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية text-decoration. a { text-decoration:none; }
يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط: a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }

• شاهد المثال
  

ملخص

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

الدرس 7: المطابقة والتجميع للعناصر class وid

في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات class والمعرفات id لتحديد خصائص معينة لعناصر مختارة. كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في موقعك؟ كيف يمكنك أن تجمع بين روابط مختلفة وكل مجموعة تضعها في قسم مختلف وكل قسم له تصميم خاص؟ هذه أمثلة سنجيب عليها في هذا الدرس. تجميع العناصر باستخدام الفئات "class"

لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:

الخضار:

• يقدونس
• جزر
• خيار

فواكه:

• تفاح
• أناناس
• بطيخ

• شاهد المثال
  

نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق. لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية class. لنقم بتحديد فئات للمثال أعلاه:

خضار:

• class="veg">بقدونس
• class="veg">جزر
• class="veg">خيار

فواكه:

• class="fru">تفاح
• class="fru">أناناس
• class="fru">بطيخ

يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل: a { color: blue; } a.veg { color: #FFBB00; } a.fru { color: #800000; }

• شاهد المثال
  

كما ترى في المثال، يمكنك أن تحدد خصائص لعناصر معينة تتبع مجموعة محددة باستخدام الفائت .classname في ملف التصميم. تحديد معرف خاص لعنصر معين من خلال id

بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية id. المميز في الخاصية id هو عدم إمكانية وجود عنصرين يستخدمانه في نفس الملف، أي لا يمكن لعنصرين أن يستخدما معرفاً id واحداً في نفس الصفحة، كل معرف id يجب أن يكون مميزاً وفريداً، أما غير ذلك فعليك استخدام الفئات class، دعنا نلقي نظرة على مثال محتمل لكيفية استخدام المعرف id:

فصل 1

...

فصل 1.1

...

فصل 1.2

...

فصل 2

...

فصل 2.1

...

فصل 2.1.2

...
المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً id كما في المثال الآتي:

id="c1">فصل 1

...

id="c1-1">فصل 1.1

...

id="c1-2">فصل 1.2

...

id="c2">فصل 2

...

id="c2-1">فصل 2.1

...

id="c2-1-2">فصل 2.1.2

...
لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل: #c1-2 { color: red; }

• شاهد المثال
  

كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم. ملخص

في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع class وid، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.

الدرس 8: تجميع العناصر باستخدام span وdiv

العنصران و

يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid. في هذ االدرس، سنلقي نظرة عن قريب على استخدام و

لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

• التجميع بالعنصر
  
• التجميع بالعنصر
  
  

التجميع بالعنصر

العنصر هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق. مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

Early to bed and early to rise
makes a man healthy, wealthy and wise.

لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي ، كل span أضفنا لها فئة class والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:

Early to bed and early to rise
makes a man healthy,
wealthy
and wise.

أوامر CSS المتعلقة بالمثال: span.benefit { color:red; }

• شاهد المثال
  

بالطبع يمكنك استخدام المعرف id لإضافة الألوان على لكن تذكر أن استخدام المعرف يجب أن يكون لمرة واحدة في الصفحة الواحدة، لذلك في المثال أعلاه عليك أن تستخدم ثلاث معرفات متميزة لكل كما تعلمت في الدرس الماضي. التجميع بالعنصر

العنصر يستخدم في العناصر كما رأيت في المثال السابق، العنصر

يستخدم لتجميع العناصر. هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام

يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:

• فرانكلين روزفيلت
• هاري ترومن
• جون كينيدي
• ليندون جونسون
• جيمي كارتر
• بيل كلينون

• دوايت أيزنهاور
• ريتشارد نيكسون
• جيرالد فورد
• رونالد ريغان
• جورج بوش
• جورج دبليو بوش

وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة: #democrats { background:blue; } #republicans { background:red; }

• شاهد المثال
  

في الأمثلة لاسابقة استخدامنا

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

في الدرس 7 و8، تعلمت حول المنتقي id وclass والعنصرين span وdiv. يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS

الدرس 9: نموذج الصندوق

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


الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في HTML وضعنا نصاً مقتبساً من الميثاق العالمي لحقوق الإنسان:

Article 1:

All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood

بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل: المثال يحوي عنصرين

و

، نموذج الصندوق للعنصرين سيظهر بهذا الشكل: حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS. الخصائص التي تتحكم بالصناديق المختلفة هي: padding وmargin وborder، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.

• الدرس 10: نموذج الصندوق margin وpadding
  
• الدرس 11: نموذج الصندوق border
  

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

في هذا الدرس تعلمت نموذج الصندوق، في الدروس القادمة سنلقي نظرة أقرب على كيفية إنشاء والتحكم بنموذج الصندوق.

الدرس 10: الحاشية والحشو

في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding.

• تعديل خاصية margin لعنصر ما
  
• تعديل خاصية padding لعنصر ما
  

تعديل خاصية margin لعنصر ما

كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح. في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة. في ملف CSS سنكتب التالي: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق: body { margin: 100px 40px 10px 70px; }

• شاهد المثال
  

يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر

: body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }

• شاهد المثال
  

تعديل خاصية padding لعنصر ما

الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار. استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية: h1 { background: yellow; } h2 { background: orange; }

• شاهد المثال
  

بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة: h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }

• شاهد المثال
  

ملخص

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

نموذج الصندوق - الإطارات 11: Borders

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

• border-width
  
• border-color
  
• border-style
  
• أمثلة لإطارات
  
• border
  

سماكة الإطار "border-width"

سماكة الإطار تحدد من خلال القيمة border-width والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها: ألوان الإطارات "border-color"

الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow". أنواع الجداول "border-style"

هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك تستطيع عرض الإطار بألوان وسماكة مختلفة. القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار. أمثلة لإطارات

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

و

و

و

، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة: h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }





• شاهد المثال
  
يمكنك أيضاً تحديد خاصية تتعلق بجهة واحدة من الإطار، فتستخدم top للإطار العلوي، وbottom للإطار السفلي، وleft للأيسر، وright للأيمن، وهذا مثال يوضح كيفية فعل ذل: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }




• شاهد المثال
  
جمع كل الخصائص "border"

كما هو الحال مع خصائص مختلفة، يمكن أن تجمع بين خصائص الجداول المختلفة في خاصية واحدة، ألقي نظرة على هذا المثال: p { border-width: 1px; border-style: solid; border-color: blue; }
يمكن اختصارها هكذا: p { border: 1px solid blue; }
ملخص

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

الدرس 12: الارتفاع والعرض

حتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها، في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.

• width
  
• height
  

تحديد العرض "width"

الخاصية width تحدد عرضاً معيناً لعنصر محدد. المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً: div.box { width: 200px; border: 1px solid black; background: orange; }

• شاهد المثال
  

تحديد الارتفاع "height"

في المثال أعلاه لاحظنا أن ارتفاع الصندوق تحدده محتوياته، يمكن التأثير على ارتفاع العنصر باستخدام الخاصية height، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

• شاهد المثال
  

ملخص

في الدروس 9، 10، 11 و12 أعطيناك مقدمة لنموذج الصندوق في CSS، كما ترى نموذج الصندوق يعطيك الكثير من الخيارات الجديدة، ربما قمت باستخدام الجداول في HTML لإنشاء التصاميم، لكن الآن ومع CSS ونموذج الصندوق يجب أن تتمكن من إنشاء تصاميم أنيقة وأكثر دقة وتتوافق أكثر مع المعايير القياسية لمنظمة W3C.

الدرس 13: تعويم العناصر (floats)العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، أنظر الدرس 9 للمزيد حول نموذج الصندوق، المثال التالي يوضح مبدأ تعويم العناصر:صندوق عائم إلى اليسارإذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:صندوق عائم إلى اليسار يحوي صورة والنص يلتف حولهكيف يمكن فعل ذلك؟ملف HTML للمثال أعلاه سيكون بهذا الشكل:
causas naturales et antecedentes, idciro etiam nostrarum voluntatum... لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية float القيمة left: #picture { float:left; width: 100px; } * شاهد المثالمثال آخر: الأعمدةخاصية التعويم يمكن استخدامها للأعمدة في الصفحة، لإنشاء عمود عليك ببساطة أن تضع هيكلية للأعمدة في HTML باستخدام

الدرس 14: وضعية العناصر

باستخدام وضعية العناصر في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة ويمكن لتعويم العناصر أن يساعدك على فعل ذلك أيضاً (إقرأ الدرس 13)، وضعية العناصر في CSS يعطيك الكثير من الخيارات لإنشاء تصاميم متقدمة وعالية الدقة. هذا ما سنتعلمه في الدرس:

• مبادئ وضعية العناصر في CSS
  
• وضعية العناصر المطلقة
  
• وضعية العناصر النسبية
  

مبادئ وضعية العناصر في CSS

تصور أن نافذة المتصفح منسقة بهذا النظام: مبدأ وضعية العناصر في CSS هو أنك تستطيع وضع أي صندوق على أساس إحداثيات ونظام محدد. لنقل بأننا نريد أن نضع عنواناً في مكان محدد، باستخدام نموذج الصندوق - إقرأ الدرس 9 - يمكن للعنوان أن يظهر بهذا الشكل: إذا أردنا للعنوان أن يكون موقعه على بعد 100 بكسل من أعلى الصفحة، و200 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة: h1 { position:absolute; top: 100px; left: 200px; }
والنتيجة ستكون بهذا الشكل: كما ترى وضعية العناصر في CSS أسلوب دقيق جداً لوضع العناصر حيث تشاء، وهو أسهل بكثير من تجربة استخدام الجداول لفعل ذلك أو الصور الشفافة أو أي شيء آخر. وضعية العناصر المطلقة

أي عنصر وضع بشكل مطلق لا يأخذ مساحة في الصفحة، هذا يعني أنه لا يترك فراغاً بعد أن يوضع بشكل مطلق. لوضع أي عنصر بشكل مطلق يجب أن تعطي الخاصية position القيمة absolute، ويمكن أيضاً استخدام الخصائص left وright وtop وbottom لتحديد وضعية الصندوق. كمثال للوضعية المطلقة قمنا بوضع أربع صناديق في الزواية الأربعة للصفحة: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }

• شاهد المثال
  

وضعية العناصر النسبية

لوضع العناصر بشكل نسبي عليك أن تعطي الخاصية position القيمة relative، الاختلاف بين الوضعية النسبية والمطلقة هي كيفية التعامل مع وضع العنصر نفسه. وضعية العنصر النسبية تحسب على أساس وضعه الأصلي في الصفحة، هذا يعني أنك إذا حركت العناصر إلى اليمين أو اليسار أو الأعلى أو الأسفل فإنه سيأخذ مساحة من النص بعد وضعه في مكانه المحدد. كمثال على الوضعية النسبية يمكننا أن نجرب وضع ثلاث صور بشكل نسبي في الصفحة، لاحظ أن الصور تترك مساحة فارغة في أماكنها الأصلية من الصفحة: #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }

• شاهد المثال
  

ملخص

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

الدرس 15: طبقة فوق طبقة باستخدام z-index

يمكنها أن تتحكم بالأبعاد الثلاث, العرض والارتفاع والعمق، وقد تحدثنا بما فيه الكفاية عن العرض والارتفاع في الدروس السابقة، في هذ االدرس سنتعلم كيف نضع عناصر مختلفة في طبقات، باختصار هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض. لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (z-index)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى. لنقل بأننا نريد ترتيب صور للعبة الورق، يجب أن نعطي لكل ورقة رقم z-index: في هذه الحالة الأرقام متتابعة (من 1 إلى 5) لكن يمكن تحقيق نفس النتيجة باستخدام خمسة أرقام مختلفة، المهم هو الترتيب المتصاعد. المثال أدناه يوضح كيفية ترتيب البطاقات: #ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }

• شاهد المثال
  

ترتيب العناصر فوق بعضها البعض سهل والإمكانيات كثيرة، يمكنك أن تضع الصور فوق النص أو النص فوق الصور أو تضع نصاً فوق نص ... إلخ. ملخص

الطبقات يمكن استخدامها في الكثير من الحالات، فمثلاً جرب استخدام z-index لإنشاء مؤثرات على العناوين بدلاً من استخدام الصور، فهذا يجعل الموقع أكثر سرعة ويعطيه فرصة للظهور في محركات البحث.

الدرس 16: المعايير القياسية

منظمة W3C أو World Wide Web Consortium, هي منظمة مستقلة تضع المعايير التقنية لشبكة الويب (مثال: HTML، CSS، XML وغيرها)، مايكروسوفت ومنظمة موزيلا وغيرها من الشركات كلها تشارك في منظمة W3C واتفقت على أن مستقبل شبكة الويب يكمن في المعايير القياسية. إذا سبق لك أن جربت تصميم الموقع فأنت في الغالب تعرف أن هناك احتمال كبير بظهور الموقع بشكل مختلف في متصفحات مختلفة، وإنشاء موقع يظهر بشكل صحيح في كل المتصفحات الحديثة اليوم قد يستهلك الكثير من الوقت ويثير أعصابك. الفكرة من وجود المعايير القياسية المتفق عليها هو وجود تقنيات ويب موحدة، هذا يعني أن مطور الموقع إذا قام بإنشاء موقع فهو يعلم أنه سيظهر بالشكل المطلوب في كل المتصفحات وأنظمة التشغيل، لذلك نفضل أن تقوم باستخدام المعايير القياسية وتقوم بالتأكد من أن ملفات CSS التي قمت بكتابتها تتوافق مع هذه المعايير.. مدقق CSS

لتبسط عملية تعلم معايير CSS قامت منظمة W3C بتطوير أداة تدقيق تقوم بقراءة ملفات CSS وتعطيك النتائج مع الأخطاء والتحذيرات إن كان ملف CSS يحوي أي خطأ. ولكي نبسط عليك الأمر يمكنك أن تتأكد بنفسك من صحة ملفات CSS مباشرة من هذه الصفحة، ببساطة ضع عموان ملف CSS الخاص بموقعك واضغط على زر "تدقيق" وستنتقل إلى موقع W3C لترى النتيجة وتعرف الأخطاء إن وجدت. إذا لم يجد المدقق أية أخطاء ستظهر لك هذه الصورة والتي يمكنك أن تضعها في موقعك لتبين بأنك تستخدم المعايير القياسية: المدقق يمكن إيجاده على هذا الرابط: http://jigsaw.w3.org/css-validator/