25 أبريل 2011

الدرس الثالث : شرح أساسيات CSS الجزء الثانى والاخير

شارك

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

فى الدرس السابق من دورة تصميم قوالب بلوجر المجانية قمنا بشرح الجزء الأول من أساسيات CSS والذى تناولنا فيه ( الخطوط وما يلزمها “ Font “ ) وفى هذا الدرس بإذن الله سأقوم بتناول باقى الأساسيات الهامة.

CSS2

أساسيات CSS الهامة:

 

1- الخطوط وما يلزمها “ Font

تم شرحه فى الدرس السابق ( يمكنك مراجعته من هنا ).

 

2- النصوص والفقرات “ Text

أى كل ما يمكن استخدامه لتنسيق الكتابة والنصوص لكى تظهر بشكل جيد

H1 { text-indent: 20px; text-align: right; text-decoration: underline; letter-spacing: 6px; text-transform: capitalize; }

أ- text-indent  وهى عبارة عن المسافة البادئة التى تسخدم فى بداية الفقرة لتضيف شكل جمالى.

ب- text-align  وهى تعنى محاذاة النص ويمكنك التبديل بين (محاذاة يمين Right - محاذاة يسار  Left – محاذاة فى الوسط Center – محاذاة من اليمين واليسار justify ).

جـ- text-decoration وهى تسخدم فى زخرفة النص واضافة تأثيرات عليه ويمكن التبديل بين ( وضع خط تحت النص underline – وضع خط فوق النص overline – وضع خط فى منتصف النص line-through ).

د- letter-spacing وهى تعنى المسافة بين الحروف فى الكلمة وتستخدم فى العناوين او الفقرات .

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

- ( جعل اول حرف كبير  capitalize  - مثال :  samco  سوف تصبح Samco ).

- ( جعل النص كله صغير  lowercase - مثال :  SAMCO سوف تصبح samco  ).

- ( جعل النص كله كبير  uppercase - مثال :  samco  سوف تصبح SAMCO ).

- ( عدم اظهار اى تأثيرات     none    ).

 

3- الروابط “ Links

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

a:link {
color:#000000;
}
a:visited {
color:#666666;
}
a:hover {
color:#222222;
}
a:active {
color:#050505;
}

 

أ- a:link  وهى تخص الرابط الموجود بمدونتك

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

ب- a:visited وهى تخص الروابط التى قام الزائر بزيارتها

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

جـ- a:hover وهذه الخاصية مرتبطة بمرور الماوس على الرابط اى كان تم زيارته ام

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

د- a:active وهى تخص الرابط الذى تتواجد عليه فى حينها

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

تنويه هام جدا :

- يمكنك استخدام الدروس السابقة واللاحقة ان شاء الله فى هذه النقطة أى يمكنك تغير الالوان والخطوط والمحاذاة والخلفية وكل ما تريد أن يكون عليه المظهر فى كل حال.

- كما يمكنك ايضا استخدام الخصائص السابقة مع كل مكون من مكونات قوالب بلوجر على حدى ( بشكل مبسط يعنى يمكن استخدام هذه الخصائص لروابط عناوين المواضيع فقط واستخدام خصائص اخرى لروابط القوام الجانبية وذلك سيتم معرفته ان شاء الله فى الدروس القادمة مع دراسة كل مكون ).

 

4- خاصية “ Padding “ وخاصية “ Margin

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

.sidebar {
margin-top: 50px;
margin-right: 40px;
margin-bottom: 30px;
margin-left: 20px;
}

.sidebar {
padding-top: 50px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 20px;
}

 

الشرح على الخاصيتين

تعنى Top اى المحاذاة من الاعلى  و Right من اليمين و Left من اليسار و Bottom من الاسفل

ويمكن تجميع الكل بشكل افضل كالتالى ويمكنك التغير بها بسهولة حسب الوصف

.sidebar {
margin: 50px 40px 30px 20px;
margin: Top Right Left Bottom;
}
.sidebar {
padding: 50px 40px 30px 20px;
padding: Top Right Left Bottom;
}

5- خاصية “ Float “ وخاصية “ Width “ وخاصية “ Hieght

كل منهم يعبر عن شئ خاص به

#header {
float:right;
width: 100px;
width: 90%;
hright:50px
}

 

أ-  float وهى عبارة عن المحاذاة لاى عنصر تريد وضعه فى القالب يمينا او يسارا ( محاذاة يمين Right – محاذاة يسار Left – من غير محاذاة None ).

ب- Width وهى تعنى العرض الخاص بالعنصر سواء كانت قيمة او نسبة

جـ height وهى تعبر عن الارتفاع الخاص بالعنصر المطلوب .

مثال : هنقوم بعمل هيدر جميل ( العرض : 450 بيكسل و الارتفاع : 90 بيكسل والمحاذاة مرة يمين )

header
 

6- خاصية “ Clear

هذه الخاصية هامة جدا جدا جدا

#footer {
Clear:both;
}

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

ويتم التبديل بين ( اليمين Right  -- اليسار Left – كلاهما Both )

شرح مبسط :

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

هذه هى الخصاصية والتى سوف نستخدم على الاكثر Both حتى يتم التخلى عن الكل سواء يمينا او يسارا حيث يظهر القالب بشكل متتالى ( الهيدر ثم الجزء الوسطى ).

 

7- الخلفية “ Background

الخلفية اى كانت سواء خلفية عنصر معين او القالب بأكلمه إما ان تكون ( لون او صورة أو كلاهما معا )

Body { background-color: #FFFFFF; background-image: url(" رابط الصورة المراد وضعها "); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }

 

أ- background-color هنا تكون الخلفية عبارة عن لون يمكنك تغيره كما ترغب.

ب- background-image هنا تكون الخلفية عبارة عن صورة او نقش يمكن تغيره من خلال وضع الصورة التى ترغب .

جـ- background-repeat تستخدم فى حالة انك وضعت صورة صغيرة او نقش صغير وتريد تكراره مثلا ليملئ الخلفية باكملها او انك لا تريد ان يتم التكرار من اساسه ويمكنك التبديل بين :

repeat-x وتعنى ان الصورة سوف تتكرر بشكل افقى فقط

- repeat-y وتعنى ان الصورة سوف تتكرر بشكل رأسى فقط

- repeat وتعنى ان الصورة سوف يتم تكرارها بشكل افقى ورأسى فى نفس الوقت.

- no-repeat   وتعنى عدم تكرار الصورة افقيا او رأسياً.

د- background-attachment وهى تعنى ان تكون الخلفية ثابتة او متحركة وتكون هذه الخاصية واضحة بشكل كبير فى الصور حيث ان اردت صورة ثابتة ستكون الخلفية ثابتة وباقى المكونات متحركة عن استخدام شريط التمرير مثلا ويمكنك التبديل بين

- scroll وتعنى ان الصورة سوف تتحرك عن تحرك الصفحة ومكونات القالب .

- fixed وتعنى ان الصورة ستكون ثابتة وبافى المكونات سوف تتحرك وتظل الخلفية موجودة وظاهرة.

هـ- background-position وهى تعنى مكان وضع الصورة ومحاذاتها يمينا او يسار او اعلى او اسفل لتركيبها بشكل دقيق. ويتم ترتيبها  بين Right و Left وكذلك يتم الترتيب بين Top و Bottom أو يمكن استخدام المقاسات بالبيكسل مثلا او النسبة

ويتم تلخيص السابق كالتالى ويؤدى نفس الخصائص المفردة

Body {
background: #FFFFFF url("رابط الصورة المراد وضعها ") no-repeat fixed right bottom;
}

تنويه : سيتم دراسة كل ما سبق شرحه بالتفصيل عن احتياجنا اليه فى الدروس المقبلة باذن الله تعالى

تم بحمد لله الانتهاء من الدرس وان شاء الله نتقابل فى باقى دروس الدورة قريبا

شارك

14 التعليقات:

Mahmoud Ahmed يقول...

شكراااااااا لك

Mahmoud Ahmed يقول...

ممكن خدمه ؟
عايز طريقه احط فيها اضغط ليك على التدوينه بتاعه الفيس بوك
بس احطها في اول التدوينه و تكون بالشكل الكبير ؟؟؟

Unknown يقول...

مدونة جميلة و مواضيع مميزة و تستحق ان تكون في مقدمة المدونات .

مدونة سامكو | قوالب معربة يقول...

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

مدونة سامكو | قوالب معربة يقول...

@ احمد العزاوي اشكرك اخى الكريم على المجاملة الرقيقة دى

waterandair يقول...

بارك الله فيك
درس دسم محتاج تركيز
سأعود مرارا لهذا الدرس لأستيعابه
شكرا جزيلا

مدونة سامكو | قوالب معربة يقول...

@ waterandair اكيد هنتشرف بوجدك معنا لكن احب اطمنك الدروس القادمة ستجعل من هذا الدرس اسهل مما تتخيل ان شاء الله

ريهام المرشدي يقول...

ما شاء الله درس قيم جدا و في الحقيقة يحتاج إلى مذاكرة و ليس مجرد قراءة
جزاك الله كل الخير على هذا المجهود

مدونة سامكو | قوالب معربة يقول...

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

Unknown يقول...

دورة رائعة.. و دروس مفيده و مبسطه
في إنتظار بقية الدروس
تم وضع مدونتك في المفضله

أنا أريد أن أتعلم كيفية تعريب القوالب بطريقة مبسطه مثل ما أنت بصدد شرحه.
لا تحرمنا من المزيد بارك الله فيك

مدونة سامكو | قوالب معربة يقول...

@ SAROUT اشكرك اخى الكريم هذه الدورة خاصة بتصميم القوالب وعند الانتهاء منها ستكون قادر على التصميم والتعريب معا ولكن سيتم عمل درس مبسط فى نهاية الدورة عن التعريب واسهل الطرق لتعريب القوالب

Unknown يقول...

عُدنا،، :)

كما أشرت في ردك الجميل.. لقد إنتهيت من تعريب قالب كامل لموقعي و ذلك بفضل الدروس التي قدّمتها.. فوالله لم تكن لدي أدني فكره عن التعريب و لغة Css..
أرجوا أن تلقي نظرة على المدونه هل يلزمها بعض الإصلاحات.
و هذا رابطها.. http://www.arab-tek.net
(لم أستطع تغيير نوع خط عناوين التدوينات.. فهل يمكن أن تساعدني و أكون شاكر لك)
بارك الله فيك..
واصل إبداعك

خلفان الحجي يقول...

شكرا لك أخي الكريم على هذا الدرس المفيد
بارك الله فيك

غير معرف يقول...

شكرا جزيلا

إرسال تعليق

التبادل النصى والاعلانات

 
Design by مدونة سامكو | Bloggerized by الأدراة - Premium Blogger Themes | اتصل بنا
Online Marketing

التبادل الاعلانى

خدمات الدعم الفنى لبلوجر

التبادل الاعلانى