كما رأيت دروس سابقة، يمكن
إضافة CSS من خلال
خاصية، فمثلاً يمكنك أن تضع نوع الخط وحجمه:
مثال 1:
|
<p style="font-size:20px;">مدونة محترفي الحماية</p>
<p style="font-family:courier;"> مدونة محترفي الحماية </p>
<p style="font-size:20px; font-family:courier;"> مدونة محترفي الحماية </p>
|
سيظهر بهذا الشكل في متصفحك
مدونة محترفي الحماية
مدونة محترفي الحماية
مدونة محترفي الحماية
في المثال أعلاه استخدمنا خاصية style لتحديد نوع الخط الذي نريد استخدامه من
خلال أمر font-family)
وحددنا حجم الخط من
خلال أمر font-size)، لاحظ كيف أن الفقرة
الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.
يبدو أن هذا يحتاج إلى الكثير من العمل؟
إحدى أذكى خصائص
CSS أنها
تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من استخدام خاصية style لكل وسم، يمكن أن تخبر المتصفح مرة واحدة
كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:
مثال 2:
|
<html>
<head>
<title>مدونة
محترفي الحماية</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2
{font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times
new roman";}
</style>
</head>
<body>
<h1> مدونة محترفي الحماية </h1>
<h2>مصدرك
الأول في عالم التقنية</h2>
<p>الدرس
الثاني في اكواد CSS </p>
</body>
</html>
|
سيظهر بهذا الشكل في متصفحك
مدونة محترفي الحماية
مصدرك الأول في عالم التقنية
الدرس الثاني في اكواد CSS
في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل
الصفحة، لفعل ذلك عليك فقط أن تضع الوسم <style type="text/css"> الذي يخبر المتصفح بأنك تستخدم CSS.
في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية
ستستخدم خطاً من نوع
Courier بحجم 15
بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roman" بحجم 8 بكسل.
هناك خيار آخر يتمثل في كتابة CSS في ملف منفصل، لأنك تستطيع من خلال
ملف منفصل أن تتحكم بتصميم صفحات عدة مرة واحدة، هذا أسلوب ذكي إذا أردت أن تغير
حجم الخط ونوعه في موقع كبير يحوي مئات أو آلاف الصفحات، لكننا لن نشرح ذلك الآن،
يمكنك أن تتعلم هذا في درس
CSS.
0 التعليقات :
إرسال تعليق