🌟 جدیدترین نسخه ربات اینستاگرام نینجاگرام💖 منتشر شد !!!

ربات اینستاگرام نینجاگرام

زبان CSS چیست ؟ معرفی کامل زبان CSS

زبان css چیست و چه کاربردی دارد؟

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

css چیست؟

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

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

 

 

پیشنهاد میشود : طراحی سایت پرشین استایل

هدف و کاربرد css چیست ؟

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

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

در ادامه با ساختار کدهای CSS آشنا می شوید.

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

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

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

Selector

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

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

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

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

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

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

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

Declaration

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

stylesheet چیست ؟

یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه  tag HTML نمایش داده شود.

فایل css چیست ؟

css با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

اضافه کردن CSS به HTML

نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام می‌شود:

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

با استفاده از روش External CSS که پرکاربردترین روش استفاده از سی اس اس است می‌توانید با تغییر یک فایل که از قبل ایجاد شده، ظاهر یک سایت را تغییر دهید. محل قرارگیری کدهای css در روش خارجی به این شکل است که باید کدهای css را در یک فایل notepad بصورت مجزا نوشته و با پسوند .css ذخیره کنید. حال باید این فایل را با دستورات html به فایل اصلی متصل کنید. برای این کار می‌توانید داخل تگ <link> در بخش <head> فایلی که از قبل ایجاد کرده اید را معرفی کنید.

Internal CSS

Internal CSS زمانی استفاده می‌شود که یک صفحه از سایت باید استایل مشخصی داشته باشد. به این شکل در بخش <head> در تگ <style> تغییراتی که نیاز است را اعمال می‌کنید.

Inline CSS

نحوه استایل‌دهی کدهای html توسط کدهای css در روش Inline CSS زمانی مورد استفاده قرار می‌گیرد که بخواهید بر روی یک تگ خاص استایلی را اعمال کنید. در این روش تغییرات مستقیم بر روی همان تگ اعمال می‌شود و تاثیری بر روی تگ‌های خارجی ندارد.

 

 

نوع دستوری (Syntax) در زبان css چیست ؟

زبان css نحوی ساده ای دارد که از کلمات کلیدی انگلیسی آسانی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید. یک صفحه طراحی (Style Sheet) تشکیل شده از لیستی از قوانین (Rule) می باشد. هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد.

هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر ها توسط یک سمی کلون (;) از هم جدا می شوند.

مزایای CSS چیست ؟

  • سازگاری بیشتر در طراحی
  • طراحی صفحات وب
  • گزینه های قالب بندی بیشتر
  • کد سبک
  • بارگیری سریعتر
  • بهینه سازی موتور جستجو
  • دسترسی بهتر به کد

برخی از محدودیت های زبان css چیست ؟

  • کنترل ضعیف صفحه بندی های قابل انعطاف

  • عدم امکان انتخاب گزینه های والد

  • محدودیت در کنترل فرم های عمودی

  • عدم وجود توضیحات لازم در زبان css 
  • بروز مشکلاتی در ساخت ستون ها

 

امیدواریم این مقاله برای شما عزیزان مفید بوده باشه.

5/5 (امتیاز 2)

سوالات متداول

زبان css چیست؟

زبانی است برای استایل دهی المنت های سایت.و برای قشنگ تر کردن سایت استفاده میشود.

زبان css چه ویژگی هایی دارد؟

کارایی زیاد این زیان فدرتمند که تمامی زیبایی سایت به این زبان قدرتمند بستگی دراد و سمت کاربر میباشد.

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