إعلان
تعلم الآن
الدرس التالي» »الدرس السابق

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>
جرب الكود

2- أسلوب Internal CSS

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

مثال

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

إعلان
دورة PHP و MySQL في هذه الدورة ستتعلم أساسيات لغة PHP و أساسيات MySQL و من ثم ستتعلم كيفية بناء مشروع نظام طلبات مع لوحة التحكم تطبق فيه جميع الأساسيات التي تعلمتها. سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 520 ريال
سعر الدورة الآن هو 20 ريال سعودي فقط بدلاً من 520 ريال
تعلم الآن
الدرس التالي» »الدرس السابق

الدورات

اللغة الإنجليزية
البرمجة للمبتدئين
قواعد البيانات
لغة HTML
لغة CSS
لغة Python
لغة Java
لغة C++
الإطار Swing
الإطار JavaFX
أساسيات الحاسوب
الخوارزميات
الخوارزميات و هياكل البيانات
الكتابة على الكيبورد
القرآن الكريم و الأذكار

أدوات مساعدة

محرر الويب
محرر البرمجة للمبتدئين
أداة إختيار الألوان
أداة رسم الأشكال بواسطة CSS
محول الوحدات
محلل عناوين الشبكات

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة