التونسية للمحمــول Tn-GsMدخول


أساسيات اللغة CSS

power_settings_newقم بتسجيل الدخول للرد

descriptionشرح أساسيات اللغة CSS2015-12-08, 18:34

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

سنتحدث فى هذه المجموعة عن لغة CSS و هى من أهم الأجزاء فى إنشاء المواقع مع لغة HTML / XML 

أولا: عليك أن تتعرف على أساسيات لغة HTML / XML  من الدروس التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




ثانيا: نبدأ شرح درس اللغة فى مجموعة من الدروس المتتالية


ما هى لغة CSS ؟؟

هى تعنى  Cascading Style Sheets النمط الورقى المتسلسل و تعنى كيفية عرض عناصر لغة HTML و تمت إضافتها لغة HTML لحل العديد من المشكلات الخاصة بطريقة العرض

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



تنسيق لغة CSS :

تتكون اللغة من جزئيين أساسين هما  العنصر المتخار selector و التتويج declaration
selector : و هى العنصر المتخار الذى سنضع له معلومات العرض الخاصة به
declaration : وهى معلومات العرض للعنصر و تتكون من جزئيين property و هى المتغيير (إنظر الامثلة) و تتكون من value و هى القيمة للمتغيير (إنظر الامثلة) .. إذا كان لدينا مقطع كالتالى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


مدونة عالم نت



ddd

  فيكون ملف CSS كالتالى و يمكن أن يكتب بطريقتين
bb
p {color: red; text-align: left;}
أو
bb
p {
    color: red;
    text align: left;
}
bb
لاحظ color هى لون النص و text-align هى موضع النص
فتكون الناتج كالتالى
مدونة عالم نت

من مميزات اللغة أنه يمكنك أن تضع تعليقات خلالها لتساعدك عند محاولة تعديلها حتى لا تنسى أو لمساعدة غيرك أو للشرح و التوضيح و هى لا تظهر فى عملية العرض خلال الموقع و توضع هذه التعليقات بين العلامتين  /*    */   ... لاحظ
bb
/*هذا نص*/
p {
    color: red;  /*هذا اللون*/
    text align: left;  /*هذا موضع النص*/
}
bb
و الناتج تماما كما هو لا يتغير فيكون
مدونة عالم نت

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:26

more_horiz

الكود:

 بسم الله الرحمن الرحيم
عند كتابة ملفات CSS هناك ثلاثة طرق للكتابة تستخدم لكتابة هذه الملفات هى كالتالى :

1. التركيب الخارجى External style sheet
2. التركيب الداخلى Internal style sheet
3. التركيب المتداخل Inline style

1. التركيب الخارجى External style sheet

 التركيب الخارجى هو إنشاء ملف CSS واحد يتم رفعه على الإنترنت و يتم إنشائه بإستخدام أى من برامج محررات النصوص و يتم حفظ الإمتداد به لصيغة  CSS ... فمثلا يكون الملف stylesheet.css . وهذا الملف يستخدم لتطبيقه على الموقع ككل فند إنشاء صفحة جديدة ستأخد نفس التركيب المذكور فى الملف ..
و يتم إدراج هذا الملف فى HTML الخاص بالموقع بين العنصر  <head>  و بين <head/>  كالتالى :

<head>
< link rel='stylesheet' type='ext/css' href='mystyle.css'>
< /head>

و يتم إستبدال mystyle.css برابط الملف الذى تم رفعه على الإنترنت
لاحظ أن الملف يتم إنشائه بصورة طبيعية مثل الموضوعين السابقين

الدرس الأول CSS : أساسيات اللغة
الدرس الثانى CSS : الهوية و التصنيف


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


2. التركيب الداخلى Internal style sheet

هذا التركيب هو غالبا الأكثر إستخداما فى قوالب مدونات بلوجر و فى بعض المواقع الأخرى و يت إدراجه مباشرة فى HTML الخاص بالموقع بين العنصر <head>  و بين <head/> ...  و لكن يتم إدارجهم مع عنصر خاص هو <style>

