Xacker
18-03-2003, 11:41 AM
السلا عليكم ورحمة الله وبركاته
نتابع اليوم ما انتهينا عنده الدرس الماضي .. ارجو الانتباه لان درس اليوم معقد بشكل بسيط واي اسئلة عليه انا جاهز
بسم الله نبدا
راينا في الدرس السابق كيف يتم استخدام <SPAN> لتضمين سمات CSS في عنوان صفحة ويب
وكيف يمكن استخدام <SPAN> و <DIV> لاضافة عناصر CSS ضمن جسم صفحة ويب
لكن الخيار الثالث الذي يتم بواسطته تحديد عناصر CSS بطريقة مختلفة تماما لعله الاكثر شيوعا لدى مؤلفي ويب
بتحديد سمات العرض والتخطيط في صفحة ويب منفصلة يمكنك تعديل اسلوب مجموعة صفحات ويب التي تستخدم شفرة HTML المعتادة
لعمل ذلك عليك باشنء صفحة ويب لا تحوي الا معلومات CSS
ثم يمكنك ربط صفحات ويب اخرى الى صفحة CSS وذلك باستخدام المعرف LINK
على سبيل المثال يمكنك ملاحظة الشيفرة التالية وهي جزء من صفحة ويب لا تحوي سوى معلومات تنسيق CSS:
A:LINK {
COLOR: BLUE;
TEXT-DECORATION: UNDERLINE;
}
A:VISITED {
COLOR: PURPLE;
TEXT-DECORATION: UNDERLINE;
}
A:ACTIVE {
COLOR: RED;
TEXT-DECORATION: UNDERLINE;
}
P.PREFACE {
TEXT-ALIGN: RIGHT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 0.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-LEFT: 12.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 48.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: ITALIC;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: TIMES NEW ROMAN, VERDANA, ARIAL;
}
P.MAPPING TABLE CELL {
TEXT-ALIGN: LEFT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 2.000000PT;
MARGIN-BOTTOM: 2.000000PT;
MARGIN-LEFT: 0.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 12.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: TIMES NEW ROMAN, VERDANA, ARIAL;
}
P.COURIERLINE {
TEXT-ALIGN: LEFT;
TEXT-INDENT: 72.000000PT;
MARGIN-TOP: 0.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-LEFT: 72.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 7.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: MONO SPACED;
}
H1.1SECTION, H2.1SECTION, H3.1SECTION, H4.1SECTION, H5.1SECTION, H6.1SECTION {
TEXT-ALIGN: RIGHT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 6.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-RIGHT: 12.000000PT;
MARGIN-LEFT: 0.000000PT;
FONT-SIZE: 24.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: HELVCONDBLK;
}
هذه المعلومات مخزنة في ملف يدعى TEST.CSS لاحظ كيف تقوم بتعديل خصائص العرض لعدد من معرفات HTML المعتادة
وتقوم بتحسين بعضها ضمن اصناف محددة
الطريقة التي يتم فيها ترتيب معلومات CSS تشبه كثيرا ترتيب المعلومات في المعرف <STYLE> لكن يتم ربطها باستخدام الاقواس المعقوفة { و } لربط هذه المعلومات بحيث يمكن تطبيقها في صفحة ويب اخرى
يجب عليك استخدام المعرف <LINK> ضمن عنوان صفحة ويب:
<HEAD>
<LINK REL=STYLESHEET HREEF="TEST.CSS" TYPE="TEXT/CSS">
</HEAD>
قد ترغب في استخدام بعض خصائص CSS المحددة في صفحة CSS التي عرضناها سابقا وكل ما عليك فعله هو تحديد الصنف مثل P.PREFACE او P.MAPPING TABLE CELL او P.COURIERLINE وذلك باستخدام سمة تدعى CLASS والتي يمكن استخدامها لتحديد اسلوب CSS كما يلي:
<P CLASS="PREFACE">
مرحبا بك في هذه الصفحة
</P>
يمكن استخدام نفس الاجراء ضمن صفحة ويب عادية بحيث يتم استدعاء عناصر CSS لصنف معين وذلك ضمن صفحة ويب
تبين الشيفرة التالية ما اقصد حيث يتم تحديد واستدعاء 3 نماذج مختلفة من معرف الخط السميك <B> ضمن صفحة ويب
<HTML>
<HEAD>
<STYLE>
B.FUCHSIA {COLOR: FUCHSIA; FONT-SIZE: 32PT;}
B.LIME {COLOR: LIME; FONT-SIZE: 18PT; FONT-STYLE: ITALIC}
B.NAVY {COLOR: NAVY; FONT-SIZE: 18PT}
</STYLE>
</HEAD>
<BODY>
<B CLASS=LIME> مرحبا بك مع هذا الخط المائل والملون بالليموني
</B><P>
<B CLASS=FUCHSIA>والان باللون الزهري بحجم اكبر
</B><P>
<B CLASS=NAVY> واخيرا للون الازرق البحري الاضخم
</B>
</BODY>
</HTML>
لاحظ كيف يتم ربط سمات متعددة ضمن صنف CSS واحد باستخدام الفاصلة المنقوطة (;)
لا توجد حدود لعدد السمات التي يمكنك اضافتها بهذه الطريقة
في بعض الحالات من المرغوب تحديد عدة خصائص عناصر CSS معا كي تكون قادرا على تخفيض حجم الشيفرة الكلي
على سبيل المثال افترض انك تريد عرض عدة عناوين بنفس الطريقة اجمالا ستقوم بتحديدهم غرادى كما في قصاصة الشيفرة التالية:
<STYLE>
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H2 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H3 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
</STYLE>
يمكن انجاز الشيفرة السابقة بتحديد جميع هذه العناصر معا:
<STYLE>
H1 H2 H3{FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
</STYLE>
كما انه من الممكن اضافة التعليقات ضمن CSS بحيث يمكنك شرح القرارات وراء سمات العرض والتخطيط التي اخترتها لمعرف ما او صنف من المعرفات
تنسيق التعليق في CSS لا يتبع التنسيق المستخدم في اضافة التعليقات في شيفرة لغة البرمجة C
استخدم */ لبدء التعليق و /* لانهائه
تعرض الشيفرة التالية تعليقا محتوى ضمن جزء CSS من صفحة ويب:
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY} /* يظهر هذا المعرف المستوى الثاني بنفس مواصفات المستوى الاول كونه يملك قيمة CSS نفسها */
كل ذلك عبرة عن مجرد مثال عما يمكنك انجازه باستخدام CSS ضمن صفحات ويب
تعمدت ان تستخدم الامثلة المعروضة هنا مجموعة صغيرة من عناصر CSS المتوفرة وذلك لعرض خصائص CSS بسهولة
في المثال السابق الذي بين صفحة ويب التي تحوي CSS فقط تم فيه استخدام مجموعة موسعة من عناصر CSS والتي ساقوم بشرحها في الدرس القادم اعذروني الان لكنها الساعة الواحدة ليلا وعلي ان ارتاح ام لا يجب علي ذلك ;) خخخخ اوكيه ان شاء الله نبدا ب CSS بشكل موسع كوننا سنتكلم عن خصائصها ومعرفاتها وما الى ذلك
الدرس القادم حول عناصر CSS الخاصة باللون والخلفية
والسلام عليكم ورحمة الله
-------------------------- مع تحياتي FATAL-TERROR -----------------------------
نتابع اليوم ما انتهينا عنده الدرس الماضي .. ارجو الانتباه لان درس اليوم معقد بشكل بسيط واي اسئلة عليه انا جاهز
بسم الله نبدا
راينا في الدرس السابق كيف يتم استخدام <SPAN> لتضمين سمات CSS في عنوان صفحة ويب
وكيف يمكن استخدام <SPAN> و <DIV> لاضافة عناصر CSS ضمن جسم صفحة ويب
لكن الخيار الثالث الذي يتم بواسطته تحديد عناصر CSS بطريقة مختلفة تماما لعله الاكثر شيوعا لدى مؤلفي ويب
بتحديد سمات العرض والتخطيط في صفحة ويب منفصلة يمكنك تعديل اسلوب مجموعة صفحات ويب التي تستخدم شفرة HTML المعتادة
لعمل ذلك عليك باشنء صفحة ويب لا تحوي الا معلومات CSS
ثم يمكنك ربط صفحات ويب اخرى الى صفحة CSS وذلك باستخدام المعرف LINK
على سبيل المثال يمكنك ملاحظة الشيفرة التالية وهي جزء من صفحة ويب لا تحوي سوى معلومات تنسيق CSS:
A:LINK {
COLOR: BLUE;
TEXT-DECORATION: UNDERLINE;
}
A:VISITED {
COLOR: PURPLE;
TEXT-DECORATION: UNDERLINE;
}
A:ACTIVE {
COLOR: RED;
TEXT-DECORATION: UNDERLINE;
}
P.PREFACE {
TEXT-ALIGN: RIGHT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 0.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-LEFT: 12.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 48.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: ITALIC;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: TIMES NEW ROMAN, VERDANA, ARIAL;
}
P.MAPPING TABLE CELL {
TEXT-ALIGN: LEFT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 2.000000PT;
MARGIN-BOTTOM: 2.000000PT;
MARGIN-LEFT: 0.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 12.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: TIMES NEW ROMAN, VERDANA, ARIAL;
}
P.COURIERLINE {
TEXT-ALIGN: LEFT;
TEXT-INDENT: 72.000000PT;
MARGIN-TOP: 0.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-LEFT: 72.000000PT;
MARGIN-RIGHT: 0.000000PT;
FONT-SIZE: 7.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: MONO SPACED;
}
H1.1SECTION, H2.1SECTION, H3.1SECTION, H4.1SECTION, H5.1SECTION, H6.1SECTION {
TEXT-ALIGN: RIGHT;
TEXT-INDENT: 0.000000PT;
MARGIN-TOP: 6.000000PT;
MARGIN-BOTTOM: 0.000000PT;
MARGIN-RIGHT: 12.000000PT;
MARGIN-LEFT: 0.000000PT;
FONT-SIZE: 24.000000PT;
FONT-WEIGHT: MEDIUM;
FONT-STYLE: REGULAR;
COLOR: #000000;
TEXT-DECORATION: NONE;
VERTICAL-ALIGN: BASELINE;
TEXT-TRANSFORM: NONE;
FONT-FAMILY: HELVCONDBLK;
}
هذه المعلومات مخزنة في ملف يدعى TEST.CSS لاحظ كيف تقوم بتعديل خصائص العرض لعدد من معرفات HTML المعتادة
وتقوم بتحسين بعضها ضمن اصناف محددة
الطريقة التي يتم فيها ترتيب معلومات CSS تشبه كثيرا ترتيب المعلومات في المعرف <STYLE> لكن يتم ربطها باستخدام الاقواس المعقوفة { و } لربط هذه المعلومات بحيث يمكن تطبيقها في صفحة ويب اخرى
يجب عليك استخدام المعرف <LINK> ضمن عنوان صفحة ويب:
<HEAD>
<LINK REL=STYLESHEET HREEF="TEST.CSS" TYPE="TEXT/CSS">
</HEAD>
قد ترغب في استخدام بعض خصائص CSS المحددة في صفحة CSS التي عرضناها سابقا وكل ما عليك فعله هو تحديد الصنف مثل P.PREFACE او P.MAPPING TABLE CELL او P.COURIERLINE وذلك باستخدام سمة تدعى CLASS والتي يمكن استخدامها لتحديد اسلوب CSS كما يلي:
<P CLASS="PREFACE">
مرحبا بك في هذه الصفحة
</P>
يمكن استخدام نفس الاجراء ضمن صفحة ويب عادية بحيث يتم استدعاء عناصر CSS لصنف معين وذلك ضمن صفحة ويب
تبين الشيفرة التالية ما اقصد حيث يتم تحديد واستدعاء 3 نماذج مختلفة من معرف الخط السميك <B> ضمن صفحة ويب
<HTML>
<HEAD>
<STYLE>
B.FUCHSIA {COLOR: FUCHSIA; FONT-SIZE: 32PT;}
B.LIME {COLOR: LIME; FONT-SIZE: 18PT; FONT-STYLE: ITALIC}
B.NAVY {COLOR: NAVY; FONT-SIZE: 18PT}
</STYLE>
</HEAD>
<BODY>
<B CLASS=LIME> مرحبا بك مع هذا الخط المائل والملون بالليموني
</B><P>
<B CLASS=FUCHSIA>والان باللون الزهري بحجم اكبر
</B><P>
<B CLASS=NAVY> واخيرا للون الازرق البحري الاضخم
</B>
</BODY>
</HTML>
لاحظ كيف يتم ربط سمات متعددة ضمن صنف CSS واحد باستخدام الفاصلة المنقوطة (;)
لا توجد حدود لعدد السمات التي يمكنك اضافتها بهذه الطريقة
في بعض الحالات من المرغوب تحديد عدة خصائص عناصر CSS معا كي تكون قادرا على تخفيض حجم الشيفرة الكلي
على سبيل المثال افترض انك تريد عرض عدة عناوين بنفس الطريقة اجمالا ستقوم بتحديدهم غرادى كما في قصاصة الشيفرة التالية:
<STYLE>
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H2 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H3 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
</STYLE>
يمكن انجاز الشيفرة السابقة بتحديد جميع هذه العناصر معا:
<STYLE>
H1 H2 H3{FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
</STYLE>
كما انه من الممكن اضافة التعليقات ضمن CSS بحيث يمكنك شرح القرارات وراء سمات العرض والتخطيط التي اخترتها لمعرف ما او صنف من المعرفات
تنسيق التعليق في CSS لا يتبع التنسيق المستخدم في اضافة التعليقات في شيفرة لغة البرمجة C
استخدم */ لبدء التعليق و /* لانهائه
تعرض الشيفرة التالية تعليقا محتوى ضمن جزء CSS من صفحة ويب:
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY}
H1 {FONT-SIZE: 18 PT; FONT-FAMILY: "COURIER"; FONT-WEIGHT: ITALIC; COLOR: NAVY} /* يظهر هذا المعرف المستوى الثاني بنفس مواصفات المستوى الاول كونه يملك قيمة CSS نفسها */
كل ذلك عبرة عن مجرد مثال عما يمكنك انجازه باستخدام CSS ضمن صفحات ويب
تعمدت ان تستخدم الامثلة المعروضة هنا مجموعة صغيرة من عناصر CSS المتوفرة وذلك لعرض خصائص CSS بسهولة
في المثال السابق الذي بين صفحة ويب التي تحوي CSS فقط تم فيه استخدام مجموعة موسعة من عناصر CSS والتي ساقوم بشرحها في الدرس القادم اعذروني الان لكنها الساعة الواحدة ليلا وعلي ان ارتاح ام لا يجب علي ذلك ;) خخخخ اوكيه ان شاء الله نبدا ب CSS بشكل موسع كوننا سنتكلم عن خصائصها ومعرفاتها وما الى ذلك
الدرس القادم حول عناصر CSS الخاصة باللون والخلفية
والسلام عليكم ورحمة الله
-------------------------- مع تحياتي FATAL-TERROR -----------------------------