تسجيل الدخول | تسجيل

الدورات التدريبية| HTML

  1. الرئيسية


الدرس الخامس

 

Style – CSS-الانماط

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

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

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

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

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

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

 

<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>

 

 

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

 

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

 

 

 

الجداول :

 

 

بالعلامة table> *>يتم انشاء الجدول   

بالعلامة  th> *>يتم انشاء راس الجدول   

   بالعلامة tr> *> يتم انشاء صفوف  الجدول   

  بالعلامة td> *>يتم انشاء بيانات خلية الجدول   

 

 

<table style="width:100%">
  <tr>
    <th>الاسم </th>
    <th>العنوان </th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>محمد</td>
    <td>الخرطوم</td>
    <td>50</td>
  </tr>
  <tr>
    <td>ليلي</td>
    <td>امدرمان</td>
    <td>30</td>
  </tr>
</table>

 

 

 

 

تنسيق الجدول :

  • الحدود border  table, th, td

border: 1px solid black;

 border-spacing: 5px;

 

  • المسافات داخل الخلية . th, td

 padding: 15px;

  • اتجاه الكتابة . th

text-align: left;

 

امثلة :

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

 

 

  • <table style="width:100%">
      <caption>Monthly savings</caption>

     
    استخدم    عنصر HTML لتعريف تسمية توضيحية للجدول.

 

 

  • استخدم border   خاصية CSS لتعريف الحدود
  • استخدم  border-collapse   خاصية  CSS لطي حدود الخلية
  • استخدم  padding   خاصية CSS  لإضافة مسافة إلى الخلايا
  • استخدم    text-alignخاصية  CSS لمحاذاة نص الخلية
  • استخدم  border-spacing   خاصية  CSS لتعيين التباعد بين الخلايا
  • استخدم  colspan    السمة لجعل خلية تمتد على العديد من الأعمدة
  • استخدم  rowspan   السمة لجعل الخلية تمتد على العديد من الصفوف
  • استخدم   id السمة لتعريف جدول واحد بشكل فريد

 

 


  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>