إذا كان لدين العنصر التالى
<p id='main'>مدونة عالم نت</p>

يكون CSS الخاص به كالتالى

<head>
< style>
#main {
     color: red;
     text-align: left;
     background: yellow;
}
< /style>
< /head>

 يكون الشكل النهائى :
مدونة عالم نت


3. التركيب المتداخل Inline style

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

<p style="color:red;text-align:left;background:yellow;">مدونة عالم نت</p>

فتكون كالتالى
مدونة عالم نت


لكن السؤال هل يمكن و ضع ملف CSS للموقع ككل مع وضع بعض الاستثناءات داخل الصفحات ؟
نعم يمكن ذلك ... فى لغة CSS  تكون الأولوية للتركيب الداخلى Internal style و المتداخل Inline style
لاحظ التالى :
إذا كان العنصر كالتالى
<p id='main'>مدونة عالم نت</p>
و كان التركيب الخارجى External style sheet كالتالى
 #main {
      color: red;
      text-align: right;
      background: black;
}
و كان التركيب الداخلى Internal style sheet كالتالى
#main {
      text-align: left;
      backgroound: yellow;
}
 فيكون الناتج كالتالى
مدونة عالم نت

لاحظ : تم إستخدام  color: red;  من التركيب الخارجى
و تم إستخدام  backgroound: yellow;  و text-align: left;   من التركيب الخارجى على الرغم من وجود مثل هذه الخواص فى التركيب الخارجى الإ أن الأولوية تكون دائما للتركيب الداخلى

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:29

more_horiz
4- CSS : تصميم خلفية الموقع بأربع متغيرات


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

الكود:


سنتحدث في هذا الموقع عن عدد من الأساسيات الهامة فى عملية تصميم و تركيب خلفية الموقع .. و ليس المقصود بالخلفية هى صورة الخلفية كما الحال في سطح المكتب للكمبيوتر و تغير صورة بصورة أخرى و لكن سنتحدث عن عملية التركيب الكامل لخلفية الموقع من خلال عدد من العناصر المختارة selectors و التتويجات  declarations و المتغيرات properties

1.  لون الخلفية  background-color
2. صورة الخلفية  background-image
3. تكرار الخلفية  background-repeat
4. موضع الخلفية  background-position

 
هذا هو المثال الذى سنجرب عليه المتغيرات
<p id='main'>مدونة عالم نت</p>
<p id='main2'>عالم نت</p>
أولا: لون الخلفية background-color
 
يستخدم هذا المتغير background-color ليحدد لون خلفية الموقع و يستخدم معه العنصر المختار حسب الجزء الذى تريد أن يظهر به اللون ...
#main {background-color: orange;}
#main2 {background-color: yellow}
فتكون كالتالى
مدونة عالم نت
عالم نت
و إذا أردت أن تجعل لون الخلفية للموقع ككل تستخدم العنصر body  كالتالى
body {background-color: red;}
 
 
أما عن الالوان هناك ثلاثة طرق لكتابتها و هى

    إسم اللون مثل red , green , yellow .....
    كود اللون مثل  FFFFFF#  و هى للون الأبيض .. أكواد الألوان كاملة
    القيمة RGB للون   مثل    (255,255,255)rgb  و هى للون الابيض .. أكواد الألوان كاملة

 
 
 
ثانيا: صورة الخلفية background-image
 
و يستخدم هذا المتغير background-image  ليحدد صورة معينى للخلفية يمكنك تحيد حجمها مسبقا و وضعها خلفيه للموقع أو جعل الصورة متكررة حتى تغطى سطح الموقع بالكامل
 
و تستخدم كالتالى
#main {background-image: url('image.png');}
و تستبدل  image.png  برابط الصورة
 
#main {background-image: url(http://hitskin.com/themes/18/90/15/i_background.png);}
 
فتكون كالتالى
 
مدونة عالم نت
عالم نت
 
 إذا أردنا أن نجعل الصورة خلفية للموقع ككل و ليس جزءا محددا نستخدم
body {background-image: url('image.png');}
 
 
 
ثالثا: تكرار الخلفية background-repeat
 
يستخدم هذا المتغير لتحديد تكرار الخلفية سواء رئسيا أو أفقيا حسب الحاجة حتى تملئ الصورة الموقع بالكامل
إن تكرار الخلفية هو أمر طبيعى يحدث تلقائيا حتى دون وضع هذا العنصر و هذا التكرار يكون أفقيا و رأسيا في نفس الوقت الإ أن بعض الخلفيات إذا تكررت بصورة رئسية أعطت شكلا سيئا و أيضا هناك صور إذا تكررت بشكل أفقى تطعى شكلا غير جيدا .. لذلك نستخدم هذا المتغير لضبط التكرار
 
لذا نستخدم  repeat-x  للتكرار الأفقى  ,  و نستخدم  repeat-y  للتكرار الرأسى
و تكون كالتالى و توضع ضمن العنصر المختار كما ذكرنا سابقا
{background-repeat: repeat-x;}
{background-repeat: repeat-y;}
 
 


رابعا: موضع الخلفية background-position

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

{background-position: right top;}


و يتم تغير right top حسب الموضع الذى تريده

و هى غالبا  تستخدم معها القيمة background-repeat  في صورة no-repeat  لمنع تكرار الصورة .(حيث أن عملية التكرار تلقائية) لذلك تستخدم لمنع التكرار
{background-repeat: no-repeat;}



 هذه القيم يمكنك إستخدامها جميعا و منفردة أو تستخدم قيمة واحده فقط حسب رغبتك
جميع هذه القيم يمكن إختصارها بصورة بسيطة و سهلة كالتالى
{background:#ffffff url('image.png') no-repeat right top;}
و يوضع قبله العنصر المختار
 

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:31

more_horiz
5- CSS : تنسيق النص بتسعة قيم
 بسم الله الرحمن الرحيم
 

الكود:


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

    لون النص color
    موضع النص text-align
    تزيين النص text-decoration
    تحويل النص text-transform
    مسافة بداية النص text-indent
    إتجاه النص direction
    المسافة بين الحروف letter-spacing
    المسافة بين السطور line-height
    المسافة بين الكلمات word-spacing

هذا هو المثال الذى سنجرب عليه
<p id='main'>مدونة عالم نت</p>
 
 
أولا: لون النص color
 
هناك 3 طرق لإضافة لون الخط هى
 

    إسم اللون مثل red , green , yellow .....
    كود اللون مثل  FFFFFF#  و هى للون الأبيض .. أكواد الألوان كاملة
    القيمة RGB للون   مثل    (255,255,255)rgb  و هى للون الابيض .. أكواد الألوان كاملة


#main {
color: #FFFFFF;
background-colo: black;
}
 فتكون كالتالى
مدونة عالم نت

لاحظ لقد إستخدمت لون الخلفية من الدرس السابق (تصميم الخلفية) فقط للتذكير .. بالإضافة للون الخط
 
 
ثانيا: موضع النص text-align
 
هذا المتغير يستخدم لضبط و ضع النص سواء أكان في اليمين right أو اليسار left أو الوسط center أو الملائم justify  و هذه القيمة تستخدم لجعل الكتابة متمددة حتى تملئ السطر بالكامل ..
#main {text-align: left;}
#main {text-align: right;}
#main {text-align: center;}
#main {text-align: justify;}
 
 
ثالثا: تزيين النص text-decoration
 
تستخدم لتزيين النص عن طريق إستخدام الخط المستقيم سواء أكان خط فوق النص overline أو خط تحت النص underline أو خط على النص line-through   .. لاحظ التالى
إذا كان CSS  كالتالى
#main {text-decoration: underline;}
#main {text-decoration: line-through;}
#main {text-decoration: overline;}
 
فيكون الناتج كالتالى بالترتيب
مدونة عالم نت

مدونة عالم نت

مدونة عالم نت
 
