مدخل لتعلم لغة التنسيق CSS

بدأه ahmedsaoud31 في 18 ديسمبر 2012 · 12 رد · 5,971 مشاهدة · في منتدى تصميم صفحات الويب

مشاركة: واتساب X فيسبوك تيليجرام

#118 ديسمبر 2012 في 19:43 صاحب الموضوع

الحمد لله والصلاة والسلام على رسول الله

السلام عليكم ورحمة الله وبركاته

هذا الدرس ضمن سلسة دروس الدورة التالية لتعلم لغة php

قائمة المطلحات الجديدةالوارد ذكرها هنا :

id : مُعرف

class : فئة

block : مجموعة

لغة التنسيق CSS من اسمها فهي لغة لتنسيق ملفات الـ HTML

يمكن تضمين أكواد الـ css من خلال الوسم style ضمن كود HTML وهذا الوسم يأخذ خاصية وهي النوع type بالشكل التالي :

<style type="text/css">

</style>

وما سنتناوله الآن هو كيفية تحديد الوسوم التي نريد تطبيق التنسيق عليها ما عليك إلا كتابة اسم الوسم الذي تريد تطبيق التنسيق عليه ومن ثَم تقوم بفتح أقواس مجموعة لكتابة خصائص هذا الوسم بداخل الأقواس سنستخدم الوسم div أحد وسوم HTML وسنعطي لون الخط أحمر لمحتويات هذا الوسم

الآن نريد تجربة ما سبق على كود HTML

<!doctype html>
<html dir="rtl">

	<head>
		<meta charset="utf-8">
		<title>
			تجربة التنسيق
		</title>
		<style type="text/css">
			div {
				color:#F00;
			}
		</style>
	</head>

	<body>
		<div>
			بسم الله الرحمن الرحيم
		</div>
		<div>
			الحمد لله رب العالمين
		</div>
		<div>
			الرحمن الرحيم
		</div>
		<p>
			مالك يوم الدين
		<p>
	</body>

</html>

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

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

<style type ="text/css">
	div,p {
    	color:#F00;
	}
</style>

وبعد تجربة هذه الطريقة نجد أن جيع النصوص داخل الوسم div و p لونها أحمر

فلتحديد الوسوم التي نريد تطبيق التنسيق عليها ظهرت الحاجة للمعرفات والفئات الـ id والـ class

فلهذا سنميز كل وسم من النوع div بمعرف مختلف كالتالي :

<div id="text1">
	بسم الله الرحمن الرحيم
</div>
<div id="text2">
	الحمد لله رب العالمين
</div>
<div class="text3">
	الرحمن الرحيم
</div>
<p class="text3">
	مالك يوم الدين
<p>
<div>
	إياك نعبد وإياك نستعين
</div>
<div class="text3">
	إهدنا الصراط المستقيم
</div>
<div id="text4">
	صراط الذين أنعمت عليهم
</div>
<div class="text5">
	غير المغضوب عليهم ولا الضالين
</div>

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

السؤال الآن إذا وما الفرق بين المعرف والفئة ؟

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

ملاحظة: الكلام السابق يفضل أن تتبعه لكن لو خالفته ستجد الأمور تسير على ما يرام

ميزتنا هنا لا رسائل مزعجة للأخطاء لا تحذيرات لا شيئ , فقط عليك إكتشاف أخطائك في صمت

والآن دور كود التنسيق للدلالة على المعرف نستخدم الرمز # قبل قيمة المعرف وللدلالة على الفئة نستخدم الرمز . قبل قيمة الفئة والكود كامل يكون على الشكل التالي :

