12- الطرق الثلاث لـتنسيق ورقة css ثلاثة أنواع لـ reset | ثلاثة أنواع لـ selectors

 فهرس الدروس  ( Microsoft Expression Web )

 الدرس السابق (  Microsoft Web  )

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

نتعلم هنا ..

أن هناك 3 أماكن يمكن أن ترف فيها ورقة بتنسيق css .
في الدرس السابق تعلمنا الطريقة الخارجية وهي فصل الورقة في ملف خاص بها.

إذا الطرق هي:
(  طريقة تعريف ورقة css وربطها بصفحة html  )

16:40
لماذا يظهر الخط مختلفا من متصفح لآخر؟
* كل متصفح له طريقة معدة افتراضيا defaults.  قد تبدو مشكلة للمصممين. لذا تحتاج لجعل كل المتصفحات معدة بنشفس الشكل.  reset .

تعين css :
إعادة التعيين له 3 أصناف :
hard reset
simple reset
full reset

التعيين هو أكواد جاهزة يمكن فقط وضعها في صفحة css مثل كود مشهور اسمه
Eric Meyer’s Reset CSS
أو من ( هنا )

يقوم البعض بما يُسمى hard reset لأنه يناسب كل المتصفحات
الطريقة
الوسم عبارة عن نجمة
ثم بين أقواس متعرجة نكتب الصفات
مثلا :

 *
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000000;
    font-weight:normal;
    font-style:normal;
    margin:0;
    padding:0;
    border:0;
    }
   

 نعمل حفظ ثم معاينة صفحة html على المتصفح لنجد الخط يظهر بطريقة عادية جدا يظهر تقريبا في كل المتصفحات بنفس الشكل. 

/*Reset*/

html, body { margin:0; padding:0; border:0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, section,
h1, h2, h3, h4, h3, h4, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead,
{
     margin:0;
     padding:0;
     border:0;
     vertical-align:baseline;
     background:transparent;
     }
    
img {margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
      margin:0; padding:0; border:0;
     vertical-align:baseline;
     background:transparent;
     }
table { border-collapse:collapse; border-spacing:0; }

input, textarea, form, fieldset {
     margin:0; padding:0; border:0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
     display:block; }
h1, h2, h3, h4, h3, h4, h6, p, li, blockqoute, td, th, a, caption, em, strong, stike {
      font-family:Arial, Helvetica, sans-serif;
      font-size:100%;
      font-weight:normal;
      font-style:normal;
      line-height:100%;
      text-indent:0;
      text-decoration: none;
      text-align:left;
      color:#000;
      }
ol, ul {list-style:none; }   

/* Globe */
html {  }
body {  }

26:30
لنقل أن لدينا تنسيق نريد كتابته قبل التنسيق السابق :
مثلا للخط :

h1 { color:#FF0000; }

مع العلم أن الاعداد الاساسي يخبر بأن لون الخط يجب أن يكون أسود.

ماذا ستجد؟

ستجد أن الخط ذو الوسم h1 ليس أحمر وإنما أسود . 

لان التنسيق المكتوب مؤخرا أبعد مما عرف (نسق ) في Reset 

وعليه يجب أن يكون الـ reset هو أول ما تقوم به ليعمل الكود بشكل صحيح.

سأحذف الآن الإعداد reset سأجد صفحتنا المعتادة . 

 أنواع selectors :

1- الجماعي group selector

    h1, h2, h3 {color:#FF0000; }       مثال

2-  الفردي individual selector

        h1 {color:#FF0000; }       مثال

3- المنحدر  descendant selector

#block1 p {color:#FF0000; }       مثال

  

طريقة تنسيق 3 وسوم بنفس الصفات : 

 هذه الطريقة المعتادة 

h1 {color:#FF0000; }
h2 {color:#FF0000; }
h3 {color:#FF0000; }

 ولكن بدلا من كتابتها بالشكل السابق سنعمل Group Selector مجموعة من الوسوم تفصلها فاصلة ثم الاقواس المتعرجة بداخلها الصفات.

هكذا:

h1, h2, h3 {color:#FF0000; }

أما إن اختلفت فيمكن التنسيق مرة أخرى بصفات مختلفة كل على حدة .

h1, h2, h3 {color:#FF0000; }

h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px;}

كذلك يمكن إعطاء المجموعة المزيد من الصفات .مثلا:

h1, h2, h3 {color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-weight:bold }

ولاستثناء أحدها في وزن الخط فيمكن إدخال الصفة بشكل فردي:

هكذا :

h1, h2, h3 {color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-weight:bold }

h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px; font-style:italic}

المنحدر  descendant selector

يساعدك على استهداف تنسيق وسم محدد في قسم محدد

 Parent Child Relationship   سنستخدمه غالبا ويقوم على

حيث أن كل قسم (كتلة) هي الأب والوسوم داخلها هي الأبناء , وكذلك الحال مع الوسم ul فهو كالأب لوسم التعداد اسفله li

مثلا لدي وسم نص في الكتلة الاولى ووسم نص آخر في الكتلة الثانية

سأخبر الكود

جد لي كل وسوم النص في الكتلة الأولى وقم بصياغتهم format بالتنسيق كذا وكذا( اللون الاحمر )

مثلا ليكن الهدف الان هو وسم النص في الكتلة الاولى :

سيكون الوسم هكذا ..

#block1 p {color:#FF0000; }

 عندما تذهب إلى ورقة html ستجد النص في الكتلة الاولى فقط أصبح باللون الاحمر, أما النص في الكتلة الثانية لم يتغير

يعني قمنا بـ 

تعريف الوسم اعتمادا على أي كتلة وهي ما تسمى علاقة الاب والطفل. 

 مثال آخر للقوائم : 

لو قمت بالتنسيق التالي 

li {color:#FF0000; }

فإنه سينسق لي كل العناصر li في كل القوائم سواء ol أو ul

لكن إن اردت استهداف العناصر الواقعة القائمة المرقمة ol فيسكون الكود كالتالي : 

ol li {color:#FF0000; } 

ستجد أن فقط العناصر المرقمة هي من أصبح باللون الأحمر . 

ماذا لو أردت استهداف العناصر في القائمة ul في الكتلة الأولى ؟؟

ستكون هكذا : 

#block1 ul li {color:#FF0000; }

طريقة تعريف ورقة css وربطها بصفحة html

 Cascading Style Sheets

الطريقة الأولى :   external style

 هي الطريقة المنفصلة , 

أي تنسق في صفحة امتدادها css  وتربطها بصفحة html , ويكون الربط بكتابة كود في قسم الرأس له الوسم link وله السمات التالية .

السمات الأربعة وقيمها هي: 

href    سمة 

وهو كما نعرف للرابط (المسار ) كاسم ملف الصفحة وهنا سيكون ملف صفحة css , فالقيمة مثلا اسم ملف الصفحة التي سأربط بها
css/styles.css

rel    سمة

وهو اختصار relationship أي العلاقة بين ملف css والملف الذي نود ربطه به , فالقيمة مثلا نوع تنسيق الصفحة الأخرى التي سأربط بها   

stylesheet

type   سمة

النوع : وهو نوع الورقة التي نستخدمه والتي ستكون ورقة تنسيق الأنماط المتتالية css فتكون القيمة هكذا:
text/css

media    سمة

 وهي تعني على ماذا ستكون المخرجات , وهي بالطيع ستكون الشاشة

 لانه هناك ما يسمى screen أو  print وما سنستخدمه هو قيمة screen .

<link href="css/you.css" rel="stylesheet" type="text/css" media="screen" />

الطريقة الثانية : internal style
كتابة تنسيق css في قسم الرأس head في صفحة html مباشرةداخل وسم اسمه اسلوب style وهو وسم ثنائي.
مثال:

في قسم الرأس سأكتب التنسيق التالي:

<head>
 <style>
h1 {font-size:12px; }
h2 {color:#FF0000; }
 </style>
</head>

النتيجة :

الطريقة الثالثة :  inl-line style

هي الطريقة الفردية , أي ليست في ورقة خارجية ونربطها, وليست في وسم style في الرأس , وإنما نذهب للوسم المعني في الجسم وننسقه لوحده
فمثلا سأذهب إلى وسم النص p وأقوم بتنسيقه باستخدام الوسم style كـ سمه بداخله .
الطريقة :هي كتابة style ثم علامة مساوة وتنصيص بداخلة اسم السمة ثم نقطتين رأسيين ثم القيمة. 
هكذا :

<p style="color: #00CCFF";>   الهند</p>

النتيجة أن النص صيصبح باللون السماوي.
___
لماذا تفضل طريقة css الخارجية ؟
consistency التوافق :
أي أنها تطبق على كافة وسوم الصفحات لكن مع الفردية ستضطر إلى تنسيق سطر سطر.

* ) في الحقيقة يفضل الطريقة المنفصلة لانها تطبق بشكل تام على كافة الكود وليس وسم ,,وسم ..

ملاحظة :
ماذا يحدث لو طبقت التنسيق بطريقة خارجية وسطرية (فردية ) في نفس الوقت ؟
ستكون الأسبقية precedence للأقرب وهو الفردي حتى وإن كان على نفس الوسم.
وإن كان المميزات أكثر في الورقة الخارجية فبعد أن يطبق التنسيق الفردي سيأخذ الميزات الباقية من الورقة الخارجية

قدر ترغب بالاطلاع على هذا الموضوع :
3 أنواع رئيسية من ورقة الأنماط :  (  Cascading Style Sheets  )

الأنواع الرئيسية الثلاثة لكتابة تنسيق في ورقة الأنماط css

Cascading Style Sheets

الأنواع الرئيسية لكتابة تنسيق في ورقة الأنماط css :
1- أسلوب الوسم tag
2- أسلوب الصنف class وهو يُسبق بنقطة ثم اسم الصنف
3- أسلوب الهوية id وهو يُسبق بعلامة هاشتاق ثم اسم الصنف


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

ملاحظة :
- غالبا الهوية تطبق مع الكتل div و أقسام span .
مع العلم أننا نستطيع أن نطبق هوية على أحد الوسوم في صفحة html كما كنا نفعل مع class

قد ترغب بالإطلاع على هذا الدرس لمعرفة كيف تبدأ بتنطبيق css :
هنا نتعلم عن ورقة تنسيق الأنماط css | الربط | التطبيق | أنواع تنسيق css | الوسم | الصنف | الهوية

وهنا جدول لدروس العمل على برنامج   ( Microsoft Expression Web )