كولا ماكس ||سودانية الملامح .. عالمية الروئة ®


سودانية الملامح .. عالمية الروئة ®
 
الرئيسيةالرئيسية  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  قائمة الاعضاءقائمة الاعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 الدرس 15 – التصميم

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
أبو نادر
Admin
Admin


♣ مشَارَڪاتْي » : 1944
♣ التسِجيلٌ » : 29/11/2012

مُساهمةموضوع: الدرس 15 – التصميم   الأربعاء نوفمبر 30, 2016 6:59 pm

التصميم مع CSS

تستخدم CSS لتصميم عناصر HTML

هذا النص مرفق بتصميم

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

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

[size=30]هذا النص حجمه 30 بكسل[/size]

دمج 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

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://colamax.ahlamontada.com
 
الدرس 15 – التصميم
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
كولا ماكس ||سودانية الملامح .. عالمية الروئة ® :: اقسام تطوير المواقع والمنتديات :: قسم لغات البرمجة :: دورة تعلم لغة الـ HTML-
انتقل الى: