تبدوا الخطوط من أبسط العناصر في صفحة HTML لكن رغم بساطتها تحتاج للتعرف على بعض الخصائص من أجل التحكم بها بشكل جيد وطريقة عرضها على الموقع , سنتعرف على خاصية تمكننا من تحديد الخطوط الإفتراضية وماذا يحصل في حالة عدم توفر خط من الخطوط المستخدمة.
خاصية Font Family
خاصية ال Font Family تستخدم من أجل إضافة عائلة خطوط التي من المفترض أن يتم إستخدامها في موقعك, حيث تقوم بإضافة مجموعة من الخطوط المتقاربة , بحيث الخط الأول هو الإفتراضي , على سبيل المثال :
p {
font-family: Arial, Helvetica, sans-serif;
}في كود CSS هذا عندما سيدخل المتصفح ويقوم بجلب أسماء الخطوط , سيقوم أولا باستخدام الخط الأول أي “َArial” في حالة كان غير متوفر سيقوم بجلب الخط “Helvetica” بالتالي فائدة هذه الخاصية هو التحكم في الخطوط ثم إعطاء المتصفح خيارات بديلة في حالة لم يكن الخط الإفتراضي متوفر, طبعا هناك الكثير من القواعد الأخرى المتعلقة بالخطوط مثل طريقة إستخدام خطوط من مواقع خارجية , وأيضا كتابة أسماء الخطوط الطويلة والتي يجب أن تكتب بين ” ” على هذا الشكل :
p {
font-family: "Time New Roman";
}شكل الخط وحجم الخط
من الخصائص المهمة الأخرى هي “Font-style” و “Font-size” المهمين للتعامل مع الخطوط يستخدمان على هذا الشكل :
p {
font-style: italic;
font-size: 25px;
} بالنسبة للخاصية “font-style” فهي تتحكم في شكل الخط , وهي لا تقبل الكثير من القيم , في المثال أعطينا القيمة “italic” والتي تقوم بعرض الخط مائل , أو يمكن أن تعطيها القيمة الإفتراضية “normal” .
أما فيما يخض “font-size” فهي الخاصية التي تمكن من التعامل مع حجم الخط المستخدم ,وهي يمكن أن تقبل الكثير من القيم المختلفة مثل :
- الطول ويمكن إستخدام وحدة ال px أو cm مثال : font-size: 25px;
- القيمة medium وهي القيمة الافتراضية مثال : font-size: medium;
- القيمة large وتعطي للخط أكبر قيمة ممكنة مثال : font-size:large;
- القيمة “%” وهي تأخذ النسبة التي يجب أخدها من الخط الأب مثال : font-size: 70%;
يمكنك التعرف على المزيد من خلال موقع موسوعة حسوب.
الروابط في CSS
الروابط من العناصر المهمة التي تساعد على التنقل بين صفحات الموقع الداخلية , وأيضا بين روابط المواقع الخارجية , من أجل تنسيق الروابط ستجد الكثير من الخصائص التي يمكنك إستخدامها , من أجل التجربة قم أولا بفتح ملف index.html وقم بكتابة التالي :
<a href="http://mawdo3.com"> موقع موضوع </a>قم بحفظ التعديلات , الآن قم بفتح ملف التنسيق style.css وقم بكتابة التالي :
a {
color: blueviolet;
}استخدمنا في المثال العنصر أو الوسم <a> وهو المستخدم من أجل الإشارة إلى الروابط . وأعطيناه الخاصية color التي أخذت القيمة “blueviolet” الأن بعد فتح ملف index.html من خلال المتصفح ستجد أن كلمة “موقع موضوع” ستأخذ نفس اللون الذي قمنا بالإشارة له وهو اللون “blueviolet” وهو لون يختلف عن اللون الإفتراضي للروابط, لاحظ أيضا أن عبارة “موقع موضوع” تحتها خط , يمكنك إزالته عبر إضافة التالي إلى كود CSS
a {
color: blueviolet;
text-decoration: none;
}خاصية “text-decoration” أعطيناها القيمة “none” من أجل إزالة التنسيق الإفتراضي والذي كان عبارة عن خط تحت الرابط.
من خصائص الرابط هي تغيير لونه أو شكله عند تمرير المؤشر فوقه, وهذه الخاصية تسى ال “hover” وهي تستخدم على هذا الشكل :
a:hover{
color: brown;
}قم بحفظ التعديل ولاحظ أنه عندما تقوم بتمرير المؤشر فوق الرابط سيتغير لونه إلى اللون المشار إليه في خاصية ال “hover” والذي في هذه الحالة هو اللون “brown” .
القوائم في CSS
تعرفنا في درس HTML على القوائم أو List والتي تنقسم إلى القوائم المرتبة “ol” والقوائم الغير مرتبة “ul” , من أجل التعرف على خيارات تنسيق القوائم , سنقوم أولا بإنشاء قوائم من خلال ملف html الذي نعمل عليه
<ul>
<li> عنصر 1 </li>
<li> عنصر 2 </li>
</ul>الأن قم بفتح ملف التنسيق style.css لنتعرف على الخيارات المتوفرة للتعامل مع القوائم , نكتب التالي :
ul {
list-style-type: disc;
}الأن قم بمعاينة التغييرات من خلال المتصفح, وستلاحظ طبعا أن القائمة الغير رتبة <ul> لم يحدث بها أي تغيير , والسبب أن القيمة “disc” التي أعطيناها للخاصية “list-style-type” هي القيمة الإفتراضية أساسا والتي تضيف إلى عناصر القائمة تنسيق على شكل نقاط, حاول الأن أن تقوم بتغيير القيمة “disc” ب “square” ستلاحظ أن أن تنسيق القوائم تحول من نقاط دائرية إلى مربعات, في حالة كنت تريد إزالة أي تنسيق يمكنك وضع القيمة “none” على هذا الشكل :
ul {
list-style-type: none;php
}يمكنك أيضا أن تضيف صورة على شكل أيقونة بدل الدوائر أو المربعات
ul {
list-style-image: url('small.png');
}طبعا التعامل مع القوائم مهم للغاية , وهذه الأمثلة هي فقط من أجل أخذ فكرة أولية عن طريقة تنسيق القائمة , رغم ذلك الأمثلة الحقيقية هي إنشاء قوائم مثل القوائم التي توجد في الواقع , والتي تكون أفقية أو عمودية وبأشكال وأحجام مختلفة , وطبعا سنتعرف في دروس قادمة على طريقة تصميم قوائم من الصفر.