مولاتى

بســــــم الله الرحمن الرحيم


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


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

شاطر | 
 

 الدرس الثاني عشر: التصميم (CSS)

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

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6801
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس الثاني عشر: التصميم (CSS)   الثلاثاء ديسمبر 16, 2014 3:23 pm

أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟

بالتأكيد، لكن كيف؟

لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]. لذلك اعتبر هذا الدرس مجرد فاتحة شهية.
هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).
كما رأيت [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]، يمكن إضافة CSS من خلال خاصية، فمثلاً يمكنك أن تضع نوع الخط وحجمه:
مثال 1:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]style="font-size:20px;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>This is typed in size 20</p>[/size][/size][/font][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]style="font-family:courier;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>This is typed in Courier</p>[/size][/size][/font][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]style="font-size:20px; font-family:courier;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>This is typed in Courier size 20</p>[/size][/size][/font][/center]

[center][size=16]   [/size][/center]






سيظهر بهذا الشكل في متصفحك
This is typed in size 20

This is typed in Courier

This is typed in Courier size 20

في المثال أعلاه اسخدمنا خاصية 

الكود:
style

 لتحديد نوع الخط الذي نريد استخدامه من خلال أمر 

الكود:
font-family

) وحددنا حجم الخط من خلال أمر 

الكود:
font-size

)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.

يبدو أن هذا يحتاج إلى الكثير من العمل؟

إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصية 

الكود:
style

 لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:

مثال 2:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   <html>[/size][/center]


[center][size=16]     <head>[/size][/center]

[center][size=16]     <title>My first CSS page</title>   [/size][/center]


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]     [/size][/size][/font][b][size=16]<style type="text/css">[/size][/b][/center]

[center][b][size=16]        h1 {font-size: 30px; font-family: arial;}[/size][/b][/center]

[center][b][size=16]        h2 {font-size: 15px; font-family: courier;}[/size][/b][/center]

[center][b][size=16]        p {font-size: 8px; font-family: "times new roman";}[/size][/b][/center]

[center][b][size=16]     </style>[/size][/b][/center]


[center][size=16]     </head>[/size][/center]

     <body>

[center][size=16]     <h1>My first CSS page</h1>[/size][/center]
     <h2>Welcome to my first CSS page</h2>

[center][size=16]     <p>Here you can see how CSS works </p>[/size][/center]
     </body>

   </html>

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل الصفحة، لفعل ذلك عليك فقط أن تضع الوسم 

الكود:
<style type="text/css">

 الذي يخبر المتصفح بأنك تستخدم CSS.

في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية ستستخدم خطاً من نوع Courier بحجم 15 بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roman" بحجم 8 بكسل.
هناك خيار آخر يتمثل في كتابة CSS في ملف منفصل، لأنك تستطيع من خلال ملف منفصل أن تتحكم بتصميم صفحات عدة مرة واحدة، هذا أسلوب ذكي إذا أردت أن تغير حجم الخط ونوعه في موقع كبير يحوي مئات أو آلاف الصفحات، لكننا لن نشرح ذلك الآن، يمكنك أن تتعلم هذا في درس CSS.

ماذا يمكن أن أفعل أيضاً في CSS؟

يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها::

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]style="color:green;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>Green text</p>[/size][/size][/font][/center]


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <h1 [/size][/size][/font][b][size=16]style="background-color: blue;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>Heading on blue background</h1>[/size][/size][/font][/center]


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <body [/size][/size][/font][b][size=16]style="background-image: url('http://www.html.net/logo.png');"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>[/size][/size][/font][/center]

[center][size=16]   [/size][/center]






جرب أن تدخل في المثال في بعض الصفحات التي قمت بإنشاءها، وجرب ذلك بالطريقتين، كما ترى في المثال أو بوضع CSS في رأس الصفحة

هل CSS مجرد ألوان وخطوط؟

بجانب التصميم وتفاصيله مثل الألوان والخطوط، يمكنها أن تتحكم بتنسيق الصفحة وطريقة عرض البيانات فيها (الهوامش، المحاذاة، العرض والطول ... إلخ)، بتنظيم مخلف العناصر باستخدام CSS، يمكنك أن تصمم صفحتك بأسلوب أنيق دقيق.
مثال 3:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]style="padding:25px;border:1px solid red;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>I love CSS</p>[/size][/size][/font][/center]

[center][size=16]   [/size][/center]






سيظهر بهذا الشكل في متصفحك
I love CSS

بستخدام أمر 

الكود:
float

 يمكن للعنصر أن يوضع إلى يسار أو يمين الصفحة في المثال التالي سنعرض هذا المبدأ:

مثال 4:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <img src="bill.jpg" alt="Bill Gates" [/size][/size][/font][b][size=16]style= "float:left;"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16] />[/size][/size][/font][/center]


[center][size=16]   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, [/size][/center]
      sed diam nonummy nibh euismod tincidunt ut laoreet dolore

[center][size=16]      quis nostrud exerci tation ullamcorper suscipit [/size][/center]
      magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
      lobortis nisl ut aliquip ex ea commodo consequat...</p>

[center][size=16]   [/size][/center]






سيظهر بهذا الشكل في متصفحك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.
باستخدام الأمر 

الكود:
position

، يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:

مثال 5:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]style="position:absolute;bottom:50px;right:10px;" />



  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


في المثال الصور وضعت على بعد 50 بكسل من الأسفل و10 بكسل من يمين المتصفح، لكن يمكنك أن تضعها بالضبط حيث تشاء، جرب، ستجد أن الأمر سهل ومثير.

جميل، لكن هل هي سهلة؟

لا يمكنك تعلم CSS في عشر دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم المزيد بنفسك في [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط].
الآن لنركز على HTML، ولنذهب إلى الدرس التالي حيث ستتعلم كيف تقوم بوضع موقعك على الشبكة لكي يستطيع كل الناس في العالم مشاهدته.


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس الثاني عشر: التصميم (CSS)
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: درس HTML - جدول المحتويات شرح كامل وشامل لكل ما يخص لغة HTML-
انتقل الى: