آموزش قدم به قدم زبان CSS

این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.

آموزش قدم به قدم زبان CSS

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

تعریف زبان CSS

زبان استایل نویسی یا سی اس اس یا به انگلیسی Cascading Style Sheets دومین هسته ( یاهم دومین تکه از الماس ) طراحی وب می باشد که زیر نظر کنسرسیوم جهانی وب یا به اختصار ( W3C ) می باشد.

کلمه Cascading Style Sheets در لغت یعنی شیوه نامه های آبشاری ، که منظور از آبشاری یعنی دستورات CSS بصورت آبشاری بروی عناصر اعمال میشن ، یعنی اگه یه باکس داشته باشیم و داخلش چنتا تگ P باشه، و به باکس رنگ متن مثلا قرمز بدیم تمامی تگ های P هم که داخل باکس هستن رنگ متنشون قرمز میشه، پس از این نظر میگن آبشاری.

اینجوری میتونم بگم که بعد از زبان HTML زبان CSS دومین هسته برای طراحی صفحات وب می باشد، که با استفاده از این زبان میتونیم به صفحه وبمون استایل ( شکل شمایل، رنگ بندی و.. ) بدیم.

اینو دیگه خودتونم میدونید که همیشه ما ۲ بعد کلی داریم :

• بُعد ظاهر

به هرچیزی که کاربر با چشاش در ظاهر یک سایت میبینه بهش میگیم بُعد ظاهر یا هم میشه همون فرانت اند یا Front End که این بُعد ظاهر با استفاده از زبان های HTML و CSS و JavaScript ایجاد میشه.

• بُعد برنامه نویسی

باز به اون چیزی که کاربر نمیتونه در ظاهر به چشم ببینه بهش میگیم بُعد برنامه نویسی ( یعنی همون بَک اند یا Back End یا در مجموع چیزی که سورس کدش برای کاربر عادی قابل دسترس و مشاهده نیست ولی برای مدیر هست )

خب تموم شد رفت، پس زبان CSS زبانی هست که ما با استفاده از اون میتونیم ظاهر سایتمون رو طراحی کنیم، ظاهر و شکل شمایل و کلا هرچیزی که در ظاهر میتونه وجود داشته باشه.

تفاوت HTML با CSS

تفاوت زبان های HTML و CSS کاملا واضح و مشخصه، یعنی اینو دیگه همه میدونن حا ، خب مشخصه زبان HTML میاد و اسکلت یه چیزی رو ایجاد میکنه بعدش CSS میاد و بهش استایل ( رنگ بندی و… ) میده.

مثلا من میخوام یه عکس بزارم تو صفحه بعدش اون عکس رو گرد یا دایره ای کنم، خب باید اول با استفاده از تگ img که متعلق به زبان HTML می باشد عکس رو درون صفحه قرار بدم :

بعدش با CSS میتونم به عکسم استایل بدم ( مثلا در دستورات زیر گفتم دور عکس یه خط مشکی بکشه بعدشم عکس رو دایره کنه )

امتحان کنید

آموزش قدم به قدم زبان CSS

پیش نیاز یادگیری زبان CSS زبان مادر طراحی وب یعنی HTML می باشد، لذا اگه شما این پیش نیاز رو ندارید پیشنهاد میکنم حتما آموزش قدم به قدم زبان HTML فری لرن را دنبال نمایید.

بهتر اینه که اول زبان HTML را کامل یاد بگیرید سپس CSS رو شروع کنید تا بتونید از هردوی این زبان ها در طراحی هاتون استفاده نمایید.

هرچند هم میشه بصورت همزمان این ۲ زبان را دنبال نمایید، یعنی وقتی دارید زبان HTML رو یاد میگیرید همزمان CSS رو نیز دنبال نمایید، ولی خب اینجوری شاید یکم براتون سنگین باشه ( بازم بستگی به خودتون داره ) ولی من پیشنهاد میکنم اول HTML بعدش CSS

نسخه های زبان CSS

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

زبان CSS برای اولین بار در سال ۱۹۹۴ ایجاد ( ابداع / تولید ) شد و همینجور که اومد جلو دیگه W3C سعی کرد همواره این زبان رو بروز و سازگار با مرورگرها نگه داره.

یعنی مثلا اول CSS1 بوده بعدش چنتا ویژگی جدید اضافه کردن شده CSS2 و دوباره همینجور چنتا ویژگی اضافه کردن و شده CSS3

خب سوال اینه تفاوت بین نسخه ۱ تا نسخه ۳ در چیه؟ آیا مثلا من فقط باید نسخه ۳ رو یاد بگیرم؟ آیا نمیخواد دیگه نسخه ۱ رو یاد بگیرم؟!

پاسخ : اینکه بخوایم بگیم مثلا ما باید نسخه ۳ رو فقط یاد بگیریم و یادگیری نسخه ۱ یا ۲ مهم نیست! کاملا اشتباه می باشد، ما باید از نسخه ۱ بلد باشیم تا هر چندتا نسخه که داشته باشد.

ادامه پاسخ : من میبینم خیلی ها میگن فقط میخوان CSS3 رو یاد بگیرند، خب واقعا چرا؟ پس CSS1 و CSS2 چی شد؟ خب در CSS3 فقط و فقط یه چنتایی ویژگی جدید اضافه شده که ما باید اونارم بلد باشیم.

ادامه پاسخ : یعنی باید در کنار CSS1 و CSS2 ما ویژگی هایی که درون CSS3 ارائه شده است را نیز بلد باشیم، پس بطور کلی CSS3 فقط یسری ویژگی جدید ارائه داده که بهتره اونارم بلد باشیم.

پس بطور کلی تفاوت اصلی بین نسخه های زبان CSS در ویژگی هایی ایست که در این نسخه ها ارائه می شوند، مثلا در نسخه ۱ ویژگی انتخابگر کلاس ( یعنی اینکه بتونیم یک کلاس رو در CSS فراخوانی کنیم ) ایجاد شد ولی خب مثلا در نسخه ۳ ویژگی هایی اضافه شده که خیلی میتونه بهمون در طراحی کمک کنه.

دسترسی سریع به بخش های مختلف آموزش CSS

دریافت PDF یا پرینت این مطلب