اشتباهات رایج در css و html
در این مقاله به اشتباهات رایج در css و html پرداخته‌ایم، با ما همراه باشید. اگر مشکلی در CSS و HTML دارید می‌توانید در قسمت درج نظر بپرسید تا مشکل شما را رفع کنیم.
۱-خطاهای دیکته ای
اگر یک تگ آغازین اشتباه نوشته شود مانند این است که آن عنصر اصلا وجود نداشته است.همچنین اگر تگ پایانی اشتباه نوشته شود به معنی این است که آن تگ بسته نشده و محتوای درون آن تگ از بین می رود.در css غلط های املایی و یا ویژگی ها باعث حذف کل دستورها می شود.
۲-استفاده ی نادرست از علامتها در css:
اگر در یک دستور css نتیجه مورد نظر خود را به دست نیاوردید،علامت ها مربوط به انتخابگرها را بررسی نمایید.مثلا اگر به جای # از نقطه یا برعکس استفاده کنید کد شما کار نخواهد کرد.
۳-بسته نشدن تگها،خصیصه ها و دستور ها:
اگر در html تگی بسته نشده باشد،سایر عناصر صفحه یا بخشی از آن صحیح نمایش داده نمی شود.همچنین بسته نشدن یک خصیصه در html با استفاده از علامت کوتیشن دوتایی (“)باعث می شود که سایر قسمت های صفحه تا کوتیشن بعدی جزئی از آن خصیصه محسوب شود.اگر در انتهای هر یک از مقادیر خصیه ها در css علامت ; (سمی کالن) گذاشته نشود ممکن است بخشت یا تمام دستودها بعد از آن درست کار نکنند.توصیه می شود برای پرهیز از این نوع اشتباهات ،پرانترهای آغازین و پایانی تگ ها را باهم بنویسید(بلافاصله پس از شروع تگ،پرانتز پایانی آن را نیز اضافه نمایید).این کار باعث می شود که در نحوه قرار گرفتن عنصر تودرتو نیز اشتباهی پیش نیاید.نرم افزارهایی مانند phpstorm این کار را به صورت اتوماتیک انجام می دهند.
۴-ایجاد چندین دستور:
اگر در cssاز یک انتخابگر بیش از یکبار استفاده می کنید،به نحوه ی تقدم آنها دقت کنید.بعضی از طراحان به طور اشتباه یک دستور را چندین بار در صفحه به کار می برند که هر یک از آن دستورها ممکن است ویژگی ها و مقادیر مختلفی داشته باشند.این کار باعث تداخل دستورها در قسمت های مختلف سند css می شوند.
۵-خطاهای مربوط به تگهای body , head
همانطور که در قسمت های قبل گفته شد محتوای html نباید خارج از تگ html قرار گیرد و محتوای body نیز نباید بیرون از تگ body قرار گیرد.یکی از اشتباهات رایج در طراحی وب این است که محتوای این عناصر بین تگ پایانی head و تگ آغازین body قرار می گیرد و درون آنها هیز چندین عنصر body و html دیگر قرار می گیرند.
۶-محتوای غیر قابل دسترس:
باید اطمینان حاصل کنیدکه کاربران شما حتی در صورتی که مرورگرهایشان بر روی تنظیمات پیش فرض قرار نگرفته باشد، می توانند به محتوای داخل صفحه دسترسی داشته باشند.بیشتر مشکلها زمانی به وجود می آیند که مقدار overflow را برابر hiden قرار داده باشید. همچنین تگهای textarea که نقادیر col , row در آنها به درستی تعیین نشده باشد اغلب به صورت کوچک نمایش داده می شوند.در فیلد ها متنی نیز در صورتی که ویژگی size تعیین نیشده باشد،همین مشکل پیش می آید.
۷-لینک های غیر فعال:
این لینک ها ممکن است صورت های گوناگونی داشته باشند. مانند لینکی که به صفحه دیگری باز نشود و یا لینک یک تصویر که تصویر آن باز نمی شود و یا سند های خارجی که در دسترس نباشند.اگر تابعی در جاوا اسکریپت کار نکرد بررسی کنید که آیا پیوند آن را درست ایحاد کرده اید یا نه . مسیرها را بررسی کنید. ممکن است به طور اتفاقی لینکی را مستقیما به فایلی روی لوکال خود ایجاد کرده باشید در صورتی که این فایل در اینترنت در دسترس نیست.گاهی نیز ممکن است فراموش منید بین مقادیز href با اسامی فایلهای اصلی فاصله ایجاد کنید.
۸-خطاهای فاصله گذاری:
هیچ گاه در css بین نشان گر های id یا کلاسها و نام آنها یا بین اعداد و واخدهای آنها فاصله ایجاد نکنید. همچنین فضای خالی بین انتخابگرهای مفهومی را حذف نکنید،در غیر این صورت این انتخابگرها به یکدیگر میچسبند و انتخابگر جدیدی ایجاد می کنند که شناخته شده نیست.
۹-استفاده از چند واحد اندازه گیری:
در css مقدار یک ویژگی فقط می تواند یک واخد داشته باشد.مقادیری مانند ۵۰pxem باعث می شود تمام یا قسمتی از دستور به درستی کار نکند.