<!doctype html>
<html dir="rtl">

	<head>
		<meta charset="utf-8">
		<title>
			تجربة التنسيق
		</title>
		<style type="text/css">
			#text1 {
				color:#ff0000;
			}
			#text2 {
				color:#0f0;
			}
			.text3 {
				color:#00f;
			}
			#text4,.text5 {
				color:#F0F;
			}
		</style>
	</head>

	<body>
		<div id="text1">
			بسم الله الرحمن الرحيم
		</div>
		<div id="text2">
			الحمد لله رب العالمين
		</div>
		<div class="text3">
			الرحمن الرحيم
		</div>
		<p class="text3">
			مالك يوم الدين
		<p>
		<div>
			إياك نعبد وإياك نستعين
		</div>
		<div class="text3">
			إهدنا الصراط المستقيم
		</div>
		<div id="text4">
			صراط الذين أنعمت عليهم
		</div>
		<div class="text5">
			غير المغضوب عليهم ولا الضالين
		</div>
	</body>

</html>

تحدثنا عن إختيار تحديد الوسوم من خلال لغة التنسيق css والآن سنطبق بعض من خواص التنسيق

.text1 {
	color: #F00;
	font-size: 28px;
	background-color: #666;
	font-family: Tahoma;
	text-align: center;
}

عند تطبيق الفئة السابقة على وسم ما سيجعل لون الخط أحمر و حجم الخط 28px والخلفية رمادي والخط Tahoma والمحاذاة للوسط .

في الغالب ما يتم فصل ملفات التنسيق عن صفحة HTML ويوضع التنسيق كالكود السابق مباشراً في ملف ويتم حفظه بإمتداد css , فلنحفظ الملف السابق باسم style.css ويتم تضمين هذا الملف في وثيقة HTML داخل وسم الـ head بإستخدام وسم link كالتالي :

<link href="style.css" rel="stylesheet" type="text/css">

ما يهمنا من هذا الوسم هي الخاصية href وقيمتها هي مسار ملف التنسيق -سيأتي الحديث عن المسارات تبعاً- وبما أن الملف في نفس مجلد ملف الـ HTML نكتب اسم الملف بالاحقة فقط .

ويصبح الكود كامل كالتالي :

<!doctype html>
<html dir="rtl">

	<head>
		<meta charset="utf-8">
		<title>
			تجربة التنسيق
		</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div class="text1">
			بسم الله الرحمن الرحيم
		</div>
	</body>

</html>

ويمكن دمج أكثر من فئة لوسم واحد فيكون كود الـ css كالتالي :

.text1 {
	color: #F00;
	font-size: 28px;
}
.text2 {
	background-color: #666;
	font-family: Tahoma;
	text-align: center;
}

ويكون إسناد الفئات للوسم الواحد يفصل بينهم بمسافة فارغة كالتالي :

<div class="text1 text2">
	بسم الله الرحمن الرحيم
</div>

رابط تنزيل أخر كود

css.zip

لن أطيل كثيراً وما بقي إلا أن نتعرف على المزيد من الخصائص وما هي قيمها وفيما تستخدم والتالي روابط يمكنك الإعتماد عليها

أولاً: اللغة العربية :

http://ar.html.net/tutorials/css

وداخل هذا الموقع أيضاً يوجد شرح جيد للغة الهيكلية HTML

ثانياً: اللغة الإنجليزية :

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

http://www.w3schools.com/css

بالنسبة للدورات فهذا رابط دورة تطبيقية للأستاذ بسام العيساوي

وهذا رابط تطبيق على إستخدامات لغة الـ CSS الجيدة وهناك الكثير .

التمرين :

يرجى إستخدام لغة التنسيق CSS في إنشاء صفحة ويب بشكل منسق -ويفضل أن يكون موقع بسيط متعدد الصفحات-

طبعاً ما تم شرحة عبارة عن مدخل لـ لغة التنسيق وإن تعرضنا لأي شيئ غير واضح يمكن الإستفسار عنه أثناء الدورة سواء كان في لغة التنسيق أو اللغة الهيكلية HTML

وإن شاء الله الدرس التالي تهيئة الأدوات اللازمة للبدأ

الدرس السابق | الدرس التالي

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 19 ديسمبر 2012 في 23:28

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#218 ديسمبر 2012 في 21:48

السلام عليكم أخي أحمد ... بارك الله فيك ..

