CSS

Main menu:


ارشيف

منوعات

الخصائص

الخاصية font-style :

هذه الخاصية وظيفتها أن تجعل النص مائل :

H3 { font-style: italic }

عندما تخبر المتصفح أن يجعل نصاً ما مائل فإنه يبحث عن نسخة مائلة من الخط المطلوب على حاسب المستخدم ، و إذا لم يجدها فإنه في بعض الأحيان يصنع واحدة . أما إذا كنت تعرف أن النسخة المائلة من الخط المطلوب تسمى Oblique فاستخدم القيمة oblique بدلاً من القيمة italic . أما إذا كنت تريد أن تجعل النص غير مائل فاستخدم القيمة normal .


الخاصية font-weight :

مع صفحات الأنماط المتعاقبة يمكنك ليس فقط جعل النص سميك أو عادي ، بل أيضاً يمكنك التحكم في درجات السماكة المختلفة :

P { font-weight: bold }

هذه القاعدة واضحة جداً ، لقد جعلت نص الواصفة <P> سميك ، و بالمثل يمكنك وضع القيمة normal بدلاً من bold لجعل النص عادي غير سميك .

كذلك يمكنك تحديد القيمة باستخدام قيم رقمية من 100 حتى 900 . الخط العادي غير السميك قيمته 400 ، و أقصى قيمة للسمك هي 900 . و بالطبع هذا يعتمد على نوع الخط المستخدم ، حيث أن الخطوط التي ليس بها غير وجهين فقط (عادي و سميك) سوف تظهر القيم من 100 إلى 600 فيها كخط عادي غير سميك ، و القيم من 700 إلى 900 ستظهر كخط سميك . أما الخطوط التي بها تسعة أوجه مبنية داخلها فسوف تظهر كل قيمة بحجمها الأصلي

و لكن احذر فالمتصفحات لا تدعم هذه الخاصية بثبات (و المتصفح IE 3 لا يدعمها على الإطلاق) . و أخيراً .. يمكنك استخدام قيم lighter و bolder ، و هذه القيم سوف تعمل فقط إذا استخدمتهم على عنصر تم تحديد عدة طبقات من السماكة له بالفعل . على سبيل المثال إذا استخدمت القيمة bolder مع عنصر ورث السماكة من عنصر أب ، في هذه الحالة فإن المتصفح سوف يجعل هذا العنصر أكثر سماكة من أبيه ، و إذا لم يكن هناك نسخة أكثر سمكاً من الخط المستخدم فإن المتصفح لن يفعل شيئاً و سيعرض النص بنفس سمك الأب . (المتصفحان IE 3 و نتسكيب كوميونيكتور لا يدعمان هاتان القيمتان) .

الخاصية text-transform :

هذه الخاصية تستخدم للتحكم في حالة الحروف و جعلها كبيرة Uppercase أو صغيرة Lowercase :

B { text-transform: uppercase }

و إليك كل القيم التي يمكن استخدامها مع هذه الخاصية :

1- uppercase : تجعل كل الحروف بحالة كبيرة . THIS SENTENCE SERVES AS AN EXAMPLE

2- lowercase : تجعل كل الحروف بحالة صغيرة . this sentence serves as an example

3- capitalize : تجعل أول حرف من كل كلمة بحالة كبيرة . This Sentence Serves As An Example

4- none : تعني أن أي قيمة للخاصية text-transform قد ورثها النص المقصود من عنصر أب سيتم تجاهلها و سيعرض النص بشكل عادي . This sentence serves as an example

و لكن المتصفح IE 3 لا يدعم هذه الخاصية .

الخاصية text-decoration :

كنا و لفترة طويلة للغاية لا نملك أي تصرف بشأن حقيقة أن الوصلات التشعبية النصية تظهر بخط سفلي تحتها في المتصفحات المختلفة ، أنا لا أعرف شعورك حيال هذا و لكني أعتقد أنها قبيحة الشكل و مزعجة . و الحل الذي أقدمه لكم الآن هو هذه الخاصية :

