تعلم CSS من الصفر صلوحي الدرس الاول

جميع المصممين الآن يعلمون اهمية الـ CSS , لكي تبني موقع ناجح ولكي
تكون مصمم مواقع ناجح عليك بتعلم Css و تعلمها ليس بالصعب انها سهلة جداً
وتابع الموضوع كامل لتصدق ذلك …

بالبداية CSS هي اختصار لكلمة Cascading Style Sheets و التي تعني “ صفحات الانماط الإنسيابية “

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






لماذا CSS وما فائدتها ؟


سؤال قد يخطر على بال اي شخص جديد يرغب بتعلم css و هو لماذا css ؟

الجواب بسيط , تخيل ان موقعك يحتوي على 300 صفحة وتريد تغير لون الروابط
ب 300 صفحة , تخيل كم الوقت الذي تحتاجه فقط لتعديل الروابط ب 300 صفحة !!
, اعتقد قد يستغرق الامر اياماً ..

و لكن لو كنت تستخدم تقنية css بموقعك لن تحتاج لتعديل 300 صفحة بل
ستقوم بتعديل صفحة واحدة وعند تعديلك لهذه الصفحة تلقائياً سوف تتعدل
الروابط بال 300 صفحة , هل عرفت كم هي مفيدة ووفرت الوقت و الجهد .

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

اذا اردنا ذكر الفوائد بنقاط ستكون كالتالي

1. تقليل حجم الصفحة وهذا جيد لاصحاب الاتصالات البطيئة .
   
2. امكانية تعديل مجموعة كبيرة من الصفحات بواسطة صفحة واحدة .
   
3. فصل محتويات الموقع عن التصميم ( أي انه يمكنك تعديل تصميم الموقع دون تعديل المحتويات ) .
   
4. سهولة التعديل وتوفير الوقت و الجهد .
   
5. سهولة التحكم بمظهر الموقع .
   

بالتأكيد يوجد فوائد اخرى و لكن هذه ما خطر على بالي في الوقت الحالي
وسأقوم بإضافة اي فوائد جديدة بهذا الموضوع لذلك تابع الموضوع



بحال اضافة اي جديد …

لنبدء بالشرح ..

اضافة تأثير معين لعنصر


الآن وفي البداية سأشرح كيفية اضافة تأثير لعنصر بالموقع

مثلاً لدينا بصفحة html عنصر كالتالي …

1 2 3

suarweb.com مرحباً بك بمنتديات صلوحي الشاملة نص بخصائص معينة

عند اضافة تأثير لعنصر id بملف ال css نضع قبل اسم العنصر # .

عند اضافة تأثير لعنصر class بملف css نضع قبل اسم العنصر نقطة (.) .

عند اضافة تأثير لعنصر من وسوم html كـ h3,h2,h1 لانضع قبل اسمه اي شيء
الا ان كنا نريد تأثير خاص له نضيف له class او id لتحكم بخصائصه , ويمكنك
ايضاً التحكم بخصائصه دون اضافة class او id وذلك من خلال اضافة تأثير
للعنصر الذي يحويه ولكن عند اضافة التأثير نضع عند نهاية اسم العنصر h3 او
h2 … وهكذا

الآن بالكود الذي فوق ان نرغب بإضافة تأثير كيف سنقوم بذلك …

1 2 3 4 5 6 7 8 9 10 11

#text { color:#ff0096; font-family:tahoma; } p { color:#6c00ff; font-size:12px; } .csdz{ color:red; }

الآن كلمة csdz.yoo7.com
الموجودة ب #text سيكون لونها #ff0096 وستكون نوعية الخط tahoma و النصوص p
سيكون لون الخط #6c00ff و حجم الخط 12 بيكسل و .csdz سيكون لون الخط
أحمر .

الالوان و الخلفية و تأثيرات النصوص


الآن اذا اردنا ان نغيير لون خط معين كيف يمكننا ذلك ب css , سيكون ذلك من خلال اضافة color ثم رقم الخط

مثلاً نرغب بوضع الخط الاسود رقمه هو 000 , اذن سيكون الشكل كالتالي :

1	color:#000;

الآن سيكون الون اسود ويمكننا تغيير الون حسب ما نشاء

ويمكننا ايضاً وضع اسم اللون بدلاً من الرقم كـ red,blue وغيرها … ولكن
كل متصفح سيضع الون ولكن بدرجة خاصة مثلاً اللون الاحمر بالفيرفوكس سيكون
غير درجة اللون الاحمر بمتصفح جوجل كروم …

