مشاوره رایگان

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

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

جلسه سوم آموزش CSS : به کارگیری CSS در HTML - با مثال

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

1. اضافه کردن CSS با استفاده از تگ <style> :

اولین روشی که شما می توانید با استفاده از آن ، کدهای css خود را درون یک صفحه html قرار دهید استفاده از تگ <style> است که خود درون تگ <head> قرار دارد. در این حالت شما کدهای css خود را درون تگ style می نویسید. در مثال زیر نحوه استفاده از این روش را مشاهده می کنید:

<!DOCTYPE html>
<html>
   <head>   
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>      
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

حالا نتیجه را ببینید:

تگ style دارای دو اتریبیوت زیر می باشد:

type: که باید مقدار آن را text/css قرار دهیم.
media: که با استفاده از آن مشخص می کنیم استایل های درون تگ style برای چه نوع صفحه نمایشگری هستند.

در جدول زیر می توانید جزئیات بیشتر را مشاهده کنید:

2. روش درون خطی:

در این روش با استفاده از اتریبیوت style در تگ مورد نظر، دستورات CSS را درون آن می نویسیم. در این حالت دستورات CSS تنها به همان تگ اعمال می شوند. نحوه استفاده از این روش به صورت زیر است:

<element style = "...style rules....">

در ادامه مثالی از این روش را مشاهده می کنید:

<html>
   <head>
   </head>
   <body>
      <h1 style = "color:#36C;"> This is inline CSS </h1>
   </body>
</html>

حالا به نتیجه کد نگاه کنید:

3.بارگذاری فایل CSS خارجی با استفاده از تگ link

با استفاده از تگ <link> می توان یک فایل CSS خارجی را در سند HTML بارگذاری کرد. در این روش یک فایل استایل دهی خارجی با پسوند .css ساخته و تمامی دستورات CSS را که مد نظر داریم درون آن می نویسیم و در نهایت با استفاده از تگ <link> آن را در سند HTML بارگذاری می کنیم. در ادامه نحوه استفاده از این تگ را مشاهده می کنید:

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

تگ link دارای سه اتریبیوت کاربردی type ، href و media می باشد که جزئیات آن را می توانید در جدول زیر مشاهده کنید:

در ادامه برای نشان دادن نحوه استفاده از یک فایل css خارجی ، مثالی می آوریم. در اینجا ما یک فایل با نام mystyle.css ساخته و دستورات زیر را در آن قرار می دهیم:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

حالا برای بارگذاری فایل mystyle.css به صورت زیر عمل می کنیم:

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

4. بارگذاری فایل css خارجی با استفاده از دستور @import

در این روش نیز یک فایل CSS خارجی را در سایت بارگذاری می کنیم. این روش شبیه به روش قبلی است اما تفاوت هایی دارد زیرا دستور @import برای بارگذاری در محیط css استفاده می شود. نحوه استفاده از دستور @import به این صورت است که در تگ <style> که درون تگ <head> قرار دارد به صورت زیر عمل می کنیم:

<head>
	<style>
  		 @import "URL";
	</style>
</head>

در ادامه مثالی برای نشان دادن نحوه استفاده از این دستور قرار می دهیم:

<head>
	<style>
  		 @import "mystyle.css";
	</style>
</head>

اولویت ها در CSS

ما در مورد چهار روش استفاده از کدهای css درون صفحه html صحبت کردیم حالا در ادامه نکاتی در مورد اینکه کدام یک از روش های بالا از اولویت بیشتری برخوردارند ذکر می کنیم:

استایل های درون خطی بالاترین اولویت را دارند. بنابراین هر دستوری که در تگ <style>….</style> و یا در فایل css خارجی آمده باشد را لغو کرده و خود اجرا می شوند.
دستوراتی که در تگ <style>….</style> آمده اند دستورات موجود در فایل css خارجی را لغو کرده و خود اجرا می شوند.
دستورات موجود در فایل css خارجی کمترین اولویت را دارا می باشد و تنها در صورتی اجرا می شوند که دستورات مربوط به دو گزینه بالا قابل اجرا نباشند.

نحوه نوشتن کامنت در css

خیلی از اوقات نیاز است که در فایل css خود از کامنت استفاده کنید. برای اینکه یک متن را کامنت کنید خیلی ساده آن متن را بین دو علامت /* ....*/ قرار دهید. در css کامنت های تک خطی و چند خطی به یک صورت نوشته می شوند.

مثال:

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

نتیجه کد بالا به صورت زیر خواهد بود:

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز