كيفية عمل css و xhtml | ووردبريس باون

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

17 يونيو 2009

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

ما هي css؟

css هي اختصار لمصطلح Cascading Style Sheets وهي تقنية للتحكم في مظهر صفحة html، من حيث الخطوط، الألوان، الخلفيات، والمساحات، هناك عدة نسخ من css آخر نسخة منها هي css3 إلا أن خصائصها ليس مدعومة من قبل جميع المتصفحات، جاءت تقنية css كحل للإستخدام الخاطئ لعدة وسوم جديدة في html (التي ظهرت خاصة مع متصفح Netscape) مثل وسوم الجداول لتحديد مظهر الصفحة، وكان الحل في css بفصل المظهر عن المحتوى، حيث ملف html يتضمن فقط الوسوم الدلالية لنعرف أن هذا عنوان وهذه فقرة وهذه قائمة، و Css تتحكم في تموضع وشكل هذه العناصر، القائمة الجانبية ستذهب إلى اليمين، والعنوان سيكون بحجم خط 20 وبلون أحمر قان.

ما هي أهداف css؟

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

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

كيف نطبق css على ملفات xhtml؟

1. inline styles

لنبدأ تطبيقنا من ملف main.html، هذا هو كود الملف:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ar" xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>موقع المصمم العربي</title>
 
</head>
<body>
	<h1><a href="main.html">المصمم العربي</a></h1>
	<h3>معرض أعمال عمران عماري</h3>
 
 
	<h2>حول الموقع</h2>
	<p>لا يزال التصميم العربي، غارقا في  حفرة التقنيات القديمة، وستايلات المنتديات واستخدام الجداول، لذلك جاء هذا المعرض ليعطي نموذجا للتصاميم والأعمال التي تحترم المعايير القياسية، دون ان تكون أقل احترافية من غيرها.</p>
	<p>هذا الموقع دعوة مفتوحة لجميع المصممين العرب لتجاوز عتبة التقنيات التقليدية والخاطئة في تصميم المواقع، واستغلال البرامج الحرة لإدارة المحتوى، وحثهم على الإبداع بدلا من التعريب والتقليد</p>
 
 
	<h2>حول ووردبريس</h2>
	<p>ووردبريس برنامج مفتوح المصدر لإدارة المحتوى في المواقع -والمدونات بصفة خاصة- يمكن تحميله وتركيبه على موقعك، والتعديل عليه كغيره من البرامج المتاحة تحت رخصة المصادر المفتوحة</p>
	<p>ووردبريس لم يعد أداة تدوين فقط، قوة برمجته وصداقته مع محركات البحث والدعم الواسع له، جعله برنامجا متكاملا لإدارة المحتوى، </p>
 
	<h2>بنية ووردبريس</h2>
	<p>لكي يكون ووردبريس نظام تدوين متكامل، قام مطوروه بتوفير عدة بنيات لتخزين المحتوى حسب نوعيته:</p>
	<ol>
		<li><strong>المواضيع:</strong> هو المكون الاساسي لمفهوم التدوين، ولبرنامج ووردبريس ايضا، عبارة عن تدوينات يتم إضافته حسب خط زمني</li>
		<li><strong>الصفحات:</strong> لا تختلف كثيرا عن المواضيع في مكوناتها غير أن الصفحات تكون عبارة عن محتوى ثابت في المدونة.</li>
		<li><strong>التعليقات:</strong> هي إحدى أساسيات المدونات، أغلب تعاريف مصطلح المدونة يذكر التعليقات كشرط من الشروط</li>
	</ol>
 
	<h2>أعمالي السابقة</h2>
	<ul>
		<li><a href="http://www.rekaaz.com/" title="موقع ركاز">موقع ركاز</a></li>
		<li><a href="http://www.salehalshaikh.com/ar/" title="موقع الشيخ صالح آل الشيخ">صالح آل الشيخ</a></li>
		<li><a href="http://www.maknoun.net/" title="قالب موقع الإجازة">موقع الإجازة</a></li>
		<li><a href="http://dirra.net/ar" title="موقع الدرة للمجوهرات">موقع الدرة للمجوهرات</a></li>
		<li><a href="http://dirra.net/" title="موقع الدرة للمجوهرات">النسخة الإنجليزية من موقع الدرة</a></li>
	</ul>
 
	<h2>مدوناتي الحالية</h2>
	<ul>
		<li><a href="http://www.a9laam.com/" title="كلمات في التدوين والحياة">موقع أقلام</a></li>
		<li><a href="http://wpaon.com/" title="موقع مختص في ووردبريس">طاووس ووردبريس</a></li>
		<li><a href="http://a9laam.wordpress.com/" title="مدونتي الشخصية">مدونتي الشخصية</a></li>
	</ul>
 
	<h2>تابعني في تويتر</h2>
	<ul>
		<li><a href="http://www.twitter.com/a9laam" title="كلمات في التدوين والحياة">حسابي على تويتر</a></li>
		<li><a href="http://www.twitter.com/wpaon" title="حساب wpaon على تويتر">wpaon على تويتر</a></li>
	</ul>
 
</body>
</html>

بإظهار الملف في المتصفح سيبدو هكذا

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

<body style="background-color: #333; color: #999; font-family: tahoma;">

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

إذا قمنا بتحديث الصفحة الآن سنلاحظ أن كل النص في الصفحة أصبح باللون الرمادي و نوع الخط أصبح tahoma، وهذا أحد المبادئ الأساسية لتقنية css أي عند تطبيق خصائص معينة في عنصر HTML جميع العناصر التي يتضمنها ستشملها هذه الخصائص، (يستثني من هذا خصائص التموضع وبعض الخصائص الأخرى سنراها في حينها).
ننتقل الآن إلى العنوان الرئيسي، نلاحظ أن العنوان يحتوي على رابط، باستخدام الوسم a وإسناد العنوان الذي سينتقل إليه إلى الخاصية href، لنقم الآن بتغيير خط العنوان إلى Arial ولون الخط إلى الأبيض، نقوم بذلك في الوسم h1 بالشكل التالي:

<h1 style="font-family: Arial;"><a style="color: white; text-decoration: none;" href="main.html">المصمم العربي</a></h1>

نلاحظ أن إسناد قيمة اللون الأبيض تم داخل وسم الرابط a وليس داخل h1 وذلك لأن الروابط لديها ألوان افتراضية من المتصفح، رغم تغيير لون h1 فلون a لن يتغير.

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

يمكن مشاهدة النتيجة في ملف main_inline.html في الملفات المرسلة.

2. Embedded Styles

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

<head>
<!-- ... -->
<style type="text/css">
tag{
property1: val1;
property2: val2 val3 val4;
}
 
.class{
property1: val1;
property2: val2 val3 val4;
}
 
#id{
property1: val1;
property2: val2 val3 val4;
}
 
tag tag{
property1: val1;
property2: val2 val3 val4;
}
 
tag.class{
property1: val1;
property2: val2 val3 val4;
}
 
tag#id{
property1: val1;
property2: val2 val3 val4;
}
 
</style>
</head>

الآن لتحديد الخصائص السابقة للوسم body (تغيير الخلفية، ولون الخط، ونوعه) نقوم بإضافتها داخل الوسم style بالشكل التالي:

body{
background-color: #333;
font-family: tahoma;
color: #999;
}

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

h2{
color: white;
}

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

<h2 class="sidetitle">مدوناتي الحالية</h2>

الآن نغير لون جميع العناوين h2 في الصفحة إلى الأبيض وعناوين h2 من الفئة sidetitle إلى الأخضر، نضيف ذلك بالشكل التالي:

h2.sidetitle{
color: green;
}

لاحظ أن الخاصية الثانية تنسخ الأولى، (تقوم بإلغائها)، ولكي نفهم هذه الملاحظة نضيف بعض الخصائص إلى h2:

 
h2{
color: white;
font-family: Arial;
font-size: 28px;
}
 
h2.sidetitle{
color: green;
}

إذا قمت بتحديث الصفحة ستجد أن جميع عناوين h2 مشتركة في نوع وحجم الخط، بما فيها العناوين بالأخضر، لكنها تختلف في اللون فقط، لأن خاصية اللون قد تم نسخها (استبدالها) بالنسبة للعناوين h2 من الفئة sidetitle.

يمكن أن نسند الخصائص مباشرة إلى فئة معينة بالشكل التالي:

.class{
property1: val1;
property2: val2 val3 val4;
}

لنفرض مثلا أننا نريد تلوين كلمة “ووردبريس” في أكثر من موضع باللون الأحمر عن طريق css، علينا أن نحدد فئة معينة لهذه الكلمة في هذه المواضع، ولكي نتمكن من فعل ذلك علينا أن نضيف الكلمة بين وسمي span وهو وسم من نوع inline يصلح لهذا الغرض، نضيف الوسم wp للكلمة بالشكل التالي:

<p>لكي يكون<span class="wp"> ووردبريس</span> نظام تدوين...</p>

ثم نسند للفئة خاصية اللون ونجعل قيمتها red، نضيف أيضا الخاصية font-weight لجعل النص بارزا (في هذه الحالة يمكن أن نحقق ذلك بإضافة وسم strong لكن فقط أضفت الخاصية هنا لكي نتعرف عليها)

.wp{
color: red;
font-weight: bold;
}

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

a{
color: #FC0;
text-decoration: none;
}

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

h1 a{
color: white;
text-decoration: none;
}

الآن عند إشارة الفأرة إلى الروابط لا تتغير، ولكي يتغير لونها عند الإشارة إليها نضيف خصائص فئة hover للروابط، وهي فئة من نوع pseudo classes (ومثلها active ,visited, link)

a:hover{
color: #FFF;
text-decoration: none;
}

نغير خصائص الفئة Hover للرابط بداخل عنوان h1

h1 a:hover{
color: #FC0;
text-decoration: underline;
}

يمكن مشاهدة نتيجة التغييرات السابقة في ملف main_embedded.html

نظام الصناديق، وخصائص التموضع

لحد الآن، العناصر block في الصفحة، لازالت بقيمها الإفتراضية، سنستخدم مرة أخرى إضافة fireBug لمعاينة هذه العناصر في الصفحة، قم بالنقر على الحشرة، في القسم الأيمن، هناك ثلاث ألسنة، إختر layout، بعض النقر على أي عنصر من هيكلة الصفحة في الجانب الأيسر من نافذة الإضافة، ستظهر قيمها في الجانب الايمن في layout:

نلاحظ الخصائص التالية:
margin: بعد العنصر عن العناصر الملاصقة له من الجهات الأربع.
padding: الهامش داخل العنصر نفسه، حيث يكون المحتوى بعيد للداخل عن حدود العنصر.
border: حدود العنصر.
width: عرض العنصر.
height: ارتفاع العنصر

ولفهم جيد لهذه الخصائص نعرض النموذج التالي، وهو مستوحى من فكرة Jon Hicks،

هذه هي الخصائص الأساسية للعناصر block يمكن أن نضيف إليها ثلاث خصائص تتلعق بالتموضع:
1.float: وتحدد انزياح العنصر إلى اليمين right أو إلى اليسار left أو بدون none.

أحيانا عند إزاحة الصناديق، نصادف أن بعضها أكبر من بعد، أو أن المساحة غير كافية

2.position: هذه الخاصية تتقبل أربع قيم، وتحدد علاقة اموصع الصورة مع العناصر الاخرى في الصفحة، relative، absolute,fixed والقيمة الإفتراضية static

باستثناء القيمة static تمكننا القيم الأخرى من التحكم في موقع العنصر باستخدام الخصائص top,right,left,bottom

2.1. relative

2.2. absolute

2.3. fixed

3.clear: وهي خاصية تتحكم بالتحاق العناصر الأخرى بالعنصر المطبقة عليه، خاصة عند إعطاء القيمة right أو left للخاصية float، تقبل clear القيم left,right والقيمة التي تجمعهما both، وهذا النموذج يشرح فائدة الخاصية:

كما رأينا سابقا بالنسبة للعنصر span داخل السطر، بالنسبة للعناصر block هناك العنصر div الذي يحقق غرض جمع عدد معين من الصناديق ضمنه، وعادة يستعمل هذا العنصر لتحديد هيكل الصفحة، تجميع العناصر وإزاحتها وهكذا.. سنستخدم عنصر div لتجميع عناصر رأس الصفحة، و آخر لتجميع عناصر وسط الصفحة، ثم عنصر آخر لذيل الصفحة.

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

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

يمكنك معاينة التغييرات في ملف main_embedded_divs.html

بعد إضافة العناصر في الصناديق، نقوم بتحديد عرض معين لها بالخاصية width، ثم نقوم بإزاحة صندوق القائمة إلى اليسار وصندوق المحتوى إلى اليمين عن طريق float، وبسبب غياب القيمة both للخاصية clear في صندوق footer سيلحق الفوتر بالقائمة كما يظهر في الصورة التالية:

نقوم، بإضافة الخاصية clear إلى خصائص footer وبما أنه معرف وليس فئة نستخدم “#” بدل النقطة “.” كما يلي:

#footer{
/* ... */
clear: both;
}

سنجد الآن أنفسنا أمام مشكلة بسيطة، عند إزاحة أي عنصر إلى اليمين أو اليسار، فإنه لا يأخذ أي مساحة عموديا، داخل العنصر الذي يحتويه، مثلا عند إزاحتنا لصندوقي المحتوى والقائمة الجانبية، سنجد أن الصندوق ذو المعرف main يصبح مجرد شريط في الأعلى (جرب ذلك) بالشكل التالي:

ولحل هذا المشكل بالنسبة للمتصفحات الحديثة، يكفي أن نضيف خاصية overflow للصندوق main ونعطيها القيمة auto، لكن بالنسبة للمتصفحات القديمة علينا أن نضيف صندوقا فارغا بعد العنصرين المنزاحين، ونضيف إليه الخاصية clear ونعطيها القيمة both.

يمكنك مشاهدة التطبيقات في ملف main_embedded_float.html

بهذا نكون قد أنهينا أحد أهم المفاهيم في css وأكثرها إزعاجا لدى الموافقة للمتصفحات، ونكمل البقية الباقية في الجزء الثاني إن شاء الله تعالى.

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

الاوسمة: box-modules, css, HTML, xhtml, دورة قوالب ووردبريس, قوالب ووردبريس, وسوم HTML, ووردبريس

29 تعليق على “دورة قوالب ووردبريس: css و xhtml الجزء الأول”
جميل جدا

ويعطيك العافيه الشرح ممتاز للعناصر المهمه فعلا

بواسطة ميّـاسي في يونيو 17, 2009
بدأنا بالجد والتركيز شرح موفق وإلى الأمام وبالتوفيق

بواسطة aboaljod في يونيو 17, 2009
درس دسم ماشاءالله، ومن أفضل الدروس التي رأيتها، إستمر أخي عمران وأشكرك جهدك المبذول في المدونة

بواسطة أحمد الكثيري في يونيو 17, 2009
مشكور أستاذي الغالي على الشرح الرائع وبارك الله فيك وبانتظار الدرس القادم.

بواسطة عبدالله في يونيو 17, 2009
شكراً ، ثم شكراً ..

