هذه خمس قواعد لكتابة ملف CSS يسهل قرائته..
1-رتب خصائص عناصر CSS أبجدياً كالتالى:
#nav
{
{
color: #000; padding: 10px; width: 650px;}
وضع مسافات فى بداية العناصر الوارثة من عنصر رئيسى لتوضيح العلاقات بينهم كالتالى :
#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
} 3- استخدم التعليقات لفصل الأقسام الرئيسية فى الكود المتعلقة ببناء مستندHTML :
/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
} استخدم مسافات والمحاذاة لفصل الخصائص عن قيمها :
#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}
ضم العناصر المتشابهة فى الخصائص فى مجموعات
مثال:
.icon-facebook {
background:url(facebook.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-twitter {
background:url(twitter.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon-delicious {
background:url(delicious.gif);
padding-left: 26px;
margin-right: 20px;
width: 100px;
}يفضل كتابته بهذه الطريقة ,,
.icon-facebook,
.icon-twitter,
.icon-delicious{padding-left: 26px;margin-right: 20px;width: 100px;}.icon-facebook{background:url(facebook.gif);}.icon-twitter{background:url(twitter.gif);}.icon-delicious{background:url(delicious.gif);}
Post a Comment
ايه رأيك؟