تعلم تنسيق وعرض المواقع عبر لغة css | مدونة برو نت

تعلم تنسيق وعرض المواقع عبر لغة css  |  مدونة برو نت

مقدمة

قيد الإنجاز.
هذه المقالة موجهة لشخص يعرف أساسيات HTML/XHTML. لا ننصحك بالبدء بها ما لم تكن لديك فكرة عن HTML. يمكنك البدء بتعلم HTML من خلال صفحة بدهيات HTML
سنستعمل في هذه المقالة خلفية تحتوي رقعة تحتوي مربعات رمادية صغيرة مساحتها ١٠×١٠ وأخرى كبيرة مساحتها ١٠٠×١٠٠ لتسهيل دراسة أحجام الصناديق المختلفة وقد منحنا تلك الصناديق بعض الشفافية حتى تظهر جميلة.

أين نضع كود CSS ؟

في ترويسة ملف html ضع ما يشبه السطر التالي

<link rel="stylesheet" type="text/css" href="myfile.css" />

حيث myfile.css هو اسم الملف. كذلك يمكن وضع كود CSS مباشرة داخل وسم style هكذا

<style type="text/css">
/* CSS code goes here */
body{ background:url('checker.gif');}
/* ... */
</style>

ويمكن وضع التنسيقات مباشرة على العنصر مثلا لنفرض أن لدي عنصر div أريد جعل أرضيته زرقاء

<div style="background:blue;">
this is blue
</div>

لكن الطريقة الأولى (التي تكون في ملف منفصل) تسمح للمتصفح عمل cache لملف CSS

أساسيات اختيار العناصر selectors

يتكون ملف css بكل بساطة من اختيار لعناصر ثم حاصرتين { } يحتويان خصائص وقِيَمها بينهما : وبعد كل خاصية فاصلة منقوطة ; . ومن أمثلة ذلك

body { background:#ffe; }
body * { color:gray; }
em,b { color:black; font-size:١٢٥%; font-weight:bold; }
a { color:blue; }
a:visited { color:violet ; }

فإن تم ربطه مع كود html مثل التالي:

<h١>Chapter 1</h١>
<p>this is some paragraph, click <a href="#ch٢">here</a>.</p>
<p>this is <b>some bold text</b>, it's made so with b.</p>
<a name="ch٢"><h١>Chapter 2</h١></a>
<p>this is another paragraph, click <a href="#ch٣">here</a>.</p>
<p>this is <em>some emphasized text</em>, it's made so with em.</p>

كان الناتج كما في الصورة
أول سطر في كود css قمنا باختيار عنصر من نوع body وحددنا خاصية الأرضية له لتكون اللون الأصفر الفاتح وبطريقة مشابهة نفعل مع أي عنصر بذكر نوعه. في السطر الثاني استخدمنا عملية المسافة والتي تختار الأحفاد مثلا div a تعني كل العناصر من نوع a داخل div وفي مثالنا استعملنا المحدد * والذي يعني كل شيء أي أننا غيّرنا لون النص في كل أحفاد المتن body إلى اللون الرمادي وهذا يشمل h١ الأولى والثانية (مع أن الثانية داخل a) و p وكل العناصر الأخرى باستثناء ما سنقوم بتغييره لاحقا. السطر الثالث استعملنا الفاصلة لتطبيق نفس الصفات على العناصر من نوع em ومن نوع b. السطر الرابع كان مثل الأول حيث اخترنا عنصر عبر نوعه وكان a وقمنا بتغيير لون النص فيه إلى الأزرق. والسطر الأخير اخترنا عنصر الروابط a لكن فقط الذي سبق وتمت زيارته وهذا يسمىpsedo class.
ومن الأشياء الشائعة هي اختيار العنصر عبر معرفه id وذلك باستعمال # قبل اسمه. أو عبر صنفه class وذلك بعلامة النقطة ثم اسم الصنف تأمل هذا المثال

#nav ul li ul { display:none; }
#nav ul li:hover ul { display:block; }
#nav ul li.current ul { display:block; background:#ff٠;}
.disabled { color:gray;}

حيث في الأسطر الأولى كنا نعمل على عناصر داخل عنصر له المعرف nav فقط وليس كل القوائم ul.

القاعدة	المعنى	مثال	معنى المثال
*	أي عنصر	div#mybox *	أي عنصر داخل الصندوق ذي المعرف #mybox
E	عنصر من النوع E	a	أي عنصر من نوع a يعني رابط anchor
.myclass	العنصر الذي له الصنف myclass	button.disabled	زر من بين الصنوف المعرفة له الصنف disabled
#myid	العنصر الذي معرفه myid	#nav	العنصر الذي اسم معرفه هو nav
E F	العنصر F بشرط أن يكون حفيدا للعنصر E	ul li ul	تحدد القائمة الداخلية
E > F	العنصر F بشرط أن يكون ابنا مباشرا للعنصر E وليس مجرد حفيدٍ	body>div	تحدد صناديق div الموجودة مباشرة في المتن وليس الصناديق الداخلية
E + F	تختار F الشقيق الملاصق للعنصر E	b + i	العنصر المائل المحاذي للعنصر الثخين مباشرة ضمن نفس الوالد
E[attr]	العنصر E الذي له صفة attr	img[src]	عنصر صورة تم تحديد الملف
E[attr=val]	العنصر E الذي له صفة attr وقيمتها تساوي val	a[name=“ch١”]	العنصر a الذي قيمة name فيه تساوي ch١
E[attr~=val]	العنصر E الذي له صفة attr ولا تحتوي أي من قيمها المفصولة بمسافة الكلمة val	a[name~=“ch١”]	العنصر a الذي قيمة name فيه لا تساوي ch١

وهناك صنوف وهمية مثل

الصنف الوهمي	المعنى
a:hover	عندما يكون مؤشر الفأرة فوق العنصر
a:focus	عندما يأخذ العنصر المؤشر cursor
a:active	العنصر لحظة أن ينقر المستخدم عليه
a:link	رابط لم يزره المستخدم من قبل
a:visited	رابط زاره المستخدم سابقا
E:first-child	أول ولد للعنصر E

ويجدر الإشارة أن المتصفحات غير القياسية لا تدعم hover إلا على a (والحيلة أن تضع عناصر من span أو div داخل a أو تستعمل حيل في js مثل مشروع http://ie7-js.googlecode.com/). كذلك تأتي معايير CSS ٣ الجديدة بالمزيد من الصنوف الوهمية مثل tr:nth-child(odd) والتي تعني أسطر الجدول الفردية فقط دون الزوجية.

• http://www.w3.org/TR/CSS2/selector.html
• http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#nth-child-pseudo

تحديد الأرضية

الأساسيات

الطريقة التقليدية الجامعة لتحديد الخلفية تكون بما يشبه

body {
  background: #٧٧٧ url('file١.png') no-repeat fixed center top;
}
div {
  background: transparent url('file٢.png') repeat scroll ٠ ٠;
}

ونحن هنا حددنا عدة أشياء وهي

• لون الأرضية background-color ويمكن أن تكون شفافة transparent أو بلون والدها inherit
• صورة الأرضية background-image ويمكن أن تكون none
• التكرار background-repeat ويمكن أن يكون:
  • دون تكرار no-repeat
  • تكرار أفقي repeat-x
  • تكرار عمودي repeat-y
  • تكرار من الجهتين repeat
• ربط الأرضية background-attachment وهي إما أن تكون ثابتة في مكانها fixed أو تمرر scroll مع المحتويات عند التحرك بأشرطة التمرير.
• الموقع background-position وهو الإحداثي السيني والصادي لبداية صورة الأرضية ويمكن استخدام كلمات مثل top right bottom left center وعندها لا يكون الترتيب مهم كذلك يمكن استخدام نسب مئوية مثلا ٥٠% ٥٠% والتي تكافئ center center أي في الوسط عموديا وأفقيا.

ويمكن تحديد أي من القيم أعلاه بأي ترتيب هكذا

div { background: url('file١.png') repeat-x; }

وهنا نحن حدّدنا background-image و background-repeat ولم نحدّد البقية
كما ويمكن تحديد تلك القيم فرادا هكذا

div {
  background-image: url('file١.png');
  background-repeat: repeat-x;
}

ويمكن استخدام موضع الأرضية لاختيار جزء من الصورة وإن قمنا بتجميع أطر صورة متحركة في صورة واحدة يمكننا عمل صورة متحركة بتغير الموضع. في المثال التالي سنستخدم صورة بحجم ١٠٠×١٠٠ تحتوي الأحرف أ ب ت ث

تأمل معنا هذا المثال: كود css

div{
  float:left;
  width:٥٠px; height:٥٠px;
  margin:١٠px; padding:٠; border:٠;
  background:transparent url('css-alphabet.gif') no-repeat ٠ ٠;
}
#l١ {background-position: ٠ -٥٠px;}
#l٢ {background-position: -٥٠px -٥٠px;}
#l٣ {background-position: ٠ ٠;}
#l٤ {background-position: -٥٠px ٠;}

وكود html

<div id="l١">1</div>
<div id="l٢">2</div>
<div id="l٣">3</div>
<div id="l٤">4</div>

الناتج يكون هكذا

فإن أخذنا صندوق واحد حيث ظهر فيها حرف الثاء ذاك أننا رفعنا الإحداثي الصادي ٥٠ بكسل لأعلى وطبعا ما هو خارج الصندوق لا يظهر.
يمكن استخدامها لعمل مؤثرات معينة عند وضع مؤشر الفأرة فوق عنصر معين. فإن كان عندك زر معين يمكنك تكديس ٤ صور له فوق بعضها الأولى تكون في الوضع الطبيعي والثانية مرتفعة بمقدار ارتفاع الزر (مثلا -٢٠ بكسل) تظهر عندما يكون الزر في حالة hover أي فوقه مؤشر الفأرة وآخر في حالة focus وآخر في حالة active …إلخ.
إليك هذا المثال الذي نغيّر فيه أرضية الأيقونة داخل الرابط وليس أرضية الرابط

كود css

#mybox {
  position: absolute; left:١٠px; top:١٠px;
  height:٥٠px;
  padding:٠ ١٠px ٠ ٦٠px; border:٠;
  background:#acf;
 
}
#mybox span{
  position: absolute; left:٠px; top:٠px;
  width:٥٠px; height:٥٠px;
  margin:٠; padding:٠; border:٠;
  background:transparent url('mybox.gif') no-repeat ٠ ٠;
}
 
#mybox:hover span{ background-position:٠ -٥٠px; }

كود html

<a id="mybox" href=""><span></span>here</a>

• http://www.w3.org/TR/CSS2/colors.html#background-properties

الأرضية شبه الشفافة

الخاصية background-color فإن مسودة معايير css ٣ تسمح بألوان شبه شفافة للخلفية (تعمل على firefox ٣ وسفاري ٣.٢.١ وحتى الموجود على iPhone لكنها لا تعمل على IE ولا حتى ٨). إن كنت ستستخدمها عليك تحديد خلفية عادية أولا ثم تحديد الخلفية شبه الشفافة حتى لا يتشوه التصميم على المتصفحات التي لا تدعم هذه الخاصية هكذا

#mybox{
  background-color: #٧٧٧;
  background-color: rgba(٢٥٥,٢٥٥,٢٥٥,٠.٥);
}

الفرق بين لون الأرضية شبه الشفاف وتحديد قيمة الإعتام opacity هو أن الإعتام يؤثر على الصورة وعلى النص بحيث يصبح الصندوق بما فيه شبه شفاف بعكس لون الأرضية شبه الشفافة.
هنا حددنا خلفية رمادية بالكود #٧٧٧ ثم غيرناها على المتصفحات التي تفهمها إلى أبيض (كل المركبات اللونية إلى أقصى قيمة وهي ٢٥٥ ثم مقدار الإعتام وهي ١ للون المصمت و ٠ للون الشفاف تماما وفي المثال وضعناها على ٠.٥ أي نصف شفاف فإن كانت ٠.٢٥ كانت أكثر شفافية)
إن كنت تريد أن يعمل على internet explorer يمكنك إضافة هذا الكود الخاص به

background-color:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#٨٠ffffff,endColorstr=#٨٠ffffff);
zoom: ١;

حيث أننا حددنا قيمة البداية والنهاية نفسها لكن عوضا عن تحديد ٣ مساقط ست-عشرية كل واحدة منزلتين rgb حددنا ٤ مساقط أولها الإعتام (ونحن نريده ٠.٥ أي من ٢٥٥ نريد ١٢٨ تقريبا يعني ٨٠ بالست-عشري)

• http://www.w3.org/TR/css3-color/#rgba-color
• http://css-tricks.com/examples/RGBaSupport/
• http://css-tricks.com/rgba-browser-support/

الشفافية ودرجة الإعتام

إن كنت تريد أن تعمل عنصر شبه شفاف يمكنك التحكم في مقدار الإعتام opacity كنسبة بين ١ (ظاهر بالكامل) والصفر (شفاف بالكامل) وهذه أصبحت من المعايير وهي تعمل في أغلب إصدارات firefox و safary ويمكن جعلها تعمل بسهولة على IE بإضافة الفلتر aplha

 filter:alpha(opacity=٧٥); /* for IE*/
 opacity: ٠.٧٥;

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

• http://www.w3.org/TR/css3-color/#transparency

أبعاد الصناديق

الهوامش

في الصورة أعلاه قمنا بتعيين القيم التالية

#div١{
 background:#ccf;
 position: absolute;
 left:١٠٠px; top:١٠٠px;
 width:١٠٠px; height:١٠٠px;
 border:٢٠px solid #fcc;
 margin:٢٠px;
 padding:١٠px;
 opacity:٠.٥;
 filter: alpha(opacity=٥٠); /* IE */
}

ولتوضيح أين بالضبط تبدأ محتويات الصندوق وضعت داخل الصندوق صندوق آخر لونه أخضر كي نميزه.

نلاحظ أن حول الصندوق ٣ مناطق هي

• منطقة margin أي الهامش الخارجي الشفاف (المنطقة M في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
• منطقة الإطار border وله لونه الخاص به (وهو المنطقة B في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
• الوسائد padding وهو الهامش الداخلي وهو بلون الخلفية (وهو المنطقة P في الصورة أعلاه) وقيمتها ١٠ بكسل حول الجسم الجهات الأربعة في المثال

وعند تحديد قيمة لأي مما سبق فإنها تكون على الجهات الأربعة حول الجسم فإن كان عرض الجسم ١٠٠ بكسل وارتفاعه موجود على بعد ١٠٠ بكسل من رأس الشاشة و ١٠٠ بكسل من يسارها (كما في المثال) فإن هذا الجسم سيحتل منطقة عرضها ٢٠٠ بكسل وارتفاعها ٢٠٠ وذلك أن العرض المحدد (وهو ١٠٠ بكسل) زاد عليه ٢٠ و ٢٠ و ١٠ أي ٥٠ من اليمين ومثلها من اليسار تلك تمام المئتين ومثل ذلك للارتفاع. وهذا يعني أن الصندوق سيقع على المنطقة من ١٠٠,١٠٠ إلى ٣٠٠,٣٠٠.
ويمكن تحديد قيمة مختلفة لكل جهة مثلا لدينا

• margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
• padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

فإن حددنا قيمة واحدة عبر padding أو margin فإنها تكون لكل الجهات. فإن حددنا قيمتين فإن الأولى تكون لأعلى ولأسفل والثانية تكون للجانبين. فإن حددنا ٣ قيم تكون الأولى للأعلى والثانية للجانبين والثالثة لأسفل. وإن كانت أربع قيم تكون أعلى ثم يمين ثم أسفل ثم يسار على الترتيب.

توسيط الصندوق

الطريقة التقليدية هي أن تحصره داخل وسم <center> لكن الطريقة الصحيحة في عالم CSS هي أن تجعل قيمة margin للجانبين auto هكذا

#mybox { margin-left: auto ; margin-right: auto ; }

لكن هذا لا يصلح لتوسيط عناوين h١ مثلا لأننا هنا نتحدث عن توسيط الصندوق وليس توسيط النص الذي فيه، لتوسيط النص أيضا أضف text-align: center

الهوامش السالبة

تقول معايير css أنه يجوز تحديد قيم سالبة للهوامش. هذا يؤدي إلى أن تتداخل الصندايق في بعضها فإن حددنا هامش علوي سالب فإنه سيتداخل مع الصندوق الذي فوقه وإذا حددنا هامش سفلي سالب فإنه سيتداخل مع الذي أسفل منه. واستعمال هذه الطريقة يعطي نتائج مبهرة كما في الصورة أدناه

وحتى نحصل على الشكل الطلوب غالبا يلزمنا زيادة ال z-index حتى تظهر فوق غيرها وأن نجعل الموضع position نسبي relative وليس سكوني static.
الهوامش السالبة يمكن استخدامها لكسر الرتابة في تصاميم الويب الناتجة عن كون كل العانصر صناديق مربعة أو مستطيلة ويكون ذلك بوضع هامش سالب لصور gif أو png ذات الخلفية الشفافة كما في المثال

كود css للصورة sign في هذا المثال هو

#sign {
 position:relative;
 margin-top:-٥٠px;
 margin-right:-٢٥px;
}

بل حتى يمكن عمل ذلك دون صور مثلا لو كان أول عنصر في الصندوق هو ترويسة h٣ وقمنا بإعطائها هامش أيمن وأيسر متساو مثلا ٥٠ بكسل من كل جهة لكن مع رفع الترويسة عبر تعين هامش علوي سالب لأعلى قليلا نحصل على

ويمكن عمل هامش أيمن سالب أيضا مع تغيير شكل الإطار من الجهة اليسرى

الأطر

أما الإطار border فالسماكة التي نحددها تكون عبر border-width ويمكن تحديد اللون عبر border-color ويمكن تحديدهما لكل جهة من الجهات الأربعة بشكل منفصل:

• border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
• border-color
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color

والإطار ليس بالضرورة أن يكون مصمتا solid بل يمكن تحديد شكله عبر border-style سواء للجهة الواحدة أو للجهات الأربعة

• border-style
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

والقيم المسموحة هي: none hidden dotted dashed solid double groove ridge inset outset كما تظهر في الصورة

والقيمة التي حددناها ل border في البداية مركبة من ٣ عناصر هي على الترتيب السمك والنمط واللون.

#mydiv {
border:1px solid #000;
}

• http://www.w3.org/TR/CSS2/box.html

الأطر المتناقضة في الجداول

في الجداول فإن الخلايا المتلاصقة في الشبكة قد تحتوي على تعريفات متناقضة لإطارها كأن نجعل كل الأطر مخفية وبعرض صفر نقطة باستثناء التي على اليمين فإن الإطار الأيمن للخلية الأولى (من اليسار) هو الإطار الأيسر للثانية.

• border-collapse وتكون إما collapse أو separate وهذه الأخيرة هي التلقائية
• border-spacing وهي التباعد الأفقي ثم العامودي بين الخلايا المتلاصقة ويجوز أن تكون سالبة وإن قدمت رقم واحد يكون لهما معا.

• http://www.w3.org/TR/CSS2/tables.html#borders

الأطر شبه الشفافة

كما في الخاصية background-color فإن مسودة معايير css ٣ تسمح بألوان شبه شفافة للأطر أيضا يمكن عملها هكذا

#mybox {
 border:6px solid #777;
 border:6px solid rgba(250, 250, 250, 0.5); 
}

حتى تكون الشفافية ظاهرة يجب أن لا نحدد خلفية معتمة (يعني لا لون معتم ولا صورة خلفية غير شفافة) لأن الإطار عندها لن يكون شفافا حيث ستعتم الشفافية بسبب الخلفية التي تحجز ما خلفها. ولأنك في الغالب تريد خلفية ملونة عليك في هذه الحالة نضع div أخرى باللون الذي نريد داخل الصندوف ذي الإطار شبه الشفاف وهكذا نحصر على اللمسة الجمالية التي نريدها.
ويمكن محاكاة هذه اللمسة الفنية على Internet Explorer لكن ليس عبر الأطر بل عبر لون الأرضية ونتحكم في سمك الإطار من خلال الوسائد padding

وذلك بعمل CSS منفصل ل IE نحدد فيه لون الأرضية ليكون شفافة عبرfilter ونلغي الإطار السميك ذي ١٠ بكسل الذي حددنا في CSS العامة أو نجعله صغيرا ونضيف وسائد بمقدار الإطار الذي نريده

background-color:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#٨٠ffffff,endColorstr=#٨٠ffffff);
zoom: ١;
border:١px solid #٧٧٧;
padding:١٠px;

لكن طبعا لا يمكن محاكات الأطر المنحنية المستديرة.

الأطر المنحنية في CSS٣

يمكن عمل أطر منحنية جميلة عبر ما يشبه

#mybox{
 -webkit-border-radius:١٠px;
 -moz-border-radius:١٠px;
 border-radius:١٠px;
}

إن كنت تريد وضع قيمة واحدة متساوية للزوايا الأربعة فإن الصيغة أعلاه تكفيك فهي تدعم webkit (وبالتالي سفاري وكروم) بالسطر الأول و mozilla و firefox بالسطر الثاني وإن تم اعتمادها في CSS٣ فإن السطر الثالث يدعمها.
أما إن أردت قيم مختلفة للزوايا المختلفة فإن mozilla firefox يقبل قيمة أو ٢ أو ٣ أو ٤ وفي هذه الأخيرة نبدأ من الزاوية اليسرى العليا ونسير مع عقارب الساعة. أما webkit فلا يدعم أكثر من رقم وإن قدمت له رقمين فالثاني هو مقدار الانحناء لهذا عليك استعمال الجدول أدناه لتحديد الزوايا المختلفة.

CSS٣	mozilla/firefox	webkit/safari/chrome
border-radius	-moz-border-radius	-webkit-border-radius
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius

للمزيد انظر

• https://developer.mozilla.org/en/CSS/-moz-border-radius
• http://www.css3.info/preview/rounded-border/
• http://www.the-art-of-web.com/css/border-radius/

الظلال

ويمكن عمل ظل جميل عبر

 -webkit-box-shadow:٠ ٠ ٨px ٤px rgba(٢٤٠,٢٤٠,٢٥٥,٠.٨);
 -moz-box-shadow:٠ ٠ ٨px ٤px rgba(٢٤٠,٢٤٠,٢٥٥,٠.٨);

الأول لسفاري وكروم والثانية ل firefox وهي بعكس ما قد يتبادر إلى ذهنك ليس مقدار الظل في الزوايا الأربعة بل هي على الترتيب

• إزاحة سينية
• إزاحة صادية
• مقدار الغشاوة blur
• مقدار النشر spread إن كان موجبا كَبُر طوله أو سالبا صَغُر.
• اللون على شكل مركبات ثلاثة (أصفار للأسود، ٢٥٥ للأبيض) ثم الإعتام (عكس الشفافية)

إن سبقت ذلك بكلمة inset كان الظل للداخل. ويفترض أن spread و inset غير موجود في webkit إلا أنني جربتها وكانت تعمل في كروم.

• https://developer.mozilla.org/En/CSS/-moz-box-shadow

تحديد الموضع

الخاصية position تحتمل القيم:

• ساكنة static وهي الحالة الطبيعية وهي أن يقع الصندوق في سياق انسياب المحتويات من حوله. وفي هذا الطور يتم إهمال قيم الموضع مثل إحداثيات left و top
• مطلقة absolute وهي أن تكون الإحداثيات مثل left و top تحتسب من أول نقطة داخل الإطار border للصفحة أو لوالد العنصر أي من خارج الوسائد padding إن كان موضعه من نوع ساكن static أو نسبي relative ويجوز أن يكون الموضع سالبا.
• ثابتة fixed كما في السابقة لكنها لا تتحرك عند تمرير المحتويات عبر شرائط التمرير scroll bars فيبقى الصندوق مكانه (علما أن IE لا يدعمها لكن هناك طرق إلتفافية)
• نسبية relative تحسب نسبة لموضع آخر عنصر سابق وإن كان الأول يكون الموضع من داخل الوسائد padding لوالده.

في المثال التالي قمنا بتعيين إحداثيات الزاوية اليسرى العليا كي تكون صفر للصندوقين الداخليين (الأخضر والأحمر) مرة بالطريقة المطلقة ومرة بالطريقة النسبية.
كود css

div {
  width:١٠٠px; height:١٠٠px;
  margin:١٠px; padding:٣٠px; border:١٠px solid #fcc;
  background:#acf;
  opacity:٠.٧;
  filter: alpha(opacity=٧٠); /* IE */
}
#d١ { position: absolute; left:١٠px; top:١٠px; }
#d٢ { position: absolute; left:٣٠٠px; top:١٠px; }
 
div div {
  left:٠px; top:٠px;
  width:٢٠px; height:٢٠px;
  margin:٠; padding:٠; border:٠;
}
 
#d١c١ { position: absolute; background:#٠f٠; }
#d١c٢ { position: absolute; background:#f٠٠; }
#d٢c١ { position: relative; background:#٠f٠; }
#d٢c٢ { position: relative; background:#f٠٠; }

كود html

<div id="d١"><div id="d١c١"></div><div id="d١c٢"></div>absolute</div>
<div id="d٢"><div id="d٢c١"></div><div id="d٢c٢"></div>relative</div>

فكانت النتيجة كالتالي:

لاحظ أنه في الطريقة المطلقة absolute وقع الصندوقان فوق بعضهما عند أول نقطة داخل الإطار. أما في الحالة الثانية فكان الأول عند أول نقطة داخل الوسادة padding للوالد وهي تبعد ٣٠ بكسل عن أول نقطة داخل الإطار ووقع الثاني تحته مباشرة مع أن لهما نفس الإحداثيات. فإن كنا نريد وضع الصندوق الأول (الأخضر) عند أول نقطة من داخل الإطار يمكننا تحديد إحداثيات سالبة بنفس مقدار الوسائد لكن هذا يصلح فقط للأول.

• http://www.w3.org/TR/CSS2/visuren.html#propdef-position

الصناديق الطافية floats

الأساسيات

عند وضع صورة داخل فقرة فغالبا تريدها أن تطفو على الجانب الآخر من النص (في حالة النص العربي نضع الصور على اليسار) ويلتف النص من حولها على الجهة الأخرى. يمكن عمل هذا مع الصور أو مع أي صندوق بجعله يطفو على أي من الجهتين عبر الخاصية float وقيمتها left أو right حيث ستلتف من جهتها الأخرى كل الصناديق التي دونها (غير الصناديق ذات المواقع المطلقة والثابتة طبعا).
فعند كود css التالي

img { float:right; margin:١.٥em;}

مع كود html التالي

<img src="css-alphabet.gif"/>
<p>
هذه فقرة طويلة جدا، هذه فقرة طويلة جدا، هذه فقرة طويلة جدا.
هذه فقرة طويلة جدا، هذه فقرة طويلة جدا، هذه فقرة طويلة جدا.
(...)
</p>

فإن الناتج سيكون كما يلي:

• http://www.w3.org/TR/CSS2/visuren.html#floats

تنظيف هامش الصناديق الطافية

أحيانا قد يكون من الجميل أن تضع صور على جهة بداية النص (اليمين في النص العربي) لكن في هذه الحالة قد تحصل معك مشكلة عندما تتداخل معك أشياء هكذا:

في حين أننا نريدها أن تكون هكذا:

ويكون ذلك باستعمال الخاصية clear حيث نضع قيمتها both على العنوان h١ (ما يهمنا هو الباب الثاني) والتي تعني زيادة الهامش العلوي بحيث لا يحتوي أي صناديق طافية على اليمين أو اليسار.
ويكون ذلك بكود css مثل هذا:

img { float:right; margin:١.٥em;}
h1 {clear:both;}

في مثالنا استخدمنا h١ لإخلاء الصناديق الطافية. لكن في الكثير من التطبيقات يكون من الصعب أن نعرف بشكل مسبق متى نريد أن تلتف الصناديق من حوله ومتى نريدها خالية لذا يمكنك عمل صندوق div وتعمل له صنف اسمه clear وأينما أردت إخلاء الصناديق الطافية وضعت <div class=“clear”></div> بكل بساطة.

• http://www.positioniseverything.net/easyclearing.html

تكديس الأيقونات ضمن صندوق

ومن فوائد الصناديق الطافية عمل ما يشبه متصفح الملفات في طور الأيقونات. فإن كنا في وثيقة ذات اتجاه عربي rtl وقمنا بعمل عدة صناديق span أو div أو حتى li كي تكون طافيات لليمين float:right فإنها ستتكدس بجانب بعضها حتى تملأ العرض المسموح لها ثم تنزل على سطر جديد هكذا:

إن زاد العرض فإن الأيقونات ستظهر بجانب بعضها وإن قل ستنزل في أسطر جديدة.
كود html للصورة السابقة هو:

<body dir="rtl">
<div class="iconbox">
<ul>
<li><a href="#">folder1</a></li>
<li><a href="#">folder2</a></li>
<li><a href="#">folder 3 with lone name</a></li>
<li><a href="#">folder4</a></li>
<li><a href="#">this is folder5</a></li>
<li><a href="#">folder6</a></li>
</ul>
<div class="clear"></div>
</div>

وكود css هو:

.iconbox {
 border: ٢px solid #٠f٠;
 margin:٣٢px;
 background:#ffe;
 opacity:٠.٨;
}
.iconbox ul { display:block;}
.iconbox ul li {
 display:inline;
 float:right; margin:١٦px; padding-top:٦٤px;
 min-width:٦٤px;
 text-align:center;
 background:#eef url('folder.png') no-repeat center ٨px;
}
.clear {clear:both;}

الصناديق الطافية وتخطيط المواقع

الصناديق الطافية والهوامش السالبة

تأمل الصورة التالية التي توضح تخطيط لموقع layout فيه عمود جانبي حيث كان الصندوق الطافي داخل الصندوق الكبير الذي لم يتم تحديد عرضه لكن تم وضع هامش أيسر له بمقدار ٢٠٠ بكسل

انظر ماذا يحدث لو جعلنا للصندوق الطافي هامش أيسر سالب

ويمكن عمل نفس الشيء على الطرف الآخر لعمل مخطط لموقع مكون من ٣ أعمدة.
إن كان الجسم الطافي شقيقا للصندوق الرئيسي (وليس ولدا له كما في المثال أعلاه) هنا يكون الهامش السالب هو للجهة التي عكس اتجاه الجسم الطافي. مثلا إن كان طافيا لليمين يكون الهامش الأيسر له سالب حتى نعمل لمسة التداخل overlapping الجميلة.

أنواع طرق العرض

أنواع طرق العرض التي تحدد طريقة سلوك الصندوق هي: inline أو block أو list-item أو run-in أو inline-block أو table أو inline-table أو table-row-group أو table-header-group أو table-footer-group أو table-row أو table-column-group أو table-column أو table-cell أو table-caption أو none إضافة إلى inherit
أهم هذه العناصر هي:

• none عنصر غير ظاهر
• inline عنصر ينساب مع السطر وتحدد العرض والارتفاع تلقائيا ويتم تجاهل قيمها إن قدمت
• block لبنة يعني صندوق له طول وعرض
• list-item قائمة وهذه الأخيرة يمكن تحديد شكلها عبر
  • list-style-type تكون قيمتها الافتراضية في ul هي disc لكنها يمكن أن تكون circle أو square أو decimal أو decimal-leading-zero أو lower-roman أو upper-roman أو lower-greek أو lower-latin أو upper-latin أو armenian أو georgian أو lower-alpha أو upper-alpha أو none
  • list-style-image استعمال صورة أو none
  • list-style-position وقيمته إما inside أو outside وهما مكان وضع العلامة داخل الصندوق أو خارجه والثانية هي السلوك التلقائي

ويمكن تجميع خصائص القائمة الثلاثة في list-style

• http://www.w3.org/TR/CSS2/visuren.html#display-prop

الأبعاد عندما تكون نسب مئوية

الفيض overflow والقص clipping

• http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping

توليد محتويات من داخل CSS

• http://www.w3.org/TR/CSS2/generate.html

الأخطاء الشائعة

هذه بعض الأخطاء التي كنت أعاني منها سابقا أو التي لا زالت تحدث معي سهوا:

أن لا يكون الخطأ في CSS

قد تدوخ وأنت تدقق كود CSS ثم تكتشف أن الخطأ كان في كود HTML كأن تنسى إغلاق وسم هنا أو هناك.
لذا أول شيء تقوم به هو أن تتحقق من صحة كود HTML فإن كان الكود هو XHTML يمكنك عمل تدقيق validate عبر xmllint الموجودة في حزمةlibxml٢ بالأمر

  xmllint --noout index.html

كذلك يمكنك استعمال مواقع التحقق مثل http://validator.w3.org/

الفاصلة المنقوطة

نسيان الفاصلة المنقوطة بين الخصائص مثلا

.box١ {position:absolute; left:٠; top:٠; width:١٠٠% height:١٠٠%;}

في هذا المثال لم أضع ; بعد تحديد width

تنظيف الصناديق الطافية

إذا نظرت إلى كود html في مثال متصفح الأيقونات السابق حيث هناك في داخل الصندوق

  <div class="clear"></div>

إذا أزلت هذا السطر فإن الصندوق الذي يحتوي الأيقونات سيكون ارتفاعه صفر ولن يظهر (لأن المحتويات الطافية لا تحجز مساحة من والدها) لهذا أضفنا صندوق به هامش بالقدر الكافي لاحتواء الطافيات عبر clear وسبب ذلك أن أن الصنف clear معرف في css بأنه

.clear {clear:both;}

القيمة both تعني من الجانبين ويمكن تحديد جانب دون آخر left أو right.