ماهو الـ CSS مقدمة ونظرة عامة

تاريخ الإنضمام : 06/03/2010

الـ CSS هو عبارة عن طريقة اضافية تنظم بها تنسيق الصفحات
بطريقة سهلة ومرنة وتمكنك من عمل الكثير من الأشياء دون التغيير فى اكواد الـ HTML - فى هذا الدرس سنتعلم التالى

* طريقة صياغة اكواد CSS
* تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR
* الخصائص Properties
* كيفية تطبيق اكواد الـ CSS فى الـ XHTML

(لكن يجب ان تكون درست دورة الـ HTML قبل البدأ فى هذه الدورة)
على بركة الله نبدأ

1. طريقة صياغة اكواد CSS

اكواد الـ CSS تصاغ بالشكل التالى

الكود:

div{
font-size: 20px;
}

حيث div هو العنصر الذى سيتم تطبيق كود الـ CSS عليه (Selector)
والـ font-size
هى الخاصية (Property), اى الجزء الذى نريد التعامل معه او إعداداه داخل العنصر
20px هى قيمة الخاصية (Value)

2. تحديد العنصر الذى سيطبق عليه التنسيق SELECTOR

الـ Selector هو عبارة عن تحديد الجزء الذى سيتم تطبيق الإعدادات عليه
كما سبق وقلنا.

هناك ثلاث انواع للـ Selector

الـ html selector والذى نحدد به اوسمة من اوسمة الـ html الأساسية
كالـ div و span و p الخ.
كامثال

الكود:

p{
border: #000000 solid 1px;
}

والنوعان الأخران هما الـ id's والـ classes

الـ id يتم وضعها فى عناصر الـ html بالشكل التالى

الكود:

<span id="span_id">some text here</span>

(حيث span_id هى الـ id لهذا العنصر, ولا يشترط اسم محدد, المهم ان يكون هذا الأسم متوافق مع معايير قيم الخصائص التى تعلمتها فى الـ html)
ويتم الوصول لهذا العنصر فى الـ css بالشكل التالى

الكود:

#span_id{
/*
css codes goes here
*/
}

والـ classes يتم وضعها فى الـ html بالشكل التالى

الكود:

<span class="span_class">some text</span>

ونتعامل معها فى الـ css بالشكل التالى

الكود:

.span_class{
/*
any css codes goes here
*/
}

اذا ماذا اذا كان لدينا الثلاث عناصر التاليين

الكود:

<div class="my_body">main body text</div>
<span id="simple_line">one line text here</span>
<p class="paragraph_line">here is an paragraph</p>

ونريد تعيين لون الخط (مثلا) للون الأحمر للثلاث عناصر
هل نكتبهم بالشكل التالى

الكود:

.my_body{
color: red;
}
#simple_line{
color: red;
}
.paragraph_line{
color: red;
}

الكود السابق ليس خطأ. لكن بما اننا نسعى للأفضل دائما, فالأفضل يكون كالتالى

الكود:

.my_body, #simple_line, .paragraph_line{
color: red;
}

كما تلاحظ كل ماتحتاجه هو الفصل بين كل معرف للعنصر (سواء كان class او id)
بعلامة الفاصلة.

وايضا من ضمن طرق اختيار العناصر, هو الدوران داخل العناصر.

بمعنى مثلا لدينا التالى

الكود:

<div>any text
<p>another text inside the div</p>
</div>
<p>paragraph outside of the div</p>

لاحظ اننا لدينا عنصرين p
احداهما داخل الـ div والأخر خارجه
العنصر الذى خارج الـ div
الوصول له هو بالطريقة الأولى التى تم شرحها. لكن ماذا عن الذى داخل الـ div ؟

هذا هو مايسمى الدوران داخل العناصر ونصل اليه فى الـ css بالشكل التالى

الكود:

div p{
font-weight: bold;
}

بالأول حددنا العنصر الـ parent وهو الـ div
وبعده الـ child وهو الـ p الذى داخل الـ div

مع مراعاة ان هذه الطريقة نفصل فيها بين العناصر بالمسافة الفارغة ليس الا.

3. الخصائص Properties

الخصائص كما لاحظنا فى الأمثلة التى طرحناها, هى الجزء الذى نريد إعداده للعنصر.

ورأينا فى الأمثلة السابقة الـ font-size والذى يتم تحديد حجم الخط عن طريقه, والـ font-weight والذى يتم تحديد سمك (عرض) الخط عن طريقه.

وهناك العديد من الخصائص سندرس كل منهم بالتفصيل فى موضوعات اخرى.

4. تطبيق الـ CSS فى الـ XHTML

هناك ثلاث طرق لوضع اكواد الـ CSS بصفحات الـ XHTML

الطريقة الأولى, وهى Inline CSS

وهى عن طريق اضافة خاصية Style للعنصر.

وتكون بالشكل التالى كامثال

الكود:

<p style="font-size: 20px; color: red;">any text</p>

حيث قيمة الخاصية style تكون اكواد css صحيحة.

والطريقة الثانية Embedded Css
ويتم وضع اكواد الـ css داخل عنصر جديد له الإسم style بمنطقة الـ head بالصفحة
بالشكل التالى

الكود:

<html>
<head>
<title> any title</title>
<style type="text/css">
.any_class{
font-size: 16px;
text-align: center;
/*
etc etc
*/
}
</style>

الطريقة الثالثة والأخيرة.
هى عن طريق وضع اكواد الـ css بملف له الإمتداد .css
ونضع اشارة لهذا الملف داخل صفحة الـ html بمنطقة الـ head ايضا
(كما اتمنى انك تكون لاحظت التعليقات وكيف يتم وضعها فى الـ css)
ويتم الأمر بالشكل التالى

الكود:

<link rel=”stylesheet” type=”text/css” href=”somefile.css” />

اتمنى يكون الدرس الأول كان بسيط ومفهوم بجميع جوانبه

الموضوع الأصلي : ماهو الـ CSS مقدمة ونظرة عامة | المصدر : منتديات محترفي النت |الكاتب: {msameur}