المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

مقدمة

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

CSS بسهولة

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

<font color="#677393" face="Tahoma" size="2">عنوان أول</font>
<font color="#677393" face="Tahoma" size="2">عنوان ثاني</font>
<font color="#677393" face="Tahoma" size="2">عنوان ثالث</font>

هذه الصفحة تحتوي على ثلاث فقرات تحتوي ثلاث عناوين، حددنا لكل عنوان خط Tahoma بمقياس 2 وحددنا له لوناً، الآن ستدخل CSS لتغير بعض الأمور، لا تقلق، سنقوم بشرح أوامر CSS بالتفصيل في دروس قادمة:

<style> p { font: 13px Tahoma; color: #677393; } </style>عنوان أول
عنوان ثاني
عنوان ثالث

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

<style type=”text/css”>  CSS styles here </style>

الطريقة الثانية وهي أن تطبق CSS مباشرة في HTML وهذه الطريقة تسمى inline، وهذا مثال لها:

<p style="font-family: Tahoma; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal; color: #677393">عنوان أول</p>

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

<link href="mystyle.css" rel="stylesheet" type="text/css" />
عنوان أول
عنوان ثاني
عنوان ثالث

ماهي فوائد CSS؟

• تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة (bandwidth) التي يحتاجها الموقع ستقل.
• تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
• فصل المحتويات تماماً عن التصميم، والتحكم بالتصميم من خلال ملف واحد فقط.
• فصل المحتويات عن التصميم يؤدي إلى أن يكون الموقع متوافقاً مع أجهزة أخرى كالحواسيب الكفية.

منقول بتصرف من منتديات سوالف سوفت

وقد كتبها: سردال

سردال = عبدالله المهيري، فيمكنكم المناقشة والاستفسار هنا وستجدون منه الرد.

مواضيع السلسلة

• تعلم CSS بسهولة (2)
• تعلم CSS بسهولة (3)
• تعلم CSS بسهولة (4)
• CSS بسهولة (5) الأخير