آموزش CSS – فصل چهارم: اضافه کردن CSS به HTML

اضافه کردن کدهای CSS به صفحه HTML می تواند به چند روش مختلف انجام شود. به طور کلی سه روش برای استفاده از CSS به همراه HTML وجود دارد. این سه روش عبارتند از، استفاده از فایل خارجی، استفاده از تگ استایل یا استایل دادن به المان به صورت اینلاین. با ما همراه باشید تا نحوه استفاده از CSS به همراه HTML را به طور کامل با هر سه روش شرح دهیم.

توسط: در (دسته ها: آموزش, آموزش برنامه نویسی, آموزش طراحی وب)

آموزش CSS – فصل چهارم: اضافه کردن CSS به HTML

وقتی یک مرورگر یک فایل CSS، یا اطلاعات بین تگ <style> را می خواند، صفحه اچ تی ام ال را طبق اطلاعات داده شده در آن ها قالب بندی می کند.

سه راه برای اضافه کردن CSS به صفحه HTML

سه راه کلی برای وارد کردن برگه ی سبک وجود دارد:

  1. استفاده از فایل خارجی
  2. استفاده از تگ <style>
  3. استایل دادن به المان به صورت inline

استفاده از فایل CSS خارجی

با یک برگه استایل خارجی شما می توانید با فقط تغییر یک فایل کل ظاهر یک سایت را تغییر دهید!

یک صفحه وب می تواند شامل یک یا چند ارجاع به فایل CSS با استفاده از المان <link> باشد.

در مثال زیر المان <link> داخل بخش <head> است، گرچه هر جایی می تواند باشد، نه فقط head

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

در این مثال می توانید نحوه وارد کردن فایلی به نام mystyle.css به یک صفحه HTML را ببینید:

محتویات فایل mystyle.css می تواند چیزی شبیه زیر باشد:

نکته: در بین مقدار مولفه و واحد آن فاصله قرار ندهید. یعنی بنویسید 20px و نه 20 px

ما پیشنهاد می کنیم تا حد ممکن از فایل css خارجی استفاده کنید زیرا کد های شما کاملا تفکیک می شوند و همچنین فایل های css توسط مرورگر “کش” می شود تا در بارگزاری های آینده سریع تر لود شود.

استایل دادن به المان ها با تگ <style>

در مثال زیر، استایل داخلی در المان <style> واقع در بخش <head> از یک صفحه اچ تی ام ال تعریف می شود:

استایل دادن به المان ها به صورت inline

یک استایل inline را می توان برای اعمال کردن یک سبک منحصر به فرد که فقط بر روی یک المان اعمال می شود استفاده کرد.

برای استفاده از استایل دهی به صورت اینلاین، خاصیت style را به المان مرتبط اضافه کنید. خاصیت style میتواند حاوی هرگونه مولفه سی اس اس باشد.

مثال زیر نشان می دهد که چگونه رنگ و حاشیه بندی المان <h1> را تغییر دهید:

نکته : با استفاده از استایل دادن به صورت inline، شما بسیاری از منافع یک سی اس اس خارجی را از دست می دهید. بهتر است این روش را کمتر استفاده کنید.

استفاده از چندین فایل CSS

اگر تعدادی مولفه برای یک انتخاب گر در مکان های مختلف تعریف شده باشد، مقدار آخرین استایل خوانده شده اعمال خواهد شد.

فرض کنید که یک فایل سی اس اس خارجی، استایل زیر را برای المان <h1> درخواست کرده است:

سپس فرض کنید که یک استایل داخلی با تک استایل، سبک زیر را برای المان <h1> درخواست کرده است:

اگر استایل درون تگ <style>، بعد از لینک به فایل css خارجی تعریف شده باشد، مقدار orange اعمال خواهد شد.

یعنی اگر کد HTML صفحه، شبیه زیر باشد، مقدار orange اعمال می شود:

همچنین اگر استایل داخلی، قبل از لینک به فایل css خارجی تعریف شده باشد، مقدار navy اعمال خواهد شد.

یعنی اگر کد HTML صفحه، شبیه زیر باشد، مقدار navy اعمال می شود:

اولویت بندی دستورات CSS

وقتی که برای یک المان HTML چندین دستور CSS وجود دارد، کدام یک اولویت بیشتری برای اجرا دارد؟

به ترتیب شماره، اولویت بیشتر برابر است با:

  1. استایل اینلاین نوشته شده داخل یک المان اچ تی ام ال
  2. استایل های داخلی و خارجی در بخش head
  3. حالت پیشفرض مرورگر برای چاپ هر المان

پس یک استایل که به صورت inline نوشته شده، بیشترین اولویت را دارد و استایل داخلی، خارجی و پیشفرض مرورگر را باطل می کند.

#آموزش سی اس اس
#آموزش کد نویسی CSS
حامد ارسلانپور
حامد ارسلانپور

شوخ طبع، منطقی و پرتلاش، متخصص عکاسی و فیلمبرداری حرفه ای، علاقه مند به مباحث طراحی وب و برنامه نویسی.

ویدیوها و مطالب مشابه