رابعا: تحويل النص text-transform
 
هذا المتغير يستخدم في تحديد شكل الخط بين .. هل الحروف كلها كبيرة uppercase أم صغيرة lowercase أم بدايتها كبير و أخرها صغير capitalize ؟؟ ...  و هى تستخدم فقط فى غير اللغة العربية كالتالى
 
#main {text-transform: uppercase;}
#main {text-transform: lowercase;}
#main {text-transform: capitalize;}
 
 
 
خامسا: فاصل بداية السطر text-indent
 
و تستخدم لوضع مسافة في بداية النص و هى كالتالى
#main {text-indent: 40px;}
و يمكنك تغيير 40 إلى أى رقم أخر حسب حجم المسافة التى تريدها
 
 
 
سادسا: إتجاه النص direction
 
وهى إتجاه النص من اليسار إلى اليمين ltr  كما في اللغة الإنجليزية أو من اليمين إلى اليسار rtl كما في اللغة العربية
 
#main {direction: ltr;}
#main {direction: rtl;}


سابعا: المسافة بين الحروف letter-spacing

و تستخدم القيم بيكسل px و يمكن إستخدام القيم بالسالب كالتالى
#main {letter-spacing: -2px}
و يكون الناتج
مدونة عالم نت
لقد قمت بتقليل المسافة إلى 2- فقلت المسافة و يمكن زيادتها حسب الرغبة



ثامنا: المسافة بين السطور line-height

و تستخدم القيم بيكسل px أو رقم 1 أو 2 أو 3 أو ....   أو نسبة مؤية 100% أو 150% أو ......
#main {line-height: 70%}



تاسعا: المسافة بين الكلمات word-spacing

و تستخدم القيمة بيكسل px كالتالى
#main {word-spacing: 10px;}
فيكون الناتج
مدونة عالم نت
 
 
** لا حظ أنه يمكنك إستخدام جميع هذه القيم أو إحداها أو بعضها .. لا يوجد أى مشكلة
 
 
 

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:32

more_horiz
6- CSS : تنسيق الخط بأربعة متغيرات

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

الكود:


في هذا الموضوع سنتحدث عن تنسيق الخط داخل لغة CSS بعدة متغيرات بسيطة جدا
 هناك طرق أخرى لتنسيق الخط بإستخدام html في الدرس السادس

    نوع الخط font-family
    نمط الخط font-style
    حجم الخط font-size
    سمك الخط font-weight

 
أولا: نوع الخط font-family
 
هذا المتغير يستخدم لتحديد نو ع الخط في مووقعك أو قالب مدونتك
يتم إضافة أكثر من نوع من الخطوط في هذا المتغير .. فيكون الخط الافتراضى هو أول نوع .. لكن إذا كان هناك متصفح لا يدعم هذا النوع فإنه مباشرة ينتقل إلى النوع التالى ... إذا كان يدعمه
للتعرف على أنواع الخطوط .. كل ما عليك فعله هو فتح برنامج Word و فيه ستجد أسماء و أنواع الخطوط المختلفة التى تريدها
عند إضافة نوع من أنواع الخطوط و كان إسم النوع أكثر من كلمة يوضع إسم النوع بين علامتى تنصيص "   "
و يفصل بين كل نوع و اخر بفاصلة  ,
المثال التالى لنوع الخط و يوضع قبله العنصر المختار selector أو body إذا كان للموقع أو المدونة ككل

 body {font-family: "Times New Roman", serif;}

 
 
ثانيا: نمط الخط font-style
 
 نمط الخط هو بين نمطيم
الخط العادى normal : و هو الخط العادى حتى بدون كتابة هذا المتغير يظهر الخط بالشكل العادى
الخط المائل italic : و هو الخط بالصورة المائلة كالتالى >>  مدونة عالم نت
و أكواد CSS لها هى بالترتيب و يوضع قبلها العنصر المختار selector أو body إذا كان للموقع أو المدونة ككل

body {font-style: normal;}
body {font-style : italic;}
 
 
 
