sina salehifard 21 اردیبهشت 1393 8 6799 بازدید آموزش HTML
فیلم آموزش روش های استفاده از css (سی اس اس) در صفحات html

حتماً می دانید که برای سبک دهی به فایل های html در طراحی صفحات وب، از کدهای css استفاده می کنیم. آیا می دانید این دستورات css (سی اس اس)  را کجا باید بنویسید؟  برای ایجاد ارتباط بین فایل های css و html سه روش وجود دارد :

  1. Inline Style
  2. Internal Style Sheet
  3. External Style Sheet

در این فیلم آموزشی html، استفاده از این روشهای Css در اسناد و صفحات html را برای شما با مثال های کاربردی شرح خواهیم داد.

برای آشنایی با یک روش دیگر که با دستور import در CSS انجام می شود، می توانید فیلم آموزشی آن را از این قسمت مشاهده کنید.

فیلم آموزش روش های استفاده از css (سی اس اس) در صفحات html

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزش روش های استفاده از css (سی اس اس) در صفحات html

css

ما به وسیله کدهای html صفحات وب را نشانه گذاری می کنیم و با کدنویسی css به قسمت هایی که نشانه گذار ی کرده ایم، استایل می دهیم. در واقع css یک زبان کدنویسی برای استایل دهی و سبک دهی به محتوای صفحات وب است.
روش های اعمال کدهای سی اس اس به صفحات و کدهای  اچ تی ام ال :

روش external

این روش رایج ترین راه برای اعمال کدهای css به html است. در این روش بصورت خارجی فایل را به صفحه html لینک می کنیم.
ابتدا یک فایل با پسوند .css ایجاد می کنیم و استایل های خود را درون آن فایل قرار می دهیم، سپس آن را با تگ link، به کدهای html لینک می کنیم  :

<link rel="stylesheet" href="adressfile.css" type="text/css" />

به وسیله صفت href می توانیم آدرس فایل css ای را که ساخته ایم به فایل html دهیم. توجه کنید که تگ link حتما باید در بین تگ head قرار گیرد.

روش embed

با این روش دیگر نیازی نیست کد های css خود را در یک فایل جدید قرار دهید بلکه باید آنها را در بین تگ style قرار دهید.

<style>
کد های سی اس اس شما
</style>

تگ style را می توان داخل تگ head یا body قرار داد.
مثال :

<style>
Form {
background:#eee;
}
Form input {
background:#333;
}
</style>
روش inline

می توان با دادن صفت style به تمام تگ ها، به آن تگ استایل داد.

<p style="کد سی اس اس خود برای این تگ">text</p>

توجه کنید در این روش  برای هر تگی که صفت style را اختصاص دهیم، فقط استایل برای آن تگ اعمال می شود و به تگ های دیگر کاری ندارد .
مثال :

<<p style="color:red; font-weight:bold;">تست</p>

دسترسی سریع :

نظرات کاربران (8)



  1. Sasan

    یعنی نمیشه که الان فیلم های تمرین هارو خریداری کنم؟؟ اگه امکانش باشه مایل به خرداریشونم
    در آینده ایی که میگین همین تمرین ها و آموزش ها قرار میگیرن یا جدیدن؟

    • گروه آموزش طراحی سایت

      بله، فرمت جدید و تکمیل شده ی همین تمرینات نیز خواهد بود.

  2. sasan

    شرمنده شما دیگه فیلم های آموزش HTML & CSS واسه فروش تو سایت ندارید؟ فیلم های تمرین و واسه دانلود قرار ندادید

    • گروه آموزش طراحی سایت

      فعلا خیر اما در آینده نزدیک فیلمهای خاص تر رو برای خرید قرار میدهیم.

  3. Sasan

    خاستم بدونم ترتیب آموزش های HTML و CSS چطوریه؟ اول باید آموزش های HTML و ببینیم بعد CSS یا برعکس؟ و یا اینکه همزمان باید پیش برن؟

    • گروه آموزش طراحی سایت

      توصیه می کنیم اول مباحث html رو تکمیل کنید و بعد از اون به سراغ css بروید.