العالم العربي
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

العالم العربي هو موقع إخباري وتفاعلي متنوّع ، يُدار من قبل فريق متكامل ومقرّه جميع الدول العربية.


دورة منتديات تونس الابداع لتعلم لغة الـــcss

العالم العربي :: الكمبيوتر والجوالات وتطويرالمواقع والمنتديات :: الكمبيوتر والأنترنت :: التطوير ولغات البرمجة :: تطوير منتديات vb :: لغات البرمجة

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:50

دورة منتديات تونس الابداع لتعلم لغة الـــcss




درس 1: ما هي تقنية CSS؟
لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.
CSS هي اختصار لي Cascading Style Sheets.
ماذا يمكن أن أفعل بتقنية CSS؟
CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، انتظر فقط وسترى!
HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم.
بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً رائعاً.
ما الفرق بين CSS وHTML؟
تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات.
حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.
في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل 
الكود:
<h1>
[color][font]
 و
[/font][/color]
الكود:
<p>
[color][font]
.[/font][/color]
مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل 
الكود:
<font>
[color][font]
 الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية.[/font][/color]
أدى ذلك إلى أن تستخدم وسوم هيكلية مثل بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة.
ابتكرت CSS لعلاج هذه المشكلة لأنها توفر للمصممين طرقاً فعالة وعملية لإنشاء التصاميم وهذه التصاميم ستكون مدعومة من قبل جميع المتصفحات في نفس الوقت، والفصل بين شكل الصفحة ومحتوياتها يبسط عملية إدارة الموقع بشكل كبير.
كيف ستفيدني CSS؟
تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

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

في الدرس اللاحق سننظر عن قرب إلى كيفية عمل CSS وكيف نبدأ باستخدامها.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:51

درس 2: كيف تعمل تقنية CSS؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.
الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي.
القواعد الأساسية لكتابة CSS
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

الكود:

   <body bgcolor="#FF0000">
   



مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:

الكود:

   body {background-color: #FF0000;}
   



كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure001.ar
لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.
تفعيل CSS في صفحة HTML
هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.
الطريقة 1: ضمن وسوم HTML باستخدام خاصية style
إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية 
الكود:
style
[color][font]
، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل[/font][/color]

الكود:
<html>



الكود:
<head>



الكود:
<title>Example<title>



الكود:
</head>



الكود:
<body style="background-color: #FF0000;">



الكود:
<p>This is a red page</p>



الكود:
</body>



الكود:
</html>



الطريقة 2: ضمت ملف HTML باستخدام وسم style
هذه طريقة مختلفة بأنها تستخدم وسم 
الكود:
<style>
[color][font]
، وهذا مثال لكيفية تطبيق هذه الطريقة:[/font][/color]

الكود:
<html>



الكود:
<head>



الكود:
<title>Example<title>



الكود:
<style type="text/css">



الكود:
body {background-color: #FF0000;}



الكود:
</style>



الكود:
</head>



الكود:
<body>



الكود:
<p>This is a red page</p>



الكود:
</body>



الكود:
</html>



الطريقة 3: ملف خارجي
هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure002
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:

الكود:
<link rel="stylesheet" type="text/css" href="style/style.css" />



لاحظ كيف أن مسار الملف حددناه باستخدام خاصية 
الكود:
href
[color][font]
.[/font][/color]
هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي 
الكود:
<head>
[color][font]
 و
[/font][/color]
الكود:
</head>
[color][font]
 كما في المثال الآتي:[/font][/color]

الكود:
<html>



الكود:
<head>



الكود:
<title>My document</title>



الكود:
<link rel="stylesheet" type="text/css" href="style/style.css" />



الكود:
</head>



الكود:
<body>


...

هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure003.ar
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك
قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
default.htm

الكود:
<html>



الكود:
<head>



الكود:
<title>My document</title>



الكود:
<link rel="stylesheet" type="text/css" href="style.css" />



الكود:
</head>



الكود:
<body>



الكود:
<h1>My first stylesheet</h1>



الكود:
</body>



الكود:
</html>



style.css

الكود:
body {



الكود:
background-color: #FF0000;



الكود:
}



الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
أسرع واقرأ الدرس اللاحق حيث سنلقي نظرة على بعض خصائص CSS.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:52

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

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

لون المقدمة: خاصية 'color'
خاصية 
الكود:
color
[color][font]
 تصف لون عنصر HTML.[/font][/color]
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم 
الكود:
<h1>
[color][font]
، المثال أدناه سيقوم بتوضيح كيفية تحويل كل 
[/font][/color]
الكود:
<h1>
[color][font]
 إلى اللون الأحمر:[/font][/color]

الكود:

   h1 {
      color: #ff0000;
   }
   




  • شاهد المثال

الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).
خاصية 'background-color'
خاصية 
الكود:
background-color
[color][font]
 تحدد لون خلفية أي عنصر.[/font][/color]
العنصر 
الكود:
<body>
[color][font]
 يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر 
[/font][/color]
الكود:
<body>
[color][font]
.[/font][/color]
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري 
الكود:
<body>
[color][font]
 و
[/font][/color]
الكود:
<h1>
[color][font]
.[/font][/color]

الكود:

   body {
      background-color: #FFCC66;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   




  • شاهد المثال

لاحظ أننا قمنا بتفعيل خاصيتين للعنصر 
الكود:
<h1>
[color][font]
 وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.[/font][/color]
الصورة كخلفية "background-image"
خاصية 
الكود:
background-image
[color][font]
 تستخدم لوضع صورة كخلفية لأي عنصر.[/font][/color]
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
دورة منتديات تونس الابداع لتعلم لغة الـــcss Butterfly
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر 
الكود:
<body>
[color][font]
 وحدد مسار الصورة:[/font][/color]

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   




  • شاهد المثال

انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif")أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif").
تكرار صورة الخلفية "background-repeat"
هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية 
الكود:
background-repeat
[color][font]
 تتحكم بتكرار الصورة.[/font][/color]
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية 
الكود:
background-repeat
[color][font]
.[/font][/color]
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
Background-repeat: repeat-x
الصورة ستتكرر أفقياًشاهد المثال
الكود:
background-repeat: repeat-y
الصورة ستتكرر عمودياًشاهد المثال
الكود:
background-repeat: repeat
الصورة ستتكرر أفقياً وعمودياًشاهد المثال
الكود:
background-repeat: no-repeat
لن تتكرر بأي شكلشاهد المثال
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   




  • شاهد المثال

تثبيت صورة الخلفية "background-attachment"
الخاصية 
الكود:
background-attachment
[color][font]
 تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.[/font][/color]
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية 
الكود:
background-attachment
[color][font]
، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.[/font][/color]
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
Background-attachment: scroll
الصورة ستتحرك مع الصفحةشاهد المثال
الكود:
Background-attachment: fixed
الصورة ستبقى ثابتةشاهد المثال
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   




  • شاهد المثال

مكان صورة الخلفية "background-position"
تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية 
الكود:
background-position
[color][font]
 تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.[/font][/color]
هناك طرق مختلفة لتحديد قيمة 
الكود:
background-position
[color][font]
، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.[/font][/color]
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure004

الجدول أدناه يوضح بالمزيد من الأمثلة
[th]القيمة[/th][th]الوصف[/th][th]مثال[/th]
الكود:
background-position: 2cm 2cm
هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشةشاهد المثال
الكود:
background-position: 50% 25%
هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشةشاهد المثال
الكود:
background-position: top right
هذه الصورة وضعت في أعلى يمين الصفحةشاهد المثال
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:

الكود:

   body {
      background-color: #FFCC66;
      background-image: url("butterfly.gif");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: right bottom;
   }

   h1 {
      color: #990000;
      background-color: #FC9804;
   }
   




  • شاهد المثال

جمع كل الخصائص "background"
الخاصية 
الكود:
background
[color][font]
 هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.[/font][/color]
باستخدام 
الكود:
background
[color][font]
 يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.[/font][/color]
فمثلاً يمكن اختصار هذه الأسطر:

الكود:

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;
   



باستخدام 
الكود:
background
[color][font]
 يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:[/font][/color]

الكود:

   background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
   



القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
الكود:
background-color

 | 
الكود:
background-image
[color][font]
 | 
[/font][/color]
الكود:
background-repeat
[color][font]
 | 
[/font][/color]
الكود:
background-attachment
[color][font]
 | 
[/font][/color]
الكود:
background-position

إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية 
الكود:
background-attachment
[color][font]
 و
[/font][/color]
الكود:
background-position
[color][font]
 في المثال:[/font][/color]

الكود:

   background: #FFCC66 url("butterfly.gif") no-repeat;
   



الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.
ملخص
في هذ الدرس تعلمت طرقاً جديدة لا يمكنك تطبيقها باستخدام HTML فقط، المتعة تستمر في الدرس القادم والذي سنختبر فيه طيفاً واسعاً من الإمكانيات عندما نستخدم CSS لتحديد الخطوك.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:54

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

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

نوع الخطوط "font-family"
الخاصية 
الكود:
font-family
[color][font]
 تستخدم لوضع قائمة خطوط تطبق على حسب الأولوية على عنصر أو صفحة ما، إذا لم يجد المتصفح الخط الأول ضمن قائمة الخطوط سيقوم باستخدام الخط الثاني في القائمة وإذا لم يجده سيحاول عرض الخط التالي، وهكذا حتى يجد الخط المناسب.[/font][/color]
هناك نوعان من أسماء الخطوط تستخدم لتصنيفها، خطوط بأسماء محددة أو أسماء عامة، المصطلحين سنشرحهما في الفقرات اللاحقة.
أسماء الخطوطأمثلة لخطوط بأسماء محددة هي "Arial" و"Times New Roman" أو "Tahoma".أسماء عامةالأسماء العامة للخطوط تحدد المجموعة من الخطوط التي لها شكل متماث، فمثلاً sans-serif هي مجموعة من الخطوط لا تحوي زوائد على الأحرف وهي خطوط مناسبة لعرض النص على الشاشة.
الاختلاف بين أنواع الخطوط يوضح في المثال التالي:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure005.ar
عندما تضع قائمة بالخطوط في موقعك فأنت تبدأ مع الخط المفضل لديك ثم الذي يليه، ومن الأفضل أن تنهي القائمة باسم مجموعة عامة من الخطوط، بهذه الطريقة تضمن أن الصفحة ستعرض بنفس النوع من الخط المفضل لديك إذا لم يجد المتصفح الخط الذي قمت بتحديده.
فمثلاً قائمة مرتبة من الخطوط مرتبة ستكون بهذا الشكل:

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif;}
   




  • شاهد المثال