ثالثا: حجم الخط font-size
 
تستخدم لتحديد حجم الخط و يستخدم عدة طرق للقياس أفضلها البيكسل px
و يجب التمييز بين العنوانين التى تأخذ أحجام <h1>.....<h6> .. و التى ذكرت في أساسيات لغة HTML و الجمل العادية غير العناوين
الكود يكون كالتالى و يوضع قبله العنصر المختار selector
 
{font-size:10px;}

 
 
 رابعا: سمك الخط font-weight

تستخدم لتحديد سماكة الخط و هى أيظا نمطين
السمك العادى normal : و هو الخط العادى حتى بدون كتابة هذا المتغير يظهر الخط بالسمك الطبيعى
السمك الأثقل bold : و هو السمك الاثقل من الطبيعى و يكون مثل .. مدونة عالم نت
و أكواد CSS لها هى بالترتيب كالتالى و يوضع قبلها العنصر المختار selector

{font-weight: normal;}
{font-weight: bold;}
 
 
 

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:34

more_horiz
3- CSS : طرق الإدخال الثلاثة

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

الكود:


عند كتابة ملفات CSS هناك ثلاثة طرق للكتابة تستخدم لكتابة هذه الملفات هى كالتالى :

1. التركيب الخارجى External style sheet
2. التركيب الداخلى Internal style sheet
3. التركيب المتداخل Inline style

1. التركيب الخارجى External style sheet

 التركيب الخارجى هو إنشاء ملف CSS واحد يتم رفعه على الإنترنت و يتم إنشائه بإستخدام أى من برامج محررات النصوص و يتم حفظ الإمتداد به لصيغة  CSS ... فمثلا يكون الملف stylesheet.css . وهذا الملف يستخدم لتطبيقه على الموقع ككل فند إنشاء صفحة جديدة ستأخد نفس التركيب المذكور فى الملف ..
و يتم إدراج هذا الملف فى HTML الخاص بالموقع بين العنصر  <head>  و بين <head/>  كالتالى :

<head>
< link rel='stylesheet' type='ext/css' href='mystyle.css'>
< /head>

و يتم إستبدال mystyle.css برابط الملف الذى تم رفعه على الإنترنت
لاحظ أن الملف يتم إنشائه بصورة طبيعية مثل الموضوعين السابقين

الدرس الأول CSS : أساسيات اللغة
الدرس الثانى CSS : الهوية و التصنيف


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


2. التركيب الداخلى Internal style sheet

هذا التركيب هو غالبا الأكثر إستخداما فى قوالب مدونات بلوجر و فى بعض المواقع الأخرى و يت إدراجه مباشرة فى HTML الخاص بالموقع بين العنصر <head>  و بين <head/> ...  و لكن يتم إدارجهم مع عنصر خاص هو <style>

إذا كان لدين العنصر التالى
<p id='main'>مدونة عالم نت</p>

يكون CSS الخاص به كالتالى

<head>
< style>
#main {
     color: red;
     text-align: left;
     background: yellow;
}
< /style>
< /head>

 يكون الشكل النهائى :
مدونة عالم نت


3. التركيب المتداخل Inline style

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

<p style="color:red;text-align:left;background:yellow;">مدونة عالم نت</p>

فتكون كالتالى
مدونة عالم نت


لكن السؤال هل يمكن و ضع ملف CSS للموقع ككل مع وضع بعض الاستثناءات داخل الصفحات ؟
نعم يمكن ذلك ... فى لغة CSS  تكون الأولوية للتركيب الداخلى Internal style و المتداخل Inline style
لاحظ التالى :
إذا كان العنصر كالتالى
<p id='main'>مدونة عالم نت</p>
و كان التركيب الخارجى External style sheet كالتالى
 #main {
      color: red;
      text-align: right;
      background: black;
}
و كان التركيب الداخلى Internal style sheet كالتالى
#main {
      text-align: left;
      backgroound: yellow;
}
 فيكون الناتج كالتالى
مدونة عالم نت