عندي بضع أسئلة على الدرس :

اقتباس
السؤال الآن إذا وما الفرق بين المعرف والفئة ؟
الفرق بينهم هو أن المعرف لا يتكرر داخل الوثيقة ولا تعطي أكثر من معرف لوسم واحد , بينما تستطيع إستخدام الفئة لأكثر من وسم وتستطيع أن تعطي الوسم أكثر من فئة

أفهم منك أنه يمكن كتابة ما يلي :

		<div class="A">
		Hello
		</div>
		<div class="A">
		World
		</div>

ولكن لا يمكننا كتابة ما يلي:

		<div id="A">
		Hello
		</div>
		<div id="A">
		World
		</div>

أي أن class تعبر عن نوع وسوم لها نفس الصفات ...أما id أو المعرف فيماثل رقم محدد للعنصر لا يسمج بتكراره والا تسبب في اخطاء اثناء استدعاء العناصر ذات المعرف نفسه ؟

هل هذا صحيح ؟هذا يعني أنه لا يمكننا استخدام صفات المعرف سوى مرة واحدة ..

السؤال الثاني :

في هذا الكود:

<div class="text1 text2">
        بسم الله الرحمن الرحيم
</div>

إذا تعارضت فئتان ...في تعريف نفس الصفة بطريقتين مختلفتين .. أي منهما يتم تنفيذها ؟

ختاماً كان درساً مفيداً جزاك الله خيراً ...

هل يمكنك وضع رابط تحميل الDocumetation لتعليمات الHTML وال css

أقصد أين نجد باقي الصفات مثل الموجودة في الكود التالي :

.text1 {
        color: #F00;
        font-size: 28px;
        background-color: #666;
        font-family: Tahoma;
        text-align: center;
}

والسلام عليكم

#318 ديسمبر 2012 في 22:42

السلام عليكم

تعجبني محاوراتك عزيزي مصطفى , وهذا ما يثري الموضوع ويجعله ذو فائدة أكبر , تحياتي

اقتباس
أي أن class تعبر عن نوع وسوم لها نفس الصفات ...أما id أو المعرف فيماثل رقم محدد للعنصر لا يسمج بتكراره والا تسبب في اخطاء اثناء استدعاء العناصر ذات المعرف نفسه ؟
هل هذا صحيح ؟هذا يعني أنه لا يمكننا استخدام صفات المعرف سوى مرة واحدة ..

لا نستطيع أن نقول لا يمكن ولكن يمكننا القول يفضل هذا للاسباب التالية :

الخاصية id في لغة HTML هي خاصية تحديد العنصر في الوثيقة , والمعرف دائماً في قواعد البيانات أو أي شيئ يكون فريد ولا يتكرر لنسطيع الوصول للعنصر المحدد بدون لبث أو تضارب .

لكن لو إستخدمت نفس اسم المعرف لأكثر من وسم لن تحدث مشكلة وسيتم تطبيق التنسيق ولكن الأفضل ألا يتكرر المعرف وإن أردت التكرار إستخدم الفئات

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

اقتباس
إذا تعارضت فئتان ...في تعريف نفس الصفة بطريقتين مختلفتين .. أي منهما يتم تنفيذها ؟

-لم أكن أعلم ما سيحدث

, لكن جربتها وجدت أن الأولوية تكون للفئة الأخيرة في ملف التنسيق CSS وليس لترتيب الفئات داخل خاصية الفئة ضمن وسم HTML أي تأثير .

وعلى ما أذكر أيضاً أن ترتيب الخواص نفسها داخل مجموعة واحدة في ملف التنسيق يؤثر ولكن لا أذكر حقيقاً ضمن أي خاصية هذه -أو ربما تكون معلومة خاطئة-

اقتباس
هل يمكنك وضع رابط تحميل الDocumetation لتعليمات الHTML وال css

- إنت سريع عايز من الآخر

, فعلاً سيكون هذا مفيد وأيضاً لسهولة الوصول للمعلومة بسرعة .

