❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSقواعد كتابة كود CSS

  • الشكل العام لكود CSS
  • أين تكتب كود CSS
  • أفضل طريقة لكتابة كود CSS

الشكل العام لكود CSS

بدايةً، نحن نضيف كود CSS بهدف تحسين طريقة ظهور الأشياء الموجودة في صفحة الويب و التي تم إضافتها بالأساس بواسطة وسوم HTML. من هذا المنطلق فإنه عند كتابة كود CSS يجب تحديد الوسم المراد التعديل على تصميمه و من ثم تمرير الخصائص و القيم المناسبة له.

الآن إذا كانت الصفحة تحتوي على وسم <h1> يمكنك إضافة خصائص CSS له كالتالي.

h1 {
    color: blue;
    text-align: center;
}

h1 :  هو إسم الوسم الذي سيتم إضافة خصائص CSS له و يسمى Selector.

color :  يسمى Property و هو الخاصية المراد تعديلها للشيء.

blue :  هو قيمة الخاصيّة و يسمى Value.

color: blue; :  الخاصيّة و قيمتها مع بعض يقال لهما Declaration.


يجب وضع فاصلة منقوطة ; بعد كل خاصيّة يتم تعريفها.
آخر خاصيّة يمكنك عدم وضع فاصلة منقوطة لها و لكننا ننصحك بأن تضعها دائماً لأن هذا المتعارف عليه.

أين تكتب كود CSS

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


1- أسلوب Inline CSS

أي وسم تضيفه في الصفحة يمكنك إضافة الخاصيّة style له و تمرير كود الـ CSS لها كقيمة بشكل مباشر.

مثال

<h1 style="color:blue; text-align:center;">Hello World!</h1>
<h1 style="color:blue; text-align:center;">Hello World!</h1>
جرب الكود

2- أسلوب Internal CSS

يمكنك إضافة الوسم <style> في أي مكان تريده في الصفحة و بداخله تستطيع إضافة خصائص CSS لأي وسم موجود في الصفحة.

مثال

<style>
h1 {
color: blue;
text-align: center;
}
</style>
<h1>Hello World!</h1>
<style> h1 { color: blue; text-align: center; } </style> <h1>Hello World!</h1>
جرب الكود

3- أسلوب External CSS

يمكنك وضع كود الـCSS بداخل ملف إمتداده .css و من ثم تضمينه في الصفحة من بواسطة الوسم <link> و الذي يجب وضعه في الوسم <head>.

مثال

style.css
h1 {
color: blue;
text-align: center;
}
h1 { color: blue; text-align: center; }
index.html
<!DOCTYPE html>
<html>
<head>
<!-- style.css هنا قمنا بتضمين الملف -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html> <html> <head> <!-- style.css هنا قمنا بتضمين الملف --> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> </body> </html>
جرب الكود

أفضل طريقة لكتابة كود CSS

بشكل عام، أي موقع تبنيه عليك تخصيص ملف إمتداده .css لتضع فيه كل خصائص CSS التي ستستخدمها في صفحات الموقع و من ثم تضمن هذا الملف بها بواسطة الوسم <link>.

إضافة كود CSS بشكل مباشر لوسوم HTML من خلال الخاصيّة style أمر يمكنك فعله إن كنت بحاجة للتعديل على تصميم وسم محدد استخدمته بشكل خاص في أحد الصفحات.

إضافة كود CSS في الصفحة بواسطة الوسم <style> أمر تحتاجه في بعض الأحيان إن كنت بحاجة لتخصيص طريقة ظهور شيء في الصفحة و تريد إضافة خصائص لا يمكنك إضافتها بواسطة الخاصية style.

الدرس التالي❯ ❮الدرس السابق