فصل css عن xhtml والطريقة الأمثل للتعامل مع css

دورة قوالب ووردبريس: css و xhtml الجزء الثاني

19 يونيو 2009

بسم الله الرحمن الرحيم، تعرفنا في الجزء الاول من هذا الدرس على طريقتين لإدراج css داخل ملف html وطريقة التحكم في خصائص عنصر ما، كذلك تعرفنا على كيفية إضافة الفئات classes والعرفات ids، وخاصة للعنصرين div و span المسؤولين عن تخصيص العناصر block أو inline، وفي هذا الجزء نتعرف على طريقة فصل ملف css عن html واستيراده بعدة طرق، ثم نخصص محورا آخر لشرح بعض الخصائص في Css، وبعض الحيل في التعامل مع هذه التقنية، جهزوا أمتعتكم ولننطلق في رحلتنا السعيدة..

كيف نربط ملف css خارجي مع ملف html؟

يفضل بعض المطورين أن يعمل بطريقة embedded css في بداية تصميم الصفحة لكي لا يضطر للتنقل بين ملفين عند التعديل، وبعد انتهائه من العمل، يقوم بنقل css إلى ملف خارجي (style.css مثلا)، ولربط ملف css بملف html يمكن استعمال عدة طرق ولكل منها مميزاتها:

1. استيراد ملف css باستخدام import

في الملف السابق قمنا بإدراج خصائص بين وسمي style في بداية الملف، يمكن الآن أن نقوم بنقل جميع الخصائص بين الوسمين إلى ملف خارجي (style.css) ثم نستخدم دالة import لإستيراده بالشكل التالي:

<style type="text/css">
	@import url(external.css);
</style>

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

2. استيردا ملف css باستخدام الوسم Link

يمكن أن نستغني عن وسمي style ونقوم باستيراد الملف بواسطة وسم link بين وسمي head أيضا، بالشكل التالي:

<head>
<!-- ... -->
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<!-- ... -->

وهذه هي الطريقة الأساسية والأشهر عند المطورين، وما يجعلها كذلك إمكانية تخصيص مجموعة من ملفات css لأغراض عدة، كالطباعة أو لظهور الصفحات على الأجهزة الكفية، وأجهزة ذوي الإعاقات البصرية، وهذه بعض الأمثلة لإستخدام الطريقة:

<link rel="stylesheet" media="screen" type="text/css" href="pc_and_phones_style.css" />
<link rel="stylesheet" media="print" type="text/css" href="printer_style.css" />
<link rel="stylesheet" media="Braille" type="text/css" href="braille_devices.css" />
<link rel="stylesheet" media="projection" type="text/css" href="projection_devices_style.css" />
<link rel="stylesheet" media="tv" type="text/css" href="television_type_devices.css" />

من الأشياء الممتعة في هذه الطريقة، إمكانية تحديد أكثر من مظهر لصفحة واحدة، باستخدام الخاصية title داخل الوسم link ثم بعد ذلك يمكن اختيار المظهر من القائمة view للمتصفح، ثم قائمة page style: بالشكل التالي:

<link rel="stylesheet" type="text/css" href="style1.css" media="screen" title="Default">
<link rel="alternate stylesheet" type="text/css"
href="style2.css" media="screen" title="Style 2">

يمكنك الإطلاع على مثال لإستخدام هذه الطريقة في موقع meyerweb.com

حيل للتحكم الأمثل في خصائص css

1. مقدمة لبعض خصائص css

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

تجميع الخصائص
بعض الخصائص في Css التي يكون لها نفس الدور يمكن جمعها في خاصية واحدة ونأخذ كمثال الخصائص التالية:
خاصية margin هي في الاصل تجميع لخصائص margin-top,margin-right, margin-bottom, margin-left، مثلا قيم التالية لها نفس المعنى:

/*block 1*/
p{
margin-top: 5px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 7px;
}
 
/*block 2*/
p{
margin: 5px 20px 10px 7px;
}
}

قمنا بجمع الخصائص الأربعة في خاصية margin، لكن مع احترام الترتيب، أحيانا يكون margin-top و margin-bottom لهما نفس القيمة، وكذلك margin-right مع margin-left حينها يمكن بدل أربع قيم أن نكتب قيمتين فقط، الأولى للأعلى والأسفل، والثانية لليمين واليسار

