خصائص التنسيق في CSS
خصائص تنسيق النصوص, في الدرس السابق تعلمنا الفئة الزائفة و استخدمنا بعض الخصائص من الدروس السابقة و هذا يجب أن يُعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تفعلها, في هذا الدرس سوف نعلمك كيف تحدد خصائص معينة لمجموعة من العناصر أو لعنصر معين.
خاصية line-height خصائص التنسيق في CSS
إن line-height تقوم هذه الخاصية بإعطاء المسافات بين السطور و يمكن تحديد المسافات بـ ( em, px, % ).
مثال
<body>
<p>Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
<hr>
<p class="var1">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
<hr>
<p class="var2">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
<hr>
<p class="var3">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
<hr>
<p class="var4">Welcome Programmer Tech <br> AhmedKaissar <br> and MuammadAlush</p>
<hr>
</body>قمنا بإنشاء خمس فقرات و قمنا بربط الفقرات عبر كلاسات ليتم إعطائهم التنسيق عن طريق CSS.
كود CSS
<style>
p.var1 {
line-height: 3.5em;
}
p.var2 {
line-height: 60px;
}
p.var3 {
line-height: 200%;
}
</style>قمنا بإعطاء التنسيقات عبر الكلاسات الموجودة في كود HTML و التنسيق هو line-height في البداية وضعنا القيمة 3.5em و الثاني 60px و الثالث 200%, و عند تشغيل الكود سوف تكون النتيجة.
1صورة /////////////////
خاصية list-style-position خصائص التنسيق في CSS
تحدد list-style-position موقع القائمة و تأخذ بعض القيم (outside, inside, hanging).
مثال
<body>
<ul id="var1">
<li>MuhammadAlush</li>
<li>AhmedKaissar</li>
<li>SajaAlsadig</li>
</ul>
<ul id="var2">
<li>Python</li>
<li>Html</li>
<li>CSS</li>
</ul>
<ul id="var3">
<li>Java</li>
<li>JavaScript</li>
<li>dbs</li>
</ul>
</body>أنشأنا ثلاث قوائم تحتوي على ثلاث مهندسين و كل مهندس يقوم بتدريس لغات معينة ووضعنا id لكل قائمة من أجل تنسيقها عن طريق CSS.
كود CSS
<style>
#var1 {
list-style-position: outside;
}
#var2 {
list-style-position: inside;
}
#var3 {
list-style-position: hanging;
}
</style>إستخدمنا list-style-position من أجل تنسيق القوائم الثلاثة و الأول كانت قيمته outside و الثاني inside و الثالث hanging, و عند تشغيل الكود ستكون نتيجته بالشكل
خاصية list-style-type خصائص التنسيق في CSS
الخاصية list-style-type تحدد شكل و نوع الترقم و تأخذ بعض القيم منها:
- circle.
- square.
- lower-roman.
- lower-alphe.
- upper-alpha.
مثال
<body>
<p>Welcome</p>
<ul class="a">
<li>MuhammadAlush</li>
<li>AhmedKaissar</li>
<li>SajaAlsadig</li>
</ul>
<p>Welcome</p>
<ul class="b">
<li>Python</li>
<li>Html</li>
<li>CSS</li>
</ul>
<p>Welcome</p>
<ul class="c">
<li>Java</li>
<li>JavaScript</li>
<li>dbs</li>
</ul>
<p>Welcome</p>
<ul class="d">
<li>php</li>
<li>ASP</li>
<li>Perl</li>
</ul>
</body>أنشأنا 4 فقرات و كل فقرة بها عدة قوائم و أعطيناهم id لكل قائمة من أجل التنسيق, و كود CSS سيكون بالشكل
<style>
ul.a{
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ul.c {
list-style-type: lower-roman;
}
ul.d {
list-style-type: lower-alpha;
list-style-type: upper-alpha;
}
</style>إستخدمنا list-style-type من أجل إعطاء التنسيق للقوائم و كانت قيمة الأولى circle و قيمة الثانية square و قيمة الثالثة lower-roman و قيمة الرابعة lower-alpha و قيمة الخامسة upper-alpha.
خاصية list-style-image خصائص التنسيق في CSS
تستخدم list-style-image لتحديد صور إلى الترقيم.
مثال
<body>
<p>Welcome</p>
<ul>
<li>MuhammadAlush</li>
<li>AhmedKaissar</li>
<li>SajaAlsadig</li>
</ul>
</body>قمنا بإنشاء فقرة و قائمة بها ثلاث عناصر و سوف نطبق الخاصية list-style-image على هذه العناصر لكي يتم ترقيم العناصر بصور, و كود CSS سيكون بالشكل.
<style>
ul {
list-style-image: url(Muh.png);
}
</style>قمنا بإستخدام list-style-image من أجل ترقيم القائمة و مررنا لها القيمة و هي رابط الصورة الموجودة ضمن مجلد العمل الحالي أي مسار الصورة.
تحديد إتجاه الكتابة Writing direction خصائص التنسيق في CSS
سنتحدث عن خاصية تسمى direction إذا كان لديك موقع باللغة العربية هذه الفقرة سوف تفيدك كثيراً لتحديد إتجاه الكتابة به, لأن في اللغة العربية الكتابة تكون من اليمين, أما اللغات الأجنبية يبدأ الإتجاه من اليسار حتى و إن لم نستخدم اي خواص, لهذا الأمر تتوفر لدينا طريقتين و هما الأولى عبر اكواد html و الثانية من خلال css.
1-الطريقة الأولى عبر html
لجعل المحتوى يظهر من جهة اليمين و ليس اليسار نقوم بالتوجه للوسم body و نضيف له الخاصية dir و نعطيها القيمة rtl اي من اليمين, في حال كنا نريد ستخدام الإتجاه انجليزي من اليسار نضع القيمة ltr.
مثال
<body dir="rtl">
<h1>موقع لتعلم لغات البرمجة و أمن المعلومات</h1>
<p>موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات</p>
</body>2-الطريقة الثانية عبر css
نقوم بتحديد العنصر body ثم نقوم بإستخدام direction و القيمة rtl لكي يقوم بتحويل جميع ما يكتب بالصفحة من اليمين.
body{
direction: rtl;
}لمشاهدة تغيير إتجاه النصوص فيديو على يوتيوب من هنا.