العناوين التي حددت باستخدام العنصر 
الكود:
<h1>
[color][font]
 ستعرض باستخدام خط "Arial"، إذا لم يكن هذا الخط مثبتاً في حاسوب المستخدم سيعرض بدلاً منه خط "Verdana" وإذا لم يكن الإثنان موجودان على حاسوب المستخدم سيتم اختيار خط من عائلة الخطوط sans-serif لعرض العناوين.[/font][/color]
لاحظ كيف أننا وضعنا اسم خط "Times New Roman" بين علامتي تنصيص لأن اسمه يحوي مسافات ولذلك يجب أن يوضع بين علامتي تنصيص.
طراز الخط "font-style"
الخاصية 
الكود:
font-style
[color][font]
 تحدد ما إذا كان الخط سيحمل القيمة normal أو italic أو oblique، في المثال أدناه كل عناوين 
[/font][/color]
الكود:
<h2>
[color][font]
 ستظهر بشكل مائل.[/font][/color]

الكود:

   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif; font-style: italic;}
   




  • شاهد المثال

تباين الخط "font-variant"
الخاصية 
الكود:
font-variant
[color][font]
 تستخدم للاختيار بين القيمتين normal أو small-caps للخط وهي متعلقة فقط باللغات الأوروبية، القيمة small-caps تعني أن النص سيكتب بحروف كبيرة لكنها من ناحية الحجم صغيرة، ، يبدو الأمر مربكاً، عليك أن تشاهد المثال الآتي لكي تفهم أكثر:[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure006
إذا اختيرت القيمة 
الكود:
small-caps
[color][font]
 للخاصية font-variant ولم يكن هناك خط يدعم هذه الخاصية سيقوم المتصفح بعرض النص بحروف كبيرة فقط.[/font][/color]

الكود:

   h1 {font-variant: small-caps;}
   h2 {font-variant: normal;}
   




  • شاهد المثال

وزن الخط "font-weight"
الخاصية 
الكود:
font-weight
[color][font]
 تصف كم ستكون سماكة أو "ثقل" الخط، يمكن للخط أن يحمل القيمة normal أو bold، وهناك متصفحات تدعم استخدام الأرقام من 100 إلى 900 لوصف ثقل الخط.[/font][/color]

الكود:

   p {font-family: arial, verdana, sans-serif;}
   td {font-family: arial, verdana, sans-serif; font-weight: bold;}
   




  • شاهد المثال

حجم الخط "font-size"
حجم الخط يمكن تحديده بالخاصية 
الكود:
font-size
[color][font]
.[/font][/color]
هناك العديد من الوحدات (مثال: بكسل، النسبة المؤية) التي يمكن استخدامها لوصف حجم الخط، في هذا المثال سنركز على الوحدات الأكثر استخداماً، والمثال يتضمن:

الكود:

   h1 {font-size: 30px;}
   h2 {font-size: 12pt;}
   h3 {font-size: 120%;}
   p {font-size: 1em;}
   




  • شاهد المثال

هناك فرق واحد بين وحدات القياس الأربع، وهي أن كل من 'px' و'pt' تجعل حجم الخط محدداً بدقة وثابت بينما '%' و'em' تسمح للمستخدم بتغيير حجم الخط إلى المستوى المناسب له، هناك العديد من المستخدمين من ذوي الاحتياجات الخاصة أو كبار السن أو من يعاني من ضعف في البصر أو يملك شاشة ذات جودة رديئة، ولكي نجعل الموقع قابلاً للوصول لهذه الفئات وللجميع لا بد من استخدام وحدات قياس يمكن تعديلها مثل '%' أو 'em'.
في المثال أدناه توضيح لكيفية تعديل حجم الخط في موزيلا فايرفوكس وإكسبلورر، خاصية رائعة، ألا تظن ذلك؟
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure007
جمع كل خصائص الخط "font"
استخدام 
الكود:
font
[color][font]
 الخاصية التي يمكنها أن تختصر كل خصائص الخطوط في سطر واحد.[/font][/color]
فمثلاً تصور هذه السطور الأربعة تصف خصائص خطوط للعنصر 
الكود:
<p>
[color][font]
:[/font][/color]

الكود:

   p {
      font-style: italic;
      font-weight: bold;
      font-size: 30px;
      font-family: arial, sans-serif;
   }
   



باستخدام الخاصية التي تختصر الخصائص الأخرى يمكن للسطور الأربعة أن تبسط بهذا الشكل:

الكود:

   p {
      font: italic bold 30px arial, sans-serif;
   }
   



قائمة قيم الخاصية 
الكود:
font
[color][font]
 ترتب بهذا الشكل:[/font][/color]
الكود:
font-style

 | 
الكود:
font-variant
[color][font]
 | 
[/font][/color]
الكود:
font-weight
[color][font]
 | 
[/font][/color]
الكود:
font-size
[color][font]
 | 
[/font][/color]
الكود:
font-family

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

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:55

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

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

وضع فارغ قبل أول سطر "text-indent"
الخاصية 
الكود:
text-indent
[color][font]
 تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر 
[/font][/color]
الكود:
<p>
[color][font]
:[/font][/color]

الكود:

   p {
      text-indent: 30px;
   }
   




  • شاهد المثال

محاذاة النص "text-align"
خاصية 
الكود:
text-align
[color][font]
 تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.[/font][/color]
في المثال أدناه النص في رأس الجدول 
الكود:
<th>
[color][font]
 قمنا بمحاذاته نحو اليمين، بينما البيانات في الجدول 
[/font][/color]
الكود:
<td>
[color][font]
 حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:[/font][/color]

الكود:

   th {
      text-align: right;
   }

   td {
      text-align: center;
   }

   p {
      text-align: justify;
   }
   




  • شاهد المثال

زخرفة النص "text-decoration"
الخاصية 
الكود:
text-decoration
[color][font]
 تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه، في المثال الآتي كل عناصر 
[/font][/color]
الكود:
<h1>
[color][font]
 وضعنا أسفلها خطاً أما 
[/font][/color]
الكود:
<h2>
[color][font]
 فهي العناوين التي فوقها خط و
[/font][/color]
الكود:
<h3>
[color][font]
 قمنا بوضع الخط عليها.[/font][/color]

الكود:

   h1 {
      text-decoration: underline;
   }

   h2 {
      text-decoration: overline;
   }

   h3 {
      text-decoration: line-through;
   }
   




  • شاهد المثال

المسافة بين الحروف "letter-spacing"
المسافة بين حروف النص يمكن تحديدها من خلال خاصية 
الكود:
letter-spacing
[color][font]
، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات 
[/font][/color]
الكود:
<p>
[color][font]
 و6px بين الحروف في العناوين 
[/font][/color]
الكود:
<h1>
[color][font]
 فعليك أن تكتب الخصائص بهذا الشكل:[/font][/color]

الكود:

   h1 {
      letter-spacing: 6px;
   }

   p {
      letter-spacing: 3px;
   }
   




  • شاهد المثال

تحويل النص "text-transform"
خاصية 
الكود:
text-transform
[color][font]
 تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.[/font][/color]
فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE" أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم text-transform:
capitalizeتقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".uppercaseتجعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".lowercaseستجعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".noneلن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML.
كمثال، سنقوم باستخدام قائمة أسماء، الأسماء كلها تستخدم العنصر 
الكود:
<li>
[color][font]
 (list-item)، ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.[/font][/color]
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.

الكود:

   h1 {
      text-transform: uppercase;
   }

   li {
      text-transform: capitalize;
   }
   




  • شاهد المثال

ملخص
في الدروس الثلاثة الأخيرة تعلمنا الكثير من خصائص CSS، لكن هناك الكثير في هذه التقنية، في الدرس اللاحق  سنلقي نظرة على الروابط.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:55

الدرس 6: الروابط
يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط (مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ) الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes.
ما هي الفئة المزيفة؟
الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML.
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم 
الكود:
<a>
[color][font]
 لذلك يمكننا أن نستخدم 
[/font][/color]
الكود:
a
[color][font]
 كمنتقي في CSS:[/font][/color]

الكود:

   a {
      color: blue;
   }
   



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

الكود:

   a:link {
      color: blue;
   }

   a:visited {
      color: red;
   }
   



استخدم 
الكود:
a:link
[color][font]
 و
[/font][/color]
الكود:
a:visited
[color][font]
 للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي 
[/font][/color]
الكود:
a:active
[color][font]
 أما 
[/font][/color]
الكود:
a:hover
[color][font]
فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط.[/font][/color]
سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة.
الفئة المزيفة: link
الفئة المزيفة 
الكود:
:link
[color][font]
 تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها.[/font][/color]
في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.

الكود:

   a:link {
      color: #6699CC;
   }
   




  • شاهد المثال

الفئة المزيفة: visited
الفئة المزيفة 
الكود:
:visited
[color][font]
 تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:[/font][/color]

الكود:

   a:visited {
      color: #660099;
   }
   




  • شاهد المثال

الفئة المزيفة: active
الفئة المزيفة 
الكود:
:active
[color][font]
 تستخدم للروابط النشطة.[/font][/color]
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:

الكود:

   a:active {
      background-color: #FFFF00;
   }
   




  • شاهد المثال

الفئة المزيفة: hover
الفئة المزيفة 
الكود:
:hover
[color][font]
 تستخدم عندما يكون مؤشر الفأرة فوق الرابط.[/font][/color]
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل:

الكود:

   a:hover {
      color: orange;
      font-style: italic;
   }
   




  • شاهد المثال

المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط
هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة 
الكود:
:hover
[color][font]
.[/font][/color]
مثال 1أ: وضع مسافات بين الحروف
كما تتذكر في الدرس 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية 
الكود:
letter-spacing
[color][font]
، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:[/font][/color]

الكود:

   a:hover {
      letter-spacing: 10px;
      font-weight:bold;
      color:red;
   }
   




  • شاهد المثال

مثال 1ب: الحروف الكبيرة والصغيرة
في الدرس 5 ألقينا نظرة على الخاصية 
الكود:
text-transform
[color][font]
 والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط:[/font][/color]

الكود:

   a:hover {
      text-transform: uppercase;
      font-weight:bold;
      color:blue;
      background-color:yellow;
   }
   




  • شاهد المثال

في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب!
مثال 2: إزالة السطر من أسفل الرابط
أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك.
على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية 
الكود:
text-decoration
[color][font]
 يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية
[/font][/color]
الكود:
text-decoration
[color][font]
.[/font][/color]

الكود:

   a {
      text-decoration:none;
   }
   



يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط:

الكود:

   a:link {
      color: blue;
      text-decoration:none;
   }

   a:visited {
      color: purple;
      text-decoration:none;
   }

   a:active {
      background-color: yellow;
      text-decoration:none;
   }

   a:hover {
      color:red;
      text-decoration:none;
   }
   




  • شاهد المثال

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

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:57

الدرس 6: الروابط
يمكنك أن تطبق ما تعلمته فعلاً في الدروس السابقة على الروبط (مثال: تغيير الألوان، الخطوط، وضع خط أسفل الروابط، إلخ) الجديد هنا أن CSS تسمح لك بتحديد خصائص مختلفة بحسب حالة الرابط إن لم يزر المستخدم الرابط أو زاره أو كان نشطاً أو كان مؤشر الفأرة فوق الرابط، كل هذا يمكنك من إضافة مؤثرات جميلة ومفيدة على الروابط، للتحكم بهذه التأثيرات يجب أن تستخدم ما يسمى pseudo-classes.
ما هي الفئة المزيفة؟
الفئة المزيفة أو pseudo-class يسمح لك بأن تأخذ في عين الاعتبار مختلف الحالات والأحداث عندما تقوم بتحديد خصائص لعنصر في HTML.
لنلقي نظرة على المثال، كما تعرف الروابط تحدد في HTML من خلال الوسم 
الكود:
<a>
[color][font]
 لذلك يمكننا أن نستخدم 
[/font][/color]
الكود:
a
[color][font]
 كمنتقي في CSS:[/font][/color]

الكود:

   a {
      color: blue;
   }
   



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

الكود:

   a:link {
      color: blue;
   }

   a:visited {
      color: red;
   }
   



استخدم 
الكود:
a:link
[color][font]
 و
[/font][/color]
الكود:
a:visited
[color][font]
 للروابط التي زارها أو لم يزرهاالمستخدم، الروابط يمكن أن تكون نشطة لها فئة مزيفة خاصة وهي 
[/font][/color]
الكود:
a:active
[color][font]
 أما 
[/font][/color]
الكود:
a:hover
[color][font]
فهي الحالة التي يكون فيها مؤشر الفأرة فوق الرابط.[/font][/color]
سنقوم الآن بعرض الحالات الأربع للروابط مع المزيد من الشرح والأمثلة.
الفئة المزيفة: link
الفئة المزيفة 
الكود:
:link
[color][font]
 تستخدم للروابط التي تقود المستخدم إلى صفحات لم يزرها.[/font][/color]
في المثال أدناه الروابط التي لم يزرها المستخدم ستظهر بلون أزرق فاتح.

الكود:

   a:link {
      color: #6699CC;
   }
   




  • شاهد المثال

الفئة المزيفة: visited
الفئة المزيفة 
الكود:
:visited
[color][font]
 تستخدم للروابط التي زارها المستخدم، المثال أدناه سيجعل كل الروابط التي زارها المستخدم بلون بنفسجي غامق:[/font][/color]

الكود:

   a:visited {
      color: #660099;
   }
   




  • شاهد المثال

الفئة المزيفة: active
الفئة المزيفة 
الكود:
:active
[color][font]
 تستخدم للروابط النشطة.[/font][/color]
في المثال أدناه كل الروابط النشطة ستظهر بخلفية صفراء:

الكود:

   a:active {
      background-color: #FFFF00;
   }
   




  • شاهد المثال

الفئة المزيفة: hover
الفئة المزيفة 
الكود:
:hover
[color][font]
 تستخدم عندما يكون مؤشر الفأرة فوق الرابط.[/font][/color]
يمكن استخدام هذه الفئة لإنشاء مؤثرات جميلة، فمثلاً إذا أردنا أن تكون الروابط ملونة بالبرتقالي ومائلة عندما نضع مؤشرة الفأرة عليها فعلينا أن نكتب CSS بهذا الشكل:

الكود:

   a:hover {
      color: orange;
      font-style: italic;
   }
   




  • شاهد المثال

المثال 1: المؤثرات تظهر عندما يوضع مؤشر الفأرة على الرابط
هذه مشهورة لإنشاء مؤثرات مختلفة عندما يوضع مؤشر الفأرة على الرابط، لذلك سنلقي نظرة على المزيد من الأمثلة المتعلقة بالفئة الزائفة 
الكود:
:hover
[color][font]
.[/font][/color]
مثال 1أ: وضع مسافات بين الحروف
كما تتذكر في الدرس 5 تعلمنا أن المسافة بين الحروف يمكن أن تعديلها باستخدام الخاصية 
الكود:
letter-spacing
[color][font]
، هذا يمكن تطبيقه على الروابط لإنشاء مؤثرات خاصة:[/font][/color]

الكود:

   a:hover {
      letter-spacing: 10px;
      font-weight:bold;
      color:red;
   }
   




  • شاهد المثال

مثال 1ب: الحروف الكبيرة والصغيرة
في الدرس 5 ألقينا نظرة على الخاصية 
الكود:
text-transform
[color][font]
 والتي يمكنها تغيير حالة الأحرف بين الصغيرة والكبيرة، هذا يمكن استخدامه أيضاً كمؤثر على الروابط:[/font][/color]

الكود:

   a:hover {
      text-transform: uppercase;
      font-weight:bold;
      color:blue;
      background-color:yellow;
   }
   




  • شاهد المثال

في المثالين يمكن أن تأخذ فكرة عن الإمكانيات اللامتناهية لدمج بين العديد من الخصائص، يمكنك أن تقوم بإنشاء مؤثرات من ابتكارك، جرب!
مثال 2: إزالة السطر من أسفل الرابط
أحد أكثر الأسئلة تكراراً هو كيف أزيل الخط من أسفل الرابط؟
يجب أن تفكر جيداً قبل أن تزيل الخط من أسفل الرابط، لأنه قد يجعل استخدام موقعك أكثر صعوبة، الناس اعتادوا على أن يرو الخطوط بلون أزرق وبخط أسفلها يميزها عن بقية النصوص الأخرى، ويعلمون أنهم يستطيعون الضغط عليها حتى والدتي تعلم ذلك! إذا أزلت الخط من أسفل الروابط وغيرت ألوانها فأنت تزيد من فرصة عدم فهم الزائر لموقعك وتشتته وبهذا لن يستفيدوا من محتويات موقعك.
على أي حال، إزالة الخط من أسفل الروابط سهل جداً، كما تتذكر في الدرس 5 الخاصية 
الكود:
text-decoration
[color][font]
 يمكنها أن تستخدم لتحديد ما إذا كان هناك خط سيظهر أسفل النص أم لا، لإزالة الخط السفلي قم بوضع القيمة none للخاصية
[/font][/color]
الكود:
text-decoration
[color][font]
.[/font][/color]

الكود:

   a {
      text-decoration:none;
   }
   



يمكنك أيضاً أن تفعل ذلك مع الحالات الأربع للرابط:

الكود:

   a:link {
      color: blue;
      text-decoration:none;
   }

   a:visited {
      color: purple;
      text-decoration:none;
   }

   a:active {
      background-color: yellow;
      text-decoration:none;
   }

   a:hover {
      color:red;
      text-decoration:none;
   }
   




  • شاهد المثال

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

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:58

الدرس 7: المطابقة والتجميع للعناصر class وid
في بعض الأحيان تود أن تفعل خصائص ما على مجموعة أو فريق من العناصر، في هذ الدرس سنلقي نظرة على كيفية استخدام الفئات 
الكود:
class
[color][font]
 والمعرفات 
[/font][/color]
الكود:
id
[color][font]
 لتحديد خصائص معينة لعناصر مختارة.[/font][/color]
كيف تختار لوناً محدداً لعنوان يختلف عن بقية العناوين في موقعك؟ كيف يمكنك أن تجمع بين روابط مختلفة وكل مجموعة تضعها في قسم مختلف وكل قسم له تصميم خاص؟ هذه أمثلة سنجيب عليها في هذا الدرس.
تجميع العناصر باستخدام الفئات "class"
لنقل بأن لدينا قائمتين من الروابط لأصناف مختلفة من الثمار، الخضار والفواكه، القائمتين في ملف HTML ستكونان بهذا الشكل:

الكود:

   <p>الخضار:</p>
   <ul>
   <li><a href="ab.htm">يقدونس</a></li>
   <li><a href="cd.htm">جزر</a></li>
   <li><a href="ef.htm">خيار</a></li>
   </ul>

   <p>فواكه:</p>
   <ul>
   <li><a href="gh.htm">تفاح</a></li>
   <li><a href="ij.htm">أناناس</a></li>
   <li><a href="kl.htm">بطيخ</a></li>
   </ul>
   




  • شاهد المثال

نريد أن تكون قائمة روابط الخضروات باللون الأصفر، وقائمة الفواكه باللون الأحر وبقية الروابط تبقى باللون الأزرق.
لإنجاز هذا نقسم الروابط إلى مجموعتين، يمكن فعل ذلك بتحديد فئة لكل رابط باستخدام الخاصية 
الكود:
class
[color][font]
.[/font][/color]
لنقم بتحديد فئات للمثال أعلاه:

الكود:

   <p>خضار:</p>
   <ul>
   <li><a href="ab.htm" class="veg">بقدونس</a></li>
   <li><a href="cd.htm" class="veg">جزر</a></li>
   <li><a href="ef.htm" class="veg">خيار</a></li>
   </ul>

   <p>فواكه:</p>
   <ul>
   <li><a href="gh.htm" class="fru">تفاح</a></li>
   <li><a href="ij.htm" class="fru">أناناس</a></li>
   <li><a href="kl.htm" class="fru">بطيخ</a></li>
   </ul>
   



يمكن الآن تحديد خصائص محددة للروابط التي تتبع فئة الخضروات أو الفواكه بهذا الشكل:

الكود:

   a {
      color: blue;
   }

   a.veg {
      color: #FFBB00;
   }

   a.fru {
      color: #800000;
   }
   




  • شاهد المثال

كما ترى في المثال، يمكنك أن تحدد خصائص لعناصر معينة تتبع مجموعة محددة باستخدام الفائت .classname في ملف التصميم.
تحديد معرف خاص لعنصر معين من خلال id
بالإضافة إلى تجميع العناصر من خلال الفئات، لعلك ترغب في تحديد معرف لخاصية محددة، هذا يمكن إنجازه من خلال الخاصية 
الكود:
id
[color][font]
.[/font][/color]
المميز في الخاصية 
الكود:
id
[color][font]
 هو عدم إمكانية وجود عنصرين يستخدمانه في نفس الملف، أي لا يمكن لعنصرين أن يستخدما معرفاً 
[/font][/color]
الكود:
id
[color][font]
 واحداً في نفس الصفحة، كل معرف 
[/font][/color]
الكود:
id
[color][font]
 يجب أن يكون مميزاً وفريداً، أما غير ذلك فعليك استخدام الفئات 
[/font][/color]
الكود:
class
[color][font]
، دعنا نلقي نظرة على مثال محتمل لكيفية استخدام المعرف 
[/font][/color]
الكود:
id
[color][font]
:[/font][/color]

الكود:

   <h1>فصل 1</h1>
   ...
   <h2>فصل 1.1</h2>
   ...
   <h2>فصل 1.2</h2>
   ...
   <h1>فصل 2</h1>
   ...
   <h2>فصل 2.1</h2>
   ...
   <h3>فصل 2.1.2</h3>
   ...
   



المثال أعلاه قد يكون عناوين لوثيقة ما تقسم الصفحة إلى أبواب وفصول، من الطبيعي أن نحدد لكل فصل معرفاً خاصاً 
الكود:
id
[color][font]
 كما في المثال الآتي:[/font][/color]

الكود:

   <h1 id="c1">فصل 1</h1>
   ...
   <h2 id="c1-1">فصل 1.1</h2>
   ...
   <h2 id="c1-2">فصل 1.2</h2>
   ...
   <h1 id="c2">فصل 2</h1>
   ...
   <h2 id="c2-1">فصل 2.1</h2>
   ...
   <h3 id="c2-1-2">فصل 2.1.2</h3>
   ...
   



لنقل أن عنوان الفصل 1.2 يجب أن يكون باللون الأحمر، يمكن إنجاز ذلك في CSS بهذا الشكل:

الكود:

   #c1-2 {
      color: red;
   }
   




  • شاهد المثال

كما ترى في المثال أعلاه يمكن تحديد خصائص معينة لعنصر معين باستخدام #id في وثيقة التصميم.
ملخص
في هذا الدرس تعلمنا كيف نستخدم المنتقي من نوع 
الكود:
class
[color][font]
 و
[/font][/color]
الكود:
id
[color][font]
، يمكنك الآن أن تحدد خصائص محددة لعناصر معينة.[/font][/color]
في الدرس اللاحق، سنلقي نظرة أقرب على عنصرين في HTML لهما يستخدمان كثيراً مع CSS: 
الكود:
<span>
[color][font]
 و
[/font][/color]
الكود:
<div>
[color][font]
.[/font][/color]
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:59

الدرس 8: تجميع العناصر باستخدام span وdiv
العنصران و
يستخدمان لجمع العناصر وإنشاء هيكلية للوثائق وهما يستخدمان معاً مع الخاصيتين class وid.
في هذ االدرس، سنلقي نظرة عن قريب على استخدام و
لأنهما العنصران الأكثر أهمية عندما تتعامل مع CSS.

  • التجميع بالعنصر 
    الكود:
    <span>
    [color][font]
  • التجميع بالعنصر 
    [/font][/color]
    الكود:
    <div>


التجميع بالعنصر
العنصر 
الكود:
<span>
[color][font]
 هو ما يمكن أن تسميه العنصر المحايد والذي لا يضيف شيئاً للوثيقة نفسها، لكن مع CSS يمكن استخدامه لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق.[/font][/color]
مثال هذا هو اقتباس من جملة قالها بنجامين فرانكلين:

الكود:

   <p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
   



لنقل أننا نريد أن نؤكد على ما قاله السيد فرانكلين حول فوائد عدم النوم في النهار بأن نلونها بالأحمر، لهذا الغرض يمكن وضع الكلمات بين وسمي 
الكود:
<span>
[color][font]
، كل 
[/font][/color]
الكود:
span
[color][font]
 أضفنا لها فئة 
[/font][/color]
الكود:
class
[color][font]
 والتي تمكننا بعد ذلك من إضافة خصائص لها من خلال CSS:[/font][/color]

الكود:

   <p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
   



أوامر CSS المتعلقة بالمثال:

الكود:

   span.benefit {
      color:red;
   }
   




  • شاهد المثال

بالطبع يمكنك استخدام المعرف id لإضافة الألوان على 
الكود:
<span>
[color][font]
 لكن تذكر أن استخدام المعرف يجب أن يكون لمرة واحدة في الصفحة الواحدة، لذلك في المثال أعلاه عليك أن تستخدم ثلاث معرفات متميزة لكل 
[/font][/color]
الكود:
<span>
[color][font]
 كما تعلمت في الدرس الماضي.[/font][/color]
التجميع بالعنصر