لاحظ : تم إستخدام  color: red;  من التركيب الخارجى
و تم إستخدام  backgroound: yellow;  و text-align: left;   من التركيب الخارجى على الرغم من وجود مثل هذه الخواص فى التركيب الخارجى الإ أن الأولوية تكون دائما للتركيب الداخلى

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:37

more_horiz
2- CSS : الهوية و التصنيف


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

الكود:


سنتحدث عن مجموعة من المحتويات الهامة فى تنسيق و تنظيم اللغة أثناء إستخدامها

الهوية id ما هى ؟؟

هى عبارة عن إسم يتم إختياره للعناصر و يكون لكل عنصر اسم هوية id خاص به لا يمكن أن يتكرر .. و اسم الهوية هو Selector

واسم الهوية يتم إدراجه فى لغة HTML / XML كصفة أو سمة .. لاحظ المثال التالى

لدينا عنصر HTML كالتالى
<p id="main">مدونة عالم نت</p>

لاحظت أنه تم وضع اسم الهوية id فى صورة سمة ..( للتعرف على السمات راجع الدرس الرابع HTML : السمات أو Attributes )

لعمل ملف CSS الخاص به نسنخدم اسم الهوية id كالتالى و يوضع قبله علامة #
#main {
      color: red ;
      text-align: left;
      background: yellow;
}
 فيكون الناتج كالتالى
مدونة عالم نت



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

ماهو التصنيف Class ؟؟


 هى تماما تشبه اسم الهوية id لكنها تكون لمجموعة من العناصر و تسمى Class و توضع قبله نقطة  .
لاحظ المثال التالى

<p class="main">مدونة عالم نت</p>
<p class="main">عالم نت</p>
يكون ملف CSS الخاص به كالتالى
.main {
    color: red;
    text-align: left;
}
تكون كالتالى
مدونة عالم نت
عالم نت


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


هذا مثال يجمع اسم الهوية id و المجموعة class معا

 <p class="main"  id="main2>مدونة عالم نت</p>
 <p class="main"  id="main3">عالم نت</p>
 ملف CSS الخاص به :
.main {color: red; text-align: left;}
#main2 {background: yellow;}
#main3 {background: green;}

الناتج يكون :>>
مدونة عالم نت
 عالم نت

descriptionشرحرد: أساسيات اللغة CSS2015-12-08, 19:39

more_horiz
7- CSS : تنسيق الروابط
 بسم الله الرحمن الرحيم
 

الكود:


هذا الموضوع خاص بتنسيق الروابط و إضفاء مميزات خاصة لها
 
يمكن تنسيق الروابط أيضا باستخدام التنسيقات المذكورة في هذه الدروس السابقة
 
4- CSS : تصميم الموقع
5- CSS : تنسيق النص
6- CSS : تنسيق الخط
 
 
بالإضافة إلى ذلك هناك أربعة متغيرات إضافية خاصة بالوابط .. من أجل تنسيق أفضل
 

    الرابط  a:link
    لون الرابط الذى تمت زيارته a:visited
    لون الرابط عند وضع الماوس عليه a:hover
    لون الرابط النشط a:active

 
و يجب أن تذكر المتغيرات السابقة الاربعة كما هى بالترتيب في ملف CSS كالمثال التالى
 
لدينا مثلا رابط مثل هذا
<a href="http://wd-n.blogspot.com" />
و سنضع CSS الخاص به كالتالى
a:link {color:#FFFFFF;}    /* لون الرابط*/
a:visited {color:#FFFFFF;} /* لون الرابط الذى تمت زيارته*/
a:hover {color:#FFFFFF;}   /* لون الرابط عند و ضع الماوس فوقه*/
a:active {color:#FFFFFF;}  /* لون الرابط النشط*/


 

و نغير أكواد الالوان #FFFFFF  إلى الالوان التى نريدها بإستخدام أكواد الالوان
و هكذا تم التنسيق بنجاح
 
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
power_settings_newقم بتسجيل الدخول للرد