خلاصه توضیحات : CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است، تیتر مطلب گویا است که CSS را باید به راستی جادوگر طراحی وب نامید!، اگر تجربه کار با آن را داشته باشید حتما شما هم با نظر ما موافقید، فلسفه پیدایش CSS به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد
مقدمه ای بر CSS ، آشنایی اولیه
CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است، تیتر مطلب گویا است که CSS را باید به راستی جادوگر طراحی وب نامید!، اگر تجربه کار با آن را داشته باشید حتما شما هم با نظر ما موافقید، فلسفه پیدایش 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://webgoo.ir -->
</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://webgoo.ir -->
<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 استفاده می کنند که در صفحه مورد نظر به اصطلاح ایمپورت شده اند (در این باره در مطالب بعدی بیشتر خواهیم گفت)، و واضح است که این کار تا چه حد در ذخیره وقت و بالا بردن قدرت مانورمان موثر است (تا جایی که دیگر کسی به طراحی وب بدون CSS فکر نمی کند!).
توضیح:
- css یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های html شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات، کلیک راست و view source را انتخاب کنید.
- کد های css یا به صورت درون صفحه ای است یا ایمپورت به صورت فایل خارجی (شیوه استاندارد).
- تگ style برای ایجاد کدهای css داخلی کاربرد دارد.
- برای ایمپورت یک فایل css خارجی، از کد link و خاصیت های آن، درون تگ head استفاده می کنیم.
فیسبوک ما
توییتر
گوگل پلاس
یوتیوب ما