السلام عليكم ورحمة الله وبركاته
اليوم سوف أتطرق إلى شرح طريق تنسيق النصوص بتقنية Css بناء على طلب الأخواة والأخوات .
نبدأ على بركة الله .
الكثير من مصمموا الويب هذه اللغة Css تناسب احتياجاتهم من تنسيق النصوص أو أو محاذاة أو تشكيل أو غيرها ما علينا نبدأ في شرح الموضوع .
أولاً - كيفية تنسيق اللوان النص - Text Color :
إذا أردنا تغيير لون النص لأي عنصر في صفحة الويب نستعمل خاصية color ثم اللون الذي نريده ، مثال على ذلك :
{ ; body { color: #0012dd
- ومن خلال ذلك نستنتج بأن هنالك ثلاثة صيغ للألوان في تقنية Css :
1- الصيغة الأولى اسم اللون مثلاً "blue " نحو :
{ ;body { color: blue
2- الصيغة الثانية قيمة اللون في النظام الست عشري HEX ، وهذه هي قيمة اللون في النظام الست العشري : 0012dd# ويمكن أن نحصل على هدذ القيمة من هنا
3- الصيغة الثالثة صيغة RGB Decima "تعني blue, Green, Red" نحو :
( rgb( 0,18,221 ونحصل عليها من هنا
مثال على ذلك
_________
<html>
<head>
<style>
{;h1 { color:Red
{;h3 { color: Blue
{;p { color: Green
</style>
</head>
<body>
<h1>Red Text</h1>
<h3>Blue Text</h3>
<p>Green Text</p>
</body>
</html>
ثانياً - كيفية محاذاة النصوص :
وهي التحكم في اتجاه النص يمين يسار وسط .
1- اتجاه النص نحو اليسار : نجعل قيمة الخاصية text-align تساوي left ، نحو :
{;p { text-align: left
2- اتجاه النص نحو اليمين : نجعل قيمة الخاصية text-align تساوي right ، نحو :
{;p { text-align: right
3- اتجاه النص في الوسط : نجعل قيمة الخاصية text-align تساوي center ، نحو :
{;p { text-align: center
4- تنسيق النص وجعله متناسق : وهي القيمة justify تجعل النص متناسق متساوي من جهة اليمين واليسار وأيضاً تملىء الأسطر وتساعد في تنسيق الفقرات الكبيرة في مدونتك أو موقعك نحو :
{;p { text-align: justify
ثالثاً - كيفية تزيين النص : وهذه الخاصية تجعلك تزيين كلمة بل فقرات بكاملها أيضاً ، نحو وضع خط فوق كلمة أو تحتها ، وتستطيع فعل ذلك بإستخدام خاصية text-decoration :
- وضع خط تحت الكلمة : بأن نجعل قيمة الخاصية text-decoration تساوي underline ، نحو :
{ ;h3 { text-decoration: underline
- وضع خط فوق الكلمة : بأن نجعل قيمة الخاصية text-decoration تساوي overline ، نحو :
{ ;h3 { text-decoration: overline
- وضع خط وسط الكلمة : بأن نجعل قيمة الخاصية text-decoration تساوي line-through ، نحو :
{ ;h3 { text-decoration: line-through
- إزالة التزيين عن الكلمة : بأن نجعل قيمة الخاصية text-decoration تساوي none ، نحو :
{ ;h3 { text-decoration: none
رابعاً - كيفية تحويل النصوص :
بهذه الخاصية نحول النصوص من أحرف كبيرة UPPERCASE إلى أحرف صغيرة lowercase وهذه الخاصية تستعمل مع حروف اللغة الانجليزية ونستعمل لها هذه الخاصية : text-transform :
- تحويل النص إلى أحرف كبيرة : إذا أردنا أن نجعل أحرف النص بشكل كبير ، بأن نجعل قيمة الخاصيةtext-transform تساوي uppercase ، نحو :
{ ;p { text-transform: uppercase
- تحويل النص إلى أحرف صغيرة : إذا أردنا أن نجعل أحرف النص بشكل صغير ، بأن نجعل قيمة الخاصيةtext-transform تساوي lowercase، نحو :
{ ;p { text-transform: lowercase
- أن نجعل كل كلمة في النص تبدأ بحرف كبير : إذا أردنا أن نجعل كلمة النص أن تبدأ بحرف كبير أن نجعل قيمة الخاصيةtext-transform تساوي capitalize، نحو :
{ ;p { text-transform: capitalize
خامساً - التحكم بالمسافة البادئة للنصوص :
{ ;p { text-indent: 50px
- ملحوظة : كلما زادت القيمة بالبيكسل كلما زادت المسافة البادئة للسطر الأول .
حفظك الله ورعاك على هذا الشرح الجميل , رغم انني لست بتلك الخبرة ولكني سوف احاول واشكرك كثيرا على بذل جهدك في هذا الشرح ويعلم الله يعجز لساني عن وصفك ,
ردحذفاما بالنسبة للشرح اتوقع انني سوف اطحن به الكثير حتى اعرفه , واتمنى ان تسهل لي المشوار , قد تكون كتبتها انت في الشرح ولكن يبدو لي انني لم انتبه لها ,
وهي انني كل ما اريده هو تصليح هوامش النبذه الخاصة بالكاتب كما عرضتها انت في موضوعك الاول فهل سوف اجد هذه الكلمة في القالب الخاصة بالنبذه الخاصة بالكاتب
وهي رقم 4
4- تنسيق النص وجعله متناسق : وهي القيمة justify تجعل النص متناسق متساوي من جهة اليمين واليسار وأيضاً تملىء الأسطر وتساعد في تنسيق الفقرات الكبيرة في مدونتك أو موقعك نحو :
{;p { text-align: justify
فهل هذا صحيح الرجاء تصحيح معلوماتي كما ذكرت لك فانا لست بتلك الخبرة واريدك ان تسهل لي الموضوع حفظك الله