الـ 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 والـ xhtml جزئين مكونين لشئ واحد.
ومن المحتمل ان اقوم بجعل الدورتين عبارة عن دورة واحدة اذا تطلب الأمر.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الرئيسية
