CSS مخفف واژه Cascade Style Sheets مییباشد.از Css برای استایل دهی به صفحات وب به صورت اصولی استفاده میشود.توصیه می شود در کنار Html ( آموزش Html ) به آموزش css نیز پرداخت زیرا این دو در طراحی سایت بهینه بسیار موثر می باشند.
زبان css دارای انعطاف پذیری ویژه ای میباشد و با استفاه از این زبان میتوان پیچیده ترین قالب ها را پیاده سازی کرد.
زبان css را میتوان به صورت های مختلف مورد استفاده قرار داد.در صفحه طریقه نوشتن Css به صورت کامل در این باره توضیح داده شده است.
زبان css در سرعت بارگزاری صفحات وب بسیار موثر است.
از زبان css بیشتر برای ایجاد ظاهر زیبا و ایجاد پس زمینه و رنگ فونت و ... استفاده می شود.توصیه می شود از این زبان در کنار زبان html که در بخش آموزش html به طور کامل آموزش داده شده است استفاده شود.
در این بخش به صورت کامل به آموزش css میپردازیم.
Css چیست ؟ (سی اس اس چیست)
Css نوعی زبان برنامه نویسی می باشد که معمولا همرا با زبان Html به کار می رود.این دو زبان معمولا همراه با هم استفاده می شود.از این زبان بیشتر برای طراحی صفحات استفاده می شود.برای مثال برای تغییر فونت یا تصویر زمینه ی وب سایت از این زبان استفاده می شود.
با توجه به اینکه امروزه در هر شغلی افراد به طراحی وب سایت روی آورده اند باید طراحی سایت بصورت بهینه و طبق اصول Html و Css طراحی شود تا سایت کارایی داشته باشد.
در این جا نکاتی را در مورد سی اس اس برای شما بیان می کنیم:
- دستورات وارده حتما باید بین علامت {} قرار بگیرد و همچنین پس از نوشتن دستور با قرار دادن : مقدار آن را تعیین کنید.
- می توانید دستورات نوشته شده را پشت سرهم نوشته به شرطی که بین آنها با علامت ؛ از هم جدا شود.
- می توانید هرکدام از تگ ها را با علامت , از هم جدا کرد
در این بخش می خواهیم به شما آموزش Css را به طور کامل توضیح دهیم.
طریقه نوشتن Css - خاصیت Style تگ ها
سبک درون خطی
این روش از مهمترین سبک ها در نوشتن Css می باشد.این روش سایر روش ها را شامل می شود اما توصیه می شود جهت بهینه سازی سایت از این روش کمتر استفاده شود.فراموش نشود که پس از وارد کردن دستورات خود حتما پسوند Css را وارد نمایید.
مثال زیر کاربرد سبک درون خطی در طراحی سایت می باشد.
<p style="background: blue; color: white;">A new background and font color with inline CSS</p>
طریقه نوشتن Css - تگ Style در Head صفحه
Css داخلی
در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند.همچنین این لینک داخل تگ Head قرار می گیرد.این سبک دارای مزایایی می باشد که عبارتند از :
این سبک فقط برای صفحاتی قابل جرا می باشد که از این سبک استفاده شده است.
با استفاده از این روش می توان خاصیت ارث بری کلاس ها استفاده کرد.به عبارتی می توانید از چند جای همان صفحه استفاده کنید.
همچنین این سبک می تواند سرعت بارگزاری صفات را پایین بیاورد.
مثال زیر کاربرد Css داخلی را نشان می دهد.
<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("images/bg.gif");}
</style>
</head>
طریقه نوشتن Css - فایل خارجی در پروژه
Css خارجی
این سبک را در طراحی سایت باید در تگ لینک داخل تگ head قابل استفاده می باشد.با استفاده از این سبک شما می توانید از چندین صفحه وب سایت خود استفاده کنید.در این سبک می توانید با تغییر یک فایل کل ظاهر وب سایت خود را عوض کنید.
مثال زیر کاربرد Css خارجی را نشان می دهد.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ویژگی width و height در css
در این بخش از آموزش Css می خواهیم ویژگی Width و ویزگی Height را به شما آموزش دهیم.
از ویژگی Width و Height در طراحی سایت برای تنظیم اندازه عناصر استفاده می شود.واحد اندازه گیری در برنامه نویسی پیکسل می باشد و آن را px نمایش می دهند.این ویژگی را همه ی مرورگرها نمایش می دهند.
ویژگی Width عرض صفحه را تعیین می کند و ویژگی Height طول عناصر صفحه را نمایش می دهد.برای اینکه طراحی سایت اصولی باشد اندازه عناصر باید استاندارد باشد.بهتر است عناصر در اندازه ی 1024*768 تنظیم باشد.
مثال زیر کاربرد ویژگی width و ویژگی height را در طراحی سایت نشان می دهد.
<div style="height:100px">
ویژگی background در css
در این قسمت از مقالات طراحی سایت قصد داریم ویژگی Background را برای شما آموزش دهیم.
از این ویژگی برای تعریف حالت های مختلف پس زمینه برای یک عنصر بکار می رود.این ویژگی در طراحی سایت باعث زیباتر شدن وب سایت می شود.بک گراند انواع مختلفی دارد که آنها را شرح می دهیم:
background-color:از این ویژگی برای رنگ زمینه ی سایت استفاده می شود.
مثال زیر کاربرد Bachground-color را در آموزش Css نشان می دهد.
body
{background-color:#b0c4de;}
background-image:از این ویژگی برای رنگ زمینه ی عکس ها استفاده می شود.
body
{background-image:url('paper.gif');}
background-repeat:از این ویژگی رد طراحی سایت با css برای تعیین چرخش عکس استفاده می شود.توجه داشته باشید که تصااویری که انتخاب می کنید حجم کمی داشته باشد در غیر این صورت سرعت بارگزاری صفحات شما کند خواهد شد.
body
{background-image:url('gradient2.png');
background-repeat:repeat-x;}
background-attachment:برای اینکه تصویر پس زمینه ی ثابتی داشته باشیم از این ویژگی استفاده می کنیم.scroll مقدار پیش فرض می باشد.
body
{ background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;}
background-position:برای تنظیم موقعیت عکس ها در طراحی سایت از این ویژگی استفاده می کنند.
body
{background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;}
ویژگی FontFamily در css
در این بخش از آموزش Css ، ویژگی fontfamily را برای شما آموزش می دهیم.
همانطور که از اسم آن مشخص است از این ویژگی برای تعیین font استفاده می شود.فونت شامل امکاناتی می باشد که با استفاده از آن می توان عناصر مورد نظر را به فونت دلخواه تغییر داد.
همچنین باید بدانیم که فونت مورد استفاده در طراحی سایت در همه ی مرورگرها قابل اجرا باشد .توجه داشته باشید که مرورگرهای فایرفاکس،کروم،سافاری و اپرا از فونت های ttf و otf پشتیبانی می کنند.همچنین اینترنت اکسپلورر 9 به بالا از فونت font-face پیروی می کند در حالی که این فونت در اینترنت اکسپلورر 8 به پایین قابل اجرا نمی باشد.
با استفاده از ویژگی Font-Family می توان قلم مورد نظر را برای متن خود انتخاب کنید.این نکته ی مهم فراموش نشود نوع فونت موردنظر را در اول متن وارد کنید زیرا در صورت انجام ندادن این کار کامپیوترهایی که فونت انتخابی شما را نداشته باشد قابل اجرا نخواهد بود.
از ویژگی های دیگر فونت سی اس اس ، Font-Style و font-weight می باشد که با استفاده از font-style می توانید قلم خود را به صورت نرمال،کج و یا مایل دربیاورید و با استفاده از ویژگی font-weight میزان درشتی فونت را مشخص کنید.
بر ای طراحی سایت استاندارد بهتر است فونت استاندارد انتخاب کنید.تقریبا همه ی سایت ها از فونت 16px وبا زبان tahoma نوشته می شوند.توجه داشته باشید که در مرورگرهای اکسپلورر قدیمی چون از واحد px پشتیبانی نمی شود از واحدem استفاده می شود.
مثال زیر نمونه ای از کاربرد Font-Family را در طراحی سایت نشان می دهد.
body
{font-size:13px; font-family: tahoma, arial; color:#000033; background-color: #FF9900}
ویژگی textcolor در css
در این بخش از آموزش Css به textcolor می پردازیم.
با استفاده از ویژگی textcolor در css می توان به تنظیم متون وارد شده پرداخت.همانطور که از اسم این ویژگی معلوم است از این خاصیت برای تنظیم رنگ متن استفاده می کنند.
در این مرحله با تغییر رنگ در واقع background خود را تغییر می دهید.در textcolor رنگها عموما با واحدهای زیر نوشته می شوند:
Text Alignment
از خاصیت text-alignment نیز برای تعیین موقعیت متن در طراحی سایت استفاده می شود یعنی متن شما را به صورت افقی و در حالت چپ چین،راست چین،وسط چین و یا حالت عادی قرار می دهد.مقدار Justify تمامی خطوط عرض یکسانی خواهند داشت
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
خصوصیت text-decoration برای تنظیم و یا حذف تزیینات ظاهری متن به کار می رود.
مثال زیر نمونه ای از کاربرد text-decoration را نشان می دهد.
a {text-decoration:none;}
این خصوصیت بیشتر برای حذف زیر-خط لینک ها به کار می رود.همچنین این خصوصیت می تواند برای تنظیم تزئینات ظاهری متن به کار برود.
خصوصیت text-transform در طراحی سایت برای تعیین کوچک و بزرگ بودن حروف متن به کار می رود..
این خصوصیت می تواند برای کوچک یا بزرگ نمایش دادن کل حروف متن به کار رود، یا فقط حرف اول هر کلمه را بزرگ کند.
در این مثال در واقع اگر متن شما دارای فرمت خاصیمانند زیر خط (underline) یا هر فرمت دیگری بود ،این فرمت را پاک میکند.
مقادیری که میتواند این ویژگی بگیرد در مثال زیر آمده است
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
از خاصیت text-shadow برای سایه زدن به یک متن استفاده می شود.توجه داشته باشید که برای طراحی سایت کاربردی باید این خصوصیات را رعایت کرد.
لیست ها در css
در این بخش از آموزش css ، تنظیم لیست را توضیح می دهیم.
برای آموزش تنظیم لیست در سی اس اس بهتر است یادآوری ای از تنظیم لیست در Html را مرور کنیم.
تنظیم لیست در html به دو صورت می باشد که اولی توسط اعداد یا حروف نشان داده می شود و دومی توسط نشانگر گرد توپر نشان داده می شود.
تنظیم لیست در Css در طراحی سایت به شما این امکان را می دهد که نشانگر آیتم لیست خود را به یک تصویر مدل دهید.با استفاده از خاصیت تنظیم لیست در Css لیستهای مورد نظر خود را می توانید به صورتهای مرتب،نامرتب و یا تنظیم تصویر برای نشانگر تنظیم می کنند.
در این ویژگی از سی اس اس می توان لیست هایی از قبیل موقعیت،شکل و یا نحوه ی نمایش اعدا و استفاده از تصاویر را در لیست ها تنظیم کرد.تنظیم لیست در سی اس اس شامل امکاناتی می باشد که آن ها را توضیح می دهیم.
list-style-image:با استفاده از این ویژگی برای عکس نشانگر تعریف می کند و به صورت یک آیکون کوچک نمایش داده می شود و شامل دو حالت است که یکی none می باشد که در این حالت هیچ عکسی در لیست دیده نمی شود،و حالت url که با استفاده از این حالت آدرس تصویر مورد نظر را وارد می کنند.
مثال زیر کاربرد list-style-image را در طراحی سایت نشان می دهد.
< ul style="list-style-image: url(../pic/mobsync.03.ico)" >
< li > Item 1 < /li >
< li > Item 2 < /li >
< /ul >
list-style-position:در این ویژگی موقعیت قرارگیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیرتعیین می کند.که این ویژگی هم شامل دو حالت می باشد که یکی inside می باشد که در این حالت نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند و حالت outside نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند.
line-style-type:با این ویژگی در طراحی سایت می توان marker لیست خود را به شکل دلخواه عوض کنید.
مثال زیر همه ی کاربردهای لیست را در سی اس اس نشان می دهد:
ul
{list-style: square url("sqpurple.gif");}
خواص Border , Margin , Padding در css
در این بخش از آموزش css ، خاصیت Border , خاصیت Margin و خاصیت Padding را توضیح می دهیم.
border:از خاصیت border در طراحی سایت به حاشیه متن ها و یا رنگ ها استفاده می شودبهتر است در این خاصیت width و height را هم تعیین کرد.
margin:فضای خالی در خارج از محیط Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار میگیرد .
padding:فضای خالی مابین محتوا و مرز ( Border ) داخلی Box ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی میکند .
به طور کل Margin حاشیه ی بیرونی و Padding حاشیه ی داخلی را تنظیم می کند.
مثال زیر کاربرد خاصیت Border , خاصیت Margin و خاصیت Padding را در طراحی سایت نشان می دهد.
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
واحدهای شمارش در css
در این بخش از آموزش css واحدهای شمارش مورد قبول در css در طراحی سایت را برای شما بیان می کنیم.
واحدهای شمارش قابل استفاده در Css شامل موارد زیر می باشند:
1.درصد(%)
2.اینچ(in)
3.سانتیمتر(cm)
4.میلیمتر(mm)
5.em
6.ex
7.pt(برابر با 1/72 اینچ)
8.pc(برابر با 12 point)
9.پیکسل(px)
css بیشتر جهت طراحی عناصر مانند فونت ،ایجاد پس زمینه و ... استفاده می شود.از این زبان در کنار زبان html ( آموزش Html ) به کار می رود زیرا این دو مکمل یکدیگر می باشند؛هر دو در طراحی سایت کاربرد اساسی دارند.
سی اس اس نیز مانند html دارای دستورات خاص می باشد که در بخش آموزش Css آن ها را به طور کامل توضیح داده ایم.
کاربرد css در طراحی سایت
یکی از زبان های برنامه نویسی مهم و پرکاربرد در طراحی سایت استفاده از شیوه نامه آبشاری یا css است. قبل از اینکه در مورد دلیل مهم بودن css در طراحی سایت صحبت کنیم، ابتدا توضیحاتی را در مورد css ارائه می کنیم. css یک زبان برنامه نویسی بسیار قوی است که برای کنترل نمایش و لمس محتوای نوشته شده در html مورد استفاده قرار می گیرد. اما این به چه معنی است؟ در واقع منظور این است که اگر ما دارای یک عنصر وب سایت هستیم، برای مثال عنصر عنوان، و می خواهیم اندازه متن آن را 20 پیکسل و رنگ آن را بر روی مشکی تنظیم کنیم، باید از css برای کنترل شیوه نمایش عناصر استفاده کنیم.
در اینجا چند دلیل برای کاربرد css در طراحی سایت بیان می کنیم:
• css موجب بهره وری و کارایی در طراحی و به روز رسانی می شود. با استفاده از css ما قادر به ایجاد قوانین، و اعمال این قوانین به بسیاری از عناصر در وب سایت خواهیم بود. این رویکرد، زمانی که مشتری نیاز به تغییرات گسترده در سایت خود دارد، بسیار مفید خواهد بود. از آنجایی که محتوا به طور کامل از طراحی جدا است، بنابراین قادر خواهیم بود این تغییرات را در css پیاده سازی کنیم.
• css موجب دانلود سریع تر صفحه سایت می شود. از آنجایی که قواعد تنها یکبار توسط مرورگر دانلود می شوند، سپس ذخیره شده و برای بارگذاری تمام صفحات استفاده می شود، استفاده از css می تواند موجب بارگذاری راحت تر صفحه و بهبود عملکرد سایت شود. این امر منجر به کاهش ترافیک مورد نیاز و الزامات پایین تر می شود که در نتیجه موجب صرفه جویی در هزینه های مشتری می شود.
• کار با css آسان است. از آنجایی که ما قادر ه جدا سازی تمام جنبه های بصری وب سایت از محتوای آن هستیم، استفاده از css در طراحی سایت به ما این امکان را می دهد تا به سرعت طرح را ایجاد کرده و مشکلات را برطرف کنیم.
اینها تنها چند دلیل از دلایل کاربرد css در طراحی سایت است. اگرچه در اینجا ما اطلاعات زیادی در مورد جزئیات css بیان نکردیم، اما امیدوار هستیم که با این اطلاعات درک بهتری در مورد دلایل استفاده از css پیدا کرده باشید. در حال حاضر تقریبا بیشتر افراد در طراحی سایت از css استفاده می کنند.