آنچه در این جلسه میخوانید :
1 تعریف زبان CSS
2 آموزش قدم به قدم زبان CSS
3 تفاوت HTML با CSS در چیست؟
4 نسخه های زبان CSS
5 چرا باید از CSS استفاده کنیم؟
6 CSS یک انقلاب در طراحی وب بود!
7 دسترسی سریع به بخش های مختلف آموزش CSS
تعریف زبان CSS
زبان استایل نویسی یا زبان سی اس اس یا به انگلیسی Cascading Style Sheets یکی دیگر از هسته های اصلی برای طراحی صفحات وب می باشد.
اینجوری میتونم بگم که بعد از زبان HTML زبان CSS دومین هسته برای طراحی صفحات وب می باشد، که با استفاده از این زبان میتوان نحوه نمایش عناصر را در یک صفحه وب یا دستگاهای مختلف ( مثله موبایل و.. ) مشخص کرد.
ما با استفاده از HTML مثلا یک عکس / تصویر رو درون صفحه وبمون قرار میدیم خب ، حال من میخوام عکسم رو دورش یک خط بکشم یا مثلا میخوام عکسم رو دایره ای کنم خب چجوری اینکارو کنم؟ یا اصلا میخوام یک منو درست کنم؟
HTML خودش به تنهایی این قدرتو نداره چون وظیفه اینکارارو نداره ، اصلا بهش گفتن تو به کاری به استایل دهی یا شکل شمایل دهی به صفحه وب نداشته باش تو فقط عناصر رو تو یک صفحه وب قرار بده تا در مرورگر نمایش داده شن.
خب اینجاست که CSS میاد وسط ، ما به راحتی با استفاده از CSS میتونیم خیلی کارا کنیم، از تغییر رنگ های تمامی قسمت های سایت بگیر تا هرگونه تغییری از نظر استایل ، با استفاده از CSS میتونیم اینکارو کنیم.
آموزش قدم به قدم زبان CSS
پیش نیاز یادگیری زبان CSS زبان مادر طراحی وب یعنی HTML می باشد.
بهتر اینه که اول زبان HTML را کامل یاد بگیرید سپس CSS رو شروع کنید تا بتونید از هردوی این زبان ها در طراحی هاتون استفاده نمایید.
هرچند هم میشه بصورت همزمان این ۲ زبان را دنبال نمایید، یعنی وقتی دارید زبان HTML رو یاد میگیرید همزمان CSS رو نیز دنبال نمایید، ولی خب اینجوری شاید یکم براتون سنگین باشه که من پیشنهاد میکنم اول HTML را یاد بگیرید بعدش CSS.
تفاوت HTML با CSS در چیست؟
خب تفاوت بین این ۲ زبان کاملا مشخصه، زبان HTML ایجاد کننده ی عناصر در مرورگرها می باشند و زبان CSS استایل دهنده به آن عناصر ایجاد شده در مرورگرها.
مثلا من میخوام یک عکس بزارم درون وسط صفحه وبم، پس در اینجا با استفاده از زبان HTML و تگ IMG میام و عکس رو ایجاد میکنم ولی بعدش با استفاده از CSS میام و عکس رو میزارم وسط صفحه و یا هرکاری که دلم بخواد میتونم کنم باهاش.
برای مثال من برای شما ۲ صفحه ایجاد کرده ام، صفحه اول فقط با HTML ایجاد شده (یعنی CSS هیچ دخالتی نداشته) و صفحه دوم هم با HTML و هم با CSS ایجاد شده. (پس میتونید تفاوت را به راحتی مشاهده نمایید)
نمونه صفحه ایجاد شده با HTML : (در مثال زیر عناصر فقط از طریق HTML ایجاد شده اند و همانطور که میبینید یک صفحه خشک و بی روح داریم)
<body dir=“rtl”><h3>سایت مهرسیستم</h3><div>سلام خوبی؟ من صادق هستم، اسم شما چیه؟ در این قسمت میخوام تفاوت بین html و css رو بهتون نشون بدم.</div><p>سایت مهرسیستم – یک سایت آموزشی رایگان می باشد و استفاده از آن برای تک تک انسان های روی زمین می باشد.</p></body>
نمونه صفحه ایجاد شده با HTML و CSS : همانطور که میبینید با اومدن CSS به HTML روح زندگی داده.
<style>h3{background-color:#F44336;color:#fff;text-align:center;padding:30px;}div{background-color:#2196F3;color:#fff;padding:25px;border-radius:15px;}p{background-color:#607D8B;color:#fff;text-align:center;border:2px solid black;padding:10px 0;}</style>
نسخه های زبان CSS
شاید شمایی که الان دارید این مطلب ( آموزش قدم به قدم زبان CSS ) رو مطالعه مینمایید میدانید که CSS دارای نسخه ( ورژن ) های مختلفی می باشد. ( نسخه ۱ تا ۴ )
خب سوال اینه تفاوت بین نسخه ۱ تا نسخه ۴ در چیه؟ آیا مثلا من فقط باید نسخه ۴ رو یاد بگیرم؟ آیا نمیخواد دیگه نسخه ۱ رو یاد بگیرم؟!
پاسخ : اینکه بخوایم بگیم مثلا ما باید نسخه ۴ رو فقط یاد بگیریم و یادگیری نسخه ۱ یا ۲ مهم نیست! کاملا اشتباه می باشد، ما باید از نسخه ۱ بلد باشیم تا هرچندتا نسخه که داشته باشد.
ادامه پاسخ : خیلی میگن فقط میخوان CSS3 رو یاد بگیرند، خب واقعا چرا؟ پس CSS1 و CSS2 چی شد؟ خب در CSS3 فقط و فقط یه چنتایی (تعدادی) ویژگی جدید ارائه داده شده که ما باید اینارم بلد باشیم.
ادامه پاسخ : یعنی باید در کنار CSS1 و CSS2 ما ویژگی هایی که درون CSS3 ارائه شده است را نیز بلد باشیم، پس بطور کلی CSS3 فقط یسری ویژگی جدید ارائه داده که بهتره اونارم بلد باشیم.
ادامه پاسخ : یه تفاوت اساسی (نمیدونم شاید اسمش تفاوت نباشه) بین CSS1 تا CSS4 وجود داره! اینکه ببینیم آیا مرورگرها از ویژگی هایی که درون این نسخه ها ارائه شده است، پشتیبانی میکند یا خیر!
ادامه پاسخ : یعنی الان مثلا برخی از مرورگرهای اینترنتی ( مثله فایرفاکس و کروم و.. ) از برخی از ویژگی های CSS3 یا CSS4 پشتیبانی نمی کنند یعنی هنوز براشون تعریف نشده چنین چیزی، در نتیجه به مرور زمان مرورگرها هم این مشکل رو رفع خواهند کرد.
پس بطور کلی تفاوت اصلی بین نسخه های زبان CSS در ویژگی هایی ایست که در این نسخه ها ارائه می شوند، مثلا در نسخه ۱ ویژگی انتخابگر کلاس (یعنی اینکه بتونیم یک کلاس رو در CSS فراخوانی کنیم) ( class. ) ایجاد شد ولی نسخه ۴ ویژگی هایی اضافه شده اند که در حال حاضر (لحظه ای که این مطلب رو مینویسیم) هیچکدام از مرورگرهای اینترنتی از آنها پشتیبانی نمی کنند.
چرا باید از CSS استفاده کنیم؟
تا بتونیم نحوه نمایش یا چیدمان عناصر رو درون یک صفحه وب کنترل کنیم ، برای اینکه بتونیم به صفحات وبمون استایل بدهیم و آنها را از نظر ظاهر زیبا و جذاب کنیم.
برای اینکه بتونیم قالب سایت طراح کنیم باید CSS را بلد باشیم و از آن استفاده نماییم، البته فقط CSS نه ، یعنی برای طراحی یک قالب ساده ما باید از HTML و CSS استفاده نماییم.
گفتم قالب ساده، منظورم از ساده یعنی اینکه فقط بخوایم یک قالب رو از نظر ظاهری طراحی کنیم نیازه که از HTML و CSS استفاده نماییم ولی اگه بخوایم یکمی بهش امکانات بدیم و حرفه ای ترش کنیم میتونیم از JavaScript نیز استفاده نماییم.
یک انقلاب در طراحی وب بود!
قبل از اینکه CSS ایجاد بشه ، در HTML برای استایل دهی به عناصر باید از یکسری تگ و صفت استفاده میشد، که اینکار اصلا به صرفه نبود نه از نظر زمان و نه قیمت.
حالا فکرشو کنید برای استایل دهی به یک صفحه وب اونم فقط از طریق HTML برای سایت های بزرگ خب واقعا کاره بسیار دشوار و عملا طاقت فرسایی میبود.
اینجا بود که کنسرسیوم جهانی وب یا به اختصار ( W3C ) CSS رو ایجاد کرد، و با اومدن CSS دیگه این مشکل حل شد و عملا میتونیم بگیم یک بار خیلی سنگینی از دوش HTML برداشته شد.
خب دوستان خسته نباشید اینم از اولین مطلب آموزشی درباره زبان CSS که در واقع با این مطلب ( آموزش قدم به قدم زبان CSS ) میخوایم استارت آموزش زبان CSS رو باهمدیگه بزنیم.
در بخش های بعدی بصورت کامل آموزش قدم به قدم زبان CSS رو ارائه خواهم داد ، در هر یک از بخش ها مثال های آنلاین مختلفی نیز وجود دارند تا شما دیگه بطور کامل آنها را یاد بگیرید.