Css و کاربرد آن در طراحی وب سایت

css

css چیست؟

عبارت Cascading Style Sheets که برابر آن در واژگان فارسی به معنی “شیوه نامه های آبشاری” بوده و به اختصار css خوانده می شود، نوعی زبان برنامه نویسی در زمینه طراحی وب سایت می باشد. در بیانی ساده تر این زبان را می توان مکمل Hyper Text Markup Language یا همان زبان اچ تی ام ال در طراحی صفحات وب دانست. بطوریکه HTML ساختار صفحات یک وب سایت را می سازد و CSS نحوه نمایش و قرارگیری عناصر موجود در کدهای Html را تعیین نموده و انعطاف پذیری لازم را برای نمایش هر چه زیباتر عناصر در صفحات وب را به وجود می آورد.

 

در واقع سی اس اس توسط کنسرسیوم بین المللی شبکه جهانی وب W3C به عنوان یک مکمل و بمنظور برطرف نمودن کمبود و کاستی های زبان HTML در طراحی صفحات وب و پوشش دهی نقاط ضعف آن ارایه و توسعه یافته است.

کاربرد css در طراحی سایت

خوب همان طور که ذکرشد سی اس اس کامل کننده کدهای اچ تی ام ال در طراحی صفحات وب می باشد و قابلیت استایل دهی به عناصر موجود در کدهای Html را همراه دارد و بطور کل اجزای ظاهری صفحات را تحت تاثیر قراز می دهد. دیگر ویژگی بارز و قابل توجه css خلاصه کردن و بهینه نمودن کدهای Html است که حجم آنها را به مقدار چشم گیری کاهش داده و در چارچوبی مشخص قرار می دهد.

حتما بخوانید  طراحی وب سایت به شیوه متریال دیزاین

لازم به ذکر است که نحوه استفاده از کدهای سی اس اس در طراحی وب سایت ها ارتباط مستقیم با رتبه سئوی آنها دارد و مستلزم رعایت اصولی قوائد و پارامترهای از پیش تعیین شده توسط موتورهای جستجو می باشد. بدیهی است عدم استفاده صحیح و بهینه از کدهای سی اس اس موجب تنزل رتبه سئو و همچنین موجب کاهش سرعت و عملکرد وب سایت می گردد.

css

نحوه قرارگیری css در طراحی سایت

به طور کلی کدهای سی اس اس به سه روش روی اسناد اچ تی ام ال اعمال می شوند.

1- Inline_ در این روش کدهای css در قالب یک سری Attribute (صفت) در داخل تگ های Html قرار می گیرند. به این صورت که در هر بخش استایل مورد نظر تعریف شده و عناصر موجود را در بر می گیرد.

2- Internal_ در روش دوم که اینترنال نام دارد، کلیه کدهای css در قسمت HEAD یعنی میان تگ های <head> و <head/> قرار داده می شود.

3-  External_ روش سوم هم که موسوم به اکسترنال بوده و در این حالت تمام کدهای سی اس اس در قالب یک فایل متنی با پسوند css قرار می گیرد و در قسمت head سند Html  به آن لینک داده می شود.