CSS

CSS – خصائص منوعة

width:

وھي تستخدم لتحدید عرض فقرة او اطار معین وھي تاخذ قیمة نسبة مئویة او رقم بالبیكسل .

مثال:

div { width:400px; }

یمكن أن نعطیھا القیمة ( auto ( وفي ھذه الحالة سیكون العرض بنفس عرض
الشاشة مھما كبرت او صغرت ولا یظھر شریط التمریر في حالة تصغیر الشاشة .

min-width

وھي تستخدم لتحدید أقل عرض ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .

max-width

وھي تستخدم لتحدید أكبر عرض ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .

height

وھي تستخدم لتحدید طول فقرة او اطار معین وھي تأخذ قیمة نسبة مئویة او رقم بالبیكسل .

مثال:

div { height:500px; }

min-height :

وھي تستخدم لتحدید أقل ارتقاع ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .

max-height:

وھي تستخدم لتحدید أكبر ارتفاع ممكن للإطار وھي تأخذ رقم بالبیكسل او نسبة مئویة .

opacity:

من خلال ھذه الخاصیة یمكننا التحكم بدرجة الشفافیة عبر اسناد قیمة من 0.0 الى 0.1 حیث ان
القیمة 0.0 تعني عدم الظھور والقیمة 0.1 تعني الظھور الكامل والقیم الاخرى تكون مابین
ھذین القیمتین .

resize:

من خلال ھذه الخاصیة یمكن التحكم بالحجم من حیث التكبیر والتصغیر ویمكن أن نعطیھا
القیمة none لعدم السماح للمستخدم بتغییر الحجم

مثال:

textarea { resize:none; }

float :

تسمى خاصیة التعویم وھي تستخدم للحفاظ على تموضع متناسق للعناصر حیث یتم تعویم جمیع
العناصر إلى جھة واحدة بالنسبة لعنصر محدد والتعویم یكون أما إلى الیسار left او إلى الیمین
right بمعنى انھ من خلال ھذه الخاصیة یمكن تحدید اتجاه ( مكان ) عنصر معین في الصفحة
یمین او یسار الصفحة , ویمكن أن تأخذ القیمة ( none ( لإلغاء التعویم .

مثال:

ul { float:right; }

عند تعویم عنصر ما فأن العناصر التي تلیھ سوف تلتف حولھ ( تعوم ) بما یتلاءم مع
تعویمھ أما العناصر التي قبلھ لا تتأثر بالتعویم . أي مثلا یتم تعویم صورة ویوضع
بجوارھا نص وذلك حتى یكون النص مرتب بجوارھا .

clear:

تستخدم ھذه الخاصیة لمنع تعویم عناصر بجوار عنصر معین , وھي تأخذ القیمة left لمنع
التعویم من الیسار والقیمة right لمنع التعویم من الیمین والقیمة both لمنع التعویم من
الطرفین

position:relative;

تستخدم ھذه الخاصیة على إزاحة عنصر معین إلى جھة معینة بمقدار معین بالنسبة للعنصر
الذي فوقھ أو الذي بجواره ولیس بالنسبة إلى الصفحة , مع ملاحظة إنھ عندما یتم إزاحة
العنصر إلى مكان جدید فأنھ یبقى شاغر حیز مكانھ القدیم وكأنھ لا یزال موجود فیھ وذلك
بخلاف الخاصیة ( absolute-position , ( وھي تأخذ احد ھذه القیم :

top: رقم px .1
bottom: رقم px .2
left: رقم px .3
right: رقم px .4

ویمكن أن تأخذ رقم سالب أي أن يكون مسبوقا بإشارة الطرح لیعمل بشكل عكسي .
یمكن أن نكتب ھذا المثال بطریقتین مختلفتين:
الطریقة الأولى :

position:relative; bottom:-100px; right:70px;

الطریقة الثانیة :

position:relative;
bottom:-100px;
right:70px;

position:absolute;

تستخدم ھذه الخاصیة لإزاحة عنصر معین إلى جھة معینة بمقدار معین بالنسبة إلى الصفحة
وتستخدم في الغالب مع الصور ویمكن استخدامھا مع غیر الصور , مع ملاحظة إنھ عندما یتم
إزاحة عنصر معین إلى مكان جدید فأنھ لا یبقى یشغل حیز مكانھ القدیم بل یشغل مكانھ الجدید
فقط بخلاف الخاصیة ( relative-position , ( وھي تأخذ احد القیم التالیة :

top: رقم px .1
bottom: رقم px .2
left: رقم px .3
right: رقم px .4

كما یمكن أن تأخذ رقم سلبي أي مسبوق بإشارة ناقص لیعمل بشكل عكسي.

مثال/ یمكن أن یكتب المثال بطریقتین :- الطریقة الأولى :

position:absolute; top:150px; left:100px;

الطریقة الثانیة :

position:absolute;
top:150px;
left:100px;

position:

تستخدم ھذه الخاصیة لجعل عنصر معین ثابت في الصفحة ولا یتغیر مكانھ عند النزول أو
الصعود في داخل الصفحة إذا كانت الصفحة كبیرة , وھي تأخذ القیمة fixed .

مثال:

div { position:fixed; }

z-index:

تعمل ھذه الخاصیة فقط مع الخاصیة ( :position ( حیث إنھا سوف تحدد أي من العناصر
سیظھر فوق الآخر ( إذا كانت العناصر متداخلة ) حیث سوف نعطي للعنصر الذي یظھر في
الأسفل الخاصیة :index-z تحمل القیمة ( 1 (وللعنصر الذي سیكون فوقھ القیمة ( 2 ( والذي
فوقھ القیمة ( 3 ( وھكذا , مع ملاحظة أن الكلام السابق ینطبق إذا كان العنصران یحملان
الخاصیة ( :position ( أما إذا كان عنصر واحد فقط ھو الذي یحمل الخاصیة ( :position(
وأردناه أن یظھر في الأعلى فوق بقیة العناصر نعطیھ الخاصیة :index-z حاملة القیمة ( 1(
( مع ملاحظة انھ یظھر في الأعلى فوق بقیة العناصر بشكل افتراضي ) أما إذا أردناه أن یظھر
في الأسفل تحت بقیة العناصر نعطیھ الخاصیة :index-z حاملة القیمة ( 1 . ( –
عندما أتحدث ھنا عن الخاصیة ( position ( أقصد بھا كل خصائص ( position(
. ( position: ) أو ) position-absolute: ) او ) position-relative: ) مثلا

مثال:

p { position:absolute;
top:20px;
z-index:-1; }

overflow:

وھي تستخدم لإظھار مقبض الحركة وتأخذ الخاصیة scroll , اوتأخذ الخاصیة hidden
لأخفاء مقبض الحركة .

cursor

وھي تستخدم للتحكم بشكل سھم الفأرة وھي تأخذ عدة قیم منھا .
1 -pointer لتظھر شكل الید للأختیار .
2 -none لیختفي السھم .
3 -auto ھي القیمة الافتراضیة و یظھر السهم بشكل طبیعي ( أي حسب المكان الذي سیقف فیه ) .
4 -default هاته القیمة الافتراضیةتبقي شكل السھم دائما ً.
5 -progress لیظھر السھم وكأنه يقوم بتحميل شيء ما.
6 -url هاته القیمة تستخدم لوضع صورة مكان السهم .

مثال:

Cursor:pointer;

إخفاء العناصر
من الممكن إخفاء عناصر HTML باستخدام CSS بطریقتین :

1 .إذا قمت بإسناد قیمة none إلى الخاصیة display.
2 .إذا قمت بإسناد قیمة hidden إلى هاته الخاصیة visibility ) .

ملاحظة : إذا قمنا بإسناد القیمة visible

الى هاته الخاصیة فأن العنصر المحدد سیصبح ظاهرا )
والاختلاف بین الطریقتين ھو أن الطریقة الثانیة تقوم بإخفاء العنصر مع الحفاظ على المكان الذي یشغله فارغا ً
أما باختلاف الطریقة الأولى فهي تقوم بإخفاء العنصر مع عدم الحفاظ على المكان الذي یشغله مما یؤثر على

تموضع العناصر .

: أنواع عرض العناصر
یتم عرض العناصر في HTML بطریقتین :

1 .بشكل كتلة block : حیث یتم النزول سطرا ً قبل العنصر وسطر بعد العنصر ھذه
الحالة نراھا مع عناصر مثل <h1 <و <p <و <div <وفي ھذه الحالة ستكون كلھا
كجزء واحد مترابطة فیما بینھا .
2 .بشكل سطري inline -: حیث یتم وضع العنصر ضمن نفس السطر دون الحاجة
للنزول سطرا ً وھذه الحالة نراھا مع عناصر مثل <a <و <span , <حیث أن في ھذه
الحالة تكون مقسمة إلى أجزاء .
تسمح CSS بتغییر نوع العرض للعناصر من block إلى inline وبالعكس عن طریق إسناد
إحدى القیمتین block و inline إلى الخاصیة display ویمكن أن نعرض العناصر بخط واحد
( سطر أفقي ) وفي نفس الوقت تكون جزء واحد , ھنا سنستخدم ھذه الخاصیة block-inline
الأعمدة المتعددة
ھذه الخاصیة جدیدة في CSS3 ویجب أن نسبق الخاصیة بالبادئة الخاصة بكل مستعرض لیتم
عرضھا على المستعرضات المختلفة , ومن خلال ھذه الخاصیة یمكن عرض محتوى العناصر
على شكل أعمدة متعددة ( بشكل الجرائد ) وذلك بطریقتین :

1 .عدد أعمدة ثابت وعرض عمود متغیر :- ویتم ذلك من خلال إسناد عدد الأعمدة إلى
الخاصیة ( count-column ( التي تقسم المحتوى إلى العدد المذكور من الأعمدة
ویتغیر عرض الأعمدة مع تغیر حجم نافذة المستعرض , والخاصیة ( gap-column(
تستخدم لتحدید المسافة بین العمودین , والخاصیة ( rule-column ( تمكننا من وضع
فواصل ذات مظھر ولون محددین بین الأعمدة .

مثال:

-webkit-column-cont:2;
-webkit-column-gap:20px;
-webkit-column-rule:4px dotted black;

2 .عرض عمود ثابت وعدد أعمدة متغیر :- ویتم ذلك من خلال إضافة عرض العمود
الواحد إلى الخاصیة ( width-column ( وفي ھذه الطریقة تحافظ الأعمدة على
عرض ثابت لكل منھا ویتغیر عددھا مع تغیر حجم نافذة المستعرض , والخاصیة
( gap-column (تستخدم لتحدید المسافة بین العمودین , والخاصیة ( rule-column(
تمكننا من وضع فواصل ذات مظھر ولون محددین بین الأعمدة .

مثال:

-ms-column-width:200px;
-ms-column-gap:30px;
-ms-column-rule:4px dotted black;