استثمر للحياة

مواضيعنا

مقدمة CSS

حجم الخط

استثمر للحياة

عايز تخلي  موقعك يكون شكله جميل  و ثابت لا يتغير من صفحة لصفحة مهما تعددت الصفحات   .و تقدر تغير الوانه . و تغير خلفيتة الصفحة بدون تعب أو ملل . ببساطة إنها CSS

ماهي CSS

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

 

 ما الفرق بين CSS وHTML؟

  • إذا كانت HTML تستخدم لكتابة محتوى الصفحة , فإن CSS تستخدم لإضافة تصميم ثابتة لهذه المحتويات .من حيث :

  •  التحكم بالتصميم من خلال ملف واحد.

  •  إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.

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

  •  العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم

  •   ما هي البرامج التي أحتاجها؟  كل ما تحتاجه هو محرر نصي بسيط .مثل المفكرةNotepad في ويندوز أو Pico في لينكس أو Simple text لنظام ماك .و طبعا لابد من المتصفح .

و من الجدير بالذكر : إن استخدام CSS يتطلب معرفة أساسيات HTML،فإذا لم تكن ملماً ب HTML فيمكنك أن تبدأ بدروس HTML  قبل أن تتعلم CSS.


فكرة سريعة عن كيفية عمل CSS


في لغة  HTML إذا كنا نريد خلفية للصفحة باللون الأحمر . سنكتب الكود
 

<body bgcolor="#FF0000">

و لكنه سيجعل اللون الاحمر فى هذه الصفحة فقط . و لن يؤثر على صفحات أخرى تالية . فإذا أردنا ان يكون هذا اللون مثلا هو صفة مميزة لكل صفحات موقعنا , هنا نستخدم CSS ونكتب

investolife

بهذا الامر سيكون لون الخلفية لاى صفحة فى موقعك هو اللون الاحمر مثلاً . و لكن كيف ؟


القاعدة العامة و الاساسية

لكتابة اكواد CSS هي

Selector { property : value ; }d

و الصورة توضح هذه القاعدة و علينا ان ننتبه للرموز { ---- : ---- ; } و التى لم نستخدمها من قبل فى HTML

 كيفية إدراج أكواد CSSفى صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لإدراج أكواد CSSفى صفحة HTML

الطريقة الأولى  : في نفس صفحة HTML عن طريق كتابة الأكواد داخل وسوم html مثل Body

مثال سنكتب عبلرة ترحيب على صفحة لونها أحمر
 

  <html>
  <head>
  </head>
  <body style="background-color: #FF0000;">
  <h1>مرحبا بكم</h1>
  <p>في استثمر للحياة </p>
  </body>
  </html>
  

و تبدو الصفحة بهذا الشكل


investolife



الطريقة الثانية : في نفس وسم Head عن طريق الخاصية style

مثال سنكتب عبارة ترحيب على صفحة لونها أزرق فاتح

<html>
  <head>
  <style type="text/css">
  body
  {
  background-color:#b0c4de;  
  }
  </style>
  </head>
  <body>
  <p>مرحبا بكم فى </p>
  <h1> استثمر للحياة </h1>
  </body>
  </html>

و تبدو الصفحة بهذا الشكل


investolife

 

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

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


مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style ، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم


investolife


المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم ، مثل هذ االرابط يمكن إنشاءه من خلال سطرواحد في HTML:

 

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

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

 

اعلان تجاري
اعلان 468