تنسيق وإضافة طراز إلى النصوص هي مسئلة أساسية لمصممي المواقع، في هذا
الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص،
سنتحدث عن هذه الخصائص في هذا الدرس:
وضع فارغ قبل أول سطر "text-indent"
الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر
p {
text-indent: 30px;
}
محاذاة النص "text-align"
خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.
في المثال أدناه النص في رأس الجدول قمنا بمحاذاته نحو اليمين، بينما البيانات في الجدول حاذيناها نحو المنتصف أما النص في الفقرات فقمنا بمحاذاته من الجانبين:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
زخرفة النص "text-decoration"
الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه، في المثال الآتي كل عناصر
وضعنا أسفلها خطاً أما
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
المسافة بين الحروف "letter-spacing"
The spacing between text characters can be specified using the property letter-spacing، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
تحويل النص "text-transform"
خاصية text-transform تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.
فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE"
أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم
text-transform:
capitalizeتقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".uppercaseتجعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".lowercaseستجعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".noneلن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML.
كمثال، سنقوم باستخدام قائمة أسماء، الأسماء كلها تستخدم العنصر (list-item)، ولنقل أننا نريد الأسماء أن يظهر حرفها الأول كبيراً أما العناوين فنريد كل حروفها كبيرة.
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
ترقبو الدرس القادم
الدرس ستأخذ مقدمة حول الأساليب العجيبة التي تقدمها CSS لتنسيق النص،
سنتحدث عن هذه الخصائص في هذا الدرس:
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
وضع فارغ قبل أول سطر "text-indent"
الخاصية text-indent تسمح لك بإضافة لمسة أنيقة إلى الفقرات بوضع مسافة فارغة قبل أول سطر من الفقرة، في المثال أدناه وضعنا القيمة 30px لكل الفقرات التي تستخدم العنصر
:
p {
text-indent: 30px;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
محاذاة النص "text-align"
خاصية text-align تشبه في HTML خاصية "align" التي كانت تستخدم في الماضي، النص يمكن محاذاته نحو اليسار "left" أو اليمين "right" أو في المنتصف "centred" وبالإضافة إلى ذلك القيمة justify ستقوم بمحاذاة النص من الجانبين كما تفعل بعض الصحف والمجلات.
في المثال أدناه النص في رأس الجدول
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
زخرفة النص "text-decoration"
الخاصية text-decoration تمكنك من إضافة زخارف أو تأثيرات على النص، فمثلاً يمكنك أن تضيف سطراً أسفل النص، أو فوقه أو عليه، في المثال الآتي كل عناصر
فهي العناوين التي فوقها خط و قمنا بوضع الخط عليها.
وضعنا أسفلها خطاً أما قمنا بوضع الخط عليها.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
المسافة بين الحروف "letter-spacing"
The spacing between text characters can be specified using the property letter-spacing، القيمة المحددة لهذه الخاصية هي ببساطة عرض المسافة التي تريدها بين كل حرف وآخر، فمثلاً إذا أردت مسافة 3px بين الحروف في الفقرات
و6px بين الحروف في العناوين
فعليك أن تكتب الخصائص بهذا الشكل:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
تحويل النص "text-transform"
خاصية text-transform تتحكم بحجم الخط في اللغات الغربية، يمكنك أن تختار بين القيم capitalize أو uppercase أو lowercase، وبغض النظر عن كيفية ظهور النص الأصلي.
فمثلاً كلمة "headline" يمكن أن تظهر للمستخدم بهذا الشكل "HEADLINE"
أو بهذا الشكل "Headline"، هناك أربع قيم يمكنك استخدامها مع القيم
text-transform:
capitalizeتقوم بتكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".uppercaseتجعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".lowercaseستجعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".noneلن تقوم بعمل أي تأثير، النص سيظهر كما كتب في ملف HTML.
كمثال، سنقوم باستخدام قائمة أسماء، الأسماء كلها تستخدم العنصر
جرب وألقي نظرة على HTML لهذا المثال وسترى أن النص الأصلي كتب بحروف صغيرة.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
ترقبو الدرس القادم
mkm man- مشرف
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 387
نقاط العضو : 13423
شعبية العضو : 70
الموقع : www.mkmmazika.yoo7.com
العمر : 31
تاريخ التسجيل : 09/05/2010
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
بطاقة الشخصية
شات المنتدى:
- مساهمة رقم 2
رد: الدرس 4: النصوص
حلو كده
hassan_dmar- عضو ماهر
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 184
نقاط العضو : 10551
شعبية العضو : 4
الموقع : اول لفة على ايديك اليمين
العمر : 29
تاريخ التسجيل : 16/08/2010
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
- مساهمة رقم 3
رد: الدرس 4: النصوص
hassan_dmar- عضو ماهر
- النادى المفضل :
الجنسيه :
مزاجك ايه :
هوايتى :
المهنة :
الجنس :
عدد المساهمات : 184
نقاط العضو : 10551
شعبية العضو : 4
الموقع : اول لفة على ايديك اليمين
العمر : 29
تاريخ التسجيل : 16/08/2010
اوسمتى :
اوسمتى 2 :
اوسمتى 3 :
دعائى يارب تقبله :
- مساهمة رقم 4
رد: الدرس 4: النصوص
:)