css چیست و چه کاربردی دارد؟
دسته بندی: برنامه نویس یار
بروزرسانی شده در 4 آبان 1400
زمانی که صحبت از طراحی وب سایت می آید، اولین مسئله این است که html و سی اس اس چیست. با کمک css چه کارهایی می توان انجام داد . کاربرد و ویژگی های سی اس اس چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد می‌توانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبان سی اس اس می‌باشد که می‌تواند جلوه‌های زیبایی به سایت شما دهد.
css چیست؟
اول باید بدانید که Css مخفف چیست؟ سی اس اس مخفف Cascading Style Sheet (CSS) می باشد. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت است. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می شود.
در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.
هدف و کاربرد css چیست ؟
منظور از تولید سی اس اس در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت است. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت است.
دیگر کاربرد سی اس اس این است که می توان تنظیماتی را اعمال نمود که نمایش صفحه وب سایت مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر باشد که به آن اصطلاحا طراحی ریسپانسیو می گویند. در صورتی که مدیر وب سایت چندین نوع نمایش را برای یک صفحه وب سایت خود تنظیم نموده باشد، سی اس اس برای تصمیم گیری اینکه کدام حالت را به نمایش بگذارد، از ابزارهای تعیین اولویت استفاده می نماید.
ساختار کدهای css
ساختار یک کد در سی اس اس از دو قسمت تشکیل شده است:
انتخاب کننده (Selector)
بلاک اعلان (Declaration)
Selector
در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای سی اس اس را روی آن اعمال کنید. عنصر انتخاب شده می‌تواند یک پاراگراف، یک تصویر و یا یک تیتر باشد.
stylesheet چیست ؟
یک stylesheet مجموعه ای از قوانین و کدهای سی اس اس است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
فایل css چیست ؟
سی اس اس با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
اضافه کردن CSS به HTML
نحوه اتصال فایل سی اس اس به فایلhtml به سه روش زیر انجام می‌شود:
External سی اس اس
Internal سی اس اس
Inline سی اس اس
مزایای سی اس اس چیست ؟
سازگاری بیشتر در طراحی
گزینه های قالب بندی بیشتر
کد سبک
بارگیری سریعتر
بهینه سازی موتور جستجو
دسترسی بهتر به کد
روش‌های اضافه کردن CSS به صفحه HTML
حال که دانستیم سی اس اس چیست و چه ویژگی هایی دارد بهتر است سراغ معرفی نحوه استفاده از آن در کد برویم. برای استفاده از CSS سه راه برای توسعه دهندگان وجود دارد که در این قسمت از مطلب به این سه روش می‌پردازیم:
- روش inline style :
استفاده از این روش می‌توانید کدهای css را در میان تگهای html تعریف کنید. این روش معمولا توصیه نمی‌شود، زیرا به مرور زمان و با بزرگ‌تر شدن پروژه، این کدها بسیار نامرتب میشوند و در آینده باعث سردرگمی خواهند شد. - برای مثال :<p style=”background-color: red; color: white;”></p>
- روش internal style :
در این روش کافیست تمام کدهای سی اس اس را در میان تگهای باز و بسته <style></style> که در صفحه HTML نوشته شده است، قرار دهید. این روش معمولا زمانی استفاده می‌شود که بخواهند استایل خاصی را فقط در یک صفحه منحصر به فرد داشته باشند. - برای مثال :<style> P { Background-color: red; Color: white; } </style>
- روش External Style :
با استفاده از این روش شما می‌توانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگهای <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. - برای مثال :<head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head>
استفاده از هر یک از این روش‌ها در طراحی صفحات وب، با توجه به اهداف مورد نیاز انجام می‌شود. همانطور که گفته شد خواص CSS به ترتیب و از بالا به پایین مورد بررسی و پردازش قرار می‌گیرند. این به این معنا است که انتخاب خواص نهایی به صورت اولویت دار اتفاق می‌افتد. اولویت انتخاب خواص نهایی به صورت زیر می‌باشد:
- استایل‌های inline
- فایل‌ها و تگهای CSS
- پیشفرض مرورگرها
و در نهایت اگر همه استایل‌ها دارای اولویت یکسان باشند، خواصی انتخاب میشوند که آخر از همه نوشته شده باشند.
