بياييد به روزهاي اوليه وب برگرديم . هيچ استانداردي نبود و هر مرورگر هر روز يه تگ جديد معرفي ميکرد. بالاخره يه موسسه همه مرورگر ها رو سر يه ميز جمع کرد و با هم استانداردي بنام W3C را تصويب کردند . در اين زمان نياز عمده اي حس ميشد که محتويات سايت از طراحي جدا شود . در اينجا بود که سر و کله CSS پيدا شد و مسئوليت نمايش نماي صفحات را به عهده گرفت و XHTML نيز براي نمايش اطلاعات بگار گرفته شد . طراحي وب سايت

چرا بايد به جاي جدول از کد CSS استفاده کرد ؟
اول اينکه کد شما خيلي کوتاه تر ميشه ، حتي نصف !
دوم اينکه سرعت لودينگ سايت شما بيشتر ميشه .
ظاهر سايت راحت تر تغيير مييابد : شما يک فايل CSS را تغيير مي دهيد و کل سايت شما تغيير مي يابد .

در اين مقاله شما ياد ميگيريد چگونه بجاي جداول از CSS وکلاس هاي آن استفاده کنيد
ساخت کلاسي براي عناصر تگ <div> : اولين قدم ساخت کلاس CSS است که المنت هاي تگ <DIV> از آن استفاده ميکنند . بصورت زير :

div.leftnav{
background: white;
color: black;
/* other display information here */
/* add Positioning information here */
}

اين کلاس بسيار ساده است و در اصل الان کاري انجام نميدهد . فقط متن سياه را روي زمينه سفيد تعريف ميکند . شما بايد از اين المنت در جايي از صفحه استفاده کنيد .

موقعيت يابي وابسته ساده :
اين بدين معناست که ما فقط هر عنصر را در موقعيتش قرار ميدهيم و بدين تعريف کردن جاي دقيق آن در صفحه .

div.leftnav{
background: white;
color: black;
/* Other display information here */
width: 15%;
}

خوب . ما چه انجام داديم ؟ ما گفتيم که هدايتگر چپ بايد در سمت چپ باشه ، جاييکه در صفحه قرار ميگيرد . اين بد نيست ، اما براي انعطاف بيشتر ممکنه شما به موقعيت يابي مطلقي نياز داشته باشيد . همچنين اين خيلي مهمه که بدونين که چيزي که شما تا حالا انجام داديد موقيت نمايي اصلي نيست . تمام چيزي که تعريف کرديد Width بود . بنابرين يک المنت با پهناي 15% ساخته خواهد شد .

موقعيت نمايي مطلق . اضافه کردن border و margin :
موقعيت نمايي مطلق به معناي اين است که شما بگوييد دقيقا المنت هاي شما کجاي صفحه ظاهر شوند . اينکار با تعريف خاصيت هاي top , bottom, left , right امکان پذير ميشود:

div.content{
background: white;
color: black;
position: absolute; /* Says which positioning we are using */
left: 17%; /* 17% from the left side of the screen */
width: 69%; /* This is the width */
}

نکته اينجاست که در کد بالا فقط خاصيت left تعريف شده، اين کافيه ! نيازي نيست که شما تمامي تمام خاصيت هايش را تعريف کنيد . اما براي انعطاف پذيري بيشتر ممکنه خودتون بخواهيد اينکارو بکنيد . بطور مثال ممکنه شما بخواهيد يک منو در سمت راست اضافه کنيد:

div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
}

اساسا در موقعيت نمايي مطلق اين المنت ها معاني زير را دارند:
Left : فاصله از چپ صفحه ، معمولا بر حسب درصد
Right : فاصله از راست صفحه ، معمولا بر حسب درصد
Top: فاصله از بالاي صفحه ، معمولا بر حسب پيکسل
Bottom : فاصله از پايين صفحه ، معمولا بر حسب پيکسل

نکته اينکه bottom به ندرت استفاده ميشود ، اما گاهي لازم ميشود . اگر شما از 4 يا 3 تا پراپرتي با هم استفاده کنيد ،بايد قادر به قرار دادن تگ DIV در هر کجا که ميخواهيد باشيد . همچنين در نظر داشتن اين نکته مهم است که راه هاي بيشتري نيز براي موقعيت نمايي يک المنت در کنار موقعيت نمايي مطلق وجود دارد . اما تمام مرورگر هاي وب آن راه ها را پشتيباني نميکنند .

افزودن Border :
ممکنه شما بخواهيد کمي عناصرصفحه را با لبه کنار صفحه يا هر چيز ديگر فاصله دهيد ، border ها براي اين امر مناسبند . اما صفحه خود را در مرورگر هاي مختلف تست کنيد تا نتيجه درستي دريافت کنيد . و حال طرز ساخت حاشيه ها:

div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
border-color: white; /* Keep the border invisible */
border-style: solid; /* It is a solid invisible line which is fine */
border-bottom-width: 2px; /* These attributes are pretty self-explanatory */
border-top-width: 2px;
border-left-width: 3px;
border-right-width: 4px;
}

افزودن حاشيه يا margin :
Margin ها ابزار هاي قدرتمندي در سايت هاي css ميباشند .در مقدمه ميبينيد که شما ميتوانيد چيزي را بکمک تعيين فاصله درصدي از طرفين margin ها در وسط قرار دهيد .

div.content{
background: white;
color: black;
margin-left: 20%; /* 20% from the left side of the screen */
margin-right: 20%; /* 20% from the right side of the screen */
}

نقصان وجود پشتيباني مرورگر ها :
پشتيباني نشدن تمام دستورات css توسط تمامي مرورگر ها مشکلات زيادي را براي طراحان پيش آورده . Mozilla ( و مرورگر هاي زير مجموعه آن مانند FireFox ) و Opera بروز رساني بسيار خوبي در پشتيباني دستورات css دارند . اما Internet Explorer کمي عقب مانده است . کد هايي که در اين مقاله نوشتيم توسط تمامي مرورگر ها پشتيباني ميشود .

ناسازگاري بين مرورگر ها :
بيشتر مردم از آخرين نسخه مرورگرها استفاده مي کنند. مرورگر هاي گوناگون کد css شما را بگونه هاي مختلف تفسير ميکنند . اصلي ترين مرورگر در اين زمينه IE است که ممکنه کد هاي border را بگونه ديگري نشان دهد .

افزودن تگ DIV :
افزودن تگ DIV براي گره زدن تمام اطلاعات بسادگي زير انجام پذير است :

<div class = "leftnav">
// Insert Links
</div>

همانطور که مي بينيد خيلي ساده اينکار انجام شد و بيشتر کار در فايل CSS انجام ميشود . شما ميتوانيد از تگ DIV در هرجاي صفحه استفاده کنيد . در انتها اينجا يک صفحه XHTML ساده را مي بينيد که کد css آنرا ساخته و نماي آن سه ستون دارد :

<div class = "content">
// Content
</div>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>
منبع: سرزمين دانلود