css | أساسيات التحكم بالخط

alwanlab.com · #1 07-03-2011, 06:03 AM

css | أساسيات التحكم بالخط

السلام عليكم ورحمة الله وبركاته,

يسعدنا اعزائى تقديم عمل بسيط سيمتد لأكثر من موضوع
سوف نتناول ان شاء الله اساسيات css من البدايه تماماً
حتى نبدأ بشكل صحيح فى التعلم اردنا ان نبدأ بالأساسيات
سوف نضيف موضوع بشكل دورى سنتناول فيه جزء معين من اجزاء css إن شاء الله
نبدأ بشكل مباشر:
فى البدايه تعريف بسيط لـcss

اقتباس:

ما هي تقنية CSS؟

لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.

CSS هي اختصار لي Cascading Style Sheets.

ماذا يمكن أن أفعل بتقنية CSS؟

CSS هي لغة تصميم تحدد شكل وثيقة HTML، فهي تهتم بالخطوط، الألوان، الهامش، والعرض والارتفاع، صورة خلفية الموقع، وكيفية توزيع المساحات وأشياء أخرى كثيرة، انتظر فقط وسترى!

HTML يمكن أن تستخدم بشكل خاطئ لإضافة تصميم للمواقع، لكن CSS توفر المزيد من الخيارات وهي أكثر دقة وعملية، وهي مدعومة من قبل المتصفحات الرئيسية اليوم.

بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً رائعاً.

ما الفرق بين CSS وHTML؟

تستخدم لوضع هيكلية ونظام منطقي للمحتويات، أما CSS فهي تستخدم لإضافة تصميم لهذه المحتويات.

حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.

في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل <h1> و<p>.

مع ازدياد شهرة شبكة الويب بدأ المصممون في البحث عن طرق لإضافة تصميم للوثائق، ولتلبية رغباتهم قام مبرمجوا المتصفحات - نيتكسيب ومايكروسوفت - باختراع وسوم HTML جديدة مثل <font> الذي يختلف عن وسوم HTML الأصلية بأنه يهتم بالشكل لا بالهيكلية.

أدى ذلك إلى أن تستخدم وسوم هيكلية مثل <table> بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل <blink> كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة.

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

كيف ستفيدني CSS؟

تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

التحكم بالتصميم من خلال ملف واحد.
إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.
إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ
العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم.

نبدأ الدرس بسم الله,
أهم شئ فى تصميم الموقع وتطويره هو تنسيق الخط بما يناسب التصميم بشكل عام حتى لا تفسد التصميم بالتفاصيل التى قد تبدوا بسيطه لكنها مؤثره جداً على التصميم والبرمجه.

1- تنسيق الخطوط.

سنتحدث اليوم عن كيفية التحكم بالخط بالـ css وسأشرح لكم أشهر أوامره,

1- نوع الخط
بإمكانك التحكم بنوع الخط بواسطة القيمة font-family ..
مثال:

كود PHP:

  body { font-family: Arial, Helvetica, Tahoma; }

2- قياس الخط
بإمكانك التحكم بقياس الخط بواسطة القيمة font-size ..
وهناك عدّة طرق للتحكم بقياس الخط، أذكر منها طريقة الكتابة، والتي تحتوي على عدّة قيم..
مثال على جميع القيم :

كود PHP:

  body {

font-size: xx-small;

font-size: x-small;

font-size: smaller;

font-size: small;

font-size: medium;

font-size: large;

font-size: larger;

font-size: x-large;

font-size: xx-large;

}

أو عن طريق قيمة البيكسل

كود PHP:

  font-size: 10px;

3- شكل الخط
بإمكانك التحكم بشكل الخط بواسطة القيمة font-style ..
وله 3 أنواع من القيم هي:

normal : وهذا لجعل شكل الخط عادي كما هو
italic : وهذا لجعل الخط مائلاً
oblique : وهذا لجعل الخط مائلاً أيضاً

مثال على جميع القيم :

كود PHP:

  body {

font-style: normal;

font-style: italic;

font-style: oblique;

}

4- لون الخط
بإمكانك التحكم بلون الخط بواسطة القيمة color ..
وهناك طرقتان للتحكم بلون الخط:

بالإسم : بحيث تكتب اسم اللون
بالرمز : بحيث تكتب رمز اللون

مثال على القيمتين :

كود PHP:

  body {

color: red;

color: #FF0000;

}

5- التباعد بين الأحرف
بإمكانك التحكم بتباعد الأحرف عن بعضها بواسطة القيمة letter-spacing ..
مثال :

كود PHP:

  body { letter-spacing: 1em; }

6- المسافة بين الكلمات
بإمكانك التحكم بالمسافة بين الكلمات بواسطة القيمة word-spacing ..
مثال :

كود PHP:

  body { word-spacing: 5em; }

