تقنيات
صفحات الأنماط CSS
ý نظرة عامة .
ý أنواع لوائح الأنماط .
ý الصيغة العامة لصفحة النمط CSS Syntax .
ý تداخل الأنماط وترتيب العمل .
نظرة
عامة :
نتحدث عن أساليب تصميم الصفحات باستخدام تقنية يطلق عليها Cascading Style Sheetوتختصر CSS ويمكن ترجمتها مجازا (صفحات
الأنماط المتتابعة ) وتقنية CSS أوCascading Style
Sheet فهذا الاصطلاح يستخدم للإشارة
إلي طرق متعددة لتطبيق عناصر النمط علي صفحة HTMLوفي هذه الحالة يجب أن تعتبر النمط
أو Style واحد من
عناصر التصميم التي تستخدمها لتصميم صفحات HTML مثل الخلفية والنصوص وألوان الارتباطات والهوامش و
أماكنه الصور التي تستخدمها في صفحات HTML.
أستخدم مصممي HTML في البداية
لتكون لغة تنسيق وكانت مسئوليتها فقط إخراج الصفحة بشكل جيد بحيث تشتمل علي
المحتوي Body والرأس
والفقرات وعناصر قليلة أخري مثل القوائم المرقمة ، فمصممي Web ومصممي
برامج استعراض الصفحات فهم اللذين فكروا في استخدام الأنماط الأساسية داخل لغة HTML.
وتكون الفكرة هي عندما نشرع في كتابة برنامج بلغة HTML فإن أول شئ
نفعله أن نقوم بكتابة النمط Style ثم نكتب البرنامج ونستعين بالنمط أحيانا وأحيانا
أخري تترك النمط يتم تطبيقه دون تدخل منا. فنكتب هذا البرنامج البسيط ونلاحظ في
الأنماط CSS من البداية
. نفتح Notepad في مستند جديد نكتب الأتي :
<HTML>
<HEAD>
<TITLE> Style Sheet </TITLE>
<!………..Styleبداية الكتابة في النمط >
<STYLE>
H1 {Font-Size:18pt;
Font-Family: Tahoma; Color:#CC3300; }
H2 {Font-Size: 14pt;
Font-Family: Bookman,OldStyle; Color: Green;}
</STYLE>
</HEAD>
<BODY>
<h1>Using H1 From Style Sheet</H1>
<H2> Using H2From Style Sheet</H2>
</BODY>
</HTML>
في هذا البرنامج قمنا باستخدام الرمزين H1’H2 سبق تعريفهم في لائحة <STYLE> قمنا بتعريف
نوع الخط Font-Faimly واللون Color وحجم الخط FontSize وعند التنفيذ
فسوف تحل القيم الموجودة في النمط محل القيم الافتراضية للرموز
أنواع
الأنماط :
الرمز <STYLE> يشتمل علي
العديد من العناصر والأدوات الممكن استخدامها لتحسين تصميم الصفحات :
v
InLine : يمكن استخدام
الرمز Style كعنصر داخل أي نوع رمز من رموز البرنامج مثل أن تستخدم رمز الفقرة
<P> ونضيف إلية Style مثل <P Style
=******> .
v
Embedded : وهي الطريقة
التقليدية بحيث نقوم بأعداد النمط في بداية البرنامج داخل القسم الخاص بالعناوين <HEAD>
</HEAD> وبهذه
الطريقة تستطيع تحديد النمط المستخدم .
ويمكن إضافة خصائص لبعض العناوين التي يتم الإشارة إليها من داخل البرنامج
باستخدام العنصر Class= وتستخدم
القيم المضافة للعنوان من ألوان وخطوط وغيرها وتكون هكذا <P CLASS=Gnrl > .
v
LINKED : يستخدمها
مصمموا صفحات ويب هذه الطريقة تعتمد علي أن تضع لائحة الأنماط القياسية الخاصة بك
في ملف يحمل الامتداد CSS ثم تقوم باستخدام هذه النمط في البرنامج التي نكتبها بلغة HTML وتكتفي الإشارة إلي أسم وموقع الملف الذي يتضمن هذه النمط .
النوع
الأول InLine :
سوف نقوم بعمل برنامج بلغة HTML ستستخدم النمط داخل رموز لغة HTML المعتادة
لكي نستفيد م الإمكانات المتوفرة مع الأنماط Style وهو استخدام Style كعنصر من عناصر أي رمز من رموز البرنامج ، نكتب هذا
البرنامج :
<HTML>
<HEAD>
<TITLE>INLINE
STYLE </TITLE>
</HEAD>
<BODY>
<H3>Testing
Inling Style </H3>
<P Style="FONT-SIZE:14pt;
FONT-FAMILY:Bookman,OldStyle; Color:navy;”>
Sse
Inline Style To assign Fonts Color and Size to This Paragraph </P>
</BODY>
</HTML>
النوع
الثاني Embedded :
يعتمد علي إعداد لائحة لأنماط Style
SheeT في القسم الأعلى من البرنامج <HEAD> وتشتمل هذا النمط علي النمط علي العناصر التي سوف
تستخدمها في البرنامج والقيم المضافة لهذه العناصر، وتشتمل علي إضافة بعض العناوين
التي سوف نشير إليها لتستخدم خصائص داخل البرنامج.نكتب هذا البرنامج ليبن لنا هذا
:
<HTML>
<HEAD>
<TITLE> Embldded
Style </TITLE>
<STYLE>
BODY { COLOR : #FFCC66; }
P { FONT-SIZE : 11pt; FONT FAMILY : Arial, Helvetice; Color :
#000000; Line-Height : 12pt; }
H1 { FONT-SIZE:14pt; FONT FAMILY:Arial,Helvetice; Color : #CC3300; }
A { COLOR : Blue; FONT-WEIGHT:Bold; }
A:Vctive { COLOR : Red; }
A:Active { COLOR : #Navy ; }
A:Hover { COLOR : #FFFFFZ;}
.Redheader
{ FONT-SIZE : 11pt; FONT FAMILY : Arial, Helvetice; Color : #CC3300;
FONT-WEIGHT:Bold}
.Address { FONT-SIZE : 8pt; FONT FAMILY : Arial, Helvetice; Color :
#999933;}
</STYLE>
</HEAD>
<BODY BGCOLOR=”#CCDDEE">
<H1>Good Moring </H1>
<P>Many of TV Channel World wide Present aprogrm called
Good Morning.
<P CLASS=”Redheader”>
<B> BUT!</B></P>
<P>There is one TV channel has two progrms,
one for morning while the other for evening.
<P CLASS=” Redheader”><B>Canyou
tell me which channel is doing this?</B>
<DIV ALIGN=”Right">
<FONT FACE=” Arial,
Helvetice, Sans-serif” SIZE=”2” COLOR=”#999459”>
<SPAN CLASS=”Address">
<P><BR><A HREF=”A12.HTML”> <B> Contact
Me </B></A> <BR><BR><BR>
</Span>
</DIV>
&Copy;Copyright2000;
OSSAMA Mohammad Aikef
</BODY>
</HTML>
النوع
الثالث Linked :
هذا النوع لمحترفي تصميم صفحات ويب فهو ببساطة عبارة عن تصميم لائحة أنماط
وحفظها في ملف من نوع CSS ويتم
الارتباط بهذه النمط من خلال البرنامج .
ونقوم بتجربة هذا الرمز في البرنامج التالي :
BODY { BackGround: #000000;
Color: #FFFFCC; }
H1 { Font; 20pt Arial; Color:
#CCCCCC; }
P { Font: 14pt Arial; }
A { Color: #FF0000; Text-Elecoation:
None; }
نحفظ هذا النمط بأي أسم ولكن يكون الامتداد CSS نلاحظ أن هذا النوع من الملفات
يتم فتحة مباشرة من خلال “Front Page” . نقوم
الآن بكتابة البرنامج وعمل ارتباط بهذه النمط ولعمل الارتباط نستخدم الرمز التالي
:
<LINK REL=StyleSheet
HREF=King.CSS TYPE=”Text/CSS”>
نكتب هذا المثال في البرنامج نفتح ملف Notepad وفي مستند جديد نكتب .
<HTML>
<HEAD>
<TITLE> Linked Style Sheet </TITLE>
<LINK REL=StyleSheet HREF=King.CSS TYPE=”Text/CSS”>
</HEAD>
<H1><B> There is one TV channel has
two progrms, one for morning while the other for evening. </B></H1>
<P>Many of TV Channel World wide Present aprogrm called
Good Morning.
<P><A HREF=King.13.HTML>Contaet</A>
</BODY>
</HTML>
الصيغة
العامة للأنماط CSS Syntax :
يصعب حصر كل قواعد التي تدخل في بناء لوائح الأنماط Style Sheet وتتكون
القاعدة من عنصر اختيار Selector ربما يكون أحد رموز HTML ثم خصائص تضاف لهذا العنصر
وقيم تضاف إلي الخصائص وتتكون من :
¨
عنصر الاختيارSelector :
يستخدم لتحديد الخصائص وقيمها وعادة يكون أحد رموزHTML مثلHeadr,H1,P كما قد يشمل P.Stylesheet والتي
بواسطتها تتمكن من استخدام المرجعين Class.
¨
الخصائص Property : يستخدم لتحديد خصائص لعنصر الاختيار مثل Fonts ,Margins, BackGround وتلك
الخصائص سوف يتم تحديد فيها في بند القيم .
¨
القيم Values : يستخدم لإضافة قيم إلي الخصائص المحددة لعنصر
الاختيار إذا كان العنصر المختار هو H1 فالخصائص المحددة لهذا العنصر ربما تكون Type-Family فيمكن
أن تكون القيمة هي شكل الخط Face مثلا Arial. القاعدة تتكون من العنصر والخصائص والقيم مثلا :
H1 { Font-Family : Arial }
طريقة بناء القاعدة تتضمن أسم العنصر ثم نكتب
الخصائص وقيمتها بين زوجين من الأقواس { } كما نكتب الخاصية متبوعة بنقطيين :
أما القيمة
فنتبعها بعلامة ; الفصله المنقوطة . يبدا النمط بالرمز <STYLE> وينتهي
بالرمز </STYLE> ونوضح بعض الخصائص المحاذاة وقيمها :
v
MARGIN-LEFT : لترك مسافة في الجهة اليسار من الصفحة بالبوصة أو السنتمتر .
v
MARGIN-RIGHT : لترك مسافة في الجهة اليمين من الصفحة بالبوصة أو السنتمتر .
v
MARGIN-TOP : لترك مسافة في اعلي الصفحة بنفس وحدات القياس .
v
TEXT-INDEENT : لترك مسافة لمحاذاة النصوص باستخدام نفس وحدات القياس .
v
TEXT-ALIGN : يعتبر من أهم الخصائص التي تمكننا من محاذاة
النصوص نحو اليسار أو اليمين أن المنتصف Left, right, Center نكتب {TEXT-ALIGN: Right } .
ليست هناك تعليقات:
إرسال تعليق