در این جلسه از سری جلسات دوره آموزش رایگان HTML و CSS، میخواهیم با مفاهیم پایه زبان CSS آشنا شویم و در قدم بعدی روشهای افزودن کدهای CSS به HTML را به شما عزیزان آموزش دهیم، بنابراین اگر میخواهید یاد بگیرید که به چه شکل میتوانید از کدهای CSS در یک سند HTML استفاده کنید، این جلسه را با دقت دنبال کنید.
راهنمای مطالعه:
روشهای افزودن کدهای CSS به HTML
برای اینکه بتوانید کدهای CSS خود را به سند HTML اضافه کنید، میتوانید از 3 روش مختلف استفاده کنید، روشهای افزودن کدهای CSS به HTML به ترتیب زیر میباشد که هر کدام از این روشها در شرایطی استفاده میشود که این شرایط را در ویدیوی این جلسه به صورت کامل آموزش دادهایم:
- روش اول: افزودن کدهای CSS به صورت Inline
- روش دوم: افزودن کدهای CSS به صورت Internal
- روش سوم: افزودن کدهای CSS به صورت External
روش اول: افزودن کدهای CSS به صورت Inline
در این روش کدهای CSS به صورت inline یا داخل خطی به تگهای HTML اضافه میشوند، در این روش باید به هر تگی که میخواهید کدهای CSS خود را اضافه کنید یک صفت Style اضافه کنید و کدهای CSS خود را در آن وارد کنید. روش افزودن کدهای CSS به صورت inline استفاده بسیار کمی دارد و فقط در شرایط خاصی از آن استفاده میشود.
روش دوم: افزودن کدهای CSS به صورت Internal
در روش دوم یا همان روش افزودن به صورت Internal شما باید یک تگ Style در سند HTML خود ایجاد کنید و کدهای CSS خود را داخل آن تگ style قرار دهید، روش اینترنال هم معمولا خیلی کم استفاده میشود چون در این روش سند html بسیار شلوغ خواهد شد.
روش سوم: افزودن کدهای CSS به صورت External
و روش سوم افزودن کدهای CSS به یک سند HTML، اکسترنال یا به انگلیسی External نام دارد، در این روش ما باید ابتدا یک سند با فرمت CSS بسازیم و کدهای خود را داخل آن قرار دهیم، سپس این سند را توسط تگ link که در تگ head قرار میگیرد، به سند HTML خودمان اضافه میکنیم.
روش سوم در بین دیگر روشها بیشترین استفاده را دارد و مزایای زیادی نیز دارد، پس تا حد امکان سعی کنید تا کدهای CSS خود را به صورت اکسترنال به سند html خودتان اضافه کنید.
جمع بندی
در انتها امیدواریم که مقاله آموزش 3 روش افزودن کدهای CSS به HTML برای شما مفید و کاربردی واقع شده باشد، هر سوالی دراین رابطه دارید، در انتهای همین صفحه و در بخش کامنتها مطرح کنید تا پاسخ سوالات شما همراهان گرامی را بدهیم.
سلام وقتتون بخیر
میشه بگید که چطور میشه اون صحفه style .css رو ایجاد کرد ؟
درود، لطفا در این رابطه جلسات قبل را مشاهده کنید.
خیلی مفید و عالی بود ممنون از سایت خوبتون
من هر کاری میکنم ک فایل سی س س رو به اچ تی ام ال بفهمونم نمیشه اخ چیکار کنم؟؟
توجه کنید که روش ها به صورت کامل در این ویدیو آموزش داده شده است! کار برنامه نویسی یک کار با دقت بسیار بالاست، دقت خود را بالاتر ببرید مطمئن باشید مشکل برطرف خواهد شد.
سلام برای تکمیل خودکار کد چه کلیدی می زنید ؟ تو فیلم اشاره نشده ، من با زدن اینتر style=”” میاد اما بعدش با زدن کالر و اینتر می شه style=”color: ; ” در واقع ; مانع از باز شدن کادر رنگ مثل فیلم میشه چه دکمه هایی می زنین ؟
سلام، تکمیل خودکار را خود VS Code به صورت اتوماتیک انجام می دهد.