docs:css_tutorial

تعلم تنسيق وعرض المواقع عبر CSS

مقدمة

قيد الإنجاز.

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

سنستعمل في هذه المقالة خلفية تحتوي رقعة تحتوي مربعات رمادية صغيرة مساحتها 10×10 وأخرى كبيرة مساحتها 100×100 لتسهيل دراسة أحجام الصناديق المختلفة وقد منحنا تلك الصناديق بعض الشفافية حتى تظهر جميلة.

أين نضع كود 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:125%; font-weight:bold; }
a { color:blue; }
a:visited { color:violet ; }

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

<h1>Chapter 1</h1>
<p>this is some paragraph, click <a href="#ch2">here</a>.</p>
<p>this is <b>some bold text</b>, it's made so with b.</p>
<a name="ch2"><h1>Chapter 2</h1></a>
<p>this is another paragraph, click <a href="#ch3">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 إلى اللون الرمادي وهذا يشمل h1 الأولى والثانية (مع أن الثانية داخل 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:#ff0;}
.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=“ch1”] العنصر a الذي قيمة name فيه تساوي ch1
E[attr~=val] العنصر E الذي له صفة attr ولا تحتوي أي من قيمها المفصولة بمسافة الكلمة val a[name~=“ch1”] العنصر a الذي قيمة name فيه لا تساوي ch1

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

الصنف الوهمي المعنى
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 3 الجديدة بالمزيد من الصنوف الوهمية مثل tr:nth-child(odd) والتي تعني أسطر الجدول الفردية فقط دون الزوجية.

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

الأساسيات

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

body {
  background: #777 url('file1.png') no-repeat fixed center top;
}
div {
  background: transparent url('file2.png') repeat scroll 0 0;
}

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

  • لون الأرضية 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 وعندها لا يكون الترتيب مهم كذلك يمكن استخدام نسب مئوية مثلا 50% 50% والتي تكافئ center center أي في الوسط عموديا وأفقيا.

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

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

وهنا نحن حدّدنا background-image و background-repeat ولم نحدّد البقية

كما ويمكن تحديد تلك القيم فرادا هكذا

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

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

الألف باء

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

div{
  float:left;
  width:50px; height:50px;
  margin:10px; padding:0; border:0;
  background:transparent url('css-alphabet.gif') no-repeat 0 0;
}
#l1 {background-position: 0 -50px;}
#l2 {background-position: -50px -50px;}
#l3 {background-position: 0 0;}
#l4 {background-position: -50px 0;}

وكود html

<div id="l1">1</div>
<div id="l2">2</div>
<div id="l3">3</div>
<div id="l4">4</div>

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

ناتج مثال الألف باء

فإن أخذنا صندوق واحد حيث ظهر فيها حرف الثاء ذاك أننا رفعنا الإحداثي الصادي 50 بكسل لأعلى وطبعا ما هو خارج الصندوق لا يظهر.

يمكن استخدامها لعمل مؤثرات معينة عند وضع مؤشر الفأرة فوق عنصر معين. فإن كان عندك زر معين يمكنك تكديس 4 صور له فوق بعضها الأولى تكون في الوضع الطبيعي والثانية مرتفعة بمقدار ارتفاع الزر (مثلا -20 بكسل) تظهر عندما يكون الزر في حالة hover أي فوقه مؤشر الفأرة وآخر في حالة focus وآخر في حالة active …إلخ.

إليك هذا المثال الذي نغيّر فيه أرضية الأيقونة داخل الرابط وليس أرضية الرابط

تغير الصورة عند التأشير

كود css

#mybox {
  position: absolute; left:10px; top:10px;
  height:50px;
  padding:0 10px 0 60px; border:0;
  background:#acf;
 
}
#mybox span{
  position: absolute; left:0px; top:0px;
  width:50px; height:50px;
  margin:0; padding:0; border:0;
  background:transparent url('mybox.gif') no-repeat 0 0;
}
 
#mybox:hover span{ background-position:0 -50px; }

كود html

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

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

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

