11-هنا نتعلم عن ورقة تنسيق الأنماط css | الربط | التطبيق | أنواع تنسيق css | الوسم | الصنف

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

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

- عليك أن تتعلم css لصياغة المخطط layout
ليست لغة صعبة لكن لابد منها.

الآن ..
- سننشيء صفحة html جديدة ونسيها test.html
- أيضا سننشيء صفحة في ملف css ونسميها styles.css

العمل على الصفحات :
سأكتب كود على صفحة html فقط للعمل عليه وتطبيق لغة css عليه وربطها به.

الكود سيكون في قسم الجسم body كالتالي:

<div id="الكتلة الأولى">
<h1> عناوين الأخبار </h1>
<p> هنا نص خبري </p>
<h2> عناوين الصحف </h2>
<p> هنا نص صحفي </p>

<ul>
<li> كريم </li>
<li> أسعد </li>
<li> مصطفى </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol>
<li> الإمارات </li>
<li> الكويت </li>
<li> قطر </li>
</ol>
<img src="../khaleej.jpg" />
</div>

<div id="الكتلة الثانية">
<h1> أخبار عالمية </h1>
<p> الهند</p>
<h2> أخبار محلية </h2>
<p> الرياض</p>

<ul>
<li> أسماء </li>
<li> لطيفة </li>
<li> جيهان </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol>
<li> برتقال </li>
<li> تفاح </li>
<li> عنب </li>
</ol>
<img src="../fruit.jpg" />
</div>

مالذي يجب معرفته عن لغة css ؟
- يقوم الاختصار css على العبارة Cascading Style Sheets أي أوراق الأنماط المتتالية .
- لا نفعل كل شيء بـ css ولكن معظم الأشياء تقوم بها css
- عليك أن تتعلم في css كيف تربط صفحة css بـ صفحة html .
- css مثل html في كونه لا يهتم بوسع المساحات البيضاء أثناء كتابة الكود. يعني لا يهم إن كتبت التنسق هكذا:

{
font-size:12px;
}

أو
هكذا

{ font-size:12px; }

أيضا يمكن جعل كل الصفات على سطر واحد هكذا :

name { property:value; property:value; property:value; }

- css ليست حساسة لحالة الأحرف فلايهم إن كتبتها بحروف كبيرة أم صغيرة , لكن هناك استثناء فإسم الاسلوب يجب أن يُطابق الوسم المعني في صفحة html . فمثلا إذا كان اسم الصنف في صفحة html هو soso فيجب أن يكون نفس الاسم في صفحة css .
- عليك أن تعرف أين يُكتب ؟ 1- إما يُكتب في صفحة مستقلة أو في نفس الصفحة ويكون في قسم الرأس.
- وعليه فسيكون هناك وسم لربط الصفحتين , هذا الوسم يحتوي على أربعة سمات (خصائص) مختلفة.
الوسم هو : link وهو فردي وليس ثنائي .

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

href

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

rel

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

type

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

media

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

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

مثال:

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

ماذا سأفعل الآن لأطبق ورقة الأنماط css على صفحة html ؟
- سأفتح ورقة الأنماط
- سأكتب فيها الكود التالي :

h1 {
color:fuchsia;
}

- سأعمل save
- سأذهب إلى ورقة html لأرى أن الخط بـ h1 قد تغير إلى اللون الفوشي (الزهري) لأني وكما ترون في ورقة الأنماط جعلت تنسيق خط h1 يكون دائما باللون الفوشي. بعد هذا ستجد أن أي نص توسمه في ورقة html بخط h1 يصبح بهذا اللون

* لاحظ أنه :
طريقة التنسيق في css :
1- تكتب الوسم مثلا h1
2- ثم تفتح أقواس متعرجة
3- تكتب السمة , ثم نقطتين رأسيتين , ثم القيمة , ثم الفاصلة المنقوطة

نتيجة ما سبق :


بعد تطبيق css على صفحة html

الآن سنقوم بتغيير بعض الإعدادات : (سنعرف لماذا في الشرح ) ..
tools - Page Editors Options - IntelliSense
نزيل علامة الصح من الخيار :
css selector closing brace

سنحذف التنسيق السابق في ورقة css

هناك 3 أنواع رئيسية من ورقة الأنماط : ( Cascading Style Sheets )
1- أسلوب الوسم tag
2- أسلوب الصنف class
3- أسلوب الهوية id

تكتب الأنواع السابقة بنفس الطريقة , لكن طريقة تطبيقهم تختلف من نوع لآخر.

