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

فهرس الدروس ( 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