#mybox{
  background-color: #777;
  background-color: rgba(255,255,255,0.5);
}

الفرق بين لون الأرضية شبه الشفاف وتحديد قيمة الإعتام opacity هو أن الإعتام يؤثر على الصورة وعلى النص بحيث يصبح الصندوق بما فيه شبه شفاف بعكس لون الأرضية شبه الشفافة.

هنا حددنا خلفية رمادية بالكود #777 ثم غيرناها على المتصفحات التي تفهمها إلى أبيض (كل المركبات اللونية إلى أقصى قيمة وهي 255 ثم مقدار الإعتام وهي 1 للون المصمت و 0 للون الشفاف تماما وفي المثال وضعناها على 0.5 أي نصف شفاف فإن كانت 0.25 كانت أكثر شفافية)

إن كنت تريد أن يعمل على internet explorer يمكنك إضافة هذا الكود الخاص به

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

حيث أننا حددنا قيمة البداية والنهاية نفسها لكن عوضا عن تحديد 3 مساقط ست-عشرية كل واحدة منزلتين rgb حددنا 4 مساقط أولها الإعتام (ونحن نريده 0.5 أي من 255 نريد 128 تقريبا يعني 80 بالست-عشري)

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

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

	filter:alpha(opacity=75); /* for IE*/
	opacity: 0.75;

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

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

الهوامش

أبعاد الصناديق ومواضعها

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

#div1{
	background:#ccf;
	position: absolute;
	left:100px; top:100px;
	width:100px; height:100px;
	border:20px solid #fcc;
	margin:20px;
	padding:10px;
	opacity:0.5;
	filter: alpha(opacity=50); /* IE */
}

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

أماكن الهوامش

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

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

وعند تحديد قيمة لأي مما سبق فإنها تكون على الجهات الأربعة حول الجسم فإن كان عرض الجسم 100 بكسل وارتفاعه موجود على بعد 100 بكسل من رأس الشاشة و 100 بكسل من يسارها (كما في المثال) فإن هذا الجسم سيحتل منطقة عرضها 200 بكسل وارتفاعها 200 وذلك أن العرض المحدد (وهو 100 بكسل) زاد عليه 20 و 20 و 10 أي 50 من اليمين ومثلها من اليسار تلك تمام المئتين ومثل ذلك للارتفاع. وهذا يعني أن الصندوق سيقع على المنطقة من 100,100 إلى 300,300.

ويمكن تحديد قيمة مختلفة لكل جهة مثلا لدينا

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

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

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

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

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

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

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

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

صورة توضح استخدام الهوامش السالبة والأطر شبه الشفافة

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

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

صورة داخل صندوق دون الهوامش السالبة أو معها

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

#sign {
	position:relative;
	margin-top:-50px;
	margin-right:-25px;
}

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

هامش سالب على الترويسة

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

هامش سالب على ترويسة الصندوق

الأطر

أما الإطار 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 في البداية مركبة من 3 عناصر هي على الترتيب السمك والنمط واللون.

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

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

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

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

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

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

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

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

ويمكن محاكاة هذه اللمسة الفنية على Internet Explorer لكن ليس عبر الأطر بل عبر لون الأرضية ونتحكم في سمك الإطار من خلال الوسائد padding

محاكاة الأطر الشفافة في IE

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

background-color:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
zoom: 1;
border:1px solid #777;
padding:10px;

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

الأطر المنحنية في CSS3

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

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

إن كنت تريد وضع قيمة واحدة متساوية للزوايا الأربعة فإن الصيغة أعلاه تكفيك فهي تدعم webkit (وبالتالي سفاري وكروم) بالسطر الأول و mozilla و firefox بالسطر الثاني وإن تم اعتمادها في CSS3 فإن السطر الثالث يدعمها.

أما إن أردت قيم مختلفة للزوايا المختلفة فإن mozilla firefox يقبل قيمة أو 2 أو 3 أو 4 وفي هذه الأخيرة نبدأ من الزاوية اليسرى العليا ونسير مع عقارب الساعة. أما webkit فلا يدعم أكثر من رقم وإن قدمت له رقمين فالثاني هو مقدار الانحناء لهذا عليك استعمال الجدول أدناه لتحديد الزوايا المختلفة.