الخلفية , الموضوع بسيط ولكنه اطول قليلاً من الالوان الخاصة بالنصوص
لأننا سنتحدث عن اضافة صورة لعنصر و تغيير لون الخلفية و موقع الصورة
وتكرار الصورة

فالبداية :

background-color : للتحكم بالون الخلفية و الالوان كما في النقطة السابقة اما اسماء او ارقام و الارقام افضل

background-image : وتعني صورة الخلفية مثلاً لدينا زر نرغب بإضافة صورة له نضع هذا الكود ويكون الشكل كالتالي

1	background-image:url(csdz.yoo7.png);

اسم الصورة هو suarweb.jpg ويجب ذكر النوع كـ jpg او png او gif او bmp

background-position : مكان الخلفية left,right,top,20px,-55px

ومثال يوضح الفكرة

1	background-position:50% 50%;

هكذا نكون اخترنا مكان الصورة بالوسط القيمة الاولى من جهة اليسار للارتفاع ( اعلى , اسفل ) و القيمة الثانية ( يمين,يسار)

background-repeat : وتعني تكرار الصورة بجميع الاتجاهات او بالاتجاه الافقي فقط او العامودي فقط وقيمها هي

no-repeat وتعني عدم التكرار , repeat تكرار من جميع الاتجاهات ,
repeat-x تكرار باتجاه افقي فقط , repeat-y تكرار باتجاه عامودي فقط .

صورة توضيح لعناصر الصور و الالوان



يوجد تأثير border سأتحدث عنه لاحقاً …

بالنسبة للصورة فوق فقد شرحت جميع ماذكرته عن الصور و الالوان

اتمنى ان تكون الفكرة واضحة وان لم تكن اكتب اي شيء لم تستطع فهمه بالتعليقات وسأقوم بالاجابة بإذن الله .

الصناديق او الحواف , Border


موضوعها بسيط جداً وليس معقد و بالصورة فوق ذكرت border

ويكون شكلها عن الكتابة كالتالي :

1 2	border-color:000; border-style:solid;

1 2 3

border-width:1px;border-left-color:#000; border-left-style:solid; border-left-width:1px;

1 2 3 4 5

border:1px solid #000; border-bottom:1px dashed #000; border-top:1px dotted #000; border-left:1px solid #000; border-right:1px solid #000;

سنقسم الكود فوق الى ثلاث اقسام ..

القسم الاول السطر الاول وهو لتحديد لون الصندوق

السطر الثاني لتحديد مظهر الصندوق

السطر الثالث لتحديد عرض الصناديق

القسم الثاني

هو للتأثير على الحواف الموجودة بجهة اليسار

القسم الثالث

التأثيرات لكل جهة

فالسطر الاول يطبق تأثيره على جميع الجهات ام السطر الثاني للجهة السفلى فقط وهكذا …

border-style : مظهر الحواف يكون اما خطوط متقطة dashed او خط مستقيم solid او نقاط dotted … يوجد مظاهر اخرى …

الخطوط


لإضافة تأثير على الخطوط ( النصوص )

font-family : عائلة الخط كـ Tahoma او Time New Roman و …

ويكون كتابتها كالتالي

1	font-family:Georgia, "Times New Roman", Times, serif;

يمكنك وضع خط واحد لكن بالكود الذي كتبته سيقوم بالبحث عن خط Georgia بالبداية ان لم يجده سيبحث عن time new roman وهكذا …

وتلاحظ ان خط time new roman يوجد بين علامتي اقتباس وهذا لأنه يتكون من اكثر من المقطع

لذلك لوضع خط يتكون من اكثر من مقطع يجب وضعه بين علامتي اقتباس

font-size : حجم الخط 12بيكسل او 40% او 3em او 12pt

الفرق بين px,pt و em,% هي ان بيكسل و الاخرى تجعل حجم الخط ثابت اما em و % يمكن لحجم الخط ان يتغير بتغير حجم الشاشة

font-style: طراز الخط ويعني هل ترغب به oblique , italic , normal


font-weight : عرض الخط مثل bold او normal او ارقام 100-300


وبهذا نكون انهينا الجزء الأول من الدورة css مع suarweb.com

وبالجزء الثاني سيكون اوسع مع امثلة…

اي نقطة لم تكن واضحة يمكنك وضع سؤالك بالتعليقات

نقل من : suarweb.com .




دائما للافادة