القائمة الرئيسية

الصفحات

قواعد شكل الكود فى لغة سى اس اس CSS

التعرف على قواعد كتابة الكود فى أى لغة حتى يتم كتابة كود بشكل سليم وبدون أخطاء .


قواعد شكل  الكود فى لغة CSS

أنواع قواعد ورقة الأنماط المتتالية (CSS)

هناك ثلاثة أنواع محددة من قواعد ورقة الأنماط المتتالية (CSS).

قاعدة ورقة الأنماط المتتالية (CSS) عبارة عن بيان يحدد نمط عنصر واحد أو أكثر في صفحة الويب الخاصة بك.

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

الأسئلة التي قد تكون لديكم تشمل:

ما هي قواعد العنصر؟

ما هي فئات CSS؟

ما هو معرف CSS؟

هذا الدرس سوف يجيب على تلك الأسئلة.

قاعدة العنصر-element rule

تحدد قاعدة CSS الأنماط لعناصر جميع صفحات الويب بإستخدام ورقة الأنماط ، بما في ذلك <النص الأساسي> لصفحاتك وعلامات HTML مثل <h1> و <p> و <ul>.

 هذه العناصر تسمى المحددات.

و يمكن توضيح كل نص منهم حيث تشير p لــــ paragraph و هي فقرة من الكلام .

وتشير ul لــ قائمة من العناصر (الإختيارات) وتشير h1 الي العنوان .

تنسيق القاعدة أو بناء الجملة

تتكون القاعدة من محدد وإعلان محاط بأقواس متعرجة:

المحدد {تصريح} selector:decleration.


يحتوي الإعلان على خاصية المُحدِّد وقيمة العقار. تُتبع الخاصية دائمًا بنقطتين (:) وتنتهي كل قيمة بفاصلة منقوطة (؛).


المحدد {الخاصية: القيمة ؛} {;selector {property: value

فمثلا:

{;h1 {font-weight: bold

h1 هو المحدد.

font-weight هي خاصية محدد هذه القاعدة

{;font-weight: bold} هو الإعلان .

bold:هي قيمة الخاصية حجم الخط .


{;h1 {font-weight: bold; color: green


لتسهيل القراءة والتحرير . غالبًا ما تتم كتابة القواعد في النموذج:


h1 {
font-weight: bold;
color: green;
}



محددات متعددة:

.يمكنك تضمين محددات متعددة في القاعدة ، إذا كانت الخصائص كلها متشابهة:

h1, h2, h3 {
font-weight: bold;
color: green;
}


قواعد شكل الكود فى لغة CSS

قواعد شكل الكود فى لغة CSS


وهذا شكل الكود في صفحة الويب.

قواعد شكل الكود فى لغة CSS

نظرًا لعدم ذكر الحجم في هذا المثال ، يتم عرض الحجم الافتراضي لمتصفح الويب.


حكم الطبقة class rule

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


.newcolor {color: red؛}


لتطبيق الفئة على عنصر له قاعدة محددة له . عليك تضمين عبارة class في كود HTML الخاص بك. على الرغم من أنك قد تكون حددت لون <h1> و <p> في قواعد CSS الخاصة بك . يمكنك تعيين فئة CSS لهم في أماكن مختلفة في مستند HTML الخاص بك:


<h2 class = "newcolor"> حالة خاصة </ h2>


<p class = "newcolor"> حالة أخرى </ p>


لاحظ أن تطبيق فئة CSS يتبع التكوين كتعاريف قياسية لـ HTML. تتمثل ميزة استخدام فئة CSS في أنه يمكنك تغيير المتغيرات في ملف CSS حتى يتم تطبيقها على جميع ملفات HTML.


  css قاعدة معرف  (css id rule)

قاعدة معرف CSS هي إستثناء نمط مشابه لقاعدة الفئة . بإستثناء أنه يمكن إستخدامها مرة واحدة فقط في صفحة الويب. يسبقه علامة التجزئة (#). مثال على قاعدة المعرف هو:

#right_col {width: 200px;}


أيضًا . يمكن تضمين علامة HTML مع قاعدة المعرف:

#right_col p{font-size: 66%;}


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

بعد ذلك ، في كود HTML الخاص بك . يتم تضمين معرف right_col في <div>:


<div id="right_col"> ... </div>


ضمن العمود الأيمن ، سيكون حجم كل <p> هو الحجم الافتراضي 66٪.

مثال آخر هو:

#author {font-style: italic; text-align: center;}


بعد ذلك ، في كود HTML الخاص بك . تقوم بتضمين عبارة فئة للحالة المحددة:


       <p id = "author">Ron Kurtus</p>


ملاحظة: إلى حد ما أتسائل عما إذا كان الأمر يستحق العناء لأسلوب بسيط مثل هذا. قد يكون من الأسهل توسيط علامة <p> وإضافة <i> إلى الخط المائل. ومع ذلك ، أعتقد أن هناك حالات يكون فيها الطريق لإتخاذها.


ملخص

قاعدة ورقة الأنماط المتتالية (CSS) عبارة عن بيان يحدد نمط عناصر صفحة الويب. يتكون من محدد وكتلة إعلان ويحتفظ بجميع مثيلات العنصر. إستثناءات القاعدة تشمل فئة CSS ومعرف CSS.

reaction:

تعليقات