الدرس الخامس
Style – CSS-الانماط
سنتعرف على اساسيات CSS و التنسيق بها.
توفر CSS إمكانية تنسيق صفحة كاملة او عدد من عناصر ووسوم ال HTML بطريقة سهلة وفي مكان واحد ومرة واحدة .
توجد ثلاث طرق لكتابة أنماط CSS .
- مضمنة داخل عنصر HTML .
<'h1 style="color:blue;">This is a heading<'/h1>
- داخلي . داخل ملف HTML
<html> |
- ملف خارجي :
يتم كتابة التنسيق والانماط داخل ملف اخر بامتداد css ثم ربطه مع صفحة html
<!DOCTYPE html> |
هكذا يكون شكل ملف css
body { |
الجداول :
بالعلامة table> *>يتم انشاء الجدول بالعلامة th> *>يتم انشاء راس الجدول بالعلامة tr> *> يتم انشاء صفوف الجدول بالعلامة td> *>يتم انشاء بيانات خلية الجدول
|
<table style="width:100%"> |
تنسيق الجدول :
- الحدود 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>
- استخدم border خاصية CSS لتعريف الحدود
- استخدم border-collapse خاصية CSS لطي حدود الخلية
- استخدم padding خاصية CSS لإضافة مسافة إلى الخلايا
- استخدم text-alignخاصية CSS لمحاذاة نص الخلية
- استخدم border-spacing خاصية CSS لتعيين التباعد بين الخلايا
- استخدم colspan السمة لجعل خلية تمتد على العديد من الأعمدة
- استخدم rowspan السمة لجعل الخلية تمتد على العديد من الصفوف
- استخدم id السمة لتعريف جدول واحد بشكل فريد
|