/*block 1*/
p{
margin-top: 5px;
margin-bottom: 5px;
margin-right: 10px;
margin-left: 10px;
}
 
/*block 2*/
p{
margin: 5px 10px;
}

هناك طريقة أخرى للإختصار، بوضع ثلاث قيم فقط، القيمة الأولى تعبر عن margin-top والثانية عن margin-left و margin-right معا، ثم القيمة الثالثة عن margin-bottom

/*block 1*/
p{
margin-top: 5px;
margin-bottom:10px;
margin-right: 7px;
margin-left: 7px;
}
 
/*block 2*/
p{
margin: 5px 7px 10px;
}

ناخذ خاصية أخرى مختلفة بعض الشيء، font هي نتيجة جمع قيم
font-style: وهي نسق الخط إما مائل italic و oblique أو عادي normal
font-variant: خاص بالحروف اللاتينية الصغيرة، ليتم عرضها على شكل حروف كبيرة لكن بحجم أصغر.
font-weight: بروز الخط، يقبل القيم الرقمية، لكن يفضل إما Normal عادي أو blod بارز.
font-size: حجم الخط، بوحدة معينة (px,em,pt والنسب المئوية)، كذلك يقبل بعض المصطلحات المعرفة مثل small,smaller,large,larger,x-small
line-height: ارتفاع الخط، إما رقم دون وحدة (سيكون ارتفاع الخط مضاعفا للقيمة الإفتراضية) أو بوحدة معينة (px,em أو النسبة المئوية)
font-family: وهي نوع الخط، وفي هذه الخاصية يمكن إسناد مجموعة قيم عبارة عن أسماء خطوط tahoma arial، أو نوع الخط مثل serif, sans-serif

لنأخذ مثالا للقيم منفردة، ثم نقوم بتجميعها معا:

/*block 1*/
p{
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 17px;
font-family: Tahoma, "Times New Roman", sans-serif;
}
 
/*block 2*/
p{
font: italic small-caps bold 12px 17px Tahoma, "Times New Roman", sans-serif;
}

ليس ضروريا أن نكتب جميع الخصائص الفرعية، يمكن مثلا أن أحدد فقط حجم الخط ونوعه في خاصية font لكن يبقى الترتيب ضروريا.

p{
font: bold 12px Tahoma, "Times New Roman", sans-serif;
}

ملاحظة: يمكن كتابة جميع الخصائص في سطر واحد، فقط لتنظيم الملف وسهول التعديل عليه أثناء العمل، والتعديل عليه فيما بعد

/*block 1*/
p{font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px;  line-height: 17px; font-family: Tahoma, "Times New Roman", sans-serif;}

تجميع الخصائص طريقة نافعة جدا لإختصار الوقت، وتقليل حجم الملفات معا، يمكن استعمالها مثلا في تخصيص عرض معين للحدود السفلى border-bottom-width، مع اشتراكها في القيم الأخرى، بالشكل التالي:

.post{
boder: 1px solid blue;
boder-bottom-width: 3px;
}

لعلك لاحظت أن هناك مستويين من التجميع في هذه الخاصية، الأول بتجميع خصائص border-left, border-top, border-right, border-bottom في الخاصية border والمستوى الثاني، بتجميع خصائص border-top-width و border-top-color و border-top-style في border-top وكذلك الأمر بالنسبة للجهات الثلاث الأخرى.

2. التعميم والتخصيص والنسخ

هذه المصطلحات مجرد تسمية شخصية لثلاثة من المبادئ التي يستخدمها مطورو css، ولا تهمنا التسميات على أية حال، بل ماذا تعني هذه المصطلحات:

في الصفحة عادة تكون هناك خصائص مشتركة بين عدة عناصر، فنوع الخط الذي أفضل للنصوص في كل قوالبي هو tahoma ثم أستثني العناوين وأغيرها للخط Arial أو Times New Roman، وكل الروابط تكون بلون واحد، ثم أستثني القائمة الجانبية مثلا، كذلك لون الخط في الصفحة ككل هو رمادي داكن، ثم أستثني منه ذيل الصفحة إذا كانت الخلفية داكنة، أجعل لون الخط أبيض، الفقرات في الصفحة، عليها أن تتباعد بعشرة بكسلات لكن في القائمة الجانبية 5 بكسلات فقط، حسنا لا داعي للإسترسال، أظن الأمر واضح، هناك خصائص عامة في الصفحة ككل ثم نستثني هنا أو هناك باستخدام الفئات أو المعرفات، وليتضح الأمر، لنأخذ المثال التالي:

a{
color: green;
}
h1 a{
color: red;
}

في المثال السابق قمت “بتعميم” لون أخضر للروابط، ثم قمت “بنسخ” (إلغاء) هذا اللون واستبداله باللون الأزرق بالنسبة للروابط داخل العناوين h2، و باللون الأحمر بالنسبة للعنوان h1، لأن خصائص css خاضعة للترتيب، وكل سطر قد ينسخ السطر الذي قبل، ولنأخذ مثالا على ذلك:

a{color: green;}
a{color: red;}

لون الروابط في الصفحة سيصير بالأحمر ككل، لأن قيم السطر الثاني ألغت قيم السطر الأول.

لننتقل إلى التخصيص، لدينا عناوين h2 في المواضيع، وأخرى في القائمة الجانبية، العناوين h2 جميعها تشترك في كونها من نوع Arial لكن أريد أن تكون التي في المواضيع بحجم خط 26px بينما في القائمة الجانبية بحجم خط 22px فقط، لدي صندوق div يجمع المواضيع وله معرف content وصندوق آخر يجمع عناصر القائمة الجانبية وله المعرف sidebar، سيكون كود css إذن كالتالي:

h2{
font-family: Arial;
}
#content h2{
font-size: 26px;
}
#sidebar h2{
font-size: 22px;
}

هذه المبادئ الثلاثة يا سادة، لها مجموعة من القواعد وأحيانا يكون تجاوزها سببا لبضع مشاكل، لنفرض مثلا أن لدينا فقرات داخل كل موضوع (حددنا له الفئة post)، ونريد الهامش لجميع الفقرات أن يكون 5px ، وفي نهاية الموضوع سنعرض التصنيفات داخل الوسم P أيضا وحددنا لها الفئة cats. نريد الهامش أن يكون 2px فقط، مبدئيا سنقوم بذلك كما يلي:

.post p{
padding: 5px;
}
.cats{
padding: 2px;
}

لكن عند معاينة الصفحة سنجد أن الهامش في جميع الفقرات يبقى 5px والسبب في ذلك أن الأفضلية في إسناد الخصائص تسبق الترتيب، حيث في العنصر الأول حددنا الفئة المتضمنة للفقرة، ثم بعد ذلك الفقرة (بما في ذلك فقرة التصنيفات cats)

.post p{ }

بينما في العنصر الثاني حددنا فقط فئة الفقرة cats، ولكي يكون لهما نفس الأفضلية علينا أن نكتب خصائص العنصر الثاني هكذا:

.post p{ 
padding: 5px;
}
.post .cats{
padding: 2px;
}

كذلك إذا كنا قد حددنا من قبل خصائص عنصر ما داخل ملف html نفسه (inline style) تكون له الأفضلية على الخصائص بين وسمي style وهما معا لهما الأفضلية، على خصائص الملف الخارجي، مثلا إذا كتبنا في ملف html ما يلي:

<p class="cats" style="background-color: black;">ثم كتبنا الفقرة هنا</p>

ثم حددنا خصائص أخرى كما يلي في ملف خارجي:

p.cats{
background-color: red;
}

فالخلفية ستبقى بالأسود، ولن تتأثر بالخصائص الخارجية.

كيف يتم تحديد الأفضلية في css؟

يتم تحديد الأفضلية بين العناصر في css وفق نظام التنقيط حسب أربع مستويات، a,b,c وd عند إسنادنا للخصائص:

إذا كانت الخصائص في بداية وسم العنصر(inline style) المستوى a يأخذ القيمة 1، ويبقى 0 في الحالات الاخرى.
المستوى b هو عدد المعرفات id
المستوى c هو عدد الفئات class (بما في ذلك pseudo-class مثل Hover, active..)
المستوى d هو عدد وسوم html

بعد ذلك تقارن النتيجة بين وحدات الخصائص بنظام الألف حيث يمثل a الآلاف وb المئات..
ولكي يتضح الأمر أكثر، هذه بعض الأمثة:

في المثال السابق إذن قيمة العنصر الأول:

المستوى a : صفر
المستوى b: عدد المعرفات صفر
المستوى c: عدد الفئات 1
المستوى d: عدد الوسوم 1

إذن قيمة الأفضلية هي 11

بينما العنصر الثاني المستويات a,b,d صفر و 1 للمستوى c أي أن قيمة الأفضلية لهذا العنصر هي 10 أي أن الأول أسبق.

3.كيفية توسيط الصفحة؟

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

التوسيط باستخدام margin
يتم تجميع عناصر الصفحة في صندوق div ونحدد له معرفا معينا مثلا (wrap) ثم نحدد خصائصه في ملف تنسيق Css كما يلي:

#wrap {
width: 900px;
margin: 0 auto;
}

بعض المتصفحات القيدمة لا تدعم القيمة auto في margin لكن لحسن الحظ هناك خاصية text-align نقوم بإعطائها القيمة center بالنسبة للوسم body ثم نعيدها إلى القيمة right في الصندوق wrap

body {
text-align: center;
}
 
#wrap {
width: 900px;
margin: 0 auto;
text-align: right;
}

التوسيط باستخدام position وقيمة سالبة للخاصية margin

بنفس الطريقة السابقة، نقوم بتجميع العناصر داخل صندوق div ونحدد له المعرف wrap مثلا، ثم نقوم بإسناد القيمة relative إلى الخاصية position لهذا الصندوق، لكي نتمكن من تحديد قيمة 50 في المئة للخاصية right ثم نقوم بتحديد القيم الأخرى كما يلي:

#wrap {
width: 900px;
position: relative;
right: 50%;
}

ثم نقوم بإسناد قيمة سلبية للخاصية margin-right (نصف العرض الذي حددناه للصندوق) كما يلي:

#wrap {
width: 900px;
position: relative;
right: 50%;
margin-right: -450px;
}

وتبقى الطريقة الأولى أفضل بالنسبة لي.

لا زال هناك بعض الأمور الأخرى، فهل ترون أن أخصص لها الموضوع القادم، أم أتركها وأتطرق لها أثناء بناء القالب؟

مواضيع مشابهة:

الاوسمة: css, HTML, xhtml, الأفضلية في css, توسيط الصفحة, حيل css, دورة قوالب ووردبريس, وسوم HTML, ووردبريس

18 تعليق على “دورة قوالب ووردبريس: css و xhtml الجزء الثاني”
ممتاز.. الفصلين الأخيرين هما ما كنت بانتظاره حقًا.. والشرح ممتاز جدًا يا أخي.. يبدو أنني سأستمتع بالمتابعة معك.. والمعذرة على التعليق الخارج عن الموضوع.. أعانك الله

بواسطة عصام حمود في يونيو 19, 2009
صراحة مقالات مميزة و بداية و تعاريف تساعد في فهم الجميع سواء المبتدئين أو المتوسطين , و كما قال الأخ عصام فأخر فقرة هي التي أيضا كنت أنتضرها و صراحة كنت أعرف طريقة واحد و هي الأولى سوف أحاول التطبيق بجميع الطرق…. جاري متابعة باقي المقالات … وشكرا لكـ :d .

بواسطة ياسين في يونيو 19, 2009
السلام عليكم ورحمة الله وبركاته..
درس رائع كما عودتنا أخي عمران جزاك الله عنا كل خير..
بالنسبة لي أيضا أستعمل الطريقة الأولى في التوسيط..
استفدت من هذا الدرس وبالخصوص تعدد المظاهر للصفحة الواحدة وهو شيء ممتع حقا..
مني لك أرق تحية..

بواسطة عبد الهادي في يونيو 20, 2009
موضوع مُفيد جداً

إقتراح : هل من الممكن أن يتم تقليل محتوى الموضوع الواحد حتى يُمكن الإطلاع عليه فى وقت واحد

بواسطة المعتصم بالله في يونيو 20, 2009
موضوع رائع يعطيك الف عافيه يارب

تحياتي ^_^

بواسطة Master Of Love في يونيو 20, 2009
الله يجزيك الجنه ياخوي ماقصرت على هالشروحات..

جاري متابعة الدرس بدقة..