العنصر 
الكود:
<span>
[color][font]
 يستخدم في العناصر كما رأيت في المثال السابق، العنصر 
[/font][/color]
الكود:
<div>
[color][font]
 يستخدم لتجميع العناصر.[/font][/color]
هذا هو الاختلاف الوحيد، تجميع العناصر باستخدام 
الكود:
<div>
[color][font]
 يعمل بنفس الطريقة، لنلقي نظرة على مثال لقائمتين تحويان أسماء الرؤساء الأمريكيين مقسمة حسب الأحزاب التي ينتمون لها:[/font][/color]

الكود:

   <div id="democrats">
   <ul>
   <li>فرانكلين روزفيلت</li>
   <li>هاري ترومن</li>
   <li>جون كينيدي</li>
   <li>ليندون جونسون</li>
   <li>جيمي كارتر</li>
   <li>بيل كلينون</li>
   </ul>
   </div>

   <div id="republicans">
   <ul>
   <li>دوايت أيزنهاور</li>
   <li>ريتشارد نيكسون</li>
   <li>جيرالد فورد</li>
   <li>رونالد ريغان</li>
   <li>جورج بوش</li>
   <li>جورج دبليو بوش</li>
   </ul>
   </div>
   



وفي ملف CSS سنستخدم التجميع كما في المثال أعلاه بنفس الطريقة:

الكود:

   #democrats {
      background:blue;
   }

   #republicans {
      background:red;
   }
   




  • شاهد المثال

