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

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

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

أساسيات 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 بيكسل والمحاذاة مرة يمين )

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;
}

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

لو أعجبك هذا الموضوع قم بنشره