B { text-decoration: underline }

و إليك القيم الخاصة بها :

underline : تجعل الكلمات تحتها خط .

Underline words

overline : تجعل الكلمات فوقها خط .

Overline words

line-through : تجعل الكلمات في وسطها خط .

Linethrough words

blink : تجعل الكلمات تومض .

Blink words

none : تتأكد من عدم حدوث أي من القيم السابقة .

None words

(المتصفح نتسكيب كوميونيكتور لا يدعم القيمة overline ، و المتصفحان IE 4 و IE 5 لا يدعمان القيمة blink ، أما المتصفح IE 3 فلا يدعم أي من هذه القيم .)

القيمة none هي قيمة سحرية تستطيع بواسطتها أن تزيل الخط تحت الوصلات التشعبية النصية كالتالي :

A:link { text-decoration: none }

A:active { text-decoration: none }

A:visited { text-decoration: none }

Posted: November 1st, 2007 under درس 4.
Comments: 1

CSS 2.0

منذ 12/15/1998

CSS 2.0 اصبح المعيار القياسي المستخدم
:هذا المعيار ادخل عدة وظائف جديدة بالنسبة للمعيار السابق 1.0 منها

شاشة او طابعة (screen- print ) MEDIA التمييز بين الوسائط -

هذه الخاصة مفيدة جدا حيث تسمح بعرض شيء على الشاشة وشئ مختلف عند الطباعة

مثال

@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}

 

Posted: November 1st, 2007 under درس 1.
Comments: none

إضافة الأنماط في السطر inline ..

 

يمكنك إضافة الأنماط سطر بسطر inline و هذا يعني إضافة قواعد صفحة الأنماط في منتصف شفرة الهتمل ، و يمكن أن تبدو مثل هذا :

<HTML>

<HEAD>

<TITLE>My First Stylesheet</TITLE>

</HEAD>

<BODY>

<H1 STYLE=”color: orange; font-family: impact”>Stylesheets: The Tool of the Web Design Gods</H1>

<P STYLE=”background: yellow; font-family: courier”>Amaze your friends! Squash your enemies!</P>

</BODY>

</HTML>

في هذه الحالة أنت لا تحتاج إلى إضافة شفرة لصفحة الأنماط في أعلى وثيقة الهتمل ، فالخاصية STYLE الموجودة في السطر تعطي المتصفح كل ما يحتاجه من معلومات . الجانب السلبي هنا هو أنك يجب أن تضيف شفرة النمط في السطر في كل مرة تريد أن تستعملها . و عموماً فإن الأنماط المضافة في السطر inline تعتبر أقل قوة من تلك المطمورة أو الموصولة أو المستوردة ، و لكنك قد تجد لها نفعاً مثلاً إذا كانت كل فقراتك محددة النمط بصفحة أنماط موصولة و لكنك تريد تخطي نمط فقرة واحدة فيمكنك استخدام نمط inline لهذا .

تذكر أنك يمكن أن تستخدم أكثر من طريقة من هذه الطرق في نفس الوقت ، و الواقع فإن قوة صفحات الأنماط تكمن في الجمع بين الطرق التي تضيف الأنماط إلى صفحات الويب

Posted: November 1st, 2007 under درس 3.
Comments: none

لنلق نظرة الآن على الشفرة الجديدة التي نراها لأول مرة . إن قلب صفحات الأنماط هو القواعد ، و أبسط هذه القواعد تبدو مثل هذا :

H1 { color: green }

هذه القاعدة تخبر المتصفح أن كل النص المحاط بالواصفتين <H1> و <H1/> يجب أن يكون باللون الأخضر .

كل قاعدة تتكون من مختار Selector و إعلان Declaration . في المثال أعلاه تعتبر H1 هي المختار ، و هي واصفة هتمل التي يرتبط بها النمط . أما الإعلان فهو يحدد ماذا يكون النمط ، و هو يتكون أيضاً من جزءين : الخاصية Property و هو في هذه الحالة color ، و القيمة Value و هي هنا green .

أي واصفة هتمل يمكن أن تستخدم كمختار ، و هكذا يمكنك ربط معلومات صفحات الأنماط بأي عنصر بدءاً من نص <p> العادي إلى محتويات <table> و <code> ، يمكنك حتى استخدام بعض خصائص صفحات الأنماط المتعاقبة على الرسوميات و ذلك بتطبيقهم على الواصفة <img> .

و كما ترى من مثالنا الأول ، يمكنك أن تجمع القواعد سوياً ، فنحن قد أعددنا ثلاثة إعلانات في وقت واحد للواصفة <p> . و بشكل مماثل يمكنك أيضاً جمع المختارات مثل :

H1, P, BLOCKQUOTE { font-family: arial }

هذه القاعدة تحدد أن كل النص بين الواصفات <H1> و <P> و <BLOCKQUOTE> سوف يتم عرضها بالخط Arial .

قواعد صفحات الأنماط تورث من الأب إلى الابن ، و إليك هذا المثال :

B { color: blue }

هذه القاعدة تخبر المتصفح بأن كل النص داخل الواصفة <B> يجب أن يكون باللون الأزرق ، و لكن ماذا سيفعل المتصفح في الموقف التالي ؟

<B>All my web pages will use Cascading Stylesheets within <I>four</I> weeks.</B>

لا توجد هنا قاعدة للواصفة <I> و لكن بما أنها حدثت داخل الواصفة <B> فإنها ترث الإعلان

تعرفنا في المثال السابق على كيفية تخصيص أكثر من متغير لوسم هتمل واحد . ماذا لو أردنا تخصيص متغير واحد بقيمة واحدة مكررة مع أكثر من وسم هتمل ؟
أكثر الأمثلة التي توضح ذلك هي التي تحدد تنسيق وسوم رأس الفقرة (h1-h6) أو وسوم الرابط التشعبي (a) . لنأخذ مثالاً يوضح ذلك

h1,h2,h3,h4,h5,h6 { color: #008000; }

Posted: November 1st, 2007 under درس 2.
Comments: none

مقدمة

  • هل تخطط لتنفيذ مشاريع ويب يزيد بعدد كبير من الصفحات؟

  • هل تريد إضافة مزيد من الاحترافية و السهولة معاً على عملك ؟

  • الحل هو استخدام”Cascading Style Sheets

صفحات الطرز المتراصة أو صفحات الأنماط المتعاقبة (CSS) هي الاختصار بالأحرف الأولى من اسم

“Cascading Style Sheets” ‘صفحات الطرز المتراصة’، التي أطلقها مجلس وب W3C، كمواصفة قياسية لتوصيف مظهر وثائق وب من محددات للخطوط و الألوان و التنسيق. تهدف المواصفة إلى فصل محتوى الوثائق عن مظهرها

ما هو الشيء المميز في صفحات الأنماط المتعاقبة

1- يمكنك الفصل بين الشكل و البنية .

2- يمكنك التحكم بالتخطيط أكثر من ذي قبل .

3- يمكنك عمل صفحات أصغر و أسرع .

4- يمكنك صيانة العديد من الصفحات في نفس الوقت بأسهل و أسرع من ذي قبل .

تستطيع اما وضع الشفرة مباشرة بين الواصفتين <head> و <head/>
مثلا :

<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<div class=?bloc1″>test1</div>
<div class=?bloc2″>test2</div>
</BODY>
</HTML>
و اما صنع صفحة css وربطها بصفحة ال HTML في أي مكان بين الواصفتين <head> و <head/>

مثلا :
<HTML>
<HEAD>
</”link href=”all-browsers.css” rel=”stylesheet” type=”text/css>
</HEAD>
<BODY>
<div class=?bloc1″>test1</div>
<div class=?bloc2″>test2</div>
</BODY>
</HTML>

style.css
.bloc1 {
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
}

 

افتح الصفحة في متصفحك ، و سوف ترى هذا :

test

Posted: October 31st, 2007 under مقدمة 1.
Comments: none