التصميم مع CSS

By


تستخدم CSS لتصميم عناصر HTML
هذا النص مرفق بتصميم

هذا النص لونه أحمر ونوع الخط تاهوما

هذا النص لونه أزرق ونوع الخط ايريال

هذا النص حجمه 30 بكسل





دمج HTML مع CSS عند التصميم


تم اختراع لغة CSS مع لغة HTML 4 لتقديم عرض أفضل لتصميم الموقع .

يمكن اضافة CSS مع لغة HTML من خلال الطرق التالية :

  • ملف تصميم انسيابي (ملف CSS)

  • من خلال وضع اكواد التصميم في وسم <style>

  • من خلال وضع أكواد التصميم من خلال اللاحقة style في نفس وسم HTML




استخدام تصميم من خلال اللاحقة


ليس من الاحتراف استخدام التصميم في نفس الوسم لذلك من الأفضل استخدام ملف تصميم منفصل .

في هذا الدورة سنقدم لك كيفية استخدام لغة CSS في لواحق الوسوم في مثال بسيط جداً وليكون من السهل عليك كتابة وتعديل الكود كما تحب .



استخدام تصميم من خلال اللاحقة – مثال لون الخلفية


نستخدم خاصية لون الخلفية background-color لتحديد لون خلفية العنصر الذي نود التعديل عليه

مثال
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">هذا عنوان</h2>
<p style="background-color:green;">هذه فقرة</p>
</body>
</html>

تم إزالة اللاحقة bgcolor بعد استخدام خاصية لون الخلفية background-color



استخدام تصميم من خلال اللاحقة – مثال اللون والحجم والشكل


تستخدم خاصية عائلة الخط font-family لتعريف نوع الخط و تستخدم خاصية حجم الخط font-size لتحديد حجم الخط كما تستخدم خاصية اللون color لتحديد لون العنصر .

مثال
<html>
<body>
<h1 style="font-family:verdana;">عنوان كبير</h1>
<p style="font-family:tahoma;color:red;font-size:20px;">فقرة من النص</p>
</body>
</html>

تم إزالة الوسم <font> بعد استخدام خاصية عائلة الخط font-family و حجم الخط font-size



استخدام تصميم من خلال اللاحقة – مثال محاذاة النص


تحدد خاصية محاذاة النص text-align المحاذاة الأفقية للنص الموجود في عنصر معين .

مثال
<html>
<body>
<h1 style="text-align:center;">عنوان كبير موجود بالوسط</h1>
<p>هذه فقرة نص</p>
</body>
</html>

تم إزالة وسم <center> بعد استخدام خاصية محاذاة النص text-align



ليست هناك تعليقات:

إرسال تعليق