WEP.X
مرحبا بكم في موقع (WEP.X) موقع متخصص في علوم التكنولوجيا والبرمجة نقدم محتوي تعليمي عن لغات البرمجة وتكنولوجيا الحاسوب
الدرس الثالث في سلسلة تعلم (CSS)
المحتوي
- المقدمة
- محددات الخصائص [attr]
- خاصية text-transform
- خاصية text-decoration
- خاصية font-style
(المقدمة)
لغة css هي لغة واسعة مليئة باانواع محددات كثيررة بالاضافة الي خصائص كثيرة ايضا لكن كل هذه المعلومات مهمة وتساعد في تنسيق وتحسين مظهر كل جزء في الصفحة حتي اذا كان مجرد جزء صغير وغير مهم css تهتم جدا بالتنسيق الدقيق لكل محتويات الصفحة
وسنتعرف اليوم علي نوعين من المحددات ذات اهمية بالاضافة الي خصائص تنسيق النصوص وخصائص تنسيق الخطوط
محددات [attr]
ملحوظة:: attr اختصار (attribute) بمعني خاصية
محددات الخصائص هي تستخدم لتحديد عنصر يحتوي علي صفة معينة موجودة داخل العنصر اذا كانت موجودة سيتم تطبيق القواعد علي العنصر وهي تستخدم من خلال وضع اسم الخاصية داخل قوسين مربعين مصحوبين بأسم العنصر الذي يحتوي عليها
مثال
- p [name]{كتابة الخصائص هنا...}
هكذا سيتم تطبيق الخصائص علي كل عنصر p يحتوي علي الخاصية name بشكل مباشر داخل العنصر
يمكن ايضا :: النوع الثاني هو
ان نأخذ المثال السابق ونستبدل name ب name="القيمة"
بمعني ان نستهدف عنصر p الذي يحتوي علي الخاصية name والخاصية name لها قيمة معينة ايضا
مثال
- p [name="mahmod"]{كتابة الخصائص هنا...}
هكذا سوف يتم تطبيق قواعد التنسيق علي كل عنصر p يوجد داخله خاصية بأسم name وقيمتها=mahmod
وكل محددات الخصائص تكتب بهذه الطريق نضع اسم العنصر المستهدف ثم قوسين من نوع نصف مربع داخلهم اسم الخاصية او اسمها وقيمته معا
خصائص تنسيق النصوص
اولا الخاصيه :: (; :text-transform)
هي خاصية تستخدم لتنسيق النصوص كما يوحي اسمها هي تستخدم لتحويل حالة الأحرف سواء كانت كبيرة او صغيرة و تأخذ قيم
(uppercase) لتحويل الاحرف الصغيرة الي كبيرة
(lowercase) لتحويل الاحرف الكبيرة الي صغيرة
(capitalize) لتحويل اول حرف من كل كلمة الي كبير
مثال html
- <p name="mah">mahmod kamal</p>
css
- p [name="mah"]{text-transform:uppercase;
}
يظهر الناتج في المتصفح
MAHMOD KAMAL
ثانيا :: الخاصية(text-decoration)
هي خاصية تزيين العناصر وهي في الحقيقة تعمل علي وضع خط اسفل العنصر او فوقه او شطب العنصر وتأخذ قيم
(overline) لوضع خط فوق النص
(underline) لوضع خط اسفل النص
(line-through) لوضع الخط في منتصف العنصر بمعني شطب النص
(none) لألغاء تزيين العنصر ويظهر بالوضع الأفتراضي
مثال html
- <p name="ali">mahmod kamal</p>
css
- p [name="ali"]{text-decoration:underline;
}
يظهر في المتصفح
mahmod kamal
css
- p [name="ali"]{text-decoration:line-through;
}
يظهر في المتصفح
mahmod kamal
خصائص تنسيق الخطوط
سنذكر خاصية وحيدة فقط وهي
الخاصية (font-style)
التي تحدد شكل الخط وتأخذ قيم
(italic) لجعل النص مائل
(none) للوضع الأفتراضي
مثال html
- <p name="ara">mahmod kamal</p>
css
- p [name]{font-style:italic;
}
يظهر الناتج في المتصفح
mahmod kamal
mahmod kamal الأفتراضي
فيديو شرح
الخاتمة:-
هكذا اتممنا شرح جزء من محددات الخصائص مع خاصية
text-transform التي تحول حالة الاحرف وخاصية text-decoration الخاصة بوضع خط فوق او اسفل او شطب النص والخاصية font-style لجعل النص مائل