نحوه درج یک فایل CSS در HTML

نویسنده: Eric Farmer
تاریخ ایجاد: 3 مارس 2021
تاریخ به روزرسانی: 1 جولای 2024
Anonim
نحوه پیوند CSS به سند HTML
ویدیو: نحوه پیوند CSS به سند HTML

محتوا

زبان نشانه گذاری ابرمتن (HTML) تعیین می کند که چه عناصری در یک صفحه وب وجود دارند. زبان برنامه نویسی Cascading Style Sheets (CSS) نحوه ظاهر این عناصر را توضیح می دهد.فایل CSS را می توان به صورت خارجی به HTML اضافه کرد (CSS به عنوان یک فایل جداگانه اضافه شده است) یا یک شیوه نامه داخلی (CSS در فایل HTML گنجانده شده است). با نحوه جاسازی CSS در یک فایل HTML برای طراحی مجدد سایت خود آشنا شوید.

مراحل

روش 1 از 2: نحوه تنظیم یک استایل شیت خارجی

  1. 1 یک فایل CSS ایجاد کنید. یک فایل CSS با پسوند ".css" تهیه و ذخیره کنید.
  2. 2 فایل CSS را در سایت خود بارگذاری کنید.
  3. 3 آدرس (URL) فایل CSS را کپی کنید. آدرس سایت چیزی شبیه به این خواهد بود: www.yoursite.com/stylesheet.css.
    • خوب است که نام دامنه اصلی را از URL حذف کنید. بر این اساس ، آدرس http: //myisite.com/css/default.css به "/css/default.css" کوتاه می شود. به یاد داشته باشید که اسلش اصلی ("/") را وارد کنید. به آن مسیر نسبی می گویند.
  4. 4 پیوند را در فایل وارد کنید. برچسب / head> را در فایل HTML خود بیابید و یک خط خالی درست بالای آن ایجاد کنید. LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css"> را در آن خط بچسبانید و "www.your ..." را با پیوندی در فایل CSS جایگزین کنید.
  5. 5 فایل HTML را ذخیره کرده و در سایت بارگذاری کنید.
  6. 6 مطمئن شوید که همه چیز در سایت آنطور که باید به نظر می رسد. در غیر این صورت ، فایل HTML را دوباره باز کنید ، به دنبال خطاها بگردید و تغییرات را اعمال کنید.

روش 2 از 2: نحوه درج یک استایل شیت داخلی

  1. 1 ایجاد سبک برچسب>. فایل HTML را باز کرده و تگ / head> را بیابید. چند خط خالی در بالای آن اضافه کنید و موارد زیر را وارد کنید:

STYLE type = "text / css"> / STYLE>

  1. 1 همه CSS خود را بین این دو برچسب چسبانید.
  2. 2 فایل HTML (با پسوند .html) را ذخیره کنید.
  3. 3 اطمینان حاصل کنید که همه چیز در سایت آنطور که باید به نظر می رسد. در غیر این صورت ، تغییرات مورد نظر را اعمال کنید.

نکات

  • همیشه ظاهر سایت را در مرورگرهای مختلف و در سیستم عامل های مختلف بررسی کنید. برخی از مرورگرها به روشهای کمی متفاوت به CSS متصل می شوند. حتی ممکن است در یک مرورگر ، اما در نسخه های مختلف Mac و Windows اتفاق بیفتد. اگر سایت شما در مرورگر دیگری متفاوت به نظر می رسد (به عنوان مثال ، فاصله بین برخی از اشیاء ، مانند لیست ها ، اندازه متفاوتی دارد) ، پس مشکل تنظیمات آن مرورگر است. برای تغییر تنظیمات پیش فرض مرورگر ، برگه اصلی را پیدا کرده و در بالای فایل CSS بچسبانید. این کار به این دلیل انجام می شود که تنظیمات شما چیزی را در خود مرورگر تغییر ندهد.
  • در صورت امکان یک برگه سبک خارجی وارد کنید. با این کار می توانید ظاهر سایت را با تغییر کد موجود در فایل منبع تغییر دهید. به این ترتیب لازم نیست CSS را در هر صفحه از سایت خود تغییر دهید.
  • اگر سایت شما آنطور که انتظار دارید به CSS پاسخ نمی دهد ، کل رمزگذاری را دوبار بررسی کنید تا مطمئن شوید که درست نوشته شده است. به ویژه ، به نقطه ویرگول ("؛") و براکت بستن ("}") توجه ویژه ای داشته باشید. حذف یکی از این کاراکترها در یک فایل CSS بسیار آسان است.
  • فایل HTML را در رایانه خود ذخیره کنید تا بتوانید بعداً آن را در مرورگرهای مختلف وب باز کنید و قبل از بارگیری بیشتر ظاهر آن را دوباره بررسی کنید. اما برای بارگذاری آن ، فایل CSS باید به عنوان یک شیوه نامه خارجی در HTML قرار داده شود.
  • اگر شیوه نامه با خود متناقض باشد - به عنوان مثال ، ابتدا می گوید که متن آبی خواهد بود و سپس قرمز خواهد بود - آخرین شرط همیشه برآورده می شود. اگر یک دستور یک استایل شیت خارجی و دیگری یک استایل شیت داخلی باشد ، استایل استایل داخلی فعال خواهد بود.

هشدارها

  • از CSS مرحله بندی "باز" ​​، یعنی CSS که در برچسب HTML موجود است ، استفاده نکنید. (مثال: "align = 'center" "یک تنظیم CSS باز است). این یک گزینه منسوخ با نحو ضعیف است. اگر بعد از مدتی مجبور شدید سایت را به روز کنید ، تغییر این تنظیمات مشکل خواهد بود.