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

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

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

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

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


نظرات بازدید کنندگان
نویسنده : مریم
سلام خسته نباشید من یه پروزه طراحی وب دارم.میخواستم بدونم میتونین به من کمک کنید تا وب سایتم رو به استادم تحویل بدم یا نه؟همیشه دعاتون میکنم
 
نویسنده : لیلا
با سلام خدمت دوستان عزیز من می خوام وب سایتی  طراحی کنم که از صفحه اول به صفحه بعدی بره اگه بشه کد رو  به ایمیلم بفرستید.خیلی ممنون میشم
 
نویسنده : حمید
سلام و خسته نباشید خدمت شما دوست عزیز من یک فرم می خواستم که افراد بازدید کننده از سایتم بتونن برام نظراتشون رو از طریق ایمیلم ارسال کنن میشه این کد رو برام به ادرس جیمیل بفرستید.یک دنیا ممنون اگر این کار بزرگ را برا ی بنده انجام بدهید
 
نویسنده : سعد
@ پویا :
این کار با کدهای HTML ویژۀ مرورگرهای Mozilla (مانند فایرفاکس) ممکنه. من اونو تو وبلاگم اعمال کردم.
کدش اینه: -moz-border-radius: 3px

@ فاطمه :
از HTML باید شروع کنی. یکم که یاد گرفتی در کنارش CSS هم کار میکنی، و بعد HTML و CSS رو در کنار هم پیشرفته تر یاد میگیری.
 
نویسنده : مژده
با سلام و خسته نباشيد ،من يك سوال درباره 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دارم.
 
نویسنده : مهدی
کل CSS تو همین چند خط تموم شد!!!؟؟؟ خیلی کم بود بابا. اصلاً هیچی نداشت. اگه اینجوری بود که همه متخصص CSS میشدند. اصلاً کامل نبود. امیدوارم بعداً دست و دل بازتر بشی
 
نویسنده : ناهيد
مطالب مربوط به css عالي بود خيلي بهم كمك كرد چون براي طراحي وب بهش نياز داشتم ازت متشكرم
 
نویسنده : سارا
سلام، ممنون از زحمات و آموزش شما. یه نکته کوچیک: اگر آخر هر درس لینک به صفحات بعدی وجود داشته باشه آدم احساس نمیکنه که دیگه صفحه دیگه ای وجود نداره، برای من که تازه وارد هستم اینطوری بود. می بخشید البته جسارت بود.
موفق و سربلند و سلامت باشید.
 
نویسنده : fatemeh mahmodkhani
amozeshesh kamel tozih dade nashode
 
نویسنده : masuod
سلام.
عارضم به حضور شما که من یه پروژه طراحی صفحه وب دارم . میخواستم بدونم میتونین بهم کمک کنین تا یه صفحه وب با یه طراحی مناسب تحویل استادم بدم یا نه؟
 
نویسنده : ملک فیصل منزجر
سلام من هم علاقه خیلی خیلی زیاد به طراحی وساخت سایت دارم میشه بیشتر توضیح دهید ممنون تان
 
نویسنده : جعفری
سلام
من میخوام سایت طراحی کنم میشه راهنمائیم کنید
با تشکر
 
نویسنده : golizade
سلام:
استاد اگر لطف كنيد اصطلاحات اشاره شده در اموزش طراحي سايت بيشتر توضيح دهيد  ممنون
ميشوم.
                                                                                                 golizade       مرسي
 
نویسنده : محمد نويد
سلام محمد نويد هستم ازخدمات شما تشكر ميكنم
 
نویسنده : فاطمه
سلام
من ميخوام ياد بگيرم چطوري سايت طراحي كنم.ميشه بهم بگيداز كجا بايد شروع كنم؟
ممنونم
 
نویسنده : حمید وحدانی
با عرض سلام و با عرض سپاس از زحمات شما
به نظر من توصیفی برای زحمات و زیباییهای کار شما را با نوشتن نمی توان بیان کرد.
فقط میتوان گفت دست مریزاد ، بینهایت سپاس و امیدوارم این مطالب را ادامه و همیشه موفق و کامروا باشید
 
نویسنده : اشكان انوشه
آقا واقعا خیلی دستتون درد نکنه ، خیلی باحالید!!!
 
نویسنده : پویا
درود
من قالب سایتم رو با جدول های html طراحی کردم
ولی لبه های چهار گوشه ی جداولم نوک تیز هستش و از زیبایی سایتم کم کرده.
آیا راهی هست در html یا Css که گوشه های جدول رو مانند سایت شما حالت مورب یا گرد مانند کنم؟

ممنون میشم اگه راهنمایی کنید.
روز خوش
 
نویسنده : arash
salam
اگر خواسته باشیم فایلی که با
html
نوشتیم رو با cpanel اپلود کنیم / چکار باید کرد
همچی توضیح بده یک کم شیر فهم بشیم
 
نویسنده : مهدي محمدي نژاد
من سایتمو با  cms رایگان ورد پرس پیاده سازی کردم ودر عرض یک ماه به 2000 بازدید روزانه رسیدم ولی راضی نیستم اطلاعاتم در مورد طراحی سایت صفر است میخواهم یاد بگیرم مخصوصا طراحی سیستم مدریت محتوا ولی نمیدانم از کجا شروع کنم لطفا کمکم کنید
 
نویسنده : مهران
خيلي كاربردي بود مرسي مخصوصا css
 
نویسنده : مهران
خيلي كاربردي بود مرسي مخصوصا css
 
نویسنده : رسول
سلام دوست عزیز و استاد گرامی سایت و نحوه آموزش شما عالی و بی نقص بود. اگر ممکن بود آموزش php رو هم به همین زیبایی در سایت تون بگذارید. سپاس !
 
نویسنده : hossein
سلام من دنبال یک شرکت معتبر با خدمات پشتیبانی و آموزش می گردم که برا شرکت ما وب سایت طراحی کنه لطفا اطلاعاتی که می تونه به من کمک کنه را emil کنید  متشکرم
 
نویسنده : محمد مهدی
سلام خیلی ممنون و تشکر از این همه زحمت بی منت شما
حقا که زکات علمتون رو ادا کردید
انشا لله روز به روز به معلوماتتان اضافه شود
در پناه حق
 
نویسنده : اعظم
خیلی ممنون اگه امکان داره سریعتر
 
نویسنده : اعظم
خیلی ممنون ، واقعا عالی بود
میشه این اطلاعات رو به من mailکنید
 
نویسنده : علی مراثی زاده
سلام لطفا از وبلاگم دیدن کنید چون من تنها نویسنده وبلاگ هستم و کسی کمکم نمی کند 8ساله هستم ودر کلاس سوم درس می خوانم.
نشانی:
www.marasiali.nikblog.com
نظر یادتون نره
 
نویسنده : امیر
واقعا عالیه خیلی کاربردی و مفید
خسته نباشید
مرسی
 
نویسنده : منصوره
آموزش کامل php و هرچی که در مورد آموزش طراحی وب هست رو واسه من بفرستید. در ضمن به شما تبریک می گم چون واقعاً سایت خوب و مفیدی دارید.
 
نویسنده : متين
سلام
از مطالب خوبتون ممنون
خيلي عالي بود
 
نویسنده : مرجان
از فعالیت بی نظیر شما ممنون. موفق و پیروز باشی
 
نویسنده : پوراندخت
مرسی از سایتت
 
نویسنده : قوام زاده
سلام ازطرح مطالب پر بار شما جهت اعتلای سطح علمی جوانان بسیار سپاسگزارم
لطفا" مشروحات خود را در مورد آموزش و تاریخچه زبان برنامه نویسی php هم ارائه فرمائید .
 
نویسنده : مهدي
سلام
من از تلاشي كه در زمينه تحقق فرهنگي در جامعه مي كنيد سپاسگزارم و ارزوي موفقيت براتون دارم

ممنون
 
نویسنده : ميلاد
سایت خیلی عالی
 
نویسنده : علی
سلام دوست عزیز خیلی ممنون که این آموزش رو شروع کردی . من هم در زمینه دلفی فعالیت می کنم اگه دوست داشتین  می تونین به آدرس زیر مراجعه کنید:
www.forums.gtpland.com
www.aligtp.blogfa.com
 
نویسنده : عصر ظهور
سايت عصرظهور افتتاح شد
دراين سايت شما ميتوانيد مطالب مختلف از قبيل :عقائد ،مهدويت،تزکيه نفس،زندگينامه بزرگان،احکام،جلوه هاي اعجاز ائمه ،حکمت ناب(سخن بزرگان)،بانک سوالات
داستانهاي بيدار کننده،شگفتيهاي آفرينش،کمال ادين و....را بخوانيدهمچنين شما ميتوانيد با عضويت در اين سايت هم از امکانات استفاده کنيد وهم سايت يا وبلاگ مذهبي خود را در بخش ويلاگها يا سايتاهي مذهبي قرار دهيد
دوستان، با لينک کردن نام سايت در وبلاگ خود، قدمي در راه ترويج نام وياد آقا برداريم
به اميد روز يکه همه بگويند امام عدالت آمد
ممنون از شما
 
نویسنده : niloofar abi
می خوام درباره موارد کاربر هاست لینوکس و ویندوز و دامین بدونم اگه میشه منو راهنمایی کنید و اطلاعات جامع و کاملی از آنها در اختیارم بزارید-ممنون
 
نویسنده : ایمان
فوق العاده بود!!!! خسته نباشید
 
نویسنده : ايمان
سلام جدا خسته نباشيد . بسيار خوبه .........
 
نویسنده : mani
واقعا عالي بو د
انشا الله سايتتون پر بار تر بشه
دستتون درد نكنه!
 
نویسنده : mani
عاليه
دمتون گرم
موفق باشيد
 
نویسنده : arman
من از چند سال پیش می شناسم
تقریبا هیچ تغییری نکرده
اون موقع هم نوشته بودید که این بخش تازه افتتاح شده
بازم ممنون از زحماتتون
 
نویسنده : erfan
عالی بود
 
نویسنده : حسن
♥pdf beshe allii hasttt♥
 
نویسنده : هادی بوداغی
مطالب بسیار عالی هستند
امیدوارم هر روز بهتر از دیروز به کارتان ادامه بدهید.
 
نویسنده : محسن
مطالب شمابرای یک طراح سایت خیلی عالی بود.متشکرم یک دنیا
 
نویسنده : HAMID
خیلی جالب بود . خيلي بود متشكرم اگر آموزش  XML رو هم اضافه کنید به زبان ساده تر خيلي خوبه.لطفا در مورد ccs بیشتر توضیح دهید.

 
نویسنده : اسحق معافی
لطفا حتما آموزش کامل php  رو هم بزارین  و واسم بفرستین.  مرسی