سلام دوستان امیدوارم که حالتون خوب باشه، بلاخره بعد از مدتی که در ویرگول حضور نداشتم امروز با مطلب آموزش زبان CSS در خدمتتون هستم.
اول از هرچیز بدونید پیش نیاز یادگیری زبان CSS زبان مادر طراحی وب یعنی HTML می باشد، البته میشه هم بصورت همنیاز از این 2 زبان در کنارهمدیگر استفاده کرد.
یعنی شما همزمان که دارید HTML رو یاد میگیرید زبان CSS رو نیز در کنارش یاد بگیرید ولی خب با این وجود بعضی ها ممکنه جدا برن بسمت این زبان ها و بعضی ها هردو رو بصورت همزمان آموزش ببینن.
در فری لرن آموزش زبان HTML بطور کامل قرار گرفته و به پایان رسیده است لذا در صورت تمایل میتوانید این زبان را در فری لرن بطور کامل یاد بگیرید.
آموزش قدم به قدم زبان HTML بطور کامل در سایت آموزشی فری لرن
زبان استایل نویسی یا زبان سی اس اس یا به انگلیسی Cascading Style Sheets یکی دیگر از هسته های اصلی برای طراحی صفحات وب می باشد.
اینجوری میتونم بگم که بعد از زبان HTML زبان CSS دومین هسته برای طراحی صفحات وب می باشد، که با استفاده از این زبان میتوان نحوه نمایش عناصر را در یک صفحه وب یا دستگاهای مختلف ( مثله موبایل و.. ) مشخص کرد.
ما با استفاده از HTML مثلا یک عکس / تصویر رو درون صفحه وبمون قرار میدیم خب ، حال من میخوام عکسم رو دورش یک خط بکشم یا مثلا میخوام عکسم رو دایره ای کنم خب چجوری اینکارو کنم؟ یا اصلا میخوام یک منو درست کنم؟
اچ تی ام ال خودش به تنهایی این قدرتو نداره چون وظیفه اینکارارو نداره ، اصلا بهش گفتن تو به کاری به استایل دهی یا شکل شمایل دهی به صفحه وب نداشته باش تو فقط عناصر رو تو یک صفحه وب قرار بده تا در مرورگر نمایش داده شن.
خب تفاوت بین این ۲ زبان کاملا مشخصه، زبان HTML ایجاد کننده ی عناصر در مرورگرها می باشند و زبان CSS استایل دهنده به آن عناصر ایجاد شده در مرورگرها.
مثلا من میخوام یک عکس بزارم درون وسط صفحه وبم، پس در اینجا با استفاده از زبان HTML و تگ IMG میام و عکس رو ایجاد میکنم ولی بعدش با استفاده از CSS میام و عکس رو میزارم وسط صفحه و یا هرکاری که دلم بخواد میتونم کنم باهاش.
برای مثال من برای شما ۲ صفحه ایجاد کرده ام، صفحه اول فقط با HTML ایجاد شده (یعنی CSS هیچ دخالتی نداشته) و صفحه دوم هم با HTML و هم با CSS ایجاد شده. (پس میتونید تفاوت را به راحتی مشاهده نمایید)
نمونه صفحه ایجاد شده با HTML : (در مثال زیر عناصر فقط از طریق HTML ایجاد شده اند و همانطور که میبینید یک صفحه خشک و بی روح داریم)
برای مشاهده مثال آنلاین کلیک نمایید
نمونه صفحه ایجاد شده با HTML و CSS : همانطور که میبینید با اومدن CSS به HTML روح زندگی داده.
برای مشاهده مثال آنلاین کلیک نمایید
شاید شمایی که الان دارید این مطلب ( آموزش قدم به قدم زبان CSS ) رو مطالعه مینمایید میدانید که CSS دارای نسخه (ورژن) های مختلفی هست ، و یا شاید این را نمیدانید که CSS تا به الان ۴ نسخه ارائه کرده است.
خب سوال اینه تفاوت بین نسخه ۱ تا نسخه ۴ در چیه؟ آیا مثلا من فقط باید نسخه ۴ رو یاد بگیرم؟ آیا نمیخواد دیگه نسخه ۱ رو یاد بگیرم؟!
پاسخ : اینکه بخوایم بگیم مثلا ما باید نسخه ۴ رو فقط یاد بگیریم و یادگیری نسخه ۱ یا ۲ مهم نیست! کاملا اشتباه می باشد، ما باید از نسخه ۱ بلد باشیم تا هرچندتا نسخه که داشته باشد.
ادامه پاسخ : خیلی میگن فقط میخوان CSS3 رو یاد بگیرند، خب واقعا چرا؟ پس CSS1 و CSS2 چی شد؟ خب در CSS3 فقط و فقط یه چنتایی (تعدادی) ویژگی جدید ارائه داده شده که ما باید اینارم بلد باشیم.
ادامه پاسخ : یعنی باید در کنار CSS1 و CSS2 ما ویژگی هایی که درون CSS3 ارائه شده است را نیز بلد باشیم، پس بطور کلی CSS3 فقط یسری ویژگی جدید ارائه داده که بهتره اونارم بلد باشیم.
ادامه پاسخ : یه تفاوت اساسی (نمیدونم شاید اسمش تفاوت نباشه) بین CSS1 تا CSS4 وجود داره! اینکه ببینیم آیا مرورگرها از ویژگی هایی که درون این نسخه ها ارائه شده است، پشتیبانی میکند یا خیر!
ادامه پاسخ : یعنی الان مثلا برخی از مرورگرهای اینترنتی ( مثله فایرفاکس و کروم و.. ) از برخی از ویژگی های CSS3 یا CSS4 پشتیبانی نمی کنند یعنی هنوز براشون تعریف نشده چنین چیزی، در نتیجه به مرور زمان مرورگرها هم این مشکل رو رفع خواهند کرد.
پس بطور کلی تفاوت اصلی بین نسخه های زبان CSS در ویژگی هایی ایست که در این نسخه ها ارائه می شوند، مثلا در نسخه ۱ ویژگی انتخابگر کلاس (یعنی اینکه بتونیم یک کلاس رو در CSS فراخوانی کنیم) ( class. ) ایجاد شد ولی نسخه ۴ ویژگی هایی اضافه شده اند که در حال حاضر (لحظه ای که این مطلب رو مینویسیم) هیچکدام از مرورگرهای اینترنتی از آنها پشتیبانی نمی کنند.
تا بتونیم نحوه نمایش یا چیدمان عناصر رو درون یک صفحه وب کنترل کنیم ، برای اینکه بتونیم به صفحات وبمون استایل بدهیم و آنها را از نظر ظاهر زیبا و جذاب کنیم.
برای اینکه بتونیم قالب سایت طراح کنیم باید CSS را بلد باشیم و از آن استفاده نماییم، البته فقط CSS نه ، یعنی برای طراحی یک قالب ساده ما باید از HTML و CSS استفاده نماییم.
گفتم قالب ساده، منظورم از ساده یعنی اینکه فقط بخوایم یک قالب رو از نظر ظاهری طراحی کنیم نیازه که از HTML و CSS استفاده نماییم ولی اگه بخوایم یکمی بهش امکانات بدیم و حرفه ای ترش کنیم میتونیم از JavaScript نیز استفاده نماییم.
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.
