آموزش کار با استایل (CSS)

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.

اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق «فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در جهت بهبود این بخش استفاده کنیم.


نظرات بازدید کنندگان
Tue, 19 May 2009 17:51:41 +0430 نویسنده : مریم
سلام خسته نباشید من یه پروزه طراحی وب دارم.میخواستم بدونم میتونین به من کمک کنید تا وب سایتم رو به استادم تحویل بدم یا نه؟همیشه دعاتون میکنم
 
Tue, 19 May 2009 17:45:24 +0430 نویسنده : لیلا
با سلام خدمت دوستان عزیز من می خوام وب سایتی  طراحی کنم که از صفحه اول به صفحه بعدی بره اگه بشه کد رو  به ایمیلم بفرستید.خیلی ممنون میشم
 
Fri, 15 May 2009 13:26:46 +0430 نویسنده : حمید
سلام و خسته نباشید خدمت شما دوست عزیز من یک فرم می خواستم که افراد بازدید کننده از سایتم بتونن برام نظراتشون رو از طریق ایمیلم ارسال کنن میشه این کد رو برام به ادرس جیمیل بفرستید.یک دنیا ممنون اگر این کار بزرگ را برا ی بنده انجام بدهید
 
Tue, 05 May 2009 13:17:13 +0430 نویسنده : سعد
@ پویا :
این کار با کدهای HTML ویژۀ مرورگرهای Mozilla (مانند فایرفاکس) ممکنه. من اونو تو وبلاگم اعمال کردم.
کدش اینه: -moz-border-radius: 3px

@ فاطمه :
از HTML باید شروع کنی. یکم که یاد گرفتی در کنارش CSS هم کار میکنی، و بعد HTML و CSS رو در کنار هم پیشرفته تر یاد میگیری.
 
Mon, 04 May 2009 18:53:08 +0430 نویسنده : مژده
با سلام و خسته نباشيد ،من يك سوال درباره Cssو html دارم:
من فايل  html را در Notepad  مي نويسم و براي اينكه xhtmlهم Support شود دستور زير را مي نويسم:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 EN" "http://www.w3c.org/TR/xhtml1-strict.dtd">

در notepad مجدد css را مي نويسم اما گويا اين دو فايل با اينكه هر دو در يك جا هستند و دستور لينكش را نيز داده ام هيچ گونه عملي روي دستورات <p>انجام نمي دهد
دستورم در html به فرم زير است:
<head><title>Home</title><link href="home.css" type="text/css" rel="stylesheet"/></head>
<p id="GOL">Welcome</P>
و دستورم در Css به فرم زير :
#GOL{font-family:Tahoma;color:red;}
تنها موردي كه بايد ذكر شود من برنامه frontpage ندارم آيا مي تواند بدين دليل باشد كه دو فايل يكديگر را نشناسند؟ضمنا IE7دارم.
 
Thu, 23 Apr 2009 00:00:26 +0430 نویسنده : مهدی
کل CSS تو همین چند خط تموم شد!!!؟؟؟ خیلی کم بود بابا. اصلاً هیچی نداشت. اگه اینجوری بود که همه متخصص CSS میشدند. اصلاً کامل نبود. امیدوارم بعداً دست و دل بازتر بشی
 
Fri, 17 Apr 2009 13:29:03 +0430 نویسنده : ناهيد
مطالب مربوط به css عالي بود خيلي بهم كمك كرد چون براي طراحي وب بهش نياز داشتم ازت متشكرم
 
Thu, 09 Apr 2009 15:36:16 +0430 نویسنده : سارا
سلام، ممنون از زحمات و آموزش شما. یه نکته کوچیک: اگر آخر هر درس لینک به صفحات بعدی وجود داشته باشه آدم احساس نمیکنه که دیگه صفحه دیگه ای وجود نداره، برای من که تازه وارد هستم اینطوری بود. می بخشید البته جسارت بود.
موفق و سربلند و سلامت باشید.
 
Wed, 08 Apr 2009 14:59:35 +0430 نویسنده : fatemeh mahmodkhani
amozeshesh kamel tozih dade nashode
 
Tue, 07 Apr 2009 08:04:17 +0430 نویسنده : masuod
سلام.
عارضم به حضور شما که من یه پروژه طراحی صفحه وب دارم . میخواستم بدونم میتونین بهم کمک کنین تا یه صفحه وب با یه طراحی مناسب تحویل استادم بدم یا نه؟
 
Sun, 05 Apr 2009 17:56:13 +0430 نویسنده : ملک فیصل منزجر
سلام من هم علاقه خیلی خیلی زیاد به طراحی وساخت سایت دارم میشه بیشتر توضیح دهید ممنون تان
 
Sat, 04 Apr 2009 00:07:21 +0430 نویسنده : جعفری
سلام
من میخوام سایت طراحی کنم میشه راهنمائیم کنید
با تشکر
 
