يتم التشغيل بواسطة Blogger.

من أنا

صورتي

جهاد الخزاعي، مصمم ومبرمج مواقع إلكترونية 💻 ، هدفي هو تطوير الويب العربي إلى الأفضل😎، شكرا لقراءتك
تعلم لغة HTML درس (10)

تعلم لغة HTML درس (10)







التصميم مع CSS


تستخدم 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
Jehad Khuzaie

جهاد الخزاعي، أسكن في المملكة الأردنية الهاشمية،أحب التكنولوجيا و عالم البرمجة،مدير موقع الخبير التقني،شكرا لقراءتك.

مواضيع ذات صلة

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

إرسال تعليق

جميع الحقوق محفوظة © 2017 لـ موقع الخبير التقني | موقع تقني أردني

close

أكتب كلمة البحث...