|
استثمر للحياة investolife
 مقدمة CSS
CSS هي اختصار لي Cascading Style Sheets .
CSS هي لغة تصميم تحدد شكل وثيقة HTML، بشكل جميل و ثابت لا يتغير من صفحة لصفحة . الامر الذى يطفي على صفحاتك رونقاً و جمالاً . فهي تهتم بالخطوط ، الألوان ، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى عديدة .
 ما الفرق بين CSS وHTML؟
إذا كانت HTML تستخدم لكتابة محتوى الصفحة , فإن CSS تستخدم لإضافة تصميم ثابتة لهذه المحتويات . من حيث :
 التحكم بالتصميم من خلال ملف واحد.
إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.
إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ
العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم
و من الجدير بالذكر : إن استخدام CSS يتطلب معرفة أساسيات HTML، فإذا لم تكن ملماً ب HTML فيمكنك أن تبدأ بدروس HTML قبل أن تتعلم CSS.
ما هي البرامج التي أحتاجها؟
كل ما تحتاجه هو محرر نصي بسيط . مثل المفكرة Notepad في ويندوز أو Pico في لينكس أو Simple text لنظام ماك . و طبعا لابد من المتصفح .
فكرة سريعة عن كيفية عمل CSS
في لغة HTML إذا كنا نريد خلفية للصفحة باللون الأحمر . سنكتب الكود
<body bgcolor="#FF0000">
و لكنه سيجعل اللون الاحمر فى هذه الصفحة فقط . و لن يؤثر على صفحات أخرى تالية . فإذا أردنا ان يكون هذا اللون مثلا هو صفة مميزة لكل صفحات موقعنا , هنا نستخدم CSS ونكتب
بهذا الامر سيكون لون الخلفية لاى صفحة فى موقعك هو اللون الاحمر مثلاً . و لكن كيف ؟ هذا ما نقدمه فى الشرح التالي .
القاعدة العامة و الاساسية لكتابة اكواد 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>
و تبدو الصفحة بهذا الشكل
الطريقة  : في نفس وسم Head عن طريق الخاصية style
مثال سنكتب عبارة ترحيب على صفحة لونها أزرق فاتح
<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<p>مرحبا بكم فى </p>
<h1> استثمر للحياة </h1>
</body>
</html>
و تبدو الصفحة بهذا الشكل
الطريقة  : ملف خارجي
هذه هي الطريقة الأفضل ، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS . و سيتم شرحها بالتفصيل لاحقاً .
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css ، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب .
مثلاً ، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style ، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم ، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
<link rel="stylesheet" type="text/css" href="/inv/style/style.css" />
هذا الكود يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML . الجميل هنا أنك تستطيع ربط العديد من صفحات موقعك بملف تصميم واحد ، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من الصفحات مما يضفى لموقع لمسة ساحرة . كما أنه يوفر الكثير من الجهد و الوقت .
مرجع سريع لكل أدوات css حمل من هنا
|