Thu, 02 Apr 2009 01:03:48 +0430 نویسنده : golizade
سلام:
استاد اگر لطف كنيد اصطلاحات اشاره شده در اموزش طراحي سايت بيشتر توضيح دهيد  ممنون
ميشوم.
                                                                                                 golizade       مرسي
 
Wed, 18 Mar 2009 15:01:15 +0330 نویسنده : محمد نويد
سلام محمد نويد هستم ازخدمات شما تشكر ميكنم
 
Fri, 13 Mar 2009 15:44:51 +0330 نویسنده : فاطمه
سلام
من ميخوام ياد بگيرم چطوري سايت طراحي كنم.ميشه بهم بگيداز كجا بايد شروع كنم؟
ممنونم
 
Sun, 08 Mar 2009 07:38:23 +0330 نویسنده : حمید وحدانی
با عرض سلام و با عرض سپاس از زحمات شما
به نظر من توصیفی برای زحمات و زیباییهای کار شما را با نوشتن نمی توان بیان کرد.
فقط میتوان گفت دست مریزاد ، بینهایت سپاس و امیدوارم این مطالب را ادامه و همیشه موفق و کامروا باشید
 
Thu, 05 Mar 2009 21:53:31 +0330 نویسنده : اشكان انوشه
آقا واقعا خیلی دستتون درد نکنه ، خیلی باحالید!!!
 
Fri, 27 Feb 2009 14:00:28 +0330 نویسنده : پویا
درود
من قالب سایتم رو با جدول های html طراحی کردم
ولی لبه های چهار گوشه ی جداولم نوک تیز هستش و از زیبایی سایتم کم کرده.
آیا راهی هست در html یا Css که گوشه های جدول رو مانند سایت شما حالت مورب یا گرد مانند کنم؟

ممنون میشم اگه راهنمایی کنید.
روز خوش
 
Thu, 26 Feb 2009 21:53:51 +0330 نویسنده : arash
salam
اگر خواسته باشیم فایلی که با
html
نوشتیم رو با cpanel اپلود کنیم / چکار باید کرد
همچی توضیح بده یک کم شیر فهم بشیم
 
Thu, 19 Feb 2009 01:14:21 +0330 نویسنده : مهدي محمدي نژاد
من سایتمو با  cms رایگان ورد پرس پیاده سازی کردم ودر عرض یک ماه به 2000 بازدید روزانه رسیدم ولی راضی نیستم اطلاعاتم در مورد طراحی سایت صفر است میخواهم یاد بگیرم مخصوصا طراحی سیستم مدریت محتوا ولی نمیدانم از کجا شروع کنم لطفا کمکم کنید
 
Sun, 15 Feb 2009 10:57:51 +0330 نویسنده : مهران
خيلي كاربردي بود مرسي مخصوصا css
 
Sun, 15 Feb 2009 10:57:50 +0330 نویسنده : مهران
خيلي كاربردي بود مرسي مخصوصا css
 
Wed, 11 Feb 2009 07:34:39 +0330 نویسنده : رسول
سلام دوست عزیز و استاد گرامی سایت و نحوه آموزش شما عالی و بی نقص بود. اگر ممکن بود آموزش php رو هم به همین زیبایی در سایت تون بگذارید. سپاس !
 
Thu, 05 Feb 2009 08:28:01 +0330 نویسنده : hossein
سلام من دنبال یک شرکت معتبر با خدمات پشتیبانی و آموزش می گردم که برا شرکت ما وب سایت طراحی کنه لطفا اطلاعاتی که می تونه به من کمک کنه را emil کنید  متشکرم
 
Wed, 14 Jan 2009 13:20:47 +0330 نویسنده : محمد مهدی
سلام خیلی ممنون و تشکر از این همه زحمت بی منت شما
حقا که زکات علمتون رو ادا کردید
انشا لله روز به روز به معلوماتتان اضافه شود
در پناه حق
 
Tue, 13 Jan 2009 15:12:36 +0330 نویسنده : اعظم
خیلی ممنون اگه امکان داره سریعتر
 
Tue, 13 Jan 2009 15:08:31 +0330 نویسنده : اعظم
خیلی ممنون ، واقعا عالی بود
میشه این اطلاعات رو به من mailکنید
 
Fri, 09 Jan 2009 23:42:39 +0330 نویسنده : علی مراثی زاده
سلام لطفا از وبلاگم دیدن کنید چون من تنها نویسنده وبلاگ هستم و کسی کمکم نمی کند 8ساله هستم ودر کلاس سوم درس می خوانم.
نشانی:
www.marasiali.nikblog.com
نظر یادتون نره
 
Tue, 06 Jan 2009 21:32:48 +0330 نویسنده : امیر
واقعا عالیه خیلی کاربردی و مفید
خسته نباشید
مرسی
 
Sat, 03 Jan 2009 22:09:34 +0330 نویسنده : منصوره
آموزش کامل php و هرچی که در مورد آموزش طراحی وب هست رو واسه من بفرستید. در ضمن به شما تبریک می گم چون واقعاً سایت خوب و مفیدی دارید.
 
Mon, 15 Dec 2008 00:18:03 +0330 نویسنده : متين
سلام
از مطالب خوبتون ممنون
خيلي عالي بود
 
Mon, 01 Dec 2008 18:45:19 +0330 نویسنده : مرجان
از فعالیت بی نظیر شما ممنون. موفق و پیروز باشی
 
Mon, 01 Dec 2008 12:01:53 +0330 نویسنده : پوراندخت
مرسی از سایتت
 
Mon, 01 Dec 2008 10:29:37 +0330 نویسنده : قوام زاده
سلام ازطرح مطالب پر بار شما جهت اعتلای سطح علمی جوانان بسیار سپاسگزارم
لطفا" مشروحات خود را در مورد آموزش و تاریخچه زبان برنامه نویسی php هم ارائه فرمائید .
 
Sat, 29 Nov 2008 09:45:07 +0330 نویسنده : مهدي
سلام
من از تلاشي كه در زمينه تحقق فرهنگي در جامعه مي كنيد سپاسگزارم و ارزوي موفقيت براتون دارم

ممنون
 
Wed, 26 Nov 2008 10:20:57 +0330 نویسنده : ميلاد
سایت خیلی عالی
 
Sat, 15 Nov 2008 12:05:15 +0330 نویسنده : علی
سلام دوست عزیز خیلی ممنون که این آموزش رو شروع کردی . من هم در زمینه دلفی فعالیت می کنم اگه دوست داشتین  می تونین به آدرس زیر مراجعه کنید:
www.forums.gtpland.com
www.aligtp.blogfa.com
 
Mon, 03 Nov 2008 13:07:15 +0330 نویسنده : عصر ظهور
سايت عصرظهور افتتاح شد
دراين سايت شما ميتوانيد مطالب مختلف از قبيل :عقائد ،مهدويت،تزکيه نفس،زندگينامه بزرگان،احکام،جلوه هاي اعجاز ائمه ،حکمت ناب(سخن بزرگان)،بانک سوالات
داستانهاي بيدار کننده،شگفتيهاي آفرينش،کمال ادين و....را بخوانيدهمچنين شما ميتوانيد با عضويت در اين سايت هم از امکانات استفاده کنيد وهم سايت يا وبلاگ مذهبي خود را در بخش ويلاگها يا سايتاهي مذهبي قرار دهيد
دوستان، با لينک کردن نام سايت در وبلاگ خود، قدمي در راه ترويج نام وياد آقا برداريم
به اميد روز يکه همه بگويند امام عدالت آمد
ممنون از شما
 
Wed, 15 Oct 2008 10:34:13 +0330 نویسنده : niloofar abi
می خوام درباره موارد کاربر هاست لینوکس و ویندوز و دامین بدونم اگه میشه منو راهنمایی کنید و اطلاعات جامع و کاملی از آنها در اختیارم بزارید-ممنون
 
Sat, 04 Oct 2008 13:33:52 +0330 نویسنده : ایمان
فوق العاده بود!!!! خسته نباشید
 
Mon, 29 Sep 2008 15:36:01 +0330 نویسنده : ايمان
سلام جدا خسته نباشيد . بسيار خوبه .........
 
Thu, 25 Sep 2008 12:25:20 +0330 نویسنده : mani
واقعا عالي بو د
انشا الله سايتتون پر بار تر بشه
دستتون درد نكنه!
 
Thu, 25 Sep 2008 12:02:03 +0330 نویسنده : mani
عاليه
دمتون گرم
موفق باشيد
 
Fri, 19 Sep 2008 11:40:31 +0430 نویسنده : arman
من از چند سال پیش می شناسم
تقریبا هیچ تغییری نکرده
اون موقع هم نوشته بودید که این بخش تازه افتتاح شده
بازم ممنون از زحماتتون
 
Fri, 08 Aug 2008 15:23:44 +0430 نویسنده : erfan
عالی بود
 
Fri, 08 Aug 2008 00:19:38 +0430 نویسنده : حسن
♥pdf beshe allii hasttt♥
 
Sun, 03 Aug 2008 11:32:54 +0430 نویسنده : هادی بوداغی
مطالب بسیار عالی هستند
امیدوارم هر روز بهتر از دیروز به کارتان ادامه بدهید.
 
Fri, 01 Aug 2008 11:09:27 +0430 نویسنده : محسن
مطالب شمابرای یک طراح سایت خیلی عالی بود.متشکرم یک دنیا
 
Sat, 26 Jul 2008 11:16:25 +0430 نویسنده : HAMID
خیلی جالب بود . خيلي بود متشكرم اگر آموزش  XML رو هم اضافه کنید به زبان ساده تر خيلي خوبه.لطفا در مورد ccs بیشتر توضیح دهید.

 
Tue, 22 Jul 2008 00:33:38 +0430 نویسنده : اسحق معافی
لطفا حتما آموزش کامل php  رو هم بزارین  و واسم بفرستین.  مرسی