CSS چیست و چگونه کار می کند؟

وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html و  css چیست ؟ با کمک css چه کارهایی می توان انجام داد؟ کاربرد و ویژگی های css چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد می‌توانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبان‌ها css می‌باشد که می‌تواند جلوه‌های زیبایی به سایت شما دهد.

CSS چیست؟

CSS مخفف Cascading Style Sheets است. این زبان برنامه نویسی است که به وب سایت ظاهر و طرح می بخشد. در کنار HTML ، CSS برای طراحی وب ضروری است. بدون آن ، وب سایت ها همچنان متن ساده در زمینه های سفید هستند.

سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.

در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.

قبل از توسعه CSS در سال ۱۹۹۶ توسط کنسرسیوم شبکه جهانی وب (W3C) ، صفحات وب از نظر شکل و عملکرد بسیار محدود بودند. مرورگرهای اولیه صفحه ای را به عنوان فرامتن – متن ساده ، تصاویر و پیوندهایی به سایر صفحات ابر متن ارائه می کردند.

کاربرد css چیست ؟

هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.

از دیگر کاربرد css این است که می توان تنظیماتی را اعمال نمود که نمایش صفحه وب سایت مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر باشد که به آن اصطلاحا طراحی ریسپانسیو می گویند. در صورتی که مدیر وب سایت چندین نوع نمایش را برای یک صفحه وب سایت خود تنظیم نموده باشد،  css برای تصمیم گیری اینکه کدام حالت را به نمایش بگذارد، از ابزارهای تعیین اولویت استفاده می نماید.

ساختار کدهای css

ساختار یک کد در Css از دو قسمت تشکیل شده است:

• انتخاب کننده (Selector)
• بلاک اعلان (Declaration)

Selector

در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده می‌تواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کننده‌های سی اس اس به چند دسته تقسیم می‌شود:

انتخاب کننده عنصر:

با استفاده از این انتخاب کننده می‌توانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ‌ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.

انتخاب کننده id :

اگر بخواهید استایل‌های CSS بر روی گروهی از تگ‌ها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن‌ را دارید یک ID تعریف کنید، سپس در بخش Css آی‌دی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال می‌کنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال می‌گردد.

انتخاب کننده Class :

برای این کار باید تمام تگ‌هایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص می‌باشد.

Declaration

با استفاده از این بخش که در بین {…} قرار می‌گیرد می‎‌توانید مشخص کنید چه استایلی روی تگ‌های انتخاب شده اعمال گردد. این بخش از دو قسمت “ویژگی” و “مقدار” تشکیل شده است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. به طور مثال مشخص کنید تگ h1 به رنگ آبی و یا سایز فونت برابر ۱۴ پیکسل باشد.

CSS چگونه کار می کند؟

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

چرا استفاده از Css  اهمیت دارد؟

دنیای برنامه‌نویسی را اگر به پیکر یک انسان تشبیه کنیم، Css پوست، گوشت و البته لباس‌های یک انسان خواهد بود. انسان بدون داشتن گوشت و استخوان، تنها یک اسکلت خالی است. یک وبسایت هم بدون Css تنها بدنه‌ای خالی است که یک مشت نوشته و خط آن را پر کرده‌اند.

به کمک سی‌اس‌اس است که می‌توان پوست و گوشت را به اسکلت سایت بخشید و البته یک کت‌وشلوار شیک هم به آن اضافه کرد! در نظر داشته باشید که یک وبسایت هرچقدر هم هسته قدرتمندی داشته باشد، با سرعت بالا بارگذاری شود و مطالب کاربردی و مفیدی در آن وجود داشته باشد، بدون وجود Css هیچکس حوصله‌ی بازدید از آن را نخواهد داشت.

پس هر برنامه‌نویسی که در زمینه‌ی طراحی وبسایت فعالیت می‌کند، باید بر این زبان نیز تسلط کامل داشته باشد

برای یادگیری Css از کجا شروع کنیم؟

اگر شما یک فرد مبتدی هستید و هنوز فعالیت حرفه‌ای خود در زمینه طراحی وب را آغاز نکرده‌اید، نمی‌توانید آموزش خود را با Css آغاز کنید، چراکه فراگیری این زبان، یک پیش‌نیاز مهم دارد. اگر بخواهیم کل عملکرد یک وبسایت را طبقه‌بندی کرده و زبان‌های موردنیاز برای اجرای آن را نام ببریم، طبقه‌بندی ما به شکل زیر خواهد بود:

• محتوا «Content»
• نمایش «Presentation»
• رفتار «Behavior»

محتوا «Content»

هر وبسایت با منظور ارائه‌ی یک سری محتوا و اطلاعات خاص ایجاد می‌شود. برای مثال، کسی که یک وبسایت خبری دارد، محتوای خبری خود را در سایتش منتشر می‌کند؛ همچنین وبسایت‌های آموزشی، سرگرمی و …. نیز بسته به موضوع خاصی که دارند، محتوای متفاوتی را بر روی وبسایت خود بارگذاری می‌کنند. این محتوا به کمک کدهای زبان برنامه‌نویسی تحت وب اچ‌تی‌ام‌ال یا HTML ایجاد می‌شوند.

نمایش «Presentation»

گفتیم که محتوای یک سایت هرچقدر هم که خوب باشد، اگر ظاهر و استایل مناسبی نداشته باشد، هیچکس دوست ندارد تا محتوای خشک آن را مطالعه کند. پس دومین مرحله‌ و دومین بخش طراحی سایت به نمایش زیبای آن مربوط می‌شود که این وظیفه برعهده‌ی کدهای زبان برنامه‌نویسی تحت وب Css ایجاد خواهد شد.

رفتار «Behavior»

برخی از وبسایت‌ها تنها محتوای خود را به کاربران نشان می‌دهند، اما اکثریت سایت‌ها امکان تعامل کاربر با صفحات خود را ایجاد می‌کنند؛ برای مثال، شما پس از خواندن یک مطلب می‌توانید نظر خود را درباره آن بنویسید یا در سایت موردعلاقه خود عضو شوید. این تعامل به همراه سایر رفتارهای فراتر از متن یک وبسایت به کمک زبان برنامه‌نویسی تحت وب جاوا اسکریپت یا JavaScript ایجاد می‌شود.

جمع بندی

در پاسخ به سؤال CSS چیست می‌توان گفت که سی‌اس‌اس عامل اصلی زیباسازی وبسایت‌ها و یکی از عناصر ضروری برای رابط کاربری آن‌ها است. انواع استفاده از css در صفحات تحت وب برای اجرای استایل‌های متنوع بر روی متون، عناوین، کادرها، تصاویر و …. است.

پس با پی بردن به اینکه CSS چیست و چه کارهایی از آن ساخته است، می‌توان یک صفحه وب زشت را به یک صفحه‌ی زیبا، دیدنی و کاربرپسند تبدیل کرد.

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