الدرس الأول من دورة css - مواضع و طريقة كتابة أكواد css

مواضع كتابة أكواد css

تكتب أكواد css فى ثلاثة مواضع مختلفة:

أولا:- كتابة كود css فى ملف خارجى :
وذلك بإنشاء ملف بإمتداد "css." ثم ربطه بكافة صفحات الموقع عن طريق كتابة الوسم فى القسم head بهذا الشكل:

كود:

وتكتب الأكواد بملف css بهذا الشكل:

كود:

body {
background-color:#ffffff;
}
table {
background-color:#000000;
}

وتعتبر
هذه هى الطريقة الأمثل والشائعة بين مطورى المواقع وخاصة مع المواقع التى
تحتوى على صفحات كثيرة -ويكتب ملف css عن طريق أى محرر نصى- ويجب أن
لايحتوى هذا الملف أى وسوم html .

ثانيا:- كتابة كود css بين وسمى

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

ثالثا :-كتابة كود css داخل وسوم html من خلال السمة style بهذا الشكل:

كود:

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

طريقة كتابة كود css

- أول شئ يكتب فى كود سى إس إس هو المحدد ( selector) وهو الإسم الذى يحدد العنصر الذى نريد تنسيقه . وينقسم إلى ثلاثة أنواع :
1- (HTML element selector):- وهنا نكتب إسم وسم html الذى نريد تنسيقه بهذا الشكل :

كود: table {
background-color:#000000;
} وهنا سيتم تطبيق الخصائص التى بين الأقواس على كافة الجداول الموجودة بالصفحة.

2- (id Selector) :- وهو يستخدم قيمة الid للعنصر المراد تنسيقه - و يحدد خصائص عنصر فريد بالصفحة ويكتب بهذا الشكل:

كود: #table1 {
background-color:#000000;
} وهنا سيتم تطبيق الخصائص التى بين الأقواس على جدول واحد فقط من الجداول الموجودة بالصفحة وهوالجدول الذى يحمل السمة
"id = "table1

3- (class selector ):-وهو يستخدم قيمة الclass للعنصر المراد تنسيقه - و يحدد خصائص عنصر أو مجموعة عناصر بالصفحة لها نفس الclass ويكتب بهذا الشكل:

كود: .table1 {
background-color:#000000;
} وهنا سيتم تطبيق الخصائص التى بين الأقواس على جميع الجداول التى تحمل السمة "class="table 1

يمكنك أيضا كتابة المحدد ( selector) عن طريق دمج الكلاس بعد عنصر html بهذا الشكل :

كود:
p.main {
background-color:#000000;
}
وفى هذا المثال يتم تطبيق الخصائص على الفقرة التى تحمل الكلاس (main) فقط .

- أما الخصائص التى نريد تطبيقها على العنصر فتكتب داخل الأقواس {} - ويتم كتابة الخاصية ثم ( : ) ثم نكتب القيمة - وبنهاية السطر نضع( ; ) - ويمكننا وضع أكثر من خاصية بهذا الشكل:

كود: table {
background-color:#000000;
color:#ffffff;
}

ملحوظة:إذا
تم تنسيق عنصر عن طريق أكثر من طريقة فى ملف html واحد فإن أولوية الخصائص
التى ستطبق على العنصر تكون على الترتيب التالى:

- الخصائص المكتوبة في وسم html.
-الخصائص المكتوبة في القسم head.
- الخصائص المكتوبة في ملف css الخارجى.
-الخصائص الإفتراضية بالمتصفح.

» الدرس الثانى لجروب الهكر
» طريقة تحضير حلوى الجريش
» طريقة عمل شات مجانى DigiChat ChatMaster
» شرح بالصور طريقة عمل منتدى vb مجاني
» طريقة تحضير فخد غنم مشوي بالفرن مع الخضار