css چیست و نحوه استفاده از سی اس اس

css چیست ؟ css یک زبان برنامه نویسی متناسب با وبسایت ها می باشد که در جهت ظاهری سازی عمل کرده و قادر است تمام ظواهری که کاربران در سایت مشاهده می کنند را توسط این زبان بسازید.

css چیست

سی اس اس یک زبان برنامه نویسی است که front کاران که در جلوی وبسایت فعالیت می نمایند از آن استفاده می کنند. وبسایت ها برای تغییرات و ظاهری سازی از این زبان استفاده می کنند. شما قادر هستید در هر تگ استایل مورد نظر خود را اعمال کنید ولی چرا از سی اس اس استفاده میشود.

به صورت مختصر بخواهیم برای شما توضیح بدهیم اینگونه است : css از تکرار کد نویسی جلوگیری خواهد کرد.

یک وبسایت را در نظر بگیرید که در صفحات مختلف دارای دکمه می باشد که تمایل دارید برای تمامی دکمه ها از یک رنگ و سایز مشخص استفاده کنید ، حال اگر بخواهید این کد را مدام تکرار کنید باعث شلوغی کدها و سنگین شدن سایت خواهید شد.

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

موارد مورد استفاده در کدهای css

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

• . (نقطه) وقتی نقطه میاید یعنی نامی که بعد از آن قرار می گیرد ، نام کلاس می باشد.
• # وقتی # میاید یعنی نام آیدی تگ
• وقتی هیچ کدام از این دوتا نیامده بود، یعنی تمامی تگ های اشاره شده . یعنی اگر a آمده بود، یعنی تمام تگ های a
• /* و */ برای غیر فعال کردن و توضیحات می باشد. که رنگ نوشته در وسط این دوتا به سبز تغییر خواهد کرد.

نحوه استفاده از سی اس اس

کد های css درون فایلی با پسوند css ذخیره خواهند شد و در فایل های دیگر فراخوانی می شوند. نحوه استفاده از سی اس اس بسیار ساده است که در این قسمت نمونه کدهایی را برای شما قرار خواهیم داد تا بهتر متوجه شوید.

شما می توانید کدها css را درون هر فایلی استفاده نمایید که کافیست درون تگ دوبل <style> به کار ببرید. به مثال زیر دقت کنید:

<style>
.nema{color:red;}
</style>
<p class="nema">این یک تست است از نمای من</p>

در کد بالا ما در تگ style گفتیم که هر تگی که کلاس nema را داشت به رنگ قرمز درآید و در خط 4 مشاهده می کنید که تگ p ما دارای کلاس nema می باشد ، پس به رنگ قرمز در خواهد آمد.

اگر شما در هر کجای سایت خود و برای هر تگی از کلاس nema استفاده کنید ، رنگ نوشته به قرمز تغییر خواهد یافت.

<style>
.nema{color:red;}
</style>
<p class="nema">این یک تست است از نمای من</p>
<p class="nema">متن دیگر به رنگ قرمز</p>
<button class="nema">دکمه ذخیره</button>

در قطعه کد بالا مشاهده می کنید ما دوتا تگ p جهت نوشتن و یک دکمه اضافه کرده ایم که همگی از کلاس nema استفاده کردن اند و به این صورت همگی به رنگ قرمز تبدیل خواهند شد.

در نظر داشته باشید که اگر با تگ ها آشنا نیستید می توانید به سایت استاندارد و مرجع کامل که بهمراه مثال آنلاین آمده است مراجعه کنید و نحوه کار کردن آنان را مشاهده کنید. وبسایت تگ ها و مثال css

در وبسایت معرفی شده سی اس اس ها به صورت کامل توضیح داده شده است. در آینده به تکمیل فرایند این صفحه خواهیم پرداخت. شما می توانید جهت آشنایی به بهینه کردن سایت در زمان کار با css سایت از صفحه سئو سایت در تهران ما دیدن فرمایید.