campaign-edianeh-98

آموزش CSS (فصل اول-جلسه 1) : مقدمه‌ ای بر CSS



visibility  
mode_comment   ۱۹

مقدمه

بخش مجزای دیگری که در طراحی صفحات وب از آن استفاده می شود، زبان CSS است.

CSS یا همان Cascading Style Sheet (سبک نامه آبشاری) روشی است برای قالب بندی  اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریبا هر چیزی که در طراحی صفحه HTML استفاده می شود.

با استفاده از CSS می توان از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کندشدن سرعت بارگذاری صفحه در اینترنت می شود، جلوگیری کرد. برای مثال فرض کنید ما 30 صفحه HTML داریم و در هرکدام از 10 تگ پاراگراف استفاده کرده ایم، که در مجموع می شود 300 تگ پاراگراف، حال اگر بخواهیم برای همه این پاراگراف ها یک استایل را تعریف کرد باید از 300 تگ فونت دیگر نیز استفاده کرد، اما با استفاده از CSS می توان این 300 تگ فونت را در یک خط خلاصه کرد!! که هم باعث کم شدن حجم صفحات و نیز افزایش سرعت بارگذاری صفحات خواهد شد.

یکی دیگر از مزیت های CSS قابلیت های بسیار زیاد آن است، که با رسیدن CSS3 حتی در بعضی مواقع می توان از آن بجای JavaScript و jQuery نیز استفاده کرد. در این سری آموزشی سعی خواهد شد شما را با این زبان شگفت انگیزکه یکی از لازمه های اجتناب ناپذیر برای تبدیل شدن به یک طراح وب است، آشنا کنیم. اما یک پیش نیازی که برای یادگیری CSS لازم دارید، این است که شما حداقل اطلاعات پایه ای با زبان HTML را دارا، و به خوبی با تگ های HTML آشنایی داشته باشید.

این سری آموزشی با پوشش آخرین نسخه از این زبان، یعنی CSS3 این قول را به شما خواهد داد که پس از به پایان رساندن آموزش ها، شما قادر خواهید بود بدون کمک دیگران، یک وبسایت را طراحی کنید.یک نکته دیگر اینکه برای کدنویسی زبان css از هر ویرایشگری می توان استفاده کرد اما پیشنهاد من نرم افزار ripid css است که می توانید آن را از لینک زیر دریافت کنید

این سری آموزشی در 15 فصل ارائه خواهد شد ، و هر سه روز یک بار مطلب جدید افزوده می شود.

با ما باشید.....

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
حسین

دمت گرم حسابی این بخشو لازم دارم بزار! تند تند آموزشاشو بزار! .مرسی

لقمان آوند

کارت خیلی درسته …
سری html ات که واقعا عالی بود …
مطمئنم CSS هم همینطوره ..

سجاد دریس

سلام.
لطف داری لقمان جان.
خوشحالم که سری قبل مورد توجهت قرار گرفته
امیدوارم این سری هم مثل سری html بشه

MR.Ali

دمتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتتت گرم داداش 😳
امیدوارم مثل آموزش های html پر بار و مفید باشن که حتما همین طور هستن 😉

سجاد دریس

سلام.
نظر لطفته علی.
منم امیدوارم…

jokerarkhamasylum

بابا میگین که چجوری میتونم توی وبلاگ دکمه ادامه مطلبو تغییر بدم یا نه؟بابا تو رو خدا همین یه سئوالو جواب بدید .تو انجمن هم رفتم جوابمو ندادید.آقا من هیچی بلد نیستم اگه حوصله جواب دادنمو ندارید بگید همینجا برم.باشه.ولی خداوند کسایی رو که به کسای دیگه یه چیزی یاد میدن دوست داره 😥

سجاد دریس

سلام.
خیلی ببخشید که زود پاسخ ندادیم.
آدرس تاپیکتون رو بدین

pouria

اقا خیلی عالیه، واژه استاد برازندته.
فقط میشه در اخر راجع به اینکه چطور میشه من که یه قالب با فتو شاپ ساختم و میخوام ازش برای سایت استفاده کنم هم توضیح بدید؟؟؟؟؟
خیلی لطف بزرگی میکنید در این صورت هرچند با مطالب ارائه شدتون تا اینجا کلی چیز یاد گرفتم

لقمان آوند

سلام
تبدیل PSD به قالب صفحه وب خودش نکات ریز زیادی داره . انشاءالله اگر وقت شد در آینده سعی می کنیم یه آموزش ویدیویی در این باره بزاریم .

ariaieboy

سلام ببخشید من یک سئوال دارم می خواستم بدونم این نرم افزاری که معرفی کردید چه کاری انجام می ده اگر همزمان پیشنمایش می ده بگید که دانلود کنم وگر نه از همین notepad++ استفاده کنم اگر هم این کار رو نمی کنه یا یک نرم افزار بزارید که این قابلیت رو داشته باشه یا یک سایت آنلاین معرفی کنید این رو به این خاطر می گم چون دیدم بعضی از کد نویسان عزیز موقعی که ازشون کد خواستم تو یک سایت آنلاین که واسه کد نویسی هست نوشتن و با پیشنمایش بهم دادن این سایت جوری هست که از سه کد نویسی جاوا اسکریپت سی اس اس و یک کد نویسی دیگه پشتیبانی می کنه و همزمان با کد نویسی پیشنمایش هم داره ممنون

سجاد دریس

سلام.
اگه روی لینک کلیک کنید، در صفحه ای که باز میشه قابلیت ها نرم افزار نوشته شده، از جمله “نمایش آنی کدهای نوشته شده”
اما با این حال بهترین نرم افزاری که تا حالا باهاش کار کردم برای کدنویسی که هم خیلی سادس هم راحت و هم قابلیت های زیادی داره sublime text بوده.

zahra

سلام ، خسته نباشید
من آموزش طراحی قالب وب سایت با استفاده از CSS رو میخوام و نحوه ی استفاده از آن در visual studio صفحات با پسوند .asp رو بلد نیستم اگر مطالبی یا فیلمی در این رابطه دارید ممنون میشم به ایمیلم بفرستید، یا اگه جایی رو سراغ دارید که بشه بهش دسترسی پیدا کرد بگید…
پروژه ای دارمکه باید زودتر تحویل بدم…
یک دنیا ممنونم…

اسکریپت

ممنون

jenerik

سلام میشه نحوه کار باrapid ccرو هم بگین؟!!!سیو میکنم تو مرورگر نشون نمیده

jenerik

یا مثلا کد هاروکه مینویسم دستور cssخودش همونجوری نوشته میشه تو مرورگر و انجام نمیشه ❗

سجاد دریس

سلام.
اگه فرمت فایل css هست چیز خاصی توی مرورگر نمی بینید باید فرمت فایل html باشه، و کدهای html هم کنار کدهای css قرار بگیره.

jenerik

من این کد هارو تو rapidبا html ذخیره میکنم
7Learn :
JavaScript and Web Design Tutorials

.red { color: red; }
.blue { color: blue; }

تومرورگر فقط 2کد اول معنی میشه redوblueهمونجور نوشته میشن!!

سجاد دریس

سلام.
اینجوری قرار دادن کد ها صحیح نیست، به علاوه اینکه شما 7Learn :
JavaScript and Web Design Tutorials رو درون تگی قرار ندادین.
کدهای css رو هم وقتی درون فایل html قرار می دین باید درون تگ style قرار بگیرند
کد بالا رو به شکل زیر تغییر بدین :

پویا

سلام یه سوالی در مورد سی اس اس داشتم :

p{
color:blue;
}
li{
color:red
}

hello

دیدم که نتیجه پاراگراف هلو را ابی کرد چرا قرمز نکرد ایا سی اس اس در خواندن سلکتور ها ترتیب و اولوییتی را به کار می برد اگر می برد ان چیست؟ با تشکر ممنون از سایت خوبتان

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.