style : انواع روش های تعریف CSS در HTML

در این درس از سری درس های آموزش HTML می خواهیم با تعریف CSS در HTML در خدمت مخاطبان عزیز سایت کدپز هستیم. برای تعریف CSS در HTML روش های مختلفی وجود دارد. هر کدام از روش ها ویژگی های خاص خود را دارند. برخی از روش هایی که بیان می شود از اولویت بالاتری نسبت به روش های دیگردارند.

روش اول تعریف CSS در HTML به صورت inline

همان طور که می دانید تگها و المان های HTML را می توان با دستورات CSS استایل داد و نحوه ی نمایش آنها را مشخص کرد. یکی از روش هایی که برای دادن استایل به المان ها مورد بررسی قرار دادیم استفاده از صفت STYLE برای تگ های HTML بود که به آن inline style گفته می شود و از اولویت بالایی برخوردار است.

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

روش دوم تعریف CSS در HTML به صورت internal

یکی دیگر از روش هایی که بیان کردیم استفاده کردن از تگ style بود که آن را در داخل تگ head تعریف می کردیم و style المان های صفحه را می توانستیم در آن تعریف کنیم. به این روش internal style گفته می شود.

روش سوم external CSS

روش سوم استفاده از فایل استایل خارجی و یا external style می باشد. در این روش کدهای CSS را در یک فایل خارجی ایجاد می کنیم و آن را با پسوند CSS ذخیره می کنیم و سپس در فایل HTML مورد نظر، در داخل تگ head و در تگ link از آن استفاده می کنیم.

داخل تگ link صفت rel ارتباط بین فایل فعلی و فایل لینک داده شده رامشخص میکند. type نوع فایل لینک داده شده و href نام فایل ومسیر فایل  CSS را مشخص میکند.

فایل زیر هم یک فایل خارجی به نام style.css می باشد  .

برای آموزش نکات دیگر در قسمت های بعدی همراه سایت کدپز باشید.