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

فمثلا يمكنك تغير شكل كل الأوسمة التلقائية في الhtml مثلا لو استخدمت H1 و هو أكبر عنوان من العناوين في الحالة العادية سيظهر بالحجم و الشكل المفروض كما يحدده المتصفح و لكن عن طريق الإستايل شيت يمكنك تغير شكل الh1 و إعطائه شكل و إطار و لون كما تريد .

و لو أردت أن تعرف بالضبط ما نعني هذا السطر استخدمنا فيه H2 و بالماوصفات التي حددناها نحن.و لذلك لن يكون كما هو الشكل العادي لل h2و كما تلاحظ فكل العناوين رقم 2 في الصفحة تبدو متماثلة و إذا أردنا تعديل أي شئ كل ما علينا القيام به هو تعديل الCSS في أعلى الصفحة و ينطبق التعديل على الجميع .

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

الخواص

أول طريقة لإضافة الأستايل لصفحتك هي بتضمينها داخل اكواد الhtml

و ذلك على طريق إضافة كلمة style متبوعة بالمواصفات في كود الhtml بالطريقة التالية

< style="property:value">

مثال على السابق

< style="color:green">

الخاصية property هي خاصية اللون نريد أن نحدد لون هذا الكائن أو الشكل هو اللون الاخضر

لو جربنا كود كالتالي

 
<div style="color: green">لون أخضر</div>
 

سيكون الناتج

لون أخضر

يمكنك التحكم في أكثر من خاصية مثلا شكل الخط

 
<div style="color: green; font-style: italic">
نص أخضر و مائل !</div>
 

استخدمنا الخاصية style و حددناها بمائل italic

كما يمكن وضع خواص أكثر مثلا

 
<div style="font-weight: bold; font-family: Tahoma">
مليئ بالخواص</div>
 

استخدمنا الخواص التالية

  • Color اللون
  • font-style : استايل الخط
  • font-weight : وزن الخط نحيف او عامق.. الخ
  • font-family : عائلة الخط أو اسم الخط