تعتبر لغة css من اللغات السهله في التعلم ولكن مثلها مثل غيرها تعتمد في اجزاء كثيرة على الخبرة والمهارة التي تحصل عليها من خلال حل المشكلات, ومن حسن الحظ ان هناك الكثير من الحلول التي توفر عليك عناء البحث . في هذا الموضوع سوف اقوم باستعراض بعض هذه الخدع والنصائح
======================================
تصفير الإعدادات
بسبب كثرة المتصفحات واختلافها يقوم كل متصفح بتفسير الصفحة بشكل مختلف عن الأخر, وكل متصفح له إعداداته الافتراضية الخاصة به, ولتجنب ذلك يجب ان تقوم بضبط الإعدادات الى القيم الافتراضية ويمكن عمل ذلك من خلال ملف reset.css.
هناك الكثير من الإعدادات التي ستجدها عند البحث, بالنسبة لي افضل استعمال الكود code التالي:
رمز PHP:
<code style="white-space:nowrap"> <code> /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20140126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</code> </code>
يمكنك تحوير الكود code بالشكل الذي تراه مناسبا لك فأنا اترك list-style لأني اقوم باستعمالها غالبا
استخدام تنسيق واحد لأكثر من عنصر
لا أرى ان هناك داعي ان تقوم بتكرير نفس التنسيق في حال انك تريد تكرير نفس السلوك لوسم معين.
فمثلا اقوم في اغلب الحالات بجعل الوسم <h> يستخدم نفس الخط الذي استعمله في وسم <span> <span> كالتالي:
</span>
رمز PHP:
<code style="white-space:nowrap"> <code> h1 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
h2 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
h3 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
span {font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
</code> </code>
يمكنك عمل نفس الشيء بشكل بسيط وبكود code اقل كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> h1,h2,h3,h4,h5,h6,span,b {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
</code> </code>
لاحظ انه يمكنك تنسيق الوسوم او الكلاسات التي تحتاجها بنفس التنسيق دفعة واحدة
استخدم RTL اذا كان موقعك بالعربية
اذا كنت تريد ان تقوم بتصميم موقع يعتمد على اللغة العربية فلا بد ان تقوم بعكس اتجاه جميع العناصر في الصفحة Right to left لان المتصفحات تعرض بشكل افتراضي من اليسار الى اليمين وهذا لا يصلح مع اللغة العربية لذلك عند بداية تصميمك يجب استعمال direction كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> body { direction:rtl;}
</code> </code>
قمنا بوضع الامر في body لضمان تطبيقه على كافة وسوم الموقع, ولاحظ انه يمكنك تغير rtl الى ltr عند عمل الموقع بأكثر من لغة
أختصر قدر الأمكان
إن المرونة التي تتمتع بها css تمكنك من كتابة اوامرك في سطر واحد او عدة أسطر فاذا كانت هناك امكانية لتصغير حجم الكود code قم باستغلالها, فمثلا عند عمل margin يمكن كتابتها كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> .wrapper {
margin-top: 5px;
margin-right: 1px;
margin-bottom: 30px;
margin-left: 8px;
}
</code> </code>
ويمكن اختصارها الى سطر واحد بدمج القيم الأربعة كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> .wrapper {margin: 5px 1px 30px 8px;}
</code> </code>
ويمكن تطبيق نفس الطريقة على الكثير من الأمور.
توسيط المحتوى أفقيا
إن توسيط المحتوى يعتبر أمر لابد منه في أي تصميم وعند قيامك بالتوسيط في CSS تحتاج إلى شرطين الأول أن يكون هناك عرض محدد للعنصر الذي تريد توسيطه, أما الشرط الثاني أن يتم تحديد الهوامش على اليمين واليسار لنفس العنصر بالقيمة auto كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="container">Content Here</div>
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> .container {width: 890px; margin: 0 auto}
</code> </code>
<h1 dir="RTL">توسيط النص عمودياَ[/B][/SIZE]
إذا كنت ترغب في توسيط النص عموديا داخل بلوك معين ثابت الأرتفاع كل ماعليك فعله هو تحديد خط طول للنص بواسطة الخاصية line-height يساوي ارتفاع ذلك البلوك كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="container">Text Here</div>
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> .container {height: 50px; line-height: 50px}
</code> </code>
لاحظ ان الارتفاع محدد بالقيمة 50 وبناءا عليه سيأخذ خط الطول نفس القيمة
تحديد فئات متعددة لنفس العنصر
من الخصائص الجميلة التي تعطيك تحكم أكبر في العناصر هي خاصية Multiple Classes فهي تمكنك من القيام بتخصيص العنصر في أكثر من موضع وبأكثر من طريقة
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="red blue green">Content Here</div>
</code> </code>
لاحظ انه يجب ترك فراغ بين اسم كل كلاس والأخر
رمز PHP:
<code style="white-space:nowrap"> <code> .blue {color: blue}
.green {color: green}
.red {color: red}
</code> </code>
يمكن بعد ذلك استعمال الكلاس blue على أي عنصر أخر تود جعل لونه أزرق أو استعمال الكلاس red لأي عنصر أخر
الزوايا الدائرية
بعد توفير هذه الميزة في CSS لم تعد بحاجة الى استخدام برنامج تصميم لتصميم الحواف بشكل دائري فقد كانت هذه العملية في السابق متعبه ولكن جائت CSS بالكثير من الطرق لرسم الزوايا المنحنية
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="block">Content Here</div>
</code> </code>
رمز PHP:
<code style="white-space:nowrap"> <code> .block {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}
</code> </code>
ويمكن التلاعب بشكل أكبر بهذه الزوايا وتحويرها لأكثر من شكل عن طريق
jQuery Corner
أنماط الروابط
الروابط في الصفحة تحتاج إلى تحديد نمط خاص بها عند كل حدث واذا لم يتم تحديد سلوك الروابط سيتم تحديدها بشكل تلقائي من قبل المتصفحات المختلفه مما يسبب عدم تناسق تلك الروابط مع باقي صفحات الموقع في أغلب الحالات.
فالرابط بعد الضغط عليه لن يكون بنفس الحالة التي كان عليها قبلها.
لذلك يجب تحديد تلك الأنماط لكافة الأحتمالات :
رمز PHP:
<code style="white-space:nowrap"> <code> a:link
a:visited
a:hover
a:active
</code> </code>
أستبدال النص بصورة
لابد انك خلال التصميم ستحتاج الى استبدال النص بصورة وتجد ذلك مستخدما بكثرة في القوائم فهناك من يقوم باستبدال كلمة home بايقونة.
ومايميز هذه الخدعه انها تقوم بالحفاظ على النص لاستخدامه في محركات البحث وفي نفس الوقت تقوم باظهار الصورة ويمكنك الاستفادة من هذه الخاصية باستخدام text-indent كالتالي:
رمز PHP:
<code style="white-space:nowrap"> <code> h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
</code> </code>
يجب أن يتطابق العرض والأرتفاع بنفس أبعاد الصورة
اتمنى ان يكون الموضوع مفيداً...
للمزيد يمكنك الاطلاع على الرابط التالي
خدع ونصائح في CSS | مدونة blog رامي
ط®ط¯ط¹ ظˆظ†طµط§ط¦ط* ظپظٹ CSS
رد مع اقتباس