ما الفرق بين أسلوب وسم tag و اسلوب class والهوية id ؟
أسلوب tag يصيغ وسم محدد في ورقة html كما فعلنا في وسم h1 وسينسق أي وسم يقابلة بهذا الاسم .
وإذا عملت حفظ ثم ذهبت لصفحة html ستجده تطبق مباشرة .
أما أسلوب class سيطبق التنسيق فقط على العنصر (الوسم ) في html الذي فقط يحمل ميزة class .
وإذا عملت حفظ ثم ذهبت لصفحة html سوف ( لن ) تجده قد تطبق حتى تنادي عليه بذكر اسمه في صفحة html .
أما الهوية id
تشبه class لكن غالبا الهوية id تتعلق بالكتلة div والقسم span

- الصنف ممكن يُطبق على وسم محدد دون الآخرين وإن كانت الوسم الاخرى مثلة مصاغة بلون واحد. حث يمكن للـ class تغيير ذلك الوسم دون غيره.

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

الصيغة الأساسية

name {

property:value;

}

المعنى بالعربي

الاسم {

الخاصية:القيمة;

}

مثال :

h1 {
color:fuchsia;
}

يعني الاسلوب بهذا الاسم name لديه هذه الخصائص مع قيمها.

قد يكون للأسلوب خاصية الخط أيضا مثلا :

p {
font-size:12px;
}

لننشيء أسلوبا الآن :

سأنسق ترويسة h1 :

سأكتب أسمها وافتح أقواس متعرجة . هكذا:

h1 {

}

سأكتب اسم التنسيق h1 والصفة الخاصة بنوع الخط وهي font-family

عليك أن تعرف أن بخصوص عائلة الخطوط , يجب أن يكون الخط غالبا معرفا في متصفح الزائر.

عندما تكتب صفة font-family فإن مايكروسوفت إكسبريشن ويب يعطيك خيارات لعائلة من الخطوط وليس فقط خط واحد.

لماذا عائلة ؟ احياط لتوافر أكثر من خط على متصفح الزائر.

هكذا:

font-family:Arial, Helvetica, sans-serif;

ثم سأنسق بـ حجم الخط فتكون الصفة font-size

بالنسبة للخط ممكن أن يكون بالبكسل px أو em
لكننا سنستخدم الـ بكسل , لكن الطابعات لا تتعامل عادة بالبكسل , تستخدم points النقاط.
سيكون التنسيق هكذا :

font-size:36px;

سأكتب تنسيق اللون :

سأجعل اللون أحمر , وليس أزرق , لان الأزرق غالبا للروابط . مع العلم أن بإمكاننا اختيارهـ .

في مايكروسوفت اكسبريشن عند كتابة الصفة color تظهر لك قائمة منسدلة من الألوان , وعند الضغط مرتين على المربع الأيسر ستظهر لك خلية الألوان , لتجد أن كل لون له صيغة رقمية أيضا.

حيث إن هناك ما يقارب 60 قيمة للألوان.

سيكون التنسيق هكذا :

color:#00CC00;

أما التنسيق الخاص بخط الترويسة h1 ككل فسيكون هكذا :

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#00CC00;
}

لنعمل حفظ , ثم نذهب إلى صفحة html لنرى كيف أثر التنسيق عليها :

النتيجة تغير خط ولون عبارة ( عناوين الأخبار ) , و عبارة ( أخبار عالمية )

كيف نكتب أسلوب الصنفclass في ورقة الأنماط css ؟
- يجب أن يبدأ الصنف بنقطة.
- يجب أن يكون له اسم

مثال :
سأسمي الصنف (ريم ) , سجعل صفاته هي :
اللون الأزرق , ونوع الخط المائل
سيكون هكذا :

.reem {color: #6699FF; font-style:italic; }

سأذهب إلى صفحة html لأجد النتيجة :

سوف لن يكون هناك أي أثر لانه اسلوب صنف وليس اسلوب وسم

(كيف أطبقه إذا ؟)

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

مثلا أريده أن يتطبق على ما وسم بـ h2

إذهب إلى هذا الوسم , واكتب فيه اسم الصنف لكي أناديه من صفحة css .

كنا في صفحة css قد بدأناه بنقطة

لكن في صفحة html سنذكر كلمة class ثم علامة مساواة والقيمة بداخل التنصيص هي اسم الصنف وكما اسميناه (ريم )

هكذا :

<h2 class="reem"> عناوين الصحف </h2>

وبما أن الصنف لا يطبق إلا بمناداته فسأطبقه أيضا على أحد , وليس (كل) بل أحد فقرات التعداد غير الرقمي ,
هكذا: