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

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

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

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

تعریف زبان CSS

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

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

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

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

• بُعد ظاهر

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

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

باز به اون چیزی که کاربر نمیتونه در ظاهر به چشم ببینه بهش میگیم بُعد برنامه نویسی ( یعنی همون بَک اند سایت یا همون مثلا پنل ادمین که مدیریت بهش دسترسی داره )

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

تفاوت HTML با CSS

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

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

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

امتحان کنید

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

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

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

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

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

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

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

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

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

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

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

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

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