medo
™المدير العـام™
عدد مساهماتى : 5740 مزاجي : الحمدلله انا من : مصر احترامك لقوانين المنتدي : نشاطك فى المنتدي : عدد نقاط التميز : 9968 عدد التقيمات : 15 تاريخ التسجيل : 17/08/2007 وسام1 : وسام2 : وسام3 : وسام4 : توقيع المنتدي :
| موضوع: استايل النصوص text styling 15.05.09 1:29 | |
| :g:4: :sleep: اذا كنت تعرف كيف تبنى النصوص وعناصر النصوص فى الـ XHTML
فأنت الأن فى الخطوة الصحيحة لبدأ تعلم كيفية تنسيق واستايل النصوص
بإستخدام الـ CSS
حقيقة, هناك الكثير من الخصائص الخاصة بالنصوص.
كانوع الخط, حجم الخط, لون الخط, شكل الخط (عريض, مائل) ارتفاع الخط, خط اسفله خط, محاذاة النص افقيا, الخ والكثير من الأمور المشابهة.
سوف احاول معكم جاهدا ان انهى هذا الدرس بدرس واحد
واتمنى ان تبذلوا بعض المجهود معى لفهم كل جوانب الدرس.
وان شاء الله لن يكون شئ صعب.
نبدأ على بركة الله بأول خاصية من خصائص التعامل مع النصوص
وهى خاصية الـ font-family
خاصية الـ font-family تمكنك من تحديد نوع الخط المستخدم (كا انواع الخطوط التى تستخدم فى الويندوز, او برامج التصميم مثل الفوتوشوب, الخ)
كامثال على استخدام الخاصية
كود: - الكود:
-
[b]h1{ font-family: tahome; }[/b]
الكود اعلاه سوف يجعل اى عنصر h1 يستخدم الخط tahoma
اذا كان اسم الخط يحتوى على مسافات كالخط (مثلا) Times New Roman
يجب ان يوضع بين علامتى التنصيص كالتالى
كود: - الكود:
-
[b]font-family: "Times New Roman";[/b]
لكن هناك مشكلة بسيطة فى استخدام خاصية الـ font-family وهى ان الخطوط فى الأصل تعتمد على الخطوط المثبتة على جهاز الشخص الذى يتصفح الصفحة.
بمعنى انه اذا كان هناك صفحة مصممة بإستخدام الخط arial مثلا وهذا النوع من الخط ليس مثبت على جهازى, سوف يتم استبداله بنوع الخط الإفتراضى للمتصفح.
لكن لحل هذه المشكلة يجب علينا تحديد عدد ما من الخطوط نرى انه مناسب لتصميمنا. وبنفس الوقت يتوفر عند اغلب المستخدمين.
ويتم وضع قائمة الخطوط التى نوفرها واحد تلو الأخر مع الفصل بينهم بعلامة الفاصلة, واذا لم يتمكن المتصفح من العثور على الخط الأول فى جهاز المستخدم, سينتقل للثانى, وان لم يجده سينتقل للثالث. الخ.
ويتم الأمر بالشكل التالى كامثال كود: - الكود:
-
[b]font-family: tahome, arial, "Times New Roman", helvetica, sans-serif; [/b] ويمكنك وضع اى عدد من الخطوط التى ترى انها تناسب تصميمك.
تلوين النص بإستخدام الخاصية Color الخاصية Color عملها هو تحديد لون معين للنص.
وهى بسيطة جدا وتكتب بالشكل التالى
كود: - الكود:
-
[b].any_element_class{ color: #000000; }[/b] حيث الرقم #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 او %
كامثال كود: - الكود:
-
[b]body{ font-size:4em; } h1{ font-size: 16px; } div span{ font-size: 80%; }[/b]
ارتفاع الخط او مايسمى line-height
هذه الخاصية تستخدم لتحديد ارتفاع خط النص دون العبث مع حجمه او نوع الخط المستخدم به
وكامثال على استخدامها
كود: - الكود:
-
[b]h1{ line-height: 1.5em; }[/b]
ماذا عن الخط العريض؟ او الـ bold ؟
نستطيع جعل خط احد العناصر عريض بإستخدام الخاصية font-weight ونضع لها القيمة bold
كود: - الكود:
-
[b]p{ font-weight: bold; }[/b]
اما النص المائل نستخدم له الخاصية font-style
كود: - الكود:
-
[b]p{ font-style: italic; }[/b]
اذن ماذا عن الإختصارات؟ الإختصارات امر جيد, تسهل علينا مسألة كتابة الأكواد وتعديلها فيما بعد.
كامثال على ذلك اعداد خط ما مثلا.
كود: - الكود:
-
[b]p{ font: italic 16px arial, tahoma; }[/b] فى الكود اعلاه, حددنا ستايل الخط هو مائل (italic) وحجمه 16px ونوعه هو arial, tahome
ماذا عن وضع خط تحت النص؟
يتم الأمر عن طريق خاصية text-decoration وهى تستخدم لوضع/حذف خط تحت النص كود: - الكود:
-
[b]p{ text-decoration: underline; }[/b] هذا سيضع خط تحت نص العنصر p
اما التالى
كود: - الكود:
-
[b]a{ text-decoration: none; [/b] } سوف يمنع ظهور خط تحت الروابط
او يمكننا ان نضع خط فى منتصف النص كالتالى
كود: - الكود:
-
[b]p{ text-decoration:line-through; }[/b]
الأبعاد بين الحروف والكلمات. احد الخصائص الجيدة (والسيئة فى حالة الإستخدام الخاطئ)
للتحكم بكافة خصائص النصوص, وهما الخاصيتين letter-spacing و word-spacing الأولى, لتحديد الأبعاد بين حروف الكلمات (فى اللغة الإنجليزية, او الحروف التى لا يمكن شبكها بما يليها كاحرف الـ د مثلا فى العربية) والثانية, للمسافة بين الكلمات وتحدد قيمتهم بالـ px او em او %
المحاذاة الأفقية للنص, يمين يسار, وسط.
يتم الأمر عن طريق الخاصية text-align وتكون قيمتها واحدة من الثلاث left, center, right
واظن معانيهم واضحة ولا تحتاج لشرح.
اتمنى يكون الدرس شيق وبه شئ من الأفادة ويكون واضح وبسيط بالنسبة لك..
كل التمنيات بالتوفيق بإذن الله.
| |
|