7- تذيين الخط
بإمكانك التحكم بزينة الخط بواسطة القيمة text-decoration ..
وله 5 أنواع من القيم هي:

none : وهذا لجعل الخط عادي كما هو
underline : وهذا لإضافة خط أسفل الكلمة
overline : وهذا لإضافة خط أعلى الكلمة
line through : وهذا لإضافة خط على الكلمة
blink : وهذا لجعل الخط يومض (يظهر ويختفي)

مثال على جميع القيم :

كود PHP:

  body {

text-decoration: none;

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: blink;

}

هكذا نكون قد انتهينا من عرض أهم وأشهر خصائص الخط فى css والتى نحتاجها بشكل مستمر فى عملنا وفى تنسيق أعمالنا
وكما هو واضح الأمر بسيط جداً لكنه يحتاج بعض التدريب والتعود فقط
فى حالة وجود اى أستفسار او توضيح نحن فى الخدمه,
مع تحيات فريق التصميم فى مؤسسة ألوان لاب

الصيف احلى · 07-03-2011, 02:15 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

بارك الله فيك اخى

على هذة المعلومة

وجزاك كل خيرا ان شاء الله

simoni85 · 12-03-2011, 05:15 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

بارك الله فيك

alwanlab.com · 02-06-2011, 06:05 PM

حائطي

سجل دخولك او إضغط هنا للتسجيل

بارك الله فيكم

07-03-2011, 02:15 PM	رقم المشاركة : [2]
الصيف احلى :: + مشرف قسم seo و أرشفة المواقع + :: بيانات موقعي : إسم الموقع : منتديات العالم عرب ا اصدار المنتدى : لا أملك منتدى	حائطي سجل دخولك او إضغط هنا للتسجيل بارك الله فيك اخى على هذة المعلومة وجزاك كل خيرا ان شاء الله
	التوقيع: انتظرونا بدورة مطور للربح من النت قريبا ويوميا منتدى اسلامى يحتاج دعمكم http://www.worldarabnew.com http://www.worldarabnew.com

12-03-2011, 05:15 PM	رقم المشاركة : [3]
simoni85 مطور خبير بيانات موقعي : إسم الموقع : اصدار المنتدى :	حائطي سجل دخولك او إضغط هنا للتسجيل بارك الله فيك
	التوقيع: عضو جديد في معهد مطور التطويري - Mtwer.com/vb يمكنك تعديل التوقيع من خلال لتوحة تحكمك الخاصة عبر الرابط التالي : لوحة التحكم

02-06-2011, 06:05 PM	رقم المشاركة : [4]
alwanlab.com مطور جديد بيانات موقعي : إسم الموقع : اصدار المنتدى :	حائطي سجل دخولك او إضغط هنا للتسجيل بارك الله فيكم
	التوقيع: إســم الشـركـة : مؤسسة ألوان لاب صـاحب الشــركة : أسامة المعداوى داود خــدمـات الشـركة : استضافة المواقع - استضافة الموزعين - تصميم المواقع والمنتديات - ADSL – دعايا وإعلان – خدمات الطباعة – خدمات التسويق – تطبيقات الجوال – البرمجة المتقدمة النطـاقـات . مقــر الشــركة : جمهورية مصر العربيه - القاهره الدقى شارع نوال بجوار طارق نور للإعلان . هــاتف الشركة : من مصر 0109118442 من السعودية 0543313237 . بريــد الشـركة : info@alwanlab.com الدعــم الفنـي : alwanlab.com/submitticket.php

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

Powered by vBulletin® Version 3.8.7 Copyright ©2000 - 2012, Jelsoft Enterprises Ltd. Search Engine Friendly URLs by vBSEO 3.5.2 new notificatio by 9adq_ala7sas الحقوق محفوظة لكل المطورين والمواقع العربية Security team المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه التعليقات المنشورة لا تعبر عن رأي معهد مطور ولا نتحمل أي مسؤولية قانونية حيال ذلك ( ويتحمل كاتبها مسؤولية النشر ) روابط ننصح بزيارتها : العاب بنات جديدة \| العاب فلاش جديدة \| العاب فلاش \| استضافة \| تصميم موقع تصميم منتدى \| دعم فني \| مركز تحميل الصور \| مركز تحميل الملفات \| رسائل جوال \| ستايلات \| منتديات \| سكربتات \| هاكات جوجل ادسنس \| نطاقات و دومينات \| تطوير منتديات \| أرشفة المواقع \| وظائف \| توظيف \| برمجة مواقع \| رسائل sms \| حماية المواقع \| فقر الدم
جميع الأوقات بتوقيت GMT +3. الساعة الآن 12:05 PM.	- الأرشيف - الاتصال بنا - معهد مطور - الأعلى

css | أساسيات التحكم بالخط

دروس و برامج تصميم المواقع وبرامج التصميم