آموزش نحوه استفاده از CSS در HTML

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

آموزش نحوه استفاده از CSS در HTML

Free-Learn

نحوه استفاده از CSS در HTML

سی اس اس یا CSS که مخفف Cascading Style Sheets می باشد، یکی دیگر از هسته های اصلی در طراحی وب یا یک فناوری بسیار جذاب می باشد که ما از طریق اون میتونیم به صفحات وبمون استایل یا شکل و شمایل جذاب و متفاوتی را بدهیم.

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

خب بنظره شما چگونه و چجوری شده که منوی اصلی سایت فری لرن در بالای وبسایت قرار دارد و یکسری لینک در سمت چپ صفحه  و دیگر موارد …

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

بطور کلی ما در HTML از ۳ روش میتونیم از CSS استفاده نماییم:

  1. استایل خطی یا Inline
  2. استایل داخلی یا Internal
  3. استایل خارجی یا External

Free-Learn

استایل خطی یا Inline Css در HTML

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

آموزش کار با صفت Style بصورت جداگانه در بخش های قبلی از آموزش HTML ارئه شده است که در صورت تمایل میتوانید آن بخش را نیز مشاهده نمایید.

لطفا به مثال زیر برای نحوه استفاده از سی اس اس بصورت خطی توجه نمایید :

امتحان کنید

Free-Learn

استایل داخلی یا Internal Css در HTML

همونطور که از اسم این روش مشخصه ما میتونیم دستورات CSS رو درون یک فایل HTML قرار دهیم که بهش میگیم اینترنال یا Internal ، شکل کلی برای استفاده از این روش بصورت زیر می باشد.

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

این روش ما باید از تگ <style> در بخش هد <head> یک صفحه ی HTML استفاده نماییم، لطفا به مثال زیر توجه نمایید.

امتحان کنید

Free-Learn

استایل خارجی یا External Css در HTML

اکسترنال یا خارجی یا External یکی دیگر از روش های استفاده از CSS در HTML می باشد، این روش یکی از بهینه ترین روشهای استفاده از دستورات CSS در HTML می باشد.

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

برای داشتن وبسایتی سریعتر و بهینه تر، تا جایی که میتوانید سعی کنید از روش های درون خطی (Inline) و داخلی (Internal) استفاده نکنید.

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

همونطور که میدانید نرم افزارهای بسیار زیاد و حرفه ای برای ایجاد فایل هایی همچون HTML,CSS و .. وجود دارد، ولی ما قرار نیست از این نرم افزارها استفاده نماییم بلکه میخواهیم از نرم افزار NotePad موجود در ویندوز استفاده نماییم.

پس لطفا نرم افزار NotePad را اجرا نمایید و سپس دستورات CSS زیر را در این نرم افزار وارد نمایید :

آموزش نحوه استفاده از CSS در HTML

حال باید فایل مون رو ذخیره نماییم، لطفا از منوی نرم افزار بروی گزینه File کلیک نمایید سپس بروی گزینه Save as کلیک نمایید و در نهایت همانند تصویر زیر محل ذخیره فایل + نام فایل بهمراه پسوند (css.) را وارد نمایید و سپس برای ذخیره فایل مورد نظر بروی گزینه Save کلیک نمایید.

آموزش نحوه استفاده از CSS در HTML
برای بزرگنمایی لطفا بروی تصویر کلیک نمایید

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

Free-Learn

فراخوانی CSS در HTML

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

توجه داشته باشید که در قسمت href باید آدرس محل فایل CSS را بصورت کامل و دقیق وارد نمایید، لطفا به مثال زیر توجه نمایید.

امتحان کنید

حال لطفا بروی دکمه « امتحان کنید » کلیک نمایید تا خروجی را مشاهده نمایید، همانطور که مشاهده مینمایید فایل CSS ای که بصورت مجزا ایجاد کرده بودیم را با موفقیت به فایل HTML مون متصل کردیم.

خب دوستان محترم این بخش یعنی ( آموزش نحوه استفاده از CSS در HTML ) نیز به پایان رسید, لطفا در بخش های بعدی نیز با من همراه باشید.

Free-Learn

  • خلاصه ی این بخش
  • بطور کلی از ۳ روش میتوان از CSS درون یک صفحه ی وب استفاده کرد، روش اول:درون خطی یا اینلاین – روش دوم: داخلی یا اینترنال – روش سوم: خارجی یا اکسترنال
  • بهترین و بهینه ترین روش استفاده از سی اس اس در یک صفحه ی وب، استفاده از روش خارجی یا External می باشد.
  • با استفاده از روش داخلی یا Internal فقط میتوان برای یک صفحه، استایل تعریف کرد.
  • برای استفاده از روش داخلی، باید دستورات CSS را در بین تگ Style و در درون تگ Head قرار داد.
  • پسوند یک فایل CSS بصورت دات سی اس اس یا (css.) می باشد.
  • برای فراخوانی و یا متصل کردن یک فایل CSS به یک فایل HTML باید از تگ link در درون تگ Head استفاده کرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید