الخميس، 27 مارس، 2014

تقنيات صفحات الأنماط CSS




تقنيات صفحات الأنماط 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>
في هذا البرنامج قمنا باستخدام الرمزين H1H2 سبق تعريفهم في لائحة <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 } .

ليست هناك تعليقات:

إرسال تعليق