این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.
آموزش نحوه استفاده از CSS در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از CSS در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه استفاده از CSS در HTML
سی اس اس یا CSS که مخفف Cascading Style Sheets می باشد، دومین هسته برای طراحی صفحات وب می باشد ، که ما از طریق اون میتونیم به صفحات وبمون استایل یا شکل و شمایل بدهیم.
کلمه Cascading Style Sheets در لغت یعنی شیوه نامه های آبشاری ، که منظور از آبشاری یعنی دستورات CSS بصورت آبشاری بروی عناصر اعمال میشن ، یعنی اگه یه باکس داشته باشیم و داخلش چنتا تگ P باشه، و به باکس رنگ متن مثلا قرمز بدیم تمامی تگ های P هم که داخل باکس هستن رنگ متنشون قرمز میشه، پس از این نظر میگن آبشاری.
ما با استفاده از CSS میتونیم نحوه نمایش یا شکل نمایش عناصر را در یک صفحه ی وب مشخص نماییم، بطور کلی میشه گفت فایل CSS هر سایتی یعنی قلب اون سایت که به تمامی بخشهای اون سایت از نظر استایل داره نفس برای زنده بودن میده و اگر کوچکترین مشکلی برای این فایل به وجود بیاید کل استایل و شکل شمایل اون سایت بهم خواهد ریخت.
کلا در یک سایت، هرچی که از نظر ظاهری قابل مشاهده می باشد توسط CSS استایل دهی میشه، مثلا منوها ، لینک ها ، تصاویر ، جدول ها و… همگی میتونن توسط زبان CSS استایل دهی بشن.
حواستون باشه خوده زبان CSS کلا جداست و برای خودش کلی ویژگی مجزا داره که هریک از این ویژگی ها هم کاری انجام میدن، ما اینجا کاری به ویژگی های CSS نداریم ما فقط میخوایم روش های استفاده از CSS در یک صفحه وب رو یاد بگیریم.
مشاهده لیست کامل ویژگی های زبان CSS .
همچنان در ادامه ی آموزش نحوه استفاده از CSS در HTML با من همراه باشید، دوستان محترم بطور کلی ما در HTML از ۳ روش میتونیم از CSS استفاده نماییم:
- استایل خطی یا Inline یا درون تگی
- استایل داخلی یا Internal یا درون صفحه ای
- استایل خارجی یا External یا درون فایلی
Free-Learn
استایل خطی یا Inline Css در HTML
اینلاین یا درون خطی یا Inline یا درون تگی یکی از روش های اضافه کردن CSS به تگ های موجود در HTML می باشد، که در این روش ما باید از صفت Style درون هر یک از عناصر HTML که میخواهیم براش استایل تعریف نماییم، استفاده نماییم.
آموزش کار با صفت Style بصورت جداگانه در بخش های قبلی از آموزش HTML ارئه شده است که در صورت تمایل میتوانید آن بخش را نیز مشاهده نمایید.
لطفا به مثال زیر برای نحوه استفاده از سی اس اس بصورت خطی توجه نمایید :
|
1 2 3 4 5 |
<body> <h2 style="text-align:center; background-color:#123456; color:#fff;">سایت آموزشی فری لرن</h2> </body> |
این روش خیلی روش بهینه ای نیست چرا؟ چون اینجوری اگه بخوایم داخل هرتگ بصورت مجزا استایل تعریف کنیم هم بعدا برای ویرایش کردن کارمون سختتر میشه و هم اینجوری حجم فایل مون الکی میره بالا، پس سعی کنید خیلی زیاد از این روش استفاده نکنید.
Free-Learn
استایل داخلی یا Internal Css در HTML
در ادامه ی آموزش نحوه استفاده از CSS در HTML میخواهیم با روش داخلی آشنا شویم ، همونطور که از اسم این روش مشخصه ما میتونیم دستورات CSS رو درون یک فایل HTML قرار دهیم که بهش میگیم اینترنال یا Internal یا درون صفحه ای.
این روش ما باید از تگ <style> در بخش هد <head> یک صفحه ی HTML استفاده نماییم، لطفا به مثال زیر توجه نمایید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<head> <style> body{ background-color:#f2f2f2; text-align:center; } h2{ color:blue; background-color:#fff; padding:10px; } p{ color:red; background-color:#fff; padding:10px; } </style> </head> |
این روش نسبت به روش درون تگی خیلی بهینه تر می باشد، ولی خب بازم این روش به نسبت روش خارجی خیلی بهینه نیست و بهتره باز کمتر ازش استفاده شه.
Free-Learn
استایل خارجی یا External Css در HTML
اکسترنال یا خارجی یا External یکی دیگر از روش های استفاده از CSS در HTML می باشد، این روش یکی از بهینه ترین و بهترین روش استفاده از دستورات CSS در HTML می باشد.
خب گفتیم روش درون تگی بهینه نیست و اصلا حتی منطقی نیست که ما بخوایم برای مثلا ۲۰۰تا تگ درون یک صفحه بصورت درون تگی استایل تعریف کنیم.
حال روش داخلی از اون روش درون تگی خیلی بهتره و منطقی تره ولی بازم الان روش خارجی از اون ۲ روش قبلی خیلی خیلی بهتر و منطقی تر و بهینه و استانداردتره.
خب یعنی چی روش خارجی!؟ خیلی سادس، ما دستورات CSS مون رو درون یک فایل بصورت مجزا و با پسوند css. ذخیره میکنیم خب این میشه یه فایل CSS مجزا، بعدش خیلی راحت با یه خط کد همون فایل CSS رو به فایل HTML مون وصل میکنیم.
برای داشتن وبسایتی سریعتر و بهینه تر، تا جایی که میتوانید سعی کنید از روش های درون خطی (Inline) و داخلی (Internal) استفاده نکنید.
Free-Learn
نحوه ایجاد یک فایل CSS خارجی
همونطور که میدونید نرم افزارهای بسیار زیاد و حرفه ای برای ایجاد فایل هایی همچون HTML , CSS و .. وجود دارد، حالا از هرکدوم استفاده میکنید مهم نیست مهم اینه که یه فایل CSS خارجی درست کنیم.
مثلا من در این آموزش از نرم افزار NotePad موجود در خوده ویندوز استفاده کردم، شماهم ازهر نرم افزاری که استفاده میکنید علی یارت بازش کنید و داخلش دستورات CSS زیر رو قرار بدید.
|
1 2 |
body { background-color:orange; } h2 { color:blue; } |
حالا کافیه فایل رو ذخیره کنید همین تموم شد رفت! فقط یادتون باشه با پسوند یا فرمت css. باید ذخیرش کنید.
در نرم افزار NotePad لطفا بروی منوی File کلیک نمایید سپس بروی گزینه Save as کلیک نمایید و در نهایت همانند تصویر زیر محل ذخیره فایل + نام فایل بهمراه پسوند (css.) را وارد نمایید و سپس برای ذخیره فایل مورد نظر بروی گزینه Save کلیک نمایید.
خب فایل CSS ما بصورت مجزا ایجاد شد، به همین راحتی شما میتوانید فایل های CSS تان را ایجاد نمایید، حال باید این فایل رو با استفاده از یک دستور در HTML به فایل HTML مان متصل نماییم.
Free-Learn
نحوه اتصال فایل CSS به HTML
خب دوستان ما فایل CSS خارجی مون رو هم ایجاد کردیم و الان یک فایل CSS بصورت مجزا یا خارجی داریم، حال برای اتصال فایل CSS که بصورت مجزا ایجاد شده است باید از دستور <link> در بخش هد <head> یک صفحه HTML استفاده نماییم.
|
1 2 3 |
<head> <link rel="stylesheet" href="style.css"> </head> |
توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.
آدرس فایل CSS هم باید با توجه به روش های آدرس دهی مشخص شود، مثلا من در مثال زیر از روش مطلق ( یعنی آدرس بصورت کامل از https تا آخرش ) استفاده کردم ولی اگه شما فایل CSS و HTML تون کنار هم هستش کافیه از روش نسبی استفاده کنید.
مثال شماره ۱ : استفاده از روش آدرس دهی مطلق
|
1 2 3 |
<head> <link rel="stylesheet" href="https://files.free-learn.ir/Tryitself/html/learn/files/mystyle.css"> </head> |
مثال شماره ۲ : استفاده از روش آدرس دهی نسبی
|
1 2 3 |
<head> <link rel="stylesheet" href="files/mystyle.css"> </head> |
خب دوستان محترم این بخش یعنی ( آموزش نحوه استفاده از CSS در HTML ) نیز به پایان رسید، لطفا در بخش های بعدی نیز با من همراه باشید.
