CSS چیست : همه ما دوست داریم جایی را برای زندگی انتخاب کنیم که احساسی گرم و صمیمی داشته باشد و از وقت گذراندن در آن خسته نشویم. طراحی دکور همان چیزی است که به یک اتاق بی روح و خالی، جانی دوباره میبخشد. در دنیای وب نیز برنامه نویسان به دنبال زیبایی و منعطف کردن صفحات وب سایتها هستند تا توجه کاربران را جلب کنند و میزان بازدید آنها از سایت را افزایش دهند. یکی از ابزارهای اصلی و لازم برای بهبود طراحی سایت، CSS است که در این مطلب قصد داریم شما را با آن آشنا کنیم تا بدانید css چیست و چه کاربردی در دنیای وب دارد؟
CSS چیست؟
اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است. این دو زبان در کنار یکدیگر معنی پیدا میکنند. زیرا CSS را میتوان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاءهای آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی "برگههای آبشاری" است.
این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است. در واقع CSS یک زبان نشانه گذاری است که اجازه میدهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگبندی و فونتها شکل دهید. این زبان در کنار HTML و JavaScript از هستههای اصلی طراحی صفحات وب به حساب میآیند.
دنیای وب بدون زبان CSS چگونه میشد؟
همانطور که از تصویر بالا برداشت میشود، CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد. CSS طراحان سایت را قادر میسازد که بدون محدودیت خلاقیتهای خود را در طراحی صفحات سایت پیاده سازی کنند. برای اینکه به ضرورت ایجاد CSS پی ببرید و بدانید علت نیاز به CSS چیست ، قصد داریم سایت سون لرن را یک بار با CSS و یک بار بدون استفاده از CSS مشاهده کنیم.
آیا متوجه شدید اگر CSS وجود نداشت دنیای وب چه چهره زشت و ناخوشایندی به خود میگرفت؟ در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه میشد. طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگیهای ظاهری مختلف مانند تغییر رنگ، اندازه و... عناصر صفحه، کافی بود با خاصیتهای داخلی HTML دست و پنجه نرم کنند. آنها میبایست این تغییرات را در تک تک صفحههای مورد نظر و بر روی تک به تک اجزای آن اعمال میکردند. این عوامل طراحی سایت را با صرف زمان و سختیهای زیادی همراه ساخته بود.
کلمه "Cascading" یا آبشاری که اولین کلمه از CSS است به این نکته اشاره میکند که کدهای نوشته شده با CSS به صورت پیش فرض از بالا به پایین و به ترتیب پردازش و اجرا میشوند. CSS این قابلیت را در اختیار شما قرار میدهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگیهای اجزای مختلف در صفحات وب سایت را تعیین کنید. یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد میکنید، روی اجزای زیرمجموعه ی آن هم تاثیر میگذارند. به عنوان مثال اگر شما رنگ متن یک صفحه را تغییر دهید، تمامی زیرمتنها مانند پاراگرافها و سرخطها نیز آن رنگ را خواهند داشت. تصویر بالا نمونه ای از یک فایل CSS یا Styles است.
فرانت اند (Front End) به چه معناست؟
CSS یکی از پرکاربردترین زبانها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته میشود. در فرانت اند فقط با عناصر بصری سایت کار میکنیم و هر تغییری که ایجاد میکنیم در چهره سایت مشخص میشود. زبانهای HTML، JS و CSS جزو اصلیترین عناصر فرانت اند هستند. پیشنهاد میکنیم مقاله زیر را بخوانید تا دید بهتری نسبت به فرانت اند پیدا کنید.
حال که فهمیدیم CSS چیست و چه اهمیتی در دنیای وب دارد، قصد داریم شما را با ساختار این زبان آشنا کنیم. تصور کنید قصد دارید یه پاراگراف را از سایر پاراگرافهای دیگر متمایز کنید. به همین منظور پس زمینه آن را قرمز و رنگ فونت را سفید در نظر بگیرید. کد با استفاده از کدهای زیر، این تغییرات بر روی پاراگراف مورد نظر اعمال میشوند:
P {
Background-color: red;
Color: white;
}
همانطور که میبینید کدهای CSS بسیار به زبان انسان شبیه هستند، بنابراین یادگیری این زبان به شدت آسان است. در کد بالا، خاصیتهای CSS به المان پاراگراف (p) اختصصاص داده شده است. به این قسمت از کدهای CSS انتخاب کننده یا selector گفته میشود. همچنین تمام بخشهای داخل براکتها بلوک declaration نامیده میشوند. هر کدام از خطهای داخل بلوک declaration یک declaration است که از دو بخش تشکیل میشود.
بخش قبل از علامت : property نامیده میشود که نشان دهنده خاصیتی است که قصد دارید به آن مقداری اختصاص دهید. بخش بعد از علامت : که value نامیده میشود نشان دهنده مقدار آن خاصیت است. هر خط declaration با یک علامت سمی کالم (;) به پایان میرسد.
روشهای اضافه کردن CSS به صفحه HTML
حال که دانستیم css چیست و چه ویژگی هایی دارد بهتر است سراغ معرفی نحوه استفاده از آن در کد برویم. برای استفاده از CSS سه راه برای توسعه دهندگان وجود دارد که در این قسمت از مطلب به این سه روش میپردازیم:
روش inline style :
استفاده از این روش میتوانید کدهای css را در میان تگهای html تعریف کنید. این روش معمولا توصیه نمیشود، زیرا به مرور زمان و با بزرگتر شدن پروژه، این کدها بسیار نامرتب میشوند و در آینده باعث سردرگمی خواهند شد. برای مثال :
روش internal style :
در این روش کافیست تمام کدهای CSS را در میان تگهای باز و بسته <style></style> که در صفحه HTML نوشته شده است، قرار دهید. این روش معمولا زمانی استفاده میشود که بخواهند استایل خاصی را فقط در یک صفحه منحصر به فرد داشته باشند. برای مثال :
<style>
P {
Background-color: red;
Color: white;
}
</style>
روش External Style :
با استفاده از این روش شما میتوانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگهای <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. برای مثال :
استفاده از هر یک از این روشها در طراحی صفحات وب، با توجه به اهداف مورد نیاز انجام میشود. همانطور که گفته شد خواص CSS به ترتیب و از بالا به پایین مورد بررسی و پردازش قرار میگیرند. این به این معنا است که انتخاب خواص نهایی به صورت اولویت دار اتفاق میافتد. اولویت انتخاب خواص نهایی به صورت زیر میباشد:
استایلهای inline
فایلها و تگهای CSS
پیشفرض مرورگرها
و در نهایت اگر همه استایلها دارای اولویت یکسان باشند، خواصی انتخاب میشوند که آخر از همه نوشته شده باشند.
چرا باید از CSS استفاده کنیم؟
اساسیترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است. CSS بسیار منعطفتر از HTML است و به شما اجازه میدهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. در ادامه این مطلب میخواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.
مزایای CSS
با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد میتوانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک میکند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها میتواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاهها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر میباشند:
ویژگیهای بیشتری برای کار با اجزای صفحات نسبت به HTML دارد.
بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
امکان ساخت جلوههای تصویری و انیمیشنی جذاب
نگه داری آسان کدها
جلوگیری از کدنویسی کثیف و غیر اصولی
معایب CSS چیست؟
زبان CSS در مقابل مزایای بسیار زیادی که دارد، شامل ضعفها و محدودیتهایی هم میباشد. برخی از محدودیتهای این زبان عبارتند از:
ناتوانی در انتخاب والد در CSS نمیتوان برای هر عنصر، گزینه بالاتر یا والد را انتخاب کرد. دلیل اصلی آن، بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف است.
ناتوانی در نام گذاری نقشها در زمان ارجاع scriptهای بخش کاربر و تغییر Selectorها
تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.
دسترسی برای ایجاد هرگونه تغییر به علت متن باز بودن CSS میتواند برنامه نویسان را در دام تغییرات ناخواسته ای بیندازد که ممکن است روی ظاهر کل سایت تاثیر بگذارند.
ریسپانسیو کردن با css
همانطور که میدانید در زمانهای گذشته بیشتر افراد از طریق سیستمهای کامپیوتری به وبگردی و مشاهده صفحات وب میپرداختند. اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاههایی مثل گوشی ، تبلت، ساعتهای هوشمند و ... افزایش پیدا کرده است. این امر سبب شد که توسعه دهندگان به فکر سازگار کردن صفحات وبسایتها با دستگاههای هوشمند بیفتند.
سازگار کردن صفحات وبسایتها همان Responsive یا واکنشگرا کردن است. به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشنهای مختلفی مشاهده کنید، بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای css نوشته شده است، بسیار ساده و سریع شده است.
آشنایی با نسخههای CSS
هر کدام از نسخههای CSS به منظور تکمیل نسخه قبلی و ارائه ویژگیهای جدید معرفی شدند که در این قسمت به شرح مختصر هر یک میپردازیم. داشتن نسخههای متعدد CSS ممکن است برای کسانی که آشنایی چندانی با آن ندارند گیج کننده باشد، اما معرفی این نسخهها اشاره مختصری به تاریخچه css و تنها به منظور آشنایی با آنها است زیرا امروزه از نسخه سوم و چهارم بیشتر استفاده میشود.
CSS 1
اولین نسخه از CSS که به طور رسمی در سال 1996 معرفی شد، CSS 1 بود.
با معرفی نسخههای جدیدتر، در حال حاضر استفاده از CSS 1 پیشنهاد نمیشود. برخی از ویژگیهای اصلی این نسخه از CSS به صورت زیر میباشند:
افزودن امکاناتی برای فونت مانند ایجاد سبک و تنظیم Font face و Emphasis
امکان تغییر رنگ، تخصیص رنگ به پس زمینه و سایر عناصر دیگر به متن
امکان تنظیم فاصله بین کلمات و سطرها در متن (Alignment)
امکان اضافه کردن کادر (Border)، حاشیه (Margin) و لایه بندی (Padding) صفحات وب
امکان کلاس بندی گروهی از ویژگیها (Attributes)
CSS 2
این نسخه در 1998 معرفی شد و برخی از امکانات جدید آن عبارت اند از:
امکان تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به سایر اجسام
شناخت انواع فایلهای چند رسانه ای
قابلیت هایی برای طراحی متن مانند تنظیم راست چین بودن نوشته ها
این نسخه دارای دو اصلاحیه CSS 2.1 و CSS 2.2 نیز بود اما به طور کلی امروزه استفاده از این نسخه نیز پیشنهاد نمیشود.
CSS 3
CSS 3 در 1999 معرفی شد و تحول بزرگی در بهبود نسخههای CSS محسوب میشود. این نسخه ساختاری ماژول بندی شده دارد و امکانات آن در قالب ماژولهای مختلف در دسترس طراحان قرار میگیرد. تا سال 2012 حدود 50 ماژول معرفی شدند که امکاناتی مانند استفاده از تصویر در پس زمینه، اضافه کردن فرمهای چند ستونی و غیره را برای طراحی سایتها فراهم میکنند.
CSS 4
در واقع استانداردی به نام CSS 4 وجود ندارد زیرا توسعه دهندگان CSS 3 به توسعه و بهبود هر کدام از ماژولها پرداختند و این سطح، در واقع از تعدادی از ماژولهای سطح 4 تشکیل شده است. برخی از این ماژولها عبارت اند از Image value، Background و Selectors که بسیار کاربردی هستند.
پشتیبانی مرورگرها از CSS
در اولین سالهای معرفی CSS بسیاری از مرورگرها توانایی تفسیر و تجزیه کدهای آن را نداشتند. به همین دلیل توسعه دهندگان مجبور بودند از تکنیکی به نام CSS Hack استفاده کنند. به کمک این تکنیک، برنامه نویسان تعیین میکنند قسمت هایی از CSS که در مرورگر پشتیبانی نمیشوند، نمایش داده نشوند.
پس از آن مرورگر Internet Explorer 3 شروع به پشتیبانی از کدهای CSS کرد و در سال 2008 و در هشتمین نسخه خود، توانست به طور کامل CSS 2 را پشتیبانی کند. امروزه اکثر مرورگرها از CSS پشتیبانی میکنند، اما هنوز هم ممکن است توسعه ی نسخههای CSS، مشکلاتی به همراه داشته باشد.
جمع بندی
در این مقاله در مورد css صحبت کردیم و دیدیم که مهمترین کاربردهای css چیست و چه مزیت هایی را در اختیار ما قرار میدهد. اما فراموش نکنید که برای طراحی سایت، آموزش CSS به تنهایی کافی نیست و به یادگیری HTML و جاوا اسکریپت نیز نیاز دارید. اگر از آموزشها و تمرینات پروژه محور استفاده کنید، قطعا زمان یادگیری شما بسیار کاهش خواهد یافت و پس از چند هفته میتوانید از قابلیتهای CSS در کدهای خود استفاده کنید. مطالبی که در سون لرن ارائه میشود به شما در آموزشهای اولیه و آمادگی برای کار با CSS کمک میکند.
اگر میخواهید طراحی سایت را یاد بگیرید بهتر است مقالات زیر را مطالعه کنید
بسیار عالی و با زبان روان بیان شده،از جمع آوری کنندگان این مطالب بسیار ممنونم.
امیرعلی عباداللهی۲۳ مهر ۱۴۰۲، ۱۹:۳۷
با سلام و خسته نباشید.
من تا حدودی آشنایی ب کد نویسی هستم. ولی خیلی دوست دارم. برنامه نویسی سایت را یاد بگیرم.هم علاقه دارم.هم میخوام ازس درآمد کسب کنم. ممنون میشم راهنمایی کنید از کجا شروع کنم. ی برنامه بدید؟؟
نازنین کریمی مقدم۲۴ مهر ۱۴۰۲، ۰۵:۳۹
درود
برنامه نویسی سایت به دو بخش ظاهر (فرانت اند) و منطق و باطن (بک اند) تقسیم میشه.
شما به کدوم بخش علاقه دارید؟ اگر بفرمایید بهتر میتونم راهنمایی تون کنم.
۰۶ مرداد ۱۴۰۲، ۲۰:۴۴
سلام وقت بخیر.
داشتم تو ویرایش با المنتور پرو یه برگه المانهای یه شورت کد ثبت سفارش رو مخفی میکردم,کدهایcssعمل میکردن ولی بعد بروزرسانی و اعمال تغییرات به حالت پیش فرض برمی گشت.
ممنون میشم راهنماییم کنین چطوری میتونم درستش کنم؟
نازنین کریمی مقدم۱۹ شهریور ۱۴۰۲، ۰۸:۵۱
درود
احتمالا قالب یچیزی داشته که باعث میشده این بخش مجدد بازنویسی بشه. با !important استایل رو بازنویسی کنید تا دیگه تغییر نکنه.
امیر حسین قائمی زاده۱۵ اسفند ۱۴۰۱، ۲۲:۰۹
خیلی کاربردی
متشکر
۰۶ آبان ۱۴۰۱، ۰۷:۴۶
سپاس از شما ،،،،،،،،، بسیار عالیییییییییییییییی بود
اعظم راد۱۷ تیر ۱۴۰۰، ۰۸:۲۸
با سلام وخسته نباشید خدمت شما ببخشید میخواستم از حضورتون چند تا سوال کنم سی وسه سالمه دیپلم تجربی داشتم ولی لیسانس الهیات گرفتم وکاملا نامرتبط به رشته کامپیوتر وطراحی سایت و برنامه نویسی و این حرفا ولی قبلا وبلاگ نویسی کردم ووبلاگای خوبی جهت تبلیغات شغل همسرم داشتم وحتی صفحه اول گوگل دیده میشن میخواستم اصولیتر ادامه بدم یعنی طراحی سایت در زمینه تبلیغات به نظرتون میتونم موفق باشم ضمنا خانه دار هستم با بچههای کوچولو.میخوام برم کلاس طراحی سایت به نطرتون میشه از این طریق درامدی داشته باشم واین که بدون اغراق دارای هوش ذوق هنری نسبتا خوبی هستم لطفا راهنمایی کنید مناسبه؟چقد زمان نیاز داره؟
نازنین کریمی مقدم۰۴ مرداد ۱۴۰۰، ۱۰:۵۷
درود، بابت تاخیر در پاسخگویی پوزش میطلبیم.
بنظرم با توجه به شرایطی که دارید بهتر هست که یه تایمی از روز (مثلا عصر که بچهها مشغول بازی یا خواب بعداز هستند) رو اختصاص بدید فقط به کار طراحی سایت. خودتون رو مجبور کنید تا روزی دوساعت کار نکردید شب نخوابید:) چون خونه داری و نگهداری از بچهها باعث میشه خیلی به خودتون سخت نگیرید و یادگیری به تعویق میفته.
گفتید وبلاگ نویسی کردید، اما طراحی سایت یه کم سختتر و در عین حال جذابتر هست. <strong>توصیه میکنم وردپرس رو شروع کنید که برنامه نویسی کمتری داره و درآمد نسبتا خوبی داره. برای هدف شما که تبلیغات هست فوق العاده مناسبه. زمان یادگیری به سرعت و تلاش خودتون بستگی داره، بین یک تا سه ماه متغیره.</strong>
اگر خواستید طراحی سایت با برنامه نویسی پیشرفته رو شروع کنید، با سایت <a href="https://www.w3schools.com/" target="_blank" rel="noopener nofollow ugc">w3schools</a> آشنا باشید و بحث html و css رو شروع کنید. اگر به تبلیغات فکر میکنید در مرحله بعد باید کار با سئو رو هم شروع بگیرید. پس این مسیر نیاز به زمان بیشتری داره. زمان یادگیری با شرایط شما، حداقل 4 ماه در بهترین حالت.
ثبت نام در یک دوره یا کلاس خیلی میتونه کمک کنه تا مجبور باشید به اون دوساعت در روز پایبند باشید. اما توصیه میکنم دوره رو به صورت غیرحضوری انتخاب کنید تا دردسر نگهداری از بچهها رو نداشته باشید و وقتتون سر رفت و آمد هدر نره.
AMG۰۹ تیر ۱۴۰۰، ۱۸:۲۶
سلام و خسته نباشید خدمت شما، من یه سوال خدمتتون داشتم، حقیقتش من سنم بالاست 29 سالمه و تحصیلاتم هم نامرتبطه با برنامه نویسی هستش، من علاقه ی بسیار زیادی نسبت به فرانت اند دارم، به نظرتون آیا میشه با این سن وارد حوزه فرانت اند شد؟ آیا شرکت کسی مانند من رو که سنش بالاست و تجربه کاری نداره رو استخدام میکنند؟ به نظرتون آیا اومدن به این حوزه با این شرایط عاقلانه هستش؟
با تشکر از زحمات شما
نازنین کریمی مقدم۱۳ تیر ۱۴۰۰، ۲۰:۲۲
سلام
اول مشخص کنید که هدف تون از یادگیری برنامه نویسی، کار پاره وقت هست و یا اینکه میخواید کامل تغییر حوزه بدید؟
براساس جوابی که به سوال بالا میدید، برای خودتون برنامه ریزی کنید و زمانهای مشخصی رو برای یادگیری و تمرین در نظر بگیرید (بسته به هدف روزی 2 تا 6 ساعت)
توجه داشته باشید که شما باید براساس علاقه تون مسیر رو مشخص کنید. ممکن است بعد از کمی کارکردن در یک حوزه مثل طراحی سایت، متوجه شوید که به یک حوزهی کاملا متفاوت مثل بک اند علاقه دارید و مسیر خود را تغییر دهید. هرچند که این تغییر مسیر به دلیل تازه کار بودن طبیعی هست، اما توصیه میکنم همین ابتدای کار به یک تصمیم قاطع و مشخص برسید تا بتونید بهترین نتیجه رو بگیرید.
برای اطمینان میتونید شرایط استخدام در سایتهای کاریابی مثل جاب ویژن یا جابینجا رو مطالعه کنید. توصیه میکنم همزمان با یادگیری، نمونه کارهای عملی بسازید. اگر نمونه کار داشته باشید احتمال استخدامتون بالا میره. برای شروع حتی میتونید به عنوان کارآموز یا حتی به طور پاره وقت مشغول به کار بشید و ببینید اوضاع چطور هست. من فردی رو میشناسم که حدود سی سالگی برنامه نویسی رو شروع کرده و الان بالای 10 میلیون درآمد داره. پس ناامید نباشید.