مقدمة في لغة CSS

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 LinkedIn 0 Email 0 Filament.io 0 Flares ×

ما الذي يجب عليك معرفته؟

عند تعلم لغة CSS يجب ان يكون لديك المعرفة بأساسيات لغة HTML/XHTML فان لم تكن على دراية بها يفضل الاطلاع على مقدمة في لغة HTML .

ما معنى CSS

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

لغة CSS حلت مشاكل كبيرة - learn css

لم تحتوي لغة HTML أبدا على وسوم لتنسيق صفحات الويب.
لغة HTML تستخدم لوصف محتوى صفحة الويب مثل <h1/>عنوان رئيسي<h1> و <p/>فقرة<p>.
أكبر مشاكل لغة HTML تكمن في وسمي الخط والألوان التي يجب تعريفها في كل صفحة ويب ولحل تلك المشكلة قامت World Wide Web Consortium بإنشاء لغة CSS
في لغة HTML 4 يمكن حذف كل أنواع التنسيق من خطوط وألوان وحفظها في ملف CSS منفصل.
يمكن استخدام ملف CSS منفصل للتحكم في تغيير شكل وطريقة عرض جميع صفحات الموقع.
كل المتصفحات في الوقت الحالي تدعم لغة CSS.

تكتب لغة CSS بصيغة معينة وهي كالآتي:

Selector هو أحد عناصر HTML التي تريد تنسيقها.
Declaration يحتوي على صفة ولكل صفة قيمة مثال على ذلك  {;p {color:red;text-align:center

دعونا نشرح  {;p {color:red;text-align:center

p هي فقرة تكتب باللون الأحمر color:red وأن تنسيق النص في المنتصف text-align:center

p هي Selector و color:red هي Declaration و color هي الصفة و red هي القيمة و text-align:center هي أيضا Declaration وأن text-align هي الصفة وأن center هي القيمة.

الملاحظات التوضيحية في لغة CSS

قد يحتاج بعض مصممي صفحات الويب وضع بعض الملاحظات التوضيحية داخل ملف CSS يستطيع من خلالها الاستدلال ومعرفة ما المراد من تلك الصيغة حين كتابتها وتكون بمثابة توضيح ارشادي لأي شخص يستخدمها من بعده ولكي يتم اضافتها في ملف CSS يجب اضافة الصيغة على النحو التالي: /*هذه ملاحظات توضيحية*/ ويمكن استعمالها كما تشاء وفي أي مكان.

ما هو CSS Id و Class

كما تسمح لغة CSS اضافة Style الى عناصر HTML من خلال Selector خاص يسمى id و class ويستخدم id Selector لتنسيق عنصر واحد فقط ويتم تعريفه باستخدام # ومثال على ذلك سنقوم بتنسيق عنصر HTML يسمى para1 #

#para1
{
text-align:center;
color:red;
}

يستخدم class Selector لاضافة Style لمجموعة من عناصر HTML من خلال نفس class على عكس id Selector ويتم تعريفها باستخدام “.”على سبيل المثال

.center {text-align:center;}

ملاحظة: لا يجب بداية اسم class برقم فلا يوجد متصفح يدعم الأرقام غير internet explorer وكما تكتب لغة CSS بأكثر من طريقة واليك أشهرها External Style Sheet و Internal Style Sheet

ملف تنسيق خارجي External Style Sheet

تستخدم هذه الطريقة ان اردت تعميم التنسيق على صفحات الموقع بأكمله ويمكن من خلاله تغيير شكل وتصميم الموقع بأكمله من خلال هذا الملف.

كل صفحة داخل الموقع يجب ان تحتوي على رابط لملف css باستخدام وسم  <link> ويجب ادراجه داخل وسم <head> ولا يحب احتواءه على أي وسوم HTML وعدم ترك مسافة ما بين الصفة والقيمة التي قد تعمل فقط مع متصفح internet explorer ولا تعمل مع متصفحى Opera و Firefox ومثال على ذلك:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

تنسيق صفحة ويب Internal Style Sheet

تستخدم هذه الطريقة في حال تنسيق صفحة ويب بذاتها ويجب ادارجها داخل وسم <head> عن طريق استخدام وسم <style>مثال على ذلك:

<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

هذه تعتبر مقدمة للتعرف على أساسيات لغة CSS التي تقطع شوطا كبيرا في تصميم المواقع وتوفر الكثير من الوقت والمجهود وهناك العديد من البرامج التي قد تساعد على تحرير ملفات CSS منها Simple CSS و ++NotePad

كما يمكن أيضا الاطلاع على موضوع التالي:

مقدمة في لغة HTML

مميزات استخدام CSS في تصميم المواقع

ما هي أفضل طريقة لتعلم تصميم المواقع

الاستضافة المجانية ومشاكلها

خطوة بخطوة – مقدمة عن انشاء موقع انترنت

Tags:

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 LinkedIn 0 Email 0 Filament.io 0 Flares ×
Read more:
12 طريقة لزيادة زوار المدونة

get more traffic to your site إنه من السهل انشاء مدونة ولكن من الصعب أن تستطيع انشاء قاعدة كبيرة من...

كيف أحقق النجاح للمدونة؟

  Blog Success قد تجد الوقت الكافي لقراءة جميع المدونات في العالم التي تتحدث عن الأسس والخطوات المتبعة لانجاح المدونة...

ما هي صفحة index.html ؟

  كل المواقع على شبكة الانترنت تخزن داخل مجلد على خادم الويب وكل صفحة ويب لها ملف على خادم الويب....

Close