HTML CSS ـϠا ϳϬم - WordPress.com · 2017. 12. 26. · 7102 ةينورتكللأا عقاوملا ميمصت 1 | P a g e Ϯأ HTML ـϠ ب ϴϮϠا ةحفص Ϯا ةϙϴثϮ لكش

تصميم المواقع األلكترونية 7102

1 | P a g e

ماهي الـCSS : هي لغة تصميم وتنسيق تحدد شكل وثيقة او صفحة الويب بالـHTML أو

. Cascading Style Sheet “ ”وهي مختصر لكلمةأوراق األنماط االنسيبابية

:في تصميم الصفحات CSSهناك ثالث طرق الستخدام الـ

1- CSS السطرية (Inline CSS ) : يتم كتابة شيفرة الـCSS الى الواصفةStyle الخاصة

.وكما مبين بالمثال التالي, بكل عنصر على حدى

<p style=”color:red;”> محتوى الفقرة </p>

2- CSS لداخلي لربط اا (Internal CSS ): يتم كتابة شيفرة الـCSS في منطقة الـHead

.وكما مبين بالمثال التالي <style/>و <style> من الصفحة بين وسمي

<html>

<head>

<style type=”text/css”>

CSSهنا يتم كتابة شفرات الـ

</style>

</head>

<body>

محتوى الصفحة هنا

</body>

</html>

تعتبر هذه الطريقة جيدة للمواقع ذات العدد المحدود من الصفحات أما بالنسبة للمواقع المتوسطة

.والكبيرة فيفضل استخدام الطريقة الثالة


2 | P a g e

3- CSS الربط الخارجي (External CSS ) : يتم كتابة شيفرة الـCSS في ملف مستقل

<link>أوالً يتم ربط هذا الملف بصفحة الويب ياستخدام الوسم ( . css.) االمتداد يحمل

وتحديد نوع hrefعبر كتابة اسم ومسار الملف في الوسم Headفي منطقة الرأس

:وكما في المثال التالي stylesheetالعالقة بـ

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

<body>

محتوى الصفحة

</body>

</html>

في ملف مستقل CSSبسبب كتابة شفرة الـ , CSSتعتبر هذه الطريقة هي الريقة المثلى الستخدام الـ

.التحكم والوصول للشفرة المقصودة و تعديله مما يسهل

- <link> هو وسم الربط.

- Rel وترمز للغة الملف وهنا تم تحديده بـstylesheet .

- Type تحدد نوع الملف.

- href ترمزألسم ومكان الملف.

استخدام الـ (div , span :)

. div , spanتم استخدام الجداول أما االن فأننا سوف نستخدم الـ htmlلتقسيم الصفحة بالـ


3 | P a g e

divمميزات استخدام الـ

.مرونة استخدامه وسهولهة تعديله والتحكم به بأحترافية -1

.صديق لمحركات البحث divالـ -2

.الجداول تعطي مظهر سيء عند تحميل الصفحات ويبطئ التصفح -3

div (Divisions Tag )وسم الـ -

وبطريقة اخرى كبسلة العناصر هو عبارة عن وحدة احتواء لعناصر صفحة الويب

Htmlويكتب داخل صفحة الويب سواء بالـ . وتقسيم محتوى صفحة الويب الى اقسام

:وكما في المثال التالي PHPأو الـ

<html>

<body>

<div style=”color:#0000FF”>

كتابة المحتوى

</div>

</body>

</html>

:span (Span Tag )وسم الـ -

في الغالب يستخدم الـ . هو كود او وسم يتم استخدامة للنصوص والتحكم في خصائصها

div وكما في المثال التالي .بدال عنها:

<html>

<body>

<span style=”color:red”>


4 | P a g e

كتابة المحتوى

</span>

</body>

</html>

( Class , id )الصنف والمعرفات -

حدد idخاصية الـ لتحديد نمط او خصائص cssحيث يستخدمها الـ ( selecter) أو مايسمى الم

ويعمل نفس عمل الكالس لكنه اليتكرر ألن الكالس يعمل على نمط . عنصر معين داخل صفحة الويب

:مجموعة عناصر ويكتب في ملف الكالس بالشكل التالي وشكل عنصر او

: htmlويكتب في صفحة الـ

Classesخاصية الـ -

تستخدم لتحديد شكل عنصر او ازثر في الموقع وغالباً CSSخاصية الكالسات في الـ

. CSSلمجموعة عناصر وكما في مثال ملف الـ


5 | P a g e

: htmlويكتب في صفحة الـ

ووضعنا قبل االسم نقطة تشير الى انه كالس headerفي المثال أعاله قمنا بعمل كالس واسمه

.نهاية ليشمل جميع الخصائص {بداية وقوس }بعد االسم وقتحنا قوس divوليس

htmlفي صفحة الـ classأو الـ idكيفية كتابة الـ

: CSSخصائص الضبط في الـ -

:سيتم ذكر أهم الخصائص المتداولة في تصميم صفحات الويب وكما يلي

:ستظهر في المتصفح كما يلي


6 | P a g e

ولكن سنبدأ باضافة بعض خصائصه لنرى التغير CSSلحد االن لم نبدأ باضافة اي خاصية لملف الـ

.الذي سيحصل على المتصفح


7 | P a g e

.تم استخدام لون الحدود 5في السطر -

ويمكن كتابة 1pxوتعني mediumاستخدمنا عرض الحدود وهنا تم كتابة 6في السطر -

.اي عرض نريده

لكن في الغالب نستخدم , وتعني منقط dottedحددنا شكل الحدود وهنا كتبنا 7في السطر -

solid والتي تعني خط واحد متصل.

:ونقوم بعرض الصفحة حيث ستظهر لنا بالشكل التالي CSSاالن نقوم بحفظ ملف الـ

.CSSفي ملف الـ Classesللـ الخصائص يواالن سنقوم بكتابة باق


8 | P a g e

:حيث سنرها كما في الشكل التالي. االن قم بحفظ الملف وافتح المتصفح مرة اخرى

.هناك طريقة االكثر استخداماً والتي تعتبر هي الطريقة االسهل واالسرع وكما مبين ادناه: مالحظة


9 | P a g e


10 | P a g e


11 | P a g e


12 | P a g e


13 | P a g e

.سيظهر لنا الشكل التالي بالمتصفح divبعد تطبيق الكود السابق الخاص بالـ


14 | P a g e


15 | P a g e

ونضع فيه الصور المراد العمل imgsوالضاقة صورة كخلفية نقوم بأنشاء مجلد جديد ونقوم بتسميته

.عليها وكما موضح في ادناه

المتصفح وكما موضح ادناهاو بطريقة اخرى نكتب ايعاز الصورة في صفحة


16 | P a g e

كما في المثال ادناه CSSونقوم بتعديل خصائص الصورة بملف الـ


17 | P a g e

؟ نيتداح نيتلفسلاو نيتداح ريغ نيتيولعلا نيتيوازلا لعجت نا لواح :لاؤس

Documents

HTML CSS ـϠا ϳϬم - WordPress.com · 2017. 12. 26. · 7102 ةينورتكللأا عقاوملا ميمصت 1 | P a g e Ϯأ HTML ـϠ ب ϴϮϠا ةحفص Ϯا ةϙϴثϮ لكش