درس ممتاز ومتكامل الحقيقة إستفدت وتبينت لي أشياء كانت غامضة

خصوصاً اني افكر بإعادة كتابة ثيم المدونة من جديد

تحياتي لك ،،

بواسطة Mishal Muhanna في يونيو 17, 2009
فى الحقيقة ماعتقدش ان فى شـرح للموضوع احسن من كدا .. فعلا شـرح رائع جزاك الله كل خيـر

بواسطة lionhurt في يونيو 17, 2009
هذا الدرس دسم جداً .. بالرغم من أني قرأت كتاباً عن الـ CSS إلا أني رأسي يدور حالياً ..
سأعيد قراءته مرة أخرى .. وثالثة واربعة .

لك تحياتي أخي عمران

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

بواسطة صلاح الدين في يونيو 17, 2009
بارك الله فيك اخي عمران ان شاء الله ساعيد قراءة كل الاجزاء لكي يزيد من ترصيخ المعلومات والتطبيق في نفس الحين اتمنى لك كل التوفيق لي عودة ان شاء الله اتمنى لك كل التوفيق

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

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

بواسطة Sarah Rose في يونيو 17, 2009
بالنسبة لي استفدت استفادة عظيمة من هذا الشرح..

لديك أسلوب رائع في توصيل المعلومة.. “تنفع مدرس”

شكرا لك أخي عمران..

بواسطة abdullah_kh في يونيو 17, 2009
جميل جداً ، ولي رجعه لقراءة الموضوع ومراجعة الcss..

بواسطة someone في يونيو 17, 2009
مساء الخير على الجميع
مشاء الله عليكم كلكم فاهمين
أخوي عمران أنا وصلت عند هذه المرحله وما عرفت أكمل
هذا الكود
body{
background-color: #333;
font-family: tahoma;
color: #999;
}
….
أنا حطيته ما بين body style

طلع بهذا الشكل

طلع غلط
وحطيته فى أكثر من مكان
مادري بصراحه واين أحطه

وهذا الكود بعد وين يحطونه

h2{
color: white;
}
ما عرفت
أنتظر رد
فى أمان الله
أختك
ساره روز

بواسطة Sarah Rose في يونيو 17, 2009
أختي سارة

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

ونهاية الوسم style

بواسطة عمران عماري في يونيو 17, 2009
مشكور يا إمبراطور .!

,

بواسطة خالد الناصر .! في يونيو 18, 2009
جزاك الله خيرا متابعين

بواسطة eng mk في يونيو 18, 2009
صباح الخير
نايمين هاااااا
مشكور أخوي عمران على لإجابه
سويته وطلع أوكيه
بس الحين أنا فى هاي الخطوه
اللي تقول

لكي يكون ووردبريس نظام تدوين…

……….

ماعرفت أسوي هذا الكود
أسويلها سطر جديد أو أحطه داخل كلمة ووردبريس
ما عرفت
والكود اللي بعده

.wp{
color: red;
font-weight: bold;
}
كيف أخطه مع الكود الأول اللي ذكرته الحين

عن جد الدرس وايد صعب وياليت أخوي عمران تشرح هاي النقطه
أدري تعبتك
فى أمان الله
أختك
ساره روز

بواسطة Sarah Rose في يونيو 18, 2009
جزاكم الله خيرا أخي الكريم عمران , الدرس رائع جدا ولكنه دسم جدا

فالجزء الخاص بالـPosition و موضع الـBlocks من أهم الأجزاء , كنت أتمنى أن يتم فصله في درس منفصل , واحدة واحدة علينا ههههههه

جزاكم الله خيرا , بالرغم من ان الدرس دسم بس الحمد لله فهمناه .. لك جزيل الشكر أخي الكريم

بواسطة ياسر في يونيو 18, 2009
مرحبا بكم جميع، وهذه تحية لتفاعلكم

