سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه استفاده از CSS در HTML با من همراه باشید.
سی اس اس یا CSS که مخفف Cascading Style Sheets می باشد، یکی دیگر از هسته های اصلی در طراحی وب یا یک فناوری بسیار جذاب می باشد که ما از طریق اون میتونیم به صفحات وبمون استایل یا شکل و شمایل جذاب و متفاوتی را بدهیم.
ما با استفاده از CSS میتونیم نحوه نمایش یا شکل نمایش عناصر (تگ ها) را در یک صفحه ی وب مشخص نماییم، بطور کلی میشه گفت فایل CSS هر سایتی یعنی قلب اون سایت که به تمامی بخشهای اون سایت از نظر استایل داره نفس برای زنده بودن میده و اگر کوچکترین مشکلی برای این فایل به وجود بیاید کل استایل و شکل شمایل اون سایت بهم خواهد ریخت.
بطور کلی ما از ۳ روش میتونیم از CSS در HTML استفاده نماییم :
اینلاین یا درون خطی یا Inline یکی از روش های اضافه کردن CSS به عناصر موجود در HTML می باشد، که در این روش ما باید از صفت Style درون هر یک از عناصر HTML که میخواهیم براش استایل تعریف نماییم، استفاده نماییم.
آموزش کار با صفت Style بصورت جداگانه در بخش های قبلی از آموزش HTML ارئه شده است که در صورت تمایل میتوانید آن بخش را نیز مشاهده نمایید.
لطفا به مثال زیر برای نحوه استفاده از سی اس اس بصورت خطی توجه نمایید :
<body>
<p style="color:green;">Salam Khobi?</p>
<p style="color:blue;">Man Sadegh</p>
<p style="color:red;">Hastam</p>
</body>
امتحان کنید
همونطور که از اسم این روش مشخصه ما میتونیم دستورات CSS رو درون یک فایل HTML قرار دهیم که بهش میگیم اینترنال یا Internal ، شکل کلی برای استفاده از این روش بصورت زیر می باشد.
دوستان محترم نکته ای که در این روش باید بهش توجه کرد این است که با استفاده از این روش فقط میتوان برای یک صفحه استایل نوشت.
در این روش ما باید از تگ <style> در بخش هد <head> یک صفحه ی HTML استفاده نماییم، لطفا به مثال زیر توجه نمایید.
<head>
<style>
body {
background-color: #2196F3;
}
</style>
</head>
امتحان کنید
اکسترنال یا خارجی یا External یکی دیگر از روش های استفاده از CSS در HTML می باشد، این روش یکی از بهینه ترین روشهای استفاده از دستورات CSS در HTML می باشد.
امروزه تقریبا میشه گفت اکثر وبسایت های موجود در اینترنت دارای یک فایل CSS از نوع اکسترنال می باشند، این یعنی تمامی دستورات CSS یک سایت درون یک فایل بصورت مجزا نوشته می شود سپس به راحتی و با استفاده از یک خط دستور فایل CSS به فایل HTML متصل می شود.
برای داشتن وبسایتی سریعتر و بهینه تر، تا جایی که میتوانید سعی کنید از روش های درون خطی (Inline) و داخلی (Internal) استفاده نکنید.
پس همونطور که گفتم دستورات CSS ما باید در یک فایل مجزا نوشته شوند سپس به فایل HTML متصل شود، اصلا نگران نباشید چون در ادامه میخواهیم یاد بگیریم چگونه بدون خرج و هزینه یک فایل CSS ایجاد نماییم.
همونطور که میدانید نرم افزارهای بسیار زیاد و حرفه ای برای ایجاد فایل هایی همچون HTML,CSS و .. وجود دارد، ولی ما قرار نیست از این نرم افزارها استفاده نماییم بلکه میخواهیم از نرم افزار NotePad موجود در ویندوز استفاده نماییم.
پس لطفا نرم افزار NotePad را اجرا نمایید و سپس دستورات CSS زیر را در این نرم افزار وارد نمایید :
body { background-color:orange; }
h2 { color:blue; }
حال باید فایل مون رو ذخیره نماییم، لطفا از منوی نرم افزار بروی گزینه File کلیک نمایید سپس بروی گزینه Save as کلیک نمایید و در نهایت همانند تصویر زیر محل ذخیره فایل + نام فایل بهمراه پسوند (css.) را وارد نمایید و سپس برای ذخیره فایل مورد نظر بروی گزینه Save کلیک نمایید.
خب فایل CSS ما بصورت مجزا ایجاد شد، به همین راحتی شما میتوانید فایل های CSS تان را ایجاد نمایید، حال باید این فایل رو با استفاده از یک دستور در HTML به فایل HTML مان متصل نماییم.
خب دوستان ما فایل CSS خارجی مون رو هم ایجاد کردیم و الان یک فایل CSS بصورت مجزا یا خارجی داریم، حال برای اتصال فایل CSS که بصورت مجزا ایجاد شده است باید از دستور <link> در بخش هد <head> یک صفحه HTML استفاده نماییم.
<head>
<link rel="stylesheet" href="style.css">
</head>
توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.
<head>
<link rel="stylesheet" href="style.css">
</head>
امتحان کنید
حال لطفا بروی دکمه « امتحان کنید » کلیک نمایید تا خروجی را مشاهده نمایید، همانطور که مشاهده مینمایید فایل CSS ای که بصورت مجزا ایجاد کرده بودیم را با موفقیت به فایل HTML مون متصل کردیم.
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.
