چرا کدهای css اجرا نمی‌شوند؟

تاریخ : 2020-10-09 بازدید : 198 دسته بندی : برنامه نویسی
چرا کدهای css اجرا نمی‌شوند؟

اگر به تازگی css را یاد می‌گیرید، ممکن است با مشکل اجرا نشدن کدهای css مواجه شوید و ندانید که چرا کدهای css اجرا نمی‌شوند؟ اگر کدهای css شما اجرا نمی شوند ممکن است علت یکی از موارد زیر باشد.

1.درست آدرس دهی نکرده‌اید.

اگر از روش فایل خارجی برای استایل دهی استفاده می‌کنید، بررسی کنید آدرس فایل درست باشد. اگر فایل html و css در یک دایرکتوری (پوشه) باشند کافی است به شکل زیر آدرس‌دهی کنید.

<link rel='stylesheet' href='filename.css'/>

اگر فایل html شما در دایرکتوری بود و فایل css‌ شما در پوشه قبلی، باید درست آدرس‌دهی کنید. برای مثال :

<link rel='stylesheet' href='../filename.css'/>

 

در کد بالا، فایل css از یک پوشه عقب‌تر خوانده می‌شود. یعنی اگر فایل html در پوشه فعلی شما باشد، مرورگر یک پوشه به عقب می‌رود(از پوشه فعلی خارج می‌شود) و سپس به دنبال فایل css می‌گردد و آن را فراخوانی می‌کند. به غیر از این‌ها به پسوند فایل css هم دقت کنید که آن را اشتباه ننوشته باشید.

2.غلط املایی

اگر مورد اول که گفته شد را درست انجام داده باشید و هنوز نمیدانید که چرا کدهای css اجرا نمی‌شوند؟ ممکن است علت اجرا نشدن کد ها اشتباه نوشتن کدهای شما باشد. مثلا به جای اینکه margin بنویسید، margim نوشته باشید. برای حل این مشکل باید یک بار دیگر کدها را مرور کنید. یا از ابزار inspect استفاده کنید. استفاده از این ابزار باعث می‌شود سریع‌تر علت را متوجه شوید؛ به این دلیل که شما تمام کدها را دوباره نمی‌خوانید بلکه فقط محلی که کدها اجرا نمی‌شوند را بررسی می‌کنید.

غلط املایی شما ممکن است به علت اشتباه نوشتن نام کلاس یا id عناصر باشد. از id و class ها در html و css برای فراخوانی عناصر و استایل‌دهی به آن‌ها استفاده می‌کنیم. به این ترتیب که یک نام دلخواه را به عنوان id یا class برای عنصر تعریف می‌کنیم و سپس در فایل css آن را فراخوانی می‌کنیم.

اگر برای یک عنصر id تعریف کرده‌باشید دقت کنید که در حین فراخوانی در ابتدای نام id، علامت # قرار می‌گیرد. و اگر کلاس تعریف کرده‌باشید، در ابتدای نام کلاس نقطه (.) می‌آید. نکته دیگر این است که اگر یک نام را به عنوان id برای عنصری تعریف کردید دیگر نمی‌توانید آن نام را دوباره برای عنصری دیگر تعریف کنید. اگر این کار را انجام دهید کد اجرا نمی‌شود. پس این مورد را هم چک کنید. در حین کدنویسی ممکن است سیمی کالون ( ; )، آکولاد ({..}) و… را جا انداخته‌باشید. این موارد را هم چک‌کنید.

 

نکاتی برای بهتر نوشتن کدهای css

نکته 1 : از فایل css reset استفاده کنید

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

نکته 2 : کدها را زیاد تکرار نکنید

 اگر می‌خواهید به تعداد زیادی عناصر یک ویژگی یکسان اعمال کنید، یک کلاس کلی را تعریف کنید و آن کلاس را به عناصر بدهید و مرتبا کد تکراری ننویسید.

نکته 3 : کد را خلاصه بنویسید

 در css بعضی ویژگی‌ها مانند padding و margin  برای هر چهار جهت بالا، راست،‌ پایین و چپ می‌توانند مقداردهی شوند. به جای نوشتن padding-top ، padding-right و…  یک بار padding را بنویسید و چهار مقدار را به طور خلاصه بنویسید.

نکته 5 : کامنت‌گذاری کنید

در کدهایتان کامنت‌گذاری را فراموش نکنید. کامنت‌گذاری به خوانایی کدهایتان کمک می‌کند.

نکته 6 :  مفهومی و درست نام‌گذاری کنید

مثلا اگر می‌خواهید لوگو سایت را نشان دهید نام مناسب برای class یا id می‌تواند نام‌هایی مانند site-logo ، logo-site و… باشد. مفهومی یعنی نامی قابل فهم و درک باشد. نامی باشد که هر برنامه نویس دیگری کدهای شما را بخواند منظور شما از کدها را متوجه شود.

نکته 7 : کدهای style یا inline ننویسید

 بهترین روش استایل‌دهی این است که یک فایل جداگانه برای استایل‌ها تعریف کنید. کدهای html را هم جدا بنویسید. از روش‌های inline و یا تگ style استفاده نکنید. خوانایی کد را پایین می‌آورد و برای سئو تاثیر مثبتی ندارد.

 

مطالب پیشنهادی 

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

چگونه برنامه نویسی یاد بگیریم؟

آموزش کامل css