هذا رابط به الخواص مجمعة للغة التنسيق CSS على موقع مدرسة W3

وهذا رابط أخر

وهذا الرابط من موقع معايير الويب القياسية W3

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

بالنسبة للغة HTML فكل وسم له خصائصه الخاصة فقد وجدت الروابط التالي

http://www.devx.com/...l/Article/19816

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

على الرابط التالي

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

ربما هنا مررنا مرور الكرام ولكن أثناء الدورة لا نريد أن نترك صغيرة ولا كبيرة حتى يكون الموضوع الذي نتحدث فيه شامل بقدر المستطاع

تحياتي للجميع

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 18 ديسمبر 2012 في 23:22

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#419 ديسمبر 2012 في 15:39

اقتباس
وأيضاً إن وجدت أي خطأ فيما كتبت مباشراً أكتب أحمد أخطأ في السطر الفلاني والصحيح التالي

وهي دي الديمقراطية بقاااا ...

أفضل المراجع التي يمكن تحملها ككتب لكي تكون بجواري دائماً

وفيما يلي أحد المراجع الجيدة :

HTML5

بانتظار الدرس القادم ... وإلى حينه سأقوم بتطبيق الدرس الحالي..بإذن الله ..

والسلام عليكم ورحمة الله وبركاته

#519 ديسمبر 2012 في 16:00

تم تطبيق الدرس ..

تمرين بسيط كالعادة :wink:

أيضاً أضع لكم موقع لإستخلاص الألوان ساعدني في إعداد التمرين

http://html-color-codes.info/

تقبل تحياتي :blush:

ex2.rar

رجعت ومازال الفريق خاملاَ :(

#619 ديسمبر 2012 في 16:16

شكراً على التعليق أخي مصطفى ..

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

ولكن إطرني التعب إلى إستخدام الوان جاهزة :lol: ..

وأيضاً إستخلصت أهم الأخطاء لدي وأهم الملاحظات للكتابة الكود ..

أي تقريباً الفرق بين كود الـHtml والـCSS

تقبلوا تحياتي :blush:

المرفقات

رجعت ومازال الفريق خاملاَ :(

#719 ديسمبر 2012 في 17:36

السلام عليكم

اقتباس
وهي دي الديمقراطية بقاااا ...

- أنا اسميها المشاركات الفعّاله

يمكننا الإستغناء عن أغلب وسوم HTML من خلال لغة التنسيق CSS وكذلك خواص التنسيق لتوضيح هذا إلينا المثال التالي :

سنستخدم الوسمين div و span ونستخدمهما لأنهما لا يفعلان أي شيئ والفرق بينهما هو أن طريقة العرض للوسم div هي block أي يحتوي عرض الوسم الموجود بداخله والوسوم التي تأتي بعده أو قبله تكون في سطر جديد أما وسم span فطريقة عرضه هي الـ inline فيكون على قدر ما يحتويه من بيانات والوسوم التي تأتي قبله أو بعده -على حسب طريقه عرضها- تكون مجاوره له , هذه هي القيم الإفتراضية لهما ويمكن تغييرها -كما سنرى لا حقا-

لتعرف الفرق بين وسمي div و span جرب الكود التالي :

<!doctype html> 
<html dir="rtl"> 

    	<head> 
            	<meta charset="utf-8"> 
            	<title> 
					تجربة التنسيق 
            	</title> 
    	</head> 

    	<body> 
			<div>ahmed</div> 
			<div>mohammed</div> 
			<div>Mr.Mostafa</div> 
			<span>jamal</span> 
			<span>ibraheem</span> 
			<span>mahmoud</span> 
    	</body> 

</html>

سنستخدم هذين الوسمين فقط الآن لتصميم صفحة ويب كالتالي :

<!doctype html> 
<html dir="rtl"> 

    	<head> 
            	<meta charset="utf-8"> 
            	<title> 
					تجربة التنسيق 
            	</title> 
            	<link href="style.css" rel="stylesheet" type="text/css"> 
    	</head> 

    	<body> 
			<div id="header"> 
				Header 
				<span>myContent Header</span> 
			</div> 
			<div id="content"> 
				Contents 
				<span>myContent </span> 
			</div> 
			<div id="footer"> 
				Footer 
				<span class="m1">myContent Footer1</span> 
				<span class="m2">myContent Footer1</span> 
			</div> 
    	</body> 

</html>

ويكون كود التنسيق الخاص بها هو التالي :

#header { 
	height: 300px; 
	background-color:#AAA; 
	text-align: center; 
} 
#header span { 
	color:#F00; 
} 
#content { 
	height: 300px; 
	background-color:#999; 
	text-align: left; 
} 
#footer { 
	height: 300px; 
	background-color:#666; 
	text-align: right; 
} 
#footer span.m1 { 
	color: #00F; 
}

