| |||||||
| روابط تعليم لغات البرمجه جميع اللغات ، Java، php ، asp ، Ajax ، Css ، |
درس 2: كيف تعمل تقنية css؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في
 |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
06-11-2009, 01:45 AM
| رقم المشاركة : 1 | |
|  درس 2: كيف تعمل تقنية css؟ في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML. باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة: كود: <body bgcolor="#FF0000"> كود: body {background-color: #FF0000;}
 لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن. تفعيل CSS في صفحة HTML هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل. الطريقة 1: ضمن وسوم HTML باستخدام خاصية style إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل كود: <html>
<head>
<title>Example<title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html> هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة: كود: <html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html> هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة. الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب. مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم  المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML: كود: <link rel="stylesheet" type="text/css" href="style/style.css" /> هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي: كود: <html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
... الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.  هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم. لنتدرب على ما تعلمناه حتى الآن. جرب بنفسك قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات: default.htm كود: <html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html> كود: body {
background-color: #FF0000;
} قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
| |
 |
|
06-11-2009, 10:45 AM
| رقم المشاركة : 2 | |
|  بوركت يافارس
| |
| |
|
06-11-2009, 10:49 AM
| رقم المشاركة : 3 | |
| تسلم يا فارس
| |
| |
|
15-11-2009, 05:12 PM
| رقم المشاركة : 4 | |
| ماتقصر يافارس والله مبدع
| |
| |
|
15-11-2009, 08:11 PM
| رقم المشاركة : 5 | |
| روعة يا فارس ..
| |
| |
|
15-11-2009, 08:15 PM
| رقم المشاركة : 6 | |
| شرح ولا احلى اخوي فارس
| |
| |
|
18-11-2009, 11:09 AM
| رقم المشاركة : 8 | |
| الله يجزاك خير يالغلاهم فارس
| |
| |
|
18-11-2009, 01:01 PM
| رقم المشاركة : 9 | |
|
| جميل يافارس
| |
| |
|
| مواقع النشر (المفضلة) |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
العرض العادي
| |
الساعة الآن 11:10 PM
| |
