دروس css: كيف تعمل تقنية CSS؟

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

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

كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

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

القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
استخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر

body {background-color: #FF0000;}

تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.

الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

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

<html>
  <head>
    <title>Example<title>
  </head>
  <body style="background-color: #FF0000;">
    <p>This is a red page</p>
  </body>
</html>

الطريقة 2: ضمت ملف HTML باستخدام وسم style

هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة:

<html>
  <head>
    <title>Example<title>
    <style type="text/css">
      body {background-color: #FF0000;}
    </style>
  </head>
  <body>
    <p>This is a red page</p>
  </body>
</html>

الطريقة 3: ملف خارجي

هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:

<link rel="stylesheet" type="text/css"href="style/style.css" />

لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.

هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:

<html>
  <head>
    <title>My document</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
  ...

هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.

واتمنى ان اكون قد استطعت ان اقدم الشرح بطريقه سهله وبسيطه ومفهومه .. واى استفسار انا موجود ..

دروس في لغة css