بواسطة M!sS roo7 alm!sk في يونيو 20, 2009
درس رائع يا أخ عمران .. لقد قمت بالتطبيق مباشرة .. لدي قالب على السيرفر المحلي وقمت بإجراء الكثير من التجارب .. لدي سؤال وآمل أن تفيدني :
في قيم margin والـ padding ماذا نعني بالقيمة : Auto ؟

بواسطة مدونة الصقر في يونيو 20, 2009
أولا موضوع رائع .. استفدت منه كثيرا جدا ..

فى رأيى المتواضع ان تطرق إلى التطبيق العملى … وفى التطبيق ستتضح النقاط المبهمة ..

بواسطة lionhurt في يونيو 20, 2009
يا الله الموضوع وايد صعب
أحس نفسي كني فى لجنة أمتحان مو عارفه شي
بحاول أفهم وجرب
مشكور أخوي عمران على هذا الدرس الفنااااان
ما قصرت
فى أمان الله
أختك ساره روز

بواسطة Sarah Rose في يونيو 21, 2009
جزاك الله خيرا و بارك الله فيك

راي ان نباشر في بناء القالب و تطرق الى تلك الامور اثناء بناء القالب

بواسطة eng mk في يونيو 21, 2009
الله عليك أستاذ عمران ، الدروس رائعة وأنا متابعة تماماً ، أنا حالياً انتقلت لنظام تشغيل لينكس اوبنتو فراح ابدأ من جديد في تحميل سيرفر محلي والعمل على تحميل برنامج مساعد في تصميم صفحات الويب يتناسب مع لينكس وبقية الأمور ، لذلك لي عودة للدرسين الأخيرين ، وبالفعل التواصل مع المشتركين في الدورة وتزويدهم بنسخ من القوالب والأمثلة جداً رائع ، والدورة بأكملها مُحفزة … لي عودة في حال صعب علي شيء ، شكراً لك استاذ عمران .

بواسطة someone في يونيو 21, 2009
سلمت يداك ..
دمت متألقاً بعون من الله …

بواسطة فاطمة في يونيو 24, 2009
مرحبا اخي عمران
محتاج لمساعدة في خصوص قالب ووردبريس ضرورية راسلتك على إيميلك

بواسطة صلاح الدين في يونيو 24, 2009
شكرا لكم جميعا على تفاعلكم
@مدونة الصقر

“في قيم margin والـ padding ماذا نعني بالقيمة : Auto ؟”

الخاصية padding لا تقبل القيمة auto.
الخاصية margin تقوم بتوسيط العنصر داخل العنصر المحتوي له بالقيمة auto سواء من الأعلى والأسفل أو من اليمين واليسار.

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

………….
وهاي النقطه بعد ما فهمتها
كيف نربط ملف css خارجي مع ملف html؟
وهاي النقطه بعد
استيراد ملف css باستخدام import

وشكراً
أختك
ساره روز

بواسطة Sarah Rose في يونيو 26, 2009
انقطعت عن المتابعة بسبب الامتحانات.. وها أنا أعود.. وبانتظار إكمال الدورة الرائعة..

شكرا عمران..

بواسطة abdullah_kh في يونيو 28, 2009
لي عودة مع التركيز قريباً =)

بواسطة الجوهرة المصونة في يوليو 12, 2009
السلام عليكم..

شكراً اخوي..

استفدت كثير من الشرح..

متابعه لشرحك.

وعساني بإذن الله استفيد..

شكرا مرة اخرى..

بواسطة فتاة الزاوية في أغسطس 30, 2009

ووردبريس باون

دورة قوالب ووردبريس: css و xhtml الجزء الثاني

كيف نربط ملف css خارجي مع ملف html؟

1. استيراد ملف css باستخدام import

2. استيردا ملف css باستخدام الوسم Link

حيل للتحكم الأمثل في خصائص css

1. مقدمة لبعض خصائص css

2. التعميم والتخصيص والنسخ

كيف يتم تحديد الأفضلية في css؟

3.كيفية توسيط الصفحة؟

18 تعليق على “دورة قوالب ووردبريس: css و xhtml الجزء الثاني”

ارسال تعليق

أقسام الموقع

أرشيف شهري

سحابة الأوسمة

أحدث التعليقات

أحدث المواضيع

صفحات اخرى

تدوينات عشوائية