تبلیغات
Fact World - مقدمه ای بر CSS، جادوگر طراحی وب!

آموزش برنامه نویسی و مهارتهای وب

article 

مقدمه ای بر 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 استفاده می کنیم.
section دسته بندی: آموزش مقدماتی - آموزش مقدماتی CSS -


یکشنبه 13 مهر 1393

نظرات ()


پنجشنبه 16 شهریور 1396 05:12 ق.ظ
Excellent blog right here! Also your site so much up fast!
What host are you the usage of? Can I get your associate hyperlink to your host?
I desire my web site loaded up as quickly as yours lol
یکشنبه 15 مرداد 1396 11:52 ب.ظ
I seriously love your site.. Great colors & theme.

Did you make this web site yourself? Please reply back
as I'm attempting to create my very own blog and would like to find out where you
got this from or what the theme is named. Kudos!
جمعه 13 مرداد 1396 06:36 ق.ظ
I blog quite often and I genuinely appreciate your content.

Your article has truly peaked my interest. I am going to book mark your site and keep
checking for new information about once a week. I opted in for your RSS feed too.

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )