مدخل في CSS
CSS أو صفحات الأنماط (الانسيابية أو المتعاقبة أو المتسلسلة) بالانجليزية: Cascading Style Sheets.
تعريف :
CSS هي لغة تنسيقية تُستخدم في تنسيق مستندات وملفات مكتوبة بصيغة معينة مثل صفحات HTML أو مستندات XML بما في ذلك التخطيط والألوان والخطوط .
الغرض الرئيسي من لغة CSS هو تمكين الفصل بين شيفرة المحتوى وشيفرة العرض.
استخدام لغة CSS:
تمكنك التحكم في شكل و تصميم صفحات متعددة من موقع الويب بورقة أنماط واحدة (أي التخطيط والتنسيق) لصفحات الويب.
طرق كتابة اكواد :
توجد ثلاثة طرق لكتابة اكواد CSS
1 -كتابة التنسیق في القسم style في داخل أي وسم من وسوم html مثال:
<p style=”font-size:20pt; font-family:nour; > the text </p>
2 -كتابة كود CSS في الجزء <head <في صفحة html
ثم على سبيل المثال:
<html> <head>
<style type=”text/css”>
p { font-size:20pt; color:#000; }
</style> </head>
<body>
<p> the text </p>
</body> </html>
3 -و كتابة الكود كذلك مدخل في CSS في ملف خارجي عن صفحة html وھذه أفضل طریقة إذا كانت لدینا عدة
صفحات
و على سبيل المثال:
p { color:red;
background-color:yello; }
h1 { color:black; }
خصائص مظھر النصوص :
Text-transform:
1 .Uppercase لجعل الحروف كبیرة .
2 .lowercase لجعل الحروف صغیر .
3 .capitalize لجعل الحرف الاول فقط من كل كلمة حرفا ً كبیرا.
إذا على سبيل المثال:
p { text-transform:uppercase; }
text-decoration:
1.underline تجعل خط اسفل النص .
2 .overline كذلك تجعل خط فوق النص .
3 .through-line تجعل الخط في منتصف النص .
4 .none تخفي الخط ولا تجعلھ ظاھر .
من ناحية أخرى:
a { text-decoration:none; }
text-align:
وھي تستخدم لمحاذاة النص وتحدید مكانھا و كذلك لمساواة اسطر الفقرة , وھي تأخذ احد القیم
التالیة :-
1 .left لمحاذاة النص إلى جھة الیسار .
2 .right لمحاذاة النص إلى جھة الیمین .
3 .top لمحاذاة النص إلى الأعلى .
4 .bottom لمحاذاة النص إلى الأسفل .
5 .center لمحاذاة النص إلى المنتصف .
6 .justify كذلك تجعل جمیع اسطر الفقرة متساویة.
مثال:
p { text-align:left; }
direction :
لتحدید اتجاه النص من الیمین إلى الیسار او كذالك بالعكس , وتأخذ القیمتین
التالیتین :-
1 .rtl من الیمین إلى الیسار .
2 .ltr من الیسار إلى الیمین .
هكذا:
body { direction:rtl; }
letter-spacing:
تبعد بین الحروف في الكلمة الواحدة وتأخذ قیمة رقمیة .
كما:
p { letter-spacing:10px; }
word-spacing:
الخاصیة للتبعید بین الكلمات ( بین كلمة وكلمة أخرى ) وھي كذلك تأخذ قیمة رقمیة .
على سبيل المثال:
p { word-spacing:10px; }
line-height:
ھذه الخاصیة لتحدید التباعد بین اسطر الكتابة , بمعنى لو كان لدینا نص كبیر یمتد لعدة
اسطر یمكننا التحكم بتباعد ھذه الأسطر من خلال ھذه الخاصیة , مع ملاحظة أن ھذه الخاصیة
تطبق إذا كان ھذا النص الكبیر في فقرة واحدة ( وسم html واحد ) ولیس في أكثر من فقرة ,
وھي تأخذ قیمة رقمیة
في النهاية يمكنك إشتراك في المدونة مقالنا القادم في هذه السلسلة سيكون بحول الله عن خصائص الخطوط .
[…] مدخل في CSS […]
[…] معينًا من المعرفة والفهم لتقنيات تطوير الويب مثل HTML و CSS و JavaScript و PHP. من المهم أن يكون لديك فهم جيد لهذه […]
[…] يمكنك أيضًا إنشاء المظهر الخاص بك باستخدام كود HTML و CSS […]
[…] بك ، يمكنك تخصيصه حسب الحاجة. يمكن أن يشمل ذلك إضافة CSS مخصصة ، وتغيير تخطيط النموذج ، وإضافة حقول إضافية مثل […]
[…] تخصيص موقع الويب المكون من صفحة واحدة ، يمكنك استخدام CSS لتغيير مظهر موقع الويب الخاص بك. CSS (أوراق الأنماط […]
[…] بالإضافة إلى ذلك ، يسمح أيضًا للمستخدمين بإضافة CSS و JavaScript مخصصين لتخصيص النموذج بشكل […]