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

شاطر | 
 

 الدرس الثاني : استايل النصوص text styling

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

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: الدرس الثاني : استايل النصوص text styling    الجمعة مارس 04, 2011 7:55 am

اذا كنت تعرف كيف تبنى النصوص وعناصر النصوص فى الـ XHTML

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

بإستخدام الـ CSS

حقيقة, هناك الكثير من الخصائص الخاصة بالنصوص.

كانوع الخط, حجم الخط, لون الخط, شكل الخط (عريض, مائل)
ارتفاع الخط, خط اسفله خط, محاذاة النص افقيا, الخ والكثير من الأمور المشابهة.


سوف احاول معكم جاهدا ان انهى هذا الدرس بدرس واحد

واتمنى ان تبذلوا بعض المجهود معى لفهم كل جوانب الدرس.

وان شاء الله لن يكون شئ صعب.

نبدأ على بركة الله بأول خاصية من خصائص التعامل مع النصوص

وهى خاصية الـ font-family

خاصية الـ font-family تمكنك من تحديد نوع الخط المستخدم (كا انواع الخطوط
التى تستخدم فى الويندوز, او برامج التصميم مثل الفوتوشوب, الخ)

كامثال على استخدام الخاصية
الرمز:
h1{
font-family: tahome;
}
الكود اعلاه سوف يجعل اى عنصر h1 يستخدم الخط tahoma

اذا كان اسم الخط يحتوى على مسافات كالخط (مثلا) Times New Roman

يجب ان يوضع بين علامتى التنصيص
كالتالى
الرمز:

font-family: "Times New Roman";
لكن هناك مشكلة بسيطة فى استخدام خاصية الـ font-family
وهى ان الخطوط فى الأصل تعتمد على الخطوط المثبتة على جهاز الشخص الذى يتصفح الصفحة.

بمعنى انه اذا كان هناك صفحة مصممة بإستخدام الخط arial مثلا وهذا النوع
من الخط ليس مثبت على جهازى, سوف يتم استبداله بنوع الخط الإفتراضى
للمتصفح.

لكن لحل هذه المشكلة يجب علينا تحديد عدد ما من الخطوط نرى انه مناسب لتصميمنا. وبنفس الوقت يتوفر عند اغلب المستخدمين.

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

ويتم الأمر بالشكل التالى كامثال
الرمز:

font-family: tahome, arial, "Times New Roman", helvetica, sans-serif;
ويمكنك وضع اى عدد من الخطوط التى ترى انها تناسب تصميمك.

تلوين النص بإستخدام الخاصية Color
الخاصية Color عملها هو تحديد لون معين للنص.

وهى بسيطة جدا وتكتب بالشكل التالى
الرمز:
.any_element_class{
color: #000000;
}
حيث الرقم #000000
هو رقم الـ hex للون الأسود.
واكواد الألوان يمكنك ان تجدها بكثير من الأدوات, كابرنامج الـ photoshop
مثلا, او اى برنامج اخر يوفر لك هذه الميزة والبرامج لهذا الأمر لا يوجد اكثر منها.

يمكنك استخدام نتائج بحث جوجل التالية لترى كم البرامج المتوفرة
www.google.com/search?hl=en&q=hex+color+picker&btnG=Google+Search&aq=2&oq=hex+col


حجم الخط فى الـ CSS

ويتم تحديد حجم الخط عن طريق الخاصية font-size

معايير حجم الخط تكون اما px او em او %

كامثال
الرمز:
body{
font-size:4em;
}
h1{
font-size: 16px;
}
div span{
font-size: 80%;
}
ارتفاع الخط او مايسمى line-height

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

وكامثال على استخدامها
الرمز:
h1{
line-height: 1.5em;
}
ماذا عن الخط العريض؟ او الـ bold ؟

نستطيع جعل خط احد العناصر عريض بإستخدام الخاصية font-weight
ونضع لها القيمة bold
الرمز:
p{
font-weight: bold;
}
اما النص المائل نستخدم له الخاصية font-style
الرمز:
p{
font-style: italic;
}

اذن ماذا عن الإختصارات؟
الإختصارات امر جيد, تسهل علينا مسألة كتابة الأكواد وتعديلها فيما بعد.

كامثال على ذلك اعداد خط ما مثلا.
الرمز:
p{
font: italic 16px arial, tahoma;
}
فى الكود اعلاه, حددنا ستايل الخط هو مائل (italic) وحجمه 16px ونوعه هو arial, tahome

ماذا عن وضع خط تحت النص؟

يتم الأمر عن طريق خاصية text-decoration
وهى تستخدم لوضع/حذف خط تحت النص
الرمز:
p{
text-decoration: underline;
}
هذا سيضع خط تحت نص العنصر p

اما التالى
الرمز:
a{
text-decoration: none;
}
سوف يمنع ظهور خط تحت الروابط

او يمكننا ان نضع خط فى منتصف النص كالتالى
الرمز:
p{
text-decoration:line-through;
}
الأبعاد بين الحروف والكلمات.
احد الخصائص الجيدة (والسيئة فى حالة الإستخدام الخاطئ)

للتحكم بكافة خصائص النصوص, وهما الخاصيتين letter-spacing و word-spacing
الأولى, لتحديد الأبعاد بين حروف الكلمات (فى اللغة الإنجليزية, او الحروف
التى لا يمكن شبكها بما يليها كاحرف الـ د مثلا فى العربية)
والثانية, للمسافة بين الكلمات وتحدد قيمتهم بالـ px او em او %


المحاذاة الأفقية للنص, يمين يسار, وسط.

يتم الأمر عن طريق الخاصية text-align
وتكون قيمتها واحدة من الثلاث left, center, right

واظن معانيهم واضحة ولا تحتاج لشرح.

اتمنى يكون الدرس شيق وبه شئ من الأفادة ويكون واضح وبسيط بالنسبة لك..

كل التمنيات بالتوفيق بإذن الله.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
mohamed_m
مشرف عام
مشرف عام
avatar

احترام القوانين :
ذكر تاريخ الميلاد : 16/07/1998
عدد المساهمات : 447
نقاط : 853
تاريخ التسجيل : 29/08/2009
العمر : 19

مُساهمةموضوع: رد: الدرس الثاني : استايل النصوص text styling    السبت ديسمبر 17, 2011 7:47 am

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


احترام القوانين :
تاريخ الميلاد : 18/09/1990
عدد المساهمات : 138
نقاط : 287
تاريخ التسجيل : 29/08/2009
العمر : 27

مُساهمةموضوع: رد: الدرس الثاني : استايل النصوص text styling    الأحد ديسمبر 18, 2011 11:48 am

shokran lek 3la el shar7 al ra2e3 da

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

avatar

احترام القوانين :
ذكر تاريخ الميلاد : 25/07/1998
عدد المساهمات : 1044
نقاط : 3102
تاريخ التسجيل : 29/08/2009
العمر : 19
الموقع : الاسكندرية

مُساهمةموضوع: رد: الدرس الثاني : استايل النصوص text styling    الخميس ديسمبر 22, 2011 7:03 am

العفو يا تيتو على ايه
وننتظر جديدك

وتقبل تحياتى
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://www.toty.arabstar.biz
 
الدرس الثاني : استايل النصوص text styling
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» F Text احدثـ برنامج لعملـ التواقيع والاعلاناتـ
» تحميل بعض حلقات مسلسل نور التركي
» مجموعة رائعة من روايات عبير على منتدى احباب الله
» شرح مصطلحات الورد Word
» برنامج تحويل الأرقام إلى كتابة للأعداد باللغة العر (10.5 كيلوبايت)

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 :: المهندس صافى فعالياتنا :: !…»§ ●[ــــودΞا لغات البرمجة Ξالـــ] ●§«…! :: !…»§ ●[ــــودΞ دورة تعلم css Ξالـــ] ●§«…!-
انتقل الى:  

أكوادcss|اكواد Template| الأسئلة الشائعة | تقنيات متقدمة |لغات البرمجة|اشهار المواقع والمنتديات |اقسام التصميم |اشهار المنتديات|دليل شركات الاستضافه|عروض المنتديات  |الابداع والجرافيزم |الفوتوشوب|البرامج  |


مركز تبادل الاعلانات العربيه

 دردشة | المهندس صافى