في الأمثلة لاسابقة استخدامنا 
الكود:
<div>
[color][font]
 و
[/font][/color]
الكود:
<span>
[color][font]
 بشكل بسيط جداً، بتعديل لون الخلفية والنص، يمكن للعنصرين أن يقدما الكثير من الإمكانيات المتقدمة، على أي حال، لن نتحدث عن هذا حالياً، سنتناول هذا الموضوع لاحقاً في.[/font][/color]
ملخص
في الدرس 7 و8، تعلمت حول المنتقي 
الكود:
id
[color][font]
 و
[/font][/color]
الكود:
class
[color][font]
 والعنصرين 
[/font][/color]
الكود:
span
[color][font]
 و
[/font][/color]
الكود:
div
[color][font]
.[/font][/color]
يجب أن تكون الآن قادراً على تجميع وتحديد كل عناصر ملفات HTML، وهذه خطوة كبيرة في اتجاه إتقان CSS، في الدرس 9  ستتعرف على نموذج الصندوق.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 05:59

الدرس 9: نموذج الصندوق
نموذج الصندوق في CSS يصف الصناديق التي تنشأ من خلال عناصر HTML، نموذج الصندوق يحوي أيضاً خيارات مفصلة حول تعديل الحاشية، الإطار، الحشو والمحتويات لكل عنصر، في المثال التوضيحي أدناه سنعرض أجزاء نموذج الصندوق:
نموذج الصندوق في CSS
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure008.ar

الرسم أعلاه يبدو مربكاً بعض الشيء، لذلك لنقم باستخدام نموذج الصندوق في مثال فعلي باستخدام عنوان وبعض النصوص، في HTML وضعنا نصاً مقتبساً من الميثاق العالمي لحقوق الإنسان:

الكود:

   <h1>Article 1:</h1>

   <p>All human beings are born free
   and equal in dignity and rights.
   They are endowed with reason and conscience
   and should act towards one another in a
   spirit of brotherhood</p>
   



بإضافة بعض الألوان وتحديد بعض المعلومات حول الخطوط يمكن للمثال أن يصبح بهذا الشكل:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure009
المثال يحوي عنصرين 
الكود:
<h1>
[color][font]
 و
[/font][/color]
الكود:
<p>
[color][font]
، نموذج الصندوق للعنصرين سيظهر بهذا الشكل:[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure010
حتى لو بدى المثال معقداً، الرسم يوضح كل عنصر في HTML محاط بصناديق، الصناديق يمكن تعديلها من خلال CSS.
الخصائص التي تتحكم بالصناديق المختلفة هي: 
الكود:
padding
[color][font]
 و
[/font][/color]
الكود:
margin
[color][font]
 و
[/font][/color]
الكود:
border
[color][font]
، في الدرسين اللاحقين سنتعامل مع هذه الخصائص الثلاثة.[/font][/color]

  • الدرس 10: نموذج الصندوق 
    الكود:
    margin
    [color][font]

  •  و
    [/font][/color]
    الكود:
    padding
    [color][font]


  • الدرس 11: نموذج الصندوق 
    [/font][/color]
    الكود:
    border
    [color][font]


  • [/font][/color]

عندما تنتهي من الدرسين ستتمكن من التحكم بنموذج الصندوق وتقوم بتعديل ملفات HTML بشكل أفضل وأكثر دقة مقارنة مع استخدام الأسلوب القديم الذي يعتمد على الجداول في HTML.
ملخص
في هذا الدرس تعلمت نموذج الصندوق، في الدروس القادمة سنلقي نظرة أقرب على كيفية إنشاء والتحكم بنموذج الصندوق.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:00

الدرس 10: الحاشية والحشو
في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية 
الكود:
margin
[color][font]
 و
[/font][/color]
الكود:
padding
[color][font]
.[/font][/color]

  • تعديل خاصية margin لعنصر ما
  • تعديل خاصية padding لعنصر ما

تعديل خاصية margin لعنصر ما
كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية 
الكود:
margin
[color][font]
 تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح.[/font][/color]
في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر 
الكود:
<body>
[color][font]
، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure011
في ملف CSS سنكتب التالي:

الكود:

   body {
      margin-top: 100px;
      margin-right: 40px;
      margin-bottom: 10px;
      margin-left: 70px;
   }
   



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

الكود:

   body {
      margin: 100px 40px 10px 70px;
   }
   




  • شاهد المثال

يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر 
الكود:
<p>
[color][font]
:[/font][/color]

الكود:

   body {
      margin: 100px 40px 10px 70px;
   }

   p {
      margin: 5px 50px 5px 50px;
   }
   




  • شاهد المثال

تعديل خاصية padding لعنصر ما
الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار.
استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية:

الكود:

   h1 {
      background: yellow;
   }

   h2 {
      background: orange;
   }
   




  • شاهد المثال

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

الكود:

   h1 {
      background: yellow;
      padding: 20px 20px 20px 80px;
   }

   h2 {
      background: orange;
      padding-left:120px;
   }
   




  • شاهد المثال

ملخص
أنت في طريقك لأن تتقن استخدام نموذج الصندوق في CSS، في الدرس التالي سنلقي نظرة أقرب على الإطارات وكيف نحدد لها ألواناً مختلفة وكيف نستخدمها لنحدد أشكال العناصر.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:00

نموذج الصندوق - الإطارات 11: Borders
الجداول يمكن استخدامها لأغراض مختلفة، فقد تستخدم للزينة أو للفصل بين شيئين، CSS تعطيك خيارات لا متناهية عندما تستخدم الإطارات في صفحتك.

  • سماكة الإطار "border-width"
  • ألوان الإطارات "border-color"
  • تصميم الإطار "border-style"
  • أمثلة لإطارات
  • جمع كل الخصائص "border"

سماكة الإطار "border-width"
سماكة الإطار تحدد من خلال القيمة 
الكود:
border-width
[color][font]
 والذي يمكن تحديد قيمته من خلال الكلمات thin وmedium وthick، أو من خلال قيمة رقمية تحدد سمكه بالبكسل، الرسم التوضيحي يبين هذه القيم ونتائجها:[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure012
ألوان الإطارات "border-color"
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure013
الخاصية border-color تحدد لون الإطارة، قيمة هذه الخاصية هي قيم الألوان العادية مثل "#123456" و"rgb(123,123,123)" أو أسماء الألوان مثل "yellow".
تصميم الإطارات "border-style"
هناك أنواع مختلفة من الإطارات يمكنك أن تختار منها، في المثال التوضيحي أدناه هناك 8 أنواع من الإطارات كما يعرضها إكسبلورر 5.5، كل الأمثلة المعروضة تستخدم اللون "gold" وقيمة سماكة الإطار محددة بالقيمة "thick" وتذكر أنك تستطيع عرض الإطار بألوان وسماكة مختلفة.
القيم none أو hiddem يمكن أن تستخدم عندما تريد إخفاء الإطار.
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure014
أمثلة لإطارات
الخصائص الثلاثة التي ذكرت أعلاه يمكن وضعها مع بعضها البعض لإنشاء جداول مختلفة، لتوضيح ذلك سنلقي نظرة على وثيقة قمنا بتحديد أنواع مختلفة من الإطارات للعنصر 
الكود:
<h1>
[color][font]
 و
[/font][/color]
الكود:
<h2>
[color][font]
 و
[/font][/color]
الكود:
<ul>
[color][font]
 و
[/font][/color]
الكود:
<p>
[color][font]
، النتيجة قد لا تكون جميلة لكن المثال يوضح الإمكانيات المتعددة:[/font][/color]

الكود:

   h1 {
      border-width: thick;
      border-style: dotted;
      border-color: gold;
   }

   h2 {
      border-width: 20px;
      border-style: outset;
      border-color: red;
   }

   p {
      border-width: 1px;
      border-style: dashed;
      border-color: blue;
   }

   ul {
      border-width: thin;
      border-style: solid;
      border-color: orange;
   }
   




  • شاهد المثال

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

الكود:

   h1 {
      border-top-width: thick;
      border-top-style: solid;
      border-top-color: red;

      border-bottom-width: thick;
      border-bottom-style: solid;
      border-bottom-color: blue;

      border-right-width: thick;
      border-right-style: solid;
      border-right-color: green;

      border-left-width: thick;
      border-left-style: solid;
      border-left-color: orange;
   }
   




  • شاهد المثال

جمع كل الخصائص "border"
كما هو الحال مع خصائص مختلفة، يمكن أن تجمع بين خصائص الجداول المختلفة في خاصية واحدة، ألقي نظرة على هذا المثال:

الكود:

   p {
      border-width: 1px;
      border-style: solid;
      border-color: blue;
   }
   



يمكن اختصارها هكذا:

الكود:

   p {
      border: 1px solid blue;
   }
   



ملخص
في هذا الدرس تعلمت أن الإطارات في CSS لها عدد لا محدود من الخيارات.
في الدرس التالي سنلقي نظرة على نموذج الصندوق وبالتحديد العرض والارتفاع.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:01

الدرس 12: الارتفاع والعرض
حتى الآن لم نهتم كثيراً بأمر أبعاد العناصر التي قمنا بتعديل تصاميمها، في هذا الدرس سنلقي نظرة على كيفية تحديد ارتفاع وعرض العناصر.

  • width
  • height

تحديد العرض "width"
الخاصية 
الكود:
width
[color][font]
 تحدد عرضاً معيناً لعنصر محدد.[/font][/color]
المثال البسيط أدناه يقدم لنا صندوقاً يمكن أن نكتب فيه نصاً:

الكود:

   div.box {
      width: 200px;
      border: 1px solid black;
      background: orange;
   }
   




  • شاهد المثال

تحديد الارتفاع "height"
في المثال أعلاه لاحظنا أن ارتفاع الصندوق تحدده محتوياته، يمكن التأثير على ارتفاع العنصر باستخدام الخاصية 
الكود:
height
[color][font]
، فمثلاً لنجرب أن نجعل ارتفاع الصندوق في المثال يبلغ 500 بكسل:[/font][/color]

الكود:

   div.box {
      height: 500px;
      width: 200px;
      border: 1px solid black;
      background: orange;
   }
   




  • شاهد المثال
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:01

الدرس 13: تعويم العناصر (floats)
العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية 
الكود:
float
[color][font]
، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، أنظر الدرس 9 للمزيد حول نموذج الصندوق، المثال التالي يوضح مبدأ تعويم العناصر:[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure015.ar
إذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure016.ar
كيف يمكن فعل ذلك؟
ملف HTML للمثال أعلاه سيكون بهذا الشكل:

الكود:

   <div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <p>causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>
   



لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية 
الكود:
float
[color][font]
 القيمة left:[/font][/color]

الكود:

   #picture {
      float:left;
      width: 100px;
   }
   




  • شاهد المثال

مثال آخر: الأعمدة
خاصية التعويم يمكن استخدامها للأعمدة في الصفحة، لإنشاء عمود عليك ببساطة أن تضع هيكلية للأعمدة في HTML باستخدام 
الكود:
<div>
[color][font]
 كما يلي:[/font][/color]

الكود:

   <div id="column1">
      <p>Haec disserens qua de re agatur
      et in quo causa consistat non videt...</p>
   </div>

   <div id="column2">
      <p>causas naturales et antecedentes,
      idciro etiam nostrarum voluntatum...</p>
   </div>

   <div id="column3">
      <p>nam nihil esset in nostra
      potestate si res ita se haberet...</p>
   </div>
   



الآن عرض العمود الذي نريد هو 33% ويمكننا ببساطة أن نعوم كل الأعمدة إلى اليسار باستخدام الخاصية 
الكود:
float
[color][font]
:[/font][/color]

الكود:

   #column1 {
      float:left;
      width: 33%;
   }

   #column2 {
      float:left;
      width: 33%;
   }

   #column3 {
      float:left;
      width: 33%;
   }
   




  • شاهد المثال

