جهان سایت

طراحی وب سایت | خدمات سئو حرفه ای | بازاریابی اینترنتی

پیش گفتاری بر CSS، معجزه گری در طراحی صفحات وب!

CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است، فلسفه پیدایش CSS به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد، پیش از این برای اینکه به فرض رنگ فونت یک متن را در صفحات مختلف تغییر دهیم، ناچار بودیم در هر صفحه فونتمان را پیدا کنیم و با هزاران رنج و مشقت و صرف وقت زیاد، تک تک آنها را ویرایش کنیم، اما با آمدن CSS، کار خیلی راحت شد!

فرمت بندی بدون استفاده از css

کد زیر بدون استفاده از CSS فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی و ذخیره کنید):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>جهان سایت | صفحه وب بدون استفاده از css</title>
<!-- http://jahansite.com -->
</head>
<body bgcolor="#0099CC">
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن بدون استفاده از css
</font>
</div>
</body>
</html>

فرمت بندی با استفاده از css

و همان کد با استفاده از CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>جهان سایت | صفحه وب با استفاده از css</title>
<!-- http://jahansite.com -->
<style type="text/css">
body{
    background-color:#0099CC;
}
.mydiv{
    text-align:justify;
    direction:rtl;
    color:#003366;
}
</style>
</head>
<body>
<div class="mydiv">
نمایش متن با استفاده از css
</div>
</body>
</html>
قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است، به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.
در ادامه باید بگوییم که :
– css یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، اما به تگ های html شکل و قالب می دهد.
– برای دیدن و مقایسه کد صفحات، کلیک راست و view source را انتخاب کنید.
– کد های css یا به صورت درون صفحه ای است یا به صورت فایل خارجی (شیوه استاندارد).
– تگ style برای ایجاد کدهای css داخلی کاربرد دارد.
– برای ایمپورت یک فایل css خارجی، از کد link و خاصیت های آن، درون تگ head استفاده می کنیم.