@سارة روز
أهلا أختي سارة، يعجبني إصرارك على الفهم، بخصوص إضافة span يتم بنفس الطريقة التي أضفنا بها الوسوم في الدرس الماضي: نضع بداية الوسم قبل الكلمات المراد تخصيصها (كلمة ووردبريس في هذه الحالة) ونهاية الوسم عند نهايتها:
http://farm4.static.flickr.com/3634/3625292088_b34b21771d_o.png

عندما نضيف span ونحدد له الفئة wp كما يلي:
```
<p>لكي يكون<span class="wp"> ووردبريس</span> نظام تدوين...</p>
```
ثم نقوم بين وسمي style في head بإضافة خصائص هذه الفئة
```
<style type="text/css">
 
/*....*/
 
.wp{
color: red;
font-weight: bold;
}
 
/*....*/
 
</style>
```
بواسطة عمران عماري في يونيو 18, 2009
@ياسر
أهلا أخي، كما ذكرت في بداية الدرس، هذه الدروس لا تقدم كل شيء، إذا تطرقنالكل تفاصيل css سنحتاج إلى سنة كاملة

سأحاول التطرق لبعض التفاصيل أثناء بناء القالب إن شاء الله تعالى

بواسطة عمران عماري في يونيو 18, 2009
اخي الحبيب جزاك الله خيرا درس رائع لكن اليس هنالك طريقة اخرى لعمل ملف style.css و هي طريقة جعل جميع الاوامر لل css في ملف وحده و هذا اعتبره اسهل

بواسطة eng mk في يونيو 18, 2009
جزاك الله خيرا اخي الحبيب عمران بعد مراجعة الدرس لاكثر من مرة و جته درسا سهلا

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

بواسطة eng mk في يونيو 18, 2009
@eng mk
أهلا اخي
بخصوص جعل الملف خارجي هذا ما سيتناوله المحور الأول من الجزء الثاني من هذا الدرس

أما بخصوص التطبيقات فحبذا لو أطلعتموني على تطبيقاتكم، وخاصة إذا كان هناك صعوبة فيها -يعني الأمور مش تمام-

بواسطة عمران عماري في يونيو 18, 2009
السلام عليكم ورحمة الله وبركاته..
جزء جد مهم وشرح قيم منك أخي عمران فجزاك الله عنا كل خير..
أصعب جزء برأيي في CSS هو المتعلق بخصائص التموضع (أي float و position).. وسيما حينما تقوم حرب المتصفحات وبالأخص من الغالي ie6 ^_^
جزاك الله عنا كل خير أخي عمران ونحن في انتظار القادم معك..
مني لك أرق تحية..

بواسطة عبد الهادي في يونيو 18, 2009
مساء الخير
أخوي عمران

عند كلمة المصمم العربي يتغير لونه الى الون البرتقالي شي طيب
بس ما تغير الخط و نوع الخط وحجمه

وكذلك سطر
معرض أعمال عمران عماري
ما تغير حجم الخط ونوعه
حاولت أسوي بس طلعت أشياء غريبه وأنا خايفه أخرب الملف
شسوي

تصبحون على خير
أختك
ساره روز

بواسطة Sarah Rose في يونيو 19, 2009
أرسلي تطبيقاتك أختي سارة هل يمكنك؟

بواسطة عمران عماري في يونيو 19, 2009
إلى الأمام أبداع بلا حدود الله يحفظكم ويبارك فيكم

بواسطة أبو نور في يونيو 27, 2009

1 التنبيهات
يونيو 23, 2009: دورة قوالب ووردبريس: css و xhtml الجزء الأول « فـــادي نـــت

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

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

ما هي css؟

ما هي أهداف css؟

كيف نطبق css على ملفات xhtml؟

1. inline styles

2. Embedded Styles

نظام الصناديق، وخصائص التموضع

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

1 التنبيهات

ارسال تعليق

أقسام الموقع

أرشيف شهري

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

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

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

صفحات اخرى

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