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

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

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

Free-Learn

تعریف زبان CSS

زبان استایل نویسی یا زبان سی اس اس یا به انگلیسی Cascading Style Sheets یکی دیگر از هسته های اصلی برای طراحی صفحات وب می باشد.

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

ما با استفاده از HTML مثلا یک عکس / تصویر رو درون صفحه وبمون قرار میدیم خب ، حال من میخوام عکسم رو دورش یک خط بکشم یا مثلا میخوام عکسم رو دایره ای کنم خب چجوری اینکارو کنم؟ یا اصلا میخوام یک منو درست کنم؟

HTML خودش به تنهایی این قدرتو نداره چون وظیفه اینکارارو نداره ، اصلا بهش گفتن تو به کاری به استایل دهی یا شکل شمایل دهی به صفحه وب نداشته باش تو فقط عناصر رو تو یک صفحه وب قرار بده تا در مرورگر نمایش داده شن.

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

Free-Learn

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

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

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

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

Free-Learn

تفاوت HTML با CSS در چیست؟

خب تفاوت بین این ۲ زبان کاملا مشخصه، زبان HTML ایجاد کننده ی عناصر در مرورگرها می باشند و زبان CSS استایل دهنده به آن عناصر ایجاد شده در مرورگرها.

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

برای مثال من برای شما ۲ صفحه ایجاد کرده ام، صفحه اول فقط با HTML ایجاد شده (یعنی CSS هیچ دخالتی نداشته) و صفحه دوم هم با HTML و هم با CSS ایجاد شده. (پس میتونید تفاوت را به راحتی مشاهده نمایید)

نمونه صفحه ایجاد شده با HTML : (در مثال زیر عناصر فقط از طریق HTML ایجاد شده اند و همانطور که میبینید یک صفحه خشک و بی روح داریم)

امتحان کنید

نمونه صفحه ایجاد شده با HTML و CSS : همانطور که میبینید با اومدن CSS به HTML روح زندگی داده.

امتحان کنید

اصلا نگران دستورات استفاده شده در مثال بالا نباشید، تک به تک آنها را میتوانید در جلسات بعدی در سایت آموزشی فری لرن بطور کامل یاد بگیرید.

Free-Learn

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

شاید شمایی که الان دارید این مطلب ( آموزش قدم به قدم زبان CSS ) رو مطالعه مینمایید میدانید که CSS دارای نسخه (ورژن) های مختلفی هست ، و یا شاید این را نمیدانید که CSS تا به الان ۴ نسخه ارائه کرده است.

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

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

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

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

ادامه پاسخ : یه تفاوت اساسی (نمیدونم شاید اسمش تفاوت نباشه) بین CSS1 تا CSS4 وجود داره! اینکه ببینیم آیا مرورگرها از ویژگی هایی که درون این نسخه ها ارائه شده است، پشتیبانی میکند یا خیر!

ادامه پاسخ : یعنی الان مثلا برخی از مرورگرهای اینترنتی ( مثله فایرفاکس و کروم و.. ) از برخی از ویژگی های CSS3 یا CSS4 پشتیبانی نمی کنند یعنی هنوز براشون تعریف نشده چنین چیزی، در نتیجه به مرور زمان مرورگرها هم این مشکل رو رفع خواهند کرد.

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

Free-Learn

چرا باید از CSS استفاده کنیم؟

تا بتونیم نحوه نمایش یا چیدمان عناصر رو درون یک صفحه وب کنترل کنیم ، برای اینکه بتونیم به صفحات وبمون استایل بدهیم و آنها را از نظر ظاهر زیبا و جذاب کنیم.

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

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

Free-Learn

CSS یک انقلاب در طراحی وب بود!

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

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

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

Free-Learn

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

در بخش های بعدی ان شاالله بصورت کامل آموزش قدم به قدم زبان CSS رو ارائه خواهم داد ، در هر یک از بخش ها مثال های آنلاین مختلفی نیز وجود دارند تا شما دیگه بطور کامل آنها را یاد بگیرید.