الدرس الاول-مقدمة

الأنماط  CSS

 

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

 CSS هي اختصار لـ Cascading Style Sheet

 

سنتعرف على اساسيات CSS   و التنسيق   بها.

توفر CSS إمكانية تنسيق صفحة كاملة او عدد من عناصر ووسوم ال HTML بطريقة سهلة وفي مكان واحد ومرة واحدة .

توجد ثلاث طرق لكتابة أنماط CSS  .

  1. مضمنة داخل عنصر HTML

<'h1 style="color:blue;">This is a heading<'/h1>

  1. داخلي . داخل ملف HTML

 

يبدا بالوسم <style>  وينتهي بـ </style>

 

<html>
<head>
<style>
body {background-color:silver;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

 

  1. ملف  خارجي :

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

 

 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

 

body {
  background-color:blue ;
}
h1 {
  color: blue;
}
{
  color: red;
}

هكذا يكون شكل ملف  css