CSS3 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

للمزيد انظر

الظلال

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

	-webkit-box-shadow:0 0 8px 4px rgba(240,240,255,0.8);
	-moz-box-shadow:0 0 8px 4px rgba(240,240,255,0.8);

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

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

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

تحديد الموضع

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

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

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

كود css

div {
  width:100px; height:100px;
  margin:10px; padding:30px; border:10px solid #fcc;
  background:#acf;
  opacity:0.7;
  filter: alpha(opacity=70); /* IE */
}
#d1 { position: absolute; left:10px; top:10px; }
#d2 { position: absolute; left:300px; top:10px; }
 
div div {
  left:0px; top:0px;
  width:20px; height:20px;
  margin:0; padding:0; border:0;
}
 
#d1c1 { position: absolute; background:#0f0; }
#d1c2 { position: absolute; background:#f00; }
#d2c1 { position: relative; background:#0f0; }
#d2c2 { position: relative; background:#f00; }

كود html

<div id="d1"><div id="d1c1"></div><div id="d1c2"></div>absolute</div>
<div id="d2"><div id="d2c1"></div><div id="d2c2"></div>relative</div>

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

التحكم في الموقع

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

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

الأساسيات

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

فعند كود css التالي

img { float:right; margin:1.5em;}

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

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

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

صورة طافية على اليسار

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

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

تداخل صورة من الباب الأول مع الباب الثاني

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

تكبير الهامش العلوي للتخلص من الطافيات السابقة

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

ويكون ذلك بكود css مثل هذا:

img { float:right; margin:1.5em;}
h1 {clear:both;}

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

بكل بساطة.

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

ومن فوائد الصناديق الطافية عمل ما يشبه متصفح الملفات في طور الأيقونات. فإن كنا في وثيقة ذات اتجاه عربي 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: 2px solid #0f0;
	margin:32px;
	background:#ffe;
	opacity:0.8;
}
.iconbox ul { display:block;}
.iconbox ul li {
	display:inline;
	float:right; margin:16px; padding-top:64px;
	min-width:64px;
	text-align:center;
	background:#eef url('folder.png') no-repeat center 8px;
}
.clear {clear:both;}

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

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

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

صندوق طاف إلى اليسار داخل صندوق له هامش أيسر

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

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

ويمكن عمل نفس الشيء على الطرف الآخر لعمل مخطط لموقع مكون من 3 أعمدة.

إن كان الجسم الطافي شقيقا للصندوق الرئيسي (وليس ولدا له كما في المثال أعلاه) هنا يكون الهامش السالب هو للجهة التي عكس اتجاه الجسم الطافي. مثلا إن كان طافيا لليمين يكون الهامش الأيسر له سالب حتى نعمل لمسة التداخل 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

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

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

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

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

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

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

قد تدوخ وأنت تدقق كود CSS ثم تكتشف أن الخطأ كان في كود HTML كأن تنسى إغلاق وسم هنا أو هناك.

لذا أول شيء تقوم به هو أن تتحقق من صحة كود HTML فإن كان الكود هو XHTML يمكنك عمل تدقيق validate عبر xmllint الموجودة في حزمةlibxml2 بالأمر

  xmllint --noout index.html

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

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

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

.box1 {position:absolute; left:0; top:0; width:100% height:100%;}

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

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

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

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

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

.clear {clear:both;}

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

مراجع

مواقع ذات صلة

نقاش

أبو حفصة, 2010/01/15 07:02

السلام عليكم ورحمة الله وبركاته

ما شاء الله معلومات غزيرة ، الله يوفّقنا لحفظها (وفهمها^_^).

هناك ملاحظة وهو أنه يوجد برامج تساعد على إنشاء ملفات CSS وبالتالي سرعة العمل ، وتفادي الأخطاء الكتابية كنسيان الفاصلة المنقوطة وغيرها .

كما تساعد على تذكر أسماء العناصر والخصائص خاصة للمبتدئين .

من أمثلة تلك البرامج برنامج quanta plus .

الهاكر المحترف, 2010/01/20 17:49

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

شرح مرعب وغير متسلسل!

taher, 2010/04/26 09:03

هل حاولت اخي شرح افضل من هذا ؟؟؟

مؤيد السعدي, 2010/01/20 23:02

هل قرأت “قيد الإنجاز” في أول المقالة ؟

هل لاحظت عبارة:

  • هذه المقالة موجهة لشخص يعرف أساسيات HTML/XHTML.

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

وبالمناسبة أنا أكتبها أثناء تعلمي لها.

abood, 2010/04/26 09:02

موف صديقي والله يشد باديك وفعلا تعبان والله يوفقك ويسرلك امور ويجزيك كل خير

أنس أحمد, 2010/07/19 16:21

لقد فهمت الكثير من هذه المقالة بعد قراءتي وتطبيقي لمقالة بدهيات HTML مع أنها هي اﻷخرى لم تكتمل بعد .. لك جزيل الشكر عمي مؤيد على هذا العمل الرائع.

fatine, 2010/08/24 11:09

ما شاء الله استفدت كثيرا ألف شكر لك وجزاك الله الجنه موفق بأذن الله

php, 2011/02/16 19:10

اخي مشكور لكن لدي طلب ارجو ارسال ليكيفية جعل الجداول شفافة والصور كدلك ارسله لي هنا halobane2009@hotmail.fr

مؤيد السعدي, 2011/02/21 07:13

انظر البندين أعلاه

  • الأرضية شبه الشفافة
  • الشفافية ودرجة الإعتام
Bubbi, 2011/05/09 01:08

TYVM you've slvoed all my problems

Ajroudi, 2011/05/28 02:21

thanx brother needed that so mutch hope you stay with yr elegance

محمد شطناوي, 2011/08/28 12:08

دورةcss يسيطه من مجتمع الينكس.. من ثم ارجع الى هنا

Chasmine, 2011/10/31 12:26

Keep it conimg, writers, this is good stuff.

Teige, 2011/12/28 11:27

No qutesion this is the place to get this info, thanks y'all.

sara, 2012/02/17 01:18

شرح راااااااااااااااائع شكرا

Leon, 2012/02/22 01:07

As Chralie Sheen says, this article is “WINNING!”

Matee, 2012/06/23 21:06

Home run! Great slguingg with that answer!

Mayelin, 2012/07/04 08:56

Thanky Thanky for all this good infromtiaon!

hassan, 2013/01/17 22:30

شرح راااااااااااااااائع شكرا 3>

Mazajcool

assemhomidy, 2013/01/22 23:53

تسلم يا أسد على هذا الدرس الرررررائع فعلا قله من في عطاءك ..ربي يعطيك من فضله

Blondy, 2013/05/14 07:17

Your article pfreectly shows what I needed to know, thanks!

Rangle, 2013/05/16 07:55

Wham bam thank you, ma'am, my quseitons are answered!

nour, 2013/05/26 19:44

برااافو شرح مبدع ف البداية وشتغل عندي بس في الأخير لما شرحت علي الهوامش السالبة ماكان واضح مثل الأول

غريب يا فؤادي, 2013/06/15 17:37

جزاااك الله الجنان العلى على هذه المعلومات القيمة فعلا

اشكرك جدا

واطلب منك . كيفيه كتابة نص شفاف ؟ بالـ CSS

ولك جزيل الشكر والتقدير

bqtrkrdjx, 2015/04/23 21:52

a2V5ZXMmIzgyMTc7IHNlY29uZCBsZWFkaW5nIHNjb3JlciBhbmQgdGhlIEJpZyBUZW4mIzgyMTc7 [url=http://www.burberryoutletonline.us.org/]http://www.burberryoutletonline.us.org[/url] Nick Pihakis, left, of the Fresh Hospitality restaurant group, and Chris Harrigan, the former executive chef at Stones Throw Bar Grill, have partnered with EBSCO Industries to open Mr. Harry's Chickin De-Lux in the Town of Mt Laurel in Shelby County, Ala. (Photos by Angie Mosier and Michelle Campbell) d [url=http://www.abercrombieandfitch.us.org/]abercrombie and fitch[/url] kAm鈥渪? @FC 492 A:@?D9:A 82 6 H6 :DD65 `b =2JFAD :? E96 7:CDE 92=7 2?5 7@F?5 @FCD6=G6D 5@H? `c 62C=J :? E96 E9:C5 BF2CE6C[鈥?E96 4@249 D2:5] 鈥?96 E62 AF==65 E@86E96C 2?5 C6=:65 @? 6249 @E96C E@ 4C2H= 324 :?E@ E96 82 6] pE E96 368:??:?8 @7 E96 7@FCE9 BF2CE6C H6 H6C6 5@H? 3J E9C66 2?5 H6 ?6H E96 @E96C E62 H2D 86EE:?8 E:C65] p7E6C :DD:?8 @FC 7:CDE `a E9C66\A@:?E D9@ED @7 E96 82 6 vF??6C 2?5 %2??6C 3@E9 256 E9C66\A@:?E D9@ED :? E96 =2DE E9C66 :?FE6D E92E H96C6 9F86 2?5 E96? vF??6C DAC2:?65 9:D 2? =6 2?5 H6 EFC?65 E@ z682? q;@C?? E@ 4@ 6 :? 2?5 4@?EC@= E96 3@2C5D 2?5 5676?5 E96:C :?D:56 82 6] z682? 925 D@ 6 8C62E C63@F?5D 2?5 2? 2 2K:?8 E9C66\A@:?E A=2J H:E9 F?56C EH@ :?FE6D =67E E92E 96=A65 FD 82:? E96 =625 7@C E96 7:?2= :?FE6D] u=2 6 2?5 v2C5?6C =65 H:E9 `a A@:?ED 2?5 6249 925 2 5@F3=6\5@F3=6 H:E9 A@:?ED 2?5 C63@F?5D] z682? H2D 4=@D6 369:?5 H:E9 ?:?6 A@:?ED 2?5 ?:?6 C63@F?5D] zFCE 925 6:89E A@:?ED 2?5 `_ 2DD:DED H:E9 %2??6C 2?5 vF??6C 6249 255:?8 6:89E A@:?ED 2A:646]k^Am [url=http://www.guccioutletstore.in.net/]gucci outlet[/url] At least 10 per cent, and possibly as much as 17 per cent, of its global workforce could be cut in what would be the first mass lay-offs in the company's 32-year history. Across the world, up to 15,000 jobs could be under threat. Granted, not every artificial intelligence needs to be as compelling as HAL 9000 or as captivating as WALL-E. But those two creations were nothing if not a demonstration of how expressive silence can be, while showing the level of artistry required to imbue a hunk of metal with genuinely lifelike attributes. For better and for worse, Blomkamp and his collaborators (including the visual-effects team of Image Engine and the physical-effects team of Weta Workshop) have given us a frenetic robot protagonist who, when he鈥檚 not throwing knives or smashing cars, insists on questioning those around him at every turn, all while bearing horrified witness to the general awfulness of humanity. Before long, Chappie isn鈥檛 just asking 鈥淲hat is the Internet?鈥?but 鈥淲hy do you humans do this?!鈥?鈥?an excellent query, to be sure, but by that point you may feel too enervated to give it the weight it deserves. [url=http://www.abercrombieandfitch.us.org/]abercrombie and fitch[/url] Font ResizeBay Point: Removal of 'Shell Pond' polluted soil set to start in AprilPosted: t [url=http://www.hollisterclothing.in.net/]hollister clothing[/url] Eat Right, All the Time [url=http://www.poloralphlaurenoutletonline.in.net/]ralph lauren outlet[/url] “The case is really about the continued perpetuation by Uber of the myth that it offers the safest ride on the road,” said plaintiffs' attorney Bruce Simon of Pearson, Simon Warshaw in San Francisco. The plaintiffs are also represented by the Dolan Law Firm in San Francisco, which has filed a separate suit against Uber in a case in which an Uber driver ran over a 6-year-old girl and killed her on New Year's Eve. v Ahmed Rashid raps Western knuckles for a knee-jerk resort to military operations instead of seeking new regional alliances and prodding Muslim leaders to deal with their own problems. He writes: The lack of leadership is most visible in the Muslim world . . . there is silence, helplessness and hopelessness . . . nowhere is civil society strong enough to demand greater action against extremism. [url=http://www.coachoutlet.us.org/]coach outlet online[/url] Poynette's big inning came after Algoma scored two runs in the fourth off a throwing error and wild pitch. [url=http://www.coachoutlet.cc/]coach outlet store online[/url] 鈥淗e was interested in their views on a range of issues regarding education,鈥?Scarpinato said. 鈥淚 don鈥檛 believe there was one issue that he was deciding this is based on.鈥?[url=http://www.michaelkorsbags.in.net/]www.michaelkorsbags.in.net[/url] Among the sheet metal, cabinetry, surfboard manufacturing and auto repair shops along Calle de los Molinos in the old town San Clemente industrial district is a new business, 鈥淪mall Space.鈥?http://www.polo.us.org A senior counter-terrorism officer with London鈥檚 Metropolitan Police, Deputy Assistant Commissioner Helen Ball, said about 60 British women have gone to Syria. Of these, 22 were reported by their families, including 18 who were aged 20 or younger, she said. The last five reported to have travelled were just 15 and 16. [url=http://www.guccioutletstore.in.net/]gucci outlet[/url] Cut out two large hearts and two slightly smaller hearts. Trim one side of each of the large hearts to be smaller than the medium hearts. Glue the larger halves of the large hearts next to one another on the card, to form one large heart with two small flaps sticking up. Then nest the two smaller hearts on either side and glue one half of each down. g [url=http://www.coachpurses.us.org/]coach outlet online[/url] Feeder HeifersMedium and Large 1 [url=http://www.toryburch.us.org/]tory burch[/url] The dissatisfaction among the people last days was because of the government's new plan scheme regarding the retired and changes in Value Added Tax (VAT). Second chances don't happen often in the restaurant business. Many restaurants – even some of the good ones – barely make it out of the gate before they close. [url=http://www.michaelkorsoutlet.co.com/]michael kors handbags[/url] Kickoff is set for 7:17 p.m. Saturday at Lucas Oil Stadium in Indianapolis. The court, in its ruling, said essentially it had no jurisdiction over the issues brought forth in the suit and therefore could not hear the case. [url=http://www.polo.us.org/]polo[/url] CONNECTED TO THE OCEAN Copyright Tampa Bay Newspapers: All rights reserved. [url=http://www.coachoutlet.co.com/]coach outlet online[/url] , who heads the , addressed both the House and Senate committees. f Now, once more, the story of these young men has been brought to light. This time it s in the form of a play written by Stancil and performed recently with the help of local legal professionals as part of the 5th Judicial Circuit s chapter of the D.R. Smith American Inn of Court. [url=http://www.hollisterclothingstore.us.com/]hollister clothing store[/url] Stand with one foot in front of the other so that your front foot is pinning down the center of your resistance band. Raise the resistance band out to either side in a side lateral raise as the starting position. Move your arms from the side lateral position to straight out in front in a front raise to back to the sides to count as one rep. ST. PETERSBURG 聳 Eckerd College and the Florida State University College of Law have created a new program that will allow Eckerd students to obtain a bachelor聮s degree and a law degree in six years instead of seven. [url=http://www.abercrombieandfitch.us.org/]www.abercrombieandfitch.us.org[/url] Cheezum has made it clear he won聮t close the deal until all the red tape is taken care of and the certificate of appropriateness is what is needed for him to be able to demolish the century old building and clear the land for construction. r [url=http://www.lv.net.co/]lv bags[/url] Mr. de Blasio is expected to address federal transportation funding at a news conference at Boston鈥檚 historic Faneuil Hall as part of the U.S. Conference of Mayors鈥?Cities of Opportunities Taskforce, a panel on which Mr. de Blasio serves as chairman. [url=http://www.moncleroutlet.us.org/]moncler outlet[/url] Article published on Tuesday, Sept. 30, 2014 l $dayLabel.text(dayLabels[dayNumber].slice(0,3)); [url=http://www.michaelkorsoutlet.co.com/]michael kors outlet[/url] The philanthropic community foundation says individual and organizational donors have established scholarship funds at the foundation to assist students with tuition, fees and books. z The play that Butts called wasn鈥檛 unlike the play that Arizona needed in the final ticks of last year鈥檚 painful Elite Eight loss to Wisconsin. Nick Johnson was unable to score that night, but on Sunday afternoon, it didn鈥檛 seem possible that Warthen would miss. [url=http://www.af.net.co/]af[/url] 31.12.2009 [url=http://www.truereligionoutlet.mobi/]ture religion jeans outlet[/url] The hacking group said it took the information from government servers, databases and emails and called on its followers to mount attacks. [url=http://www.coachpurses.us.org/]coach purses[/url] But after 21,724 cases and 8,641 deaths in nine countries since the epidemic began in Guinea last year, there is some light. And health workers are already starting to look at what s next. Right now important meetings are going on in each country to work out what needs to be done to rebuild - in some significant respects to build health systems almost anew - and to build back better, said Harris. m [url=http://www.coachoutlet.cc/]http://www.coachoutlet.cc[/url] Girls soccer [url=http://www.ralph-lauren.eu.com/]ralph lauren[/url] Just thought I鈥檇 take a moment to acknowledge the horticulture students at Orange Coast College who knock it out of the park every year at the Southern California Spring Garden Show at South Coast Plaza. will be at the (5-0) and Don Bosco Prep (2-3) football game Friday night serving up free samples of mac and cheese with specialty toppings from the Stouffer s Mac N Cheese Food Truck, part of a swing through several states. [url=http://www.poloralphlaurenoutletonline.in.net/]polo ralph lauren outlet online[/url] We feel safer here in Cameroon, although we came with nothing, Shaibu, a member of the Mbororo community, told IRIN. p [url=http://www.coachhandbags.us.org/]coach bags[/url] “All the water temperatures we fishes were in the 66-degree range, but with the sun out Saturday, it had warmed up to 71 in the afternoon,” Logan Marston said. [url=http://www.michaelkors.us.org/]http://www.michaelkors.us.org[/url] Weave a basket: Learn how to weave a pine needle basketry using Seminole techniques on Tuesday from 5-8 p.m. at the , 115 Westview Ave. in Valparaiso. The cost is $55 or $50 for museum members.

fboffydoyt, 2015/04/23 23:32

تعلم تنسيق وعرض المواقع عبر CSS [أعجوبة] [url=http://www.gh8f3798td2v958j0mjh6yg68e0a23ybs.org/]ufboffydoyt[/url] <a href=“http://www.gh8f3798td2v958j0mjh6yg68e0a23ybs.org/”>afboffydoyt</a> fboffydoyt http://www.gh8f3798td2v958j0mjh6yg68e0a23ybs.org/

Mo.OM, 2015/05/15 11:36

شكرااااااااااااا جدا وبارك الله فيك والله معلومة كان عندي خلفية عنها بس شرحك عجبني 😂

jaouadnet, 2015/05/22 21:12

شكرا كثيرا على هده المعلومات القيمة ساحاول تطبيقها على موقع http://cartoon-network-arabic.com

hesoka, 2015/11/13 04:32
شكرا لك جزيلا علمتني اشياء جديدة لم اكن اعلمها..
ahmadbatran, 2016/03/24 08:40
شكرا
مجهول, 2016/11/04 18:54
اخي الكريم انا عم ضيف كود css داخل الصفحة بس مام يتغير شي بلموقع جربت اكتر من متصفح نفس المشكلة شو الحل
أدخل تعليقك:
 
آخر تعديل:: 23 نيسان 2015 الساعة 00:19 (تحرير خارجي)