CSS (الدرس السادس) : CSS Basic From W3Schools

[محمد جبلي]

بسم الله الرحمن الرحيم

طلاب العلم الكرام

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

هذا درسنا القبل الأخير بإذن الله في لغة الـ CSS

وكان من الواجب علينا الرجوع إلى مصدرنا الأساسي
W3SCOOLS

لتكملة ما تعلمناه سوياً

لأننا طلاب فريق متخصص
فيجب أن نكون professional

سأشير الى الأشياء التي لم نتعلمها
من مصدرنا المعرب

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

وأفهموه

( سأضع صور في الدروس الأولى لتقريب فكرة الإشارة للأمور الجديدة )

*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

المصدر :
CSS Tutorial

الدرس الأول : CSS HOME

لا يوجد به جديد

الدرس الثاني : CSS Introduction

يوجد به مثـال جميل لـ CSS
إضغط هنا : CSS in Action

الدرس الثالث : CSS Syntax

درس مهم ,,
الجديد :

* Grouping


* ملاحظة مهمة :
Note: To apply more than one class per given element


* ملاحظة مهمة :
Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

* Add Styles to Elements with Particular Attributes


* مفهوم مهم :
The style rule below will match the p element that has an id with a value of "para1"


* CSS Comments


الدرس الرابع : CSS How To

* في External Style Sheet
هناك ملاحظة مهمة : بجانبها هذه العلامة

* في Internal Style Sheet
هناك ملاحظة مهمة تبدأ بـ Note

الدرس الخامس : CSS Background

إمكانية إستخدام المحرر في نفس الموقع لتعلم الـCSS
Tryit Editor v1.4

الدرس السادس : CSS Text

* مثال جميل
Tryit Editor v1.4

* خصائص جديدة :
CSS Direction Property
CSS Line-height Property
CSS White-space Property
CSS Word-spacing Property

الدرس السابع : CSS Font

* خصائص جديدة :
CSS Font-size-adjust Property
(قد لا تعمل في أغلب المتصفحات )

الدرس الثامن : CSS Border

ليس به شيء جديد
ولكن يجب أن نعرف أن كل حد في الإطار ممكن تعديله لوحده (أي أن له خاصية مستقلة)
من لايعرف ذلك فليدخل الدرس ليستمتع بالمعلومات الجميلة التي فيه

الدرس التاسع : CSS Outlines

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

الدرس العاشر : CSS Margin

هذا الدرس أخذناه
لكن به ملاحظة :

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!

الدرس الحادي عشر : CSS Padding

لايوجد به جديد
لكن به أمثله جميلة

الدرس الثاني عشر : CSS List

هذا درس جديد كلياً و رائـع جداً و مهم جداً وسهل جداً
إستمتعوا به

الدرس الثالث عشر : CSS Table

وهذا كذلك درس جديد كلياً و رائـع جداً و مهم جداً وسهل جداً
إستمتعوا به

الواجب

شرح 3 نقاط (أو تعريبها) من النقاط الجديدة المذكورة أعلاه
كل عضو يشرح 3 نقاط مختلف عن العضو الأخر



بالتوفيق

[زهرة البيلسان]

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

الحمد لله , قاربنا الانتهاء ..

.,.


CSS Tutorial

بالأمس و اليوم مررت عليه ..
فيه أشياء و أمثلة جداً مهمة ,



وقد جربت فيه الكويز ..

CSS Quiz

بسيط و جميل ,


.,.


أما الدرس هذه المرة يحتاج إلى التركيز ,

سأعود بإذن الله ..

[محمد جبلي]

أستاذة زهرة البيلسيان
هل تعلمتي تصميم المواقع خارج الفريق .. أم أن تعلمك كان مع الفريق فقط ؟؟

وشكراً

[ريفــــــــــــــــان]

،

ملاحظات رائعة . .

سأشرح ثلاثة منها . .

الدرس الثالث : CSS Syntax

فيه ملاحظة:

Do NOT start a class name with a number! It will not work in Mozilla/Firefox

لا تبدأ أسماء الفئات بأرقام . . لأنها لا تعمل في الفايرفوكس . .

. .


* CSS Comments

يستخدم عند إدراج تعليق داخل الكود

بحيث لا يتم تنفيذه إنما يستفيد منه المبرمج لتذكر الكود . .

مثال لطريقة كتابته . .

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

الدرس الرابع : CSS How To

* في External Style Sheet

هناك ملاحظة مهمة :

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

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

مثال:

margin-left: 20 px

إنما تجب كتابة الوحدة بعد القيمة مباشرة

مثال:

margin-left: 20px

لأنه إذا وجدت المسافة

فلن تعمل إلا في الإكسبلورر فقط . .


[ سبحان الله وبحمده ،، سبحان الله العظيم ]
،

[زهرة البيلسان]

الدرس السادس : CSS Text


CSS Direction Property

التعريف :
خاصية الاتجاه تتحكم في اتجاه النص .!


Inherited: Yes

<-- هل يقصد بها أنها تحتوي على خاصية الوراثة ..؟


مثال :

كود PHP:

div
{ 
direction: rtl
} 


القيم المحتملة للخاصية :ltr و rtl


لغة الجافا سكريبت :

خصائص الـ CSS يمكن أيضا أن تتغير بفاعلية مع جافا سكريبت ..

تكتب على النحو :

object.style.direction="rtl"


..**..


CSS Line-height Property

التعريف

يتحكم بخاصية الارتفاع بين الاسطر ..

Inherited: Yes

ملاحظة: القيم السلبية لا يسمح لها.


مثال :

كود PHP:

p
{ 
line-height: 1.4
}

p
{ 
line-height: 14pt
} 

p
{ 
line-height: 140%
} 


القيم المحتملة و وصفها :

normal
يضع مسافة معقولة بين الخطوط

number
تعدّ المجموعات التي ستضاعف بتيار بحجم الخطّ لوضع المسافة بين الخطوط

length
مسافة ثابتة بين الاسطر

%
تباعد الأسطر بين الخطوط بالنسبة لحجم الخطّ الحالي


لغة الجافا سكريبت:

خصائص CSS يمكن أيضا أن تتغير باستخدام جافاسكريبت

تكتب على النحو :

object.style.lineHeight="2"


..**..


CSS white-space Property



التعريف

مجموعة خصائص الفضاء الأبيض , كم فضاء أبيض داخل عنصر معالج ..!

Inherited: Yes


مثال :

كود PHP:

p
{
white-space: normal
} 


القيم المحتملة للخصائص

normal
و هي الافتراضيه .White-space مهمل بالمتصفّح

pre
White-space محفوظ بالمتصفّح و يفعل مثل <pre> في html

nowrap
النص لن يلف، يستمر على نفس الخط حتى يصادف وسم <br>



لغة الجافا سكريبت :

خصائص CSS يمكن أيضا أن تتغير باستخدام جافاسكريبت.

تكتب على النحو :

object.style.whiteSpace="nowrap"



.,.


هل نتطرق لاستخدام الجافا اسكريبت هنا ..؟


.,.

أستاذة زهرة البيلسيان هل تعلمتي تصميم المواقع خارج الفريق .. أم أن تعلمك كان مع الفريق فقط ؟؟

لا .. بل كان مع الفريق ,
و الآن بدأت دراسته من جديد لكن بشكل بسيط ..!

[محمد جبلي]

.,. هل نتطرق لاستخدام الجافا اسكريبت هنا ..؟ .,.

لا ,, الجافا سكربت لغتنا القادمة في الفريق بإذن المولى
فترقبوها ..

[محمد جبلي]

سيتم إنزال الدرس الجديد قريباً بإذن الله

أتمنى سرعة التفاعـــــــل مع هذا الموضوع

كفانا تأخـــر !!

[aroma]

عذرا على التأخير ,,

حل الواجب ,,


قوائم CSS

تسمح خصائص قوائم CSS

بعمل قوائم للاشياء , التبديل بينها , او وضع صورة كقائمة

Examples

1- امثلة لاشياء في قائمة مبعثرة ( بالرموز )

Tryit Editor v1.4


2- مثال ع اشياء في قائمة مرتبة ( بالارقام و الحروف ) :

Tryit Editor v1.4

3- مثال ع صورة استخدمت كتعداد
Tryit Editor v1.4

4- مثال يوضح مكان القوائم

Tryit Editor v1.4

5-مثال يوضح كل الخصائص

Tryit Editor v1.4

**

CSS Outlines
تستخدم خصائص الحدود لرسم خط حول العنصر

1- مثال يوضح كيفية رسم خط حول احد العناصر

Tryit Editor v1.4


2- كيف تكتب الاكواد الخاصة بتنسيق الحدود


Tryit Editor v1.4


3- كيف تكتب الاكواد الخاصة بلون الحدود

Tryit Editor v1.4


4- تعريض الحد ( الحدود )
Tryit Editor v1.4

[شادل]

.

تمت قراءة الدرس ..

جاري حل الواجب ..


< أعتذر جدًا على التأخير .. >


.