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

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

شاطر | 
 

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

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

♣ مشَارَڪاتْي » : 1962
♣ التسِجيلٌ » : 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-
انتقل الى:  
جميع الحقوق محفوظة  لـمنتديات كولا ماكس
 Powered by Aseer Al Domoo3 ®colamax.ahlamontada.com
حقوق الطبع والنشر©2013 - 2014
جميع المواضيع والمشاركات المكتوبة تعبر عن وجهة نظر صاحبها .. ولا تعَبر بأي شكل من الأشكال عن وجهة نظر إدارة منتديات كولا ماكس .
سحابة الكلمات الدلالية
جديد احمد صفانا مدني شباب قرقوري انصاف الاغاني برنامج سودانية طلال اغاني صديق تحميل حسين 2016 جديدة سليمان زكريات منتصر هلالية وخنساء اغنية السودان الصادق محمد