- المسافة الفارغة تعني أن الوسم التالي داخل هذا الوسم , وأيضاً إن أردت وسم الـ span الذي يحمل الفئة m1 فقط يتم كتابته مباشراً هكذا span.m1

إذاً فجميع التنسيقات يمكن عملها من خلال لغة التنسيق CSS نعود لأول كود في هذه المشاركة وهو كود مشاهدة الفرق بين الوسمين div و span وطبق عليه الكود التالي وأخبرني ماذا سترى ماذا سترى ؟ :

<style> 
	div { 
		display: inline; 
	} 
	span { 
		display: block; 
	} 
</style>

والسؤال إذاً هل يمككني إنشاء وسومي الخاصة غير span و div في لغة HTML ؟ أترك الإجابة لتجربتكم

دمتم في أمان الله

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#819 ديسمبر 2012 في 20:15

تجربتي الجديدة .. :wacko:

mysite.rar

رجعت ومازال الفريق خاملاَ :(

#920 ديسمبر 2012 في 01:04

السلام عليكم

كنت أود التعمق أكثر في الـ css ولكن نحن بصدد دورة عن لغة PHP ولكن ما يسعنا ذكره سنورده هنا بإذن الله تعالى

- جميل جداً أخي bahbah تطرقك لكيفية تحديد الوسوم من خلال عناصرها الأخرى غير المعرف والفئة بهذه الطريقة التالية :

tagName[attribute="value"]

ولولا مشاركتك هذه أخي الكريم ما كنا تطرقنا لهذه الخاصية المهمة جداً في لغة css فهي ستوفر علينا الكثير من تكرار كتابة معرفات وفئات لهذه الوسوم لتطبيق التنسيق عليها

وأيضاً يمكن إستخدام الطريقة التالية للمعرفات :

tagName[id="value"]

وأيضاً يمكن إستخدام الطريقة التالية للفئات :

tagName[class="value"]

* طبعاً الـ tagName هو اسم الوسم والـ value تمثل القيمة

بالنسبة لكودك أخي الكريم فأنت إستخدمت التالي :

.search_area input[type="submit"]

ولم أجد في ملف الـ index.html فئة باسم search_area وأيضاً نوع الوسم input الموجود هو text وليس submit

أنت أيضاً إستخدمت خواص أخرى سأذكرها سريعا وهي :

text-indent وهي تستخدم لإزاحة محتويات الوسم

background-image لتعيين خلفية للوسم وقيمتها تكون مسار صورة الخلفية

background-repeat تكرار الصورة بشكل كلي أو في أحد الإتجهات الأربعة أو عدم التكرار نهائياً

background-attachment وهذه الخاصية لتثبيت وضعية الصورة fixed أو تكون متحركة scroll ويظهر هذا التأثير في الصفحات الطويلة التي يظهر لها شريط تمرير على الجانب ولها خاصية ثالثة لم أستخدمها يمكنكم تجربتها وإفادتنا ماذا تفعل .

background-position للتحكم في وضعية الخلفية وهذا المثال جيد لفهم هذه الخاصية

text-decoration نوع الخط إما تحته خط underline أو فوقه خط overline أو بوسطه خط line-through أو نص وامض blink أي يظهر ويختفي أو لاشئ مما سبق none

ومن أهم الخواص أيضاً خاصيتي padding و margin والصورة التالية توضح عملهما :

والرابط التالي الشرح المباشر لهم

وأيضاً أنت استخدمت في ملف index.html الخاصية placeholder أحد خواص الوسم input المضافة في نسخة HTML5 وهي لوضع نص داخل حقل الإدخال في حالة كونه فارغاً وتستخدم لتوضيح ماهية المحتويات التي يجب إدخالها في هذا الحقل فعند إستخدام أحد هذه الخواص الجديدة فيجب إختبارها على عدة متصفحات والتأكد من عملها لأن ليس كل الخصائص والوسوم الجديدة مدعومه في المتصفحات -إن كان يهمك أمر التوافقية على عدة متصفحات-

وهذا موقع لإختبار مدى دعم متصفحك للجديد في HTML5 والتعرف على ما هو مدعوم وما لم يتم دعمه بعد

وهذا موقع أخر لإختبار دعم الصيغة القياسية لمتصفحك الحالي للجديد في CSS3

وبالنسبة لأنكم تحدثتم عن أدوات الألوان

فالتالي رابط تنزيل أداه لنظام windows تعمل منفرده لإلتقاط كود اللون الذي تريده من أي منطقة في الشاشة

colorpicker.rar

وبالنسبة لنظام Linux لا أذكر اسم الأداة ولكنها موجوده ضمن برنامج GIMP

وهذا رابط للألوان على موقع مدرسة W3

وتم إضافة الدرس التالي

دمتم في أمان الله

المرفقات

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 21 ديسمبر 2012 في 20:57

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#1020 ديسمبر 2012 في 01:34

بارك الله فيكم مشاركة غنية جداً ... وفقكم الله ...

أعتذر على تأخري .. هذه محاولتي (بدون ملف خارجي )..

<html>
	<head>
		<title>
			CSS TEST
		</title>

		<style>

			body
			{
				background-color:rgb(160,210,210);
				text-align:left;
				margin-left: 10%;
				margin-right: 10%;
			}
			p
			{
				text-align: right;
				margin-left: 29%;
				margin-right: 29%;
				border-width: 1px 1px medium; 
				border-style: solid solid solid solid;
				border-color: rgb(201, 201, 201) rgb(201, 201, 201) -moz-use-text-color;
				background-color: rgb(238, 238, 238);
			}
			h3
			{
				margin-left: 33%;
				margin-right: 33%;
				background-color: rgb(128, 205, 114);
				text-color:rgb(123,0,213);
				text-align:center;
			}
			h1
			{
				color: #11F;
				font-size: 28px;
				background-color: #99F;
				font-family: Andalus;
				text-align: center;
			}
			img
			{
				align:right;

			}
		</style>
	</head>

	<body>

		<div style="
		text-align:center;
		margin-left: 19px;
		margin-right: 19px;
		border-width: 1px 1px medium; 
		border-style: solid solid solid solid;
		border-color: rgb(201, 201, 201) rgb(201, 201, 201) -moz-use-text-color;
		background-color: rgb(238, 238, 238);">
		السلام عليكم ورحمة الله وبركاته
		</div>

		<p>
		الحمد لله
		<br>
		اللهم علمنا ما ينفعنا وانفعنا بما علمتنا
		</p>
		<h3>
			بارك الله بك أخي أحمد
		</h3>
		<br><br><br>
		<h1 name="بالتوفيق">
			وفقك الله وسدد خطاك
			<br>
			<img src="/uploads/av-254524.gif" name="Ahmad"></img>
			<br>
			والسلام عليكم ورحمة الله وبركاته
		</h1>
	</body>
</html>

بصراحة الموضوع ممتع ...(لم أقرأ بعد آخر ردين ولكن غدا بإذن الله )

وبما أن أخي bahbah سيسبقني فعلي أن أعمل بجد أكبر

نلتقي في الغد بإذن الله ...

بارك الله فيكم والسلام عليكم

#1120 ديسمبر 2012 في 02:00

اقتباس

لتعرف الفرق بين وسمي div و span جرب الكود التالي :

<!doctype html> 
<html dir="rtl"> 

        <head> 
                <meta charset="utf-8"> 
                <title> 
                                        تجربة التنسيق 
                </title> 
        </head> 

        <body> 
                        <div>ahmed</div> 
                        <div>mohammed</div> 
                        <div>Mr.Mostafa</div> 
                        <span>jamal</span> 
                        <span>ibraheem</span> 
                        <span>mahmoud</span> 
        </body> 

</html>

عند استعمال div تتم كتابة العبارة ثم الانتقال إلى سطر جديد ... بينما span تكتب فراغا بعد الكلمة ... (كما يبدو)

اقتباس
إذاً فجميع التنسيقات يمكن عملها من خلال لغة التنسيق CSS نعود لأول كود في هذه المشاركة وهو كود مشاهدة الفرق بين الوسمين div و span وطبق عليه الكود التالي وأخبرني ماذا سترى ماذا سترى ؟ :
 <style> 
        div { 
                display: inline; 
        } 
        span { 
                display: block; 
        } 
</style>

عجيب !! صارت الdiv تعمل كأنها span و span تعمل كأنها div

اقتباس
والسؤال إذاً هل يمككني إنشاء وسومي الخاصة غير span و div في لغة HTML ؟ أترك الإجابة لتجربتكم

أشهد ألا إله إلا الله ... وأن محمدا رسول الله

با إلهي ... لم أكن أتوقع أن تصل الامور الى هذا الحد

وسومكم جاهزة يا رفاق

<!doctype html> 
<html dir="rtl"> 

    	<head> 
            	<meta charset="utf-8"> 
            	<title> 
                                    	تجربة التنسيق 
            	</title>
<style> 
    	BahBah {
					margin-left:19%;
					color:#654;
    	} 
    	Mostafa { 
            	display: block; 
				background-color:rgb(156,132,17);
    	} 
		Ahmad{
			margin-right:25%;
			background-color:#123456;
			text-align:center;
		}
</style> 				
    	</head> 

    	<body> 
                    	<ahmad>ahmed</admad>
                    	<mostafa>Mostafa</moatafa>  
                    	<bahbah>mahmoud</bahbah> 
    	</body> 

</html>

قبل المتابعة أرغب بمشاركة هذه الفكرة معكم ... فقد قمت بتحميل هذه الصفحة ..قم أخذت أحاول قراءتها ... وأستخلص المفيد من ملفات css وكذلك الملف الرئيسي ...

وفيه فائدة جيدة ... إلا أن الكود غير مرتب (وهذا حسب علمي بسبب نقص ال'n\' داخل كود الphp ...

على كل حال ككانت هذه هي الفكرة ... جاري متابعة الابداعات ...

بالتوفيق

#1220 ديسمبر 2012 في 18:52

السلام عليكم

شكراً على مشاركاتكم الرائعة وعلى تضمين الصورة الرمزية , وبارك الله فيكم على الدعاء اللهم آمين , ونسأل الله لكم الجنة وأن يزوجكم من الحور العين

اقتباس
قبل المتابعة أرغب بمشاركة هذه الفكرة معكم ... فقد قمت بتحميل هذه الصفحة ..قم أخذت أحاول قراءتها ... وأستخلص المفيد من ملفات css وكذلك الملف الرئيسي ...

-لفتة جملية منك عزيزي , في الغالب المواقع الكبيرة التي يكون عليها ضغط يكتب الكود في شكله الـ min code لسرعة معالجته , ولكن لا تحزن فقد وفّر متصفح Google chrome هذه الميزة الجميلة لتصفح هيكلة الموقع وتنسيقاته وأيضاً بها الكثير فقط إضغط على مفتاح F12 وسترى شيئ سيعجبك

و أيضاً لهواة متصفح Fire Fox هناك إضافة firebug الرائعة .

كما أن هناك تصميمات جاهزة كثيرة موجودة على الويب فقط ضع كلمات كـ HTML5 template أو css3 templates أو شيئ من هذا القبيل في محرك البحث وستجد العديد من التصميمات الحديثة الجاهزة والمجانية أيضاً ما عليك إلا تعديلها -والتعديل ليس عيب لأن الذي يستطيع تصميم شيئ مماثل هو من يستطيع التعديل بإحتراف على هذه التصميمات- هذه التصميمات ستفيد كثيراً جداً إذا كان أحد يهمه عامل الوقت , وإن كنت لاتريد إستخدامها على الأقل ستعطي لك أفكار جديدة للتصميمات وإختيار الألوان والبساطة في التصميم وكثير من مميزات التصاميم الإحترافية .

دمتم في أمان الله

المرفقات

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#132 فبراير 2013 في 02:05

مصطفى 36a2 كتب:

بارك الله فيكم مشاركة غنية جداً ... وفقكم الله ...

أعتذر على تأخري .. هذه محاولتي (بدون ملف خارجي )..

<html>	<head>		<title>			CSS TEST		</title>				<style>						body			{				background-color:rgb(160,210,210);				text-align:left;				margin-left: 10%;				margin-right: 10%;			}			p			{				text-align: right;				margin-left: 29%;				margin-right: 29%;				border-width: 1px 1px medium; 				border-style: solid solid solid solid;				border-color: rgb(201, 201, 201) rgb(201, 201, 201) -moz-use-text-color;				background-color: rgb(238, 238, 238);			}			h3			{				margin-left: 33%;				margin-right: 33%;				background-color: rgb(128, 205, 114);				text-color:rgb(123,0,213);				text-align:center;			}			h1			{				color: #11F;				font-size: 28px;				background-color: #99F;				font-family: Andalus;				text-align: center;			}			img			{				align:right;							}		</style>	</head>		<body>		<div style="		text-align:center;		margin-left: 19px;		margin-right: 19px;		border-width: 1px 1px medium; 		border-style: solid solid solid solid;		border-color: rgb(201, 201, 201) rgb(201, 201, 201) -moz-use-text-color;		background-color: rgb(238, 238, 238);">		السلام عليكم ورحمة الله وبركاته		</div>				<p>		الحمد لله		<br>		اللهم علمنا ما ينفعنا وانفعنا بما علمتنا		</p>		<h3>			بارك الله بك أخي أحمد		</h3>		<br><br><br>		<h1 name="بالتوفيق">			وفقك الله وسدد خطاك			<br>			<img src="/uploads/av-254524.gif" name="Ahmad"></img>			<br>			والسلام عليكم ورحمة الله وبركاته		</h1>	</body></html>

بصراحة الموضوع ممتع ...(لم أقرأ بعد آخر ردين ولكن غدا بإذن الله )

وبما أن أخي bahbah سيسبقني فعلي أن أعمل بجد أكبر

نلتقي في الغد بإذن الله ...

بارك الله فيكم والسلام عليكم

أخي تجربتك جميلة جدا ولكنك نسيت شيء مهم لأنك استخدمت اللغة العربية ولم تضف الترميز

دائما انصحك بإضافة وسم الميتا في الهيدر حتي ولو تكن تستخدم اللغة العربيه :)

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

هل يوجد دليل سريع وكامل لتعلم CSS7 رد · 16 يونيو 2002
أين أجد مصادر لتعلم ال CSS ؟2 رد · 10 ديسمبر 2006
ممكن كتب لتعلم لغة ال C++1 رد · 5 يونيو 2004
ريد كتاب لتعلم برمجة ال8051 باستخدام لغة السى1 رد · 3 مايو 2005
مدخل الى لغة الباسكال1 رد · 3 أبريل 2008
اريد تحويل تنسيق اللغة إلى وطني8 رد · 13 يناير 2006