الكود:
float

 يمكن أن تحمل القيمة left أو right أو none.
الخاصية clear
خاصية 
الكود:
clear
[color][font]
 تستخدم للتحكم بوضعية العناصر اللاحقة لأي عنصر الصفحة تم تعويمه.[/font][/color]
تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه، أنظر إلى المثال أعلاه حيث ترى النص قد التف تلقائياً بجانب صورة بيل غيتس.
الخاصية 
الكود:
clear
[color][font]
 يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية 
[/font][/color]
الكود:
clear
[color][font]
 قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.[/font][/color]

الكود:

   <div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <h1>Bill Gates</h1>

   <p class="floatstop">causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>
   



إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS:

الكود:

   #picture {
      float:left;
      width: 100px;
   }

   .floatstop {
      clear:both;
   }
   




  • شاهد المثال
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:01

الدرس 14: وضعية العناصر
باستخدام وضعية العناصر في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة ويمكن لتعويم العناصر أن يساعدك على فعل ذلك أيضاً (إقرأ الدرس 13)، وضعية العناصر في CSS يعطيك الكثير من الخيارات لإنشاء تصاميم متقدمة وعالية الدقة.
هذا ما سنتعلمه في الدرس:

  • مبادئ وضعية العناصر في CSS
  • وضعية العناصر المطلقة
  • وضعية العناصر النسبية

مبادئ وضعية العناصر في CSS
تصور أن نافذة المتصفح منسقة بهذا النظام:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure017
مبدأ وضعية العناصر في CSS هو أنك تستطيع وضع أي صندوق على أساس إحداثيات ونظام محدد.
لنقل بأننا نريد أن نضع عنواناً في مكان محدد، باستخدام نموذج الصندوق - إقرأ الدرس 9 - يمكن للعنوان أن يظهر بهذا الشكل:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure018
إذا أردنا للعنوان أن يكون موقعه على بعد 100 بكسل من أعلى الصفحة، و200 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة:

الكود:

   h1 {
      position:absolute;
      top: 100px;
      left: 200px;
   }
   



والنتيجة ستكون بهذا الشكل:
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure019
كما ترى وضعية العناصر في CSS أسلوب دقيق جداً لوضع العناصر حيث تشاء، وهو أسهل بكثير من تجربة استخدام الجداول لفعل ذلك أو الصور الشفافة أو أي شيء آخر.
وضعية العناصر المطلقة
أي عنصر وضع بشكل مطلق لا يأخذ مساحة في الصفحة، هذا يعني أنه لا يترك فراغاً بعد أن يوضع بشكل مطلق.
لوضع أي عنصر بشكل مطلق يجب أن تعطي الخاصية 
الكود:
position
[color][font]
 القيمة absolute، ويمكن أيضاً استخدام الخصائص left وright وtop وbottom لتحديد وضعية الصندوق.[/font][/color]
كمثال للوضعية المطلقة قمنا بوضع أربع صناديق في الزواية الأربعة للصفحة:

الكود:

   #box1 {
      position:absolute;
      top: 50px;
      left: 50px;
   }

   #box2 {
      position:absolute;
      top: 50px;
      right: 50px;
   }

   #box3 {
      position:absolute;
      bottom: 50px;
      right: 50px;
   }

   #box4 {
      position:absolute;
      bottom: 50px;
      left: 50px;
   }
   




  • شاهد المثال

وضعية العناصر النسبية
لوضع العناصر بشكل نسبي عليك أن تعطي الخاصية 
الكود:
position
[color][font]
 القيمة relative، الاختلاف بين الوضعية النسبية والمطلقة هي كيفية التعامل مع وضع العنصر نفسه.[/font][/color]
وضعية العنصر النسبية تحسب على أساس وضعه الأصلي في الصفحة، هذا يعني أنك إذا حركت العناصر إلى اليمين أو اليسار أو الأعلى أو الأسفل فإنه سيأخذ مساحة من النص بعد وضعه في مكانه المحدد.
كمثال على الوضعية النسبية يمكننا أن نجرب وضع ثلاث صور بشكل نسبي في الصفحة، لاحظ أن الصور تترك مساحة فارغة في أماكنها الأصلية من الصفحة:

الكود:

   #dog1 {
      position:relative;
      left: 350px;
      bottom: 150px;
   }
   #dog2 {
      position:relative;
      left: 150px;
      bottom: 500px;
   }

   #dog3 {
      position:relative;
      left: 50px;
      bottom: 700px;
   }
   




  • شاهد المثال

ملخص
في الدرسين السابقين تعلمنا تعويم العناصر ووضعها في مكان محدد، طريقتان تعطيانك الكثير من الإمكانيات لبناء صفحات موقعك بدون الحاجة إلى استخدام الأسلوب القديم المتمثل في الصور الشفافة مع الجداول في HTML، استخدا بدلاً من ذلك CSS فهي أكثر دقة وتعطيك الكثير من الخيارات المتقدمة، وهي أسهل في الإدارة وتوفر عليك الكثير من الجهد.
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:02

الدرس 15: طبقة فوق طبقة باستخدام z-index
يمكنها أن تتحكم بالأبعاد الثلاث, العرض والارتفاع والعمق، وقد تحدثنا بما فيه الكفاية عن العرض والارتفاع في الدروس السابقة، في هذ االدرس سنتعلم كيف نضع عناصر مختلفة في طبقات، باختصار هذا يعني ترتيب العناصر لكي نضع بعضها فوق بعض.
لهذا الغرض يمكنك أن تعطي لعنصر ما رقم (
الكود:
z-index
[color][font]
)، وهذا الخاصية تسمح للعناصر ذات الرقم الأعلى بأن تكون فوق العناصر التي ذات الرقم الأدنى.[/font][/color]
لنقل بأننا نريد ترتيب صور للعبة الورق، يجب أن نعطي لكل ورقة رقم 
الكود:
z-index
[color][font]
:[/font][/color]
دورة منتديات تونس الابداع لتعلم لغة الـــcss Figure020
في هذه الحالة الأرقام متتابعة (من 1 إلى 5) لكن يمكن تحقيق نفس النتيجة باستخدام خمسة أرقام مختلفة، المهم هو الترتيب المتصاعد.
المثال أدناه يوضح كيفية ترتيب البطاقات:

الكود:

   #ten_of_diamonds {
      position: absolute;
      left: 100px;
      top: 100px;
      z-index: 1;
   }

   #jack_of_diamonds {
      position: absolute;
      left: 115px;
      top: 115px;
      z-index: 2;
   }

   #queen_of_diamonds {
      position: absolute;
      left: 130px;
      top: 130px;
      z-index: 3;
   }

   #king_of_diamonds {
      position: absolute;
      left: 145px;
      top: 145px;
      z-index: 4;
   }

   #ace_of_diamonds {
      position: absolute;
      left: 160px;
      top: 160px;
      z-index: 5;
   }
   




  • شاهد المثال

ترتيب العناصر فوق بعضها البعض سهل والإمكانيات كثيرة، يمكنك أن تضع الصور فوق النص أو النص فوق الصور أو تضع نصاً فوق نص ... إلخ.
ملخص
الطبقات يمكن استخدامها في الكثير من الحالات، فمثلاً جرب استخدام 
الكود:
z-index
[color][font]
 لإنشاء مؤثرات على العناوين بدلاً من استخدام الصور، فهذا يجعل الموقع أكثر سرعة ويعطيه فرصة للظهور في محركات البحث.[/font][/color]
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

دورة منتديات تونس الابداع لتعلم لغة الـــcss Empty رد: دورة منتديات تونس الابداع لتعلم لغة الـــcss

مُساهمة من طرف Ch.Marwen الخميس 13 يونيو 2013, 06:02

الدرس 16: المعايير القياسية
منظمة W3C أو World Wide Web Consortium, هي منظمة مستقلة تضع المعايير التقنية لشبكة الويب (مثال: HTML، CSS، XML وغيرها)، مايكروسوفت ومنظمة موزيلا وغيرها من الشركات كلها تشارك في منظمة W3C واتفقت على أن مستقبل شبكة الويب يكمن في المعايير القياسية.
إذا سبق لك أن جربت تصميم الموقع فأنت في الغالب تعرف أن هناك احتمال كبير بظهور الموقع بشكل مختلف في متصفحات مختلفة، وإنشاء موقع يظهر بشكل صحيح في كل المتصفحات الحديثة اليوم قد يستهلك الكثير من الوقت ويثير أعصابك.
الفكرة من وجود المعايير القياسية المتفق عليها هو وجود تقنيات ويب موحدة، هذا يعني أن مطور الموقع إذا قام بإنشاء موقع فهو يعلم أنه سيظهر بالشكل المطلوب في كل المتصفحات وأنظمة التشغيل، لذلك نفضل أن تقوم باستخدام المعايير القياسية وتقوم بالتأكد من أن ملفات CSS التي قمت بكتابتها تتوافق مع هذه المعايير..
مدقق CSS
لتبسط عملية تعلم معايير CSS قامت منظمة W3C بتطوير أداة تدقيق تقوم بقراءة ملفات CSS وتعطيك النتائج مع الأخطاء والتحذيرات إن كان ملف CSS يحوي أي خطأ.
ولكي نبسط عليك الأمر يمكنك أن تتأكد بنفسك من صحة ملفات CSS مباشرة من هذه الصفحة، ببساطة ضع عموان ملف CSS الخاص بموقعك واضغط على زر "تدقيق" وستنتقل إلى موقع W3C لترى النتيجة وتعرف الأخطاء إن وجدت.


إذا لم يجد المدقق أية أخطاء ستظهر لك هذه الصورة والتي يمكنك أن تضعها في موقعك لتبين بأنك تستخدم المعايير القياسية:
دورة منتديات تونس الابداع لتعلم لغة الـــcss W3C_css
المدقق يمكن إيجاده على هذا الرابط: http://jigsaw.w3.org/css-validator/
Ch.Marwen
Ch.Marwen
الادارة العليا
الادارة العليا

المتصفح : Google Chrome
الإقامة : Republic of Tunisia
الجنس : ذكر
عدد المساهمات : 25405
نقاط : 103330942
تقييم : 7859
تاريخ الميلاد : 14/01/1990
تاريخ التسجيل : 11/02/2012
العمر : 34

http://www.arabwoorld.com
-----

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

- مواضيع مماثلة

العالم العربي :: الكمبيوتر والجوالات وتطويرالمواقع والمنتديات :: الكمبيوتر والأنترنت :: التطوير ولغات البرمجة :: تطوير منتديات vb :: لغات البرمجة

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

  • ©phpBB | انشئ منتدى | منتدى مجاني للدعم و المساعدة | التبليغ عن محتوى مخالف | ملفات تعريف الارتباط التابعة لجهات خارجية | آخر المواضيع

    • images

    روابط مفيدة



    ---------------------