آموزش نحوه استفاده از دستورات css در html

08:20:00 PM - 1399/06/22

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 2810

پاسخ دهنده : fateme 05:13:00 PM - ۱۳۹۹/۰۶/۲۳

آموزش نحوه استفاده از دستورات css در html

برای استفاده از css در صفحات وب سه روش وجود داره

Inline : در این روش از خاصیت style در بین تگ های html استفاده میشه.
Internal : در این روش از تگ <style> در صفحات html استفاده میشه.
External : در این روش از یک فایل با پسوند css استفاده میشه و این فایل توسط تگ <link> به صفحات html وصل میشه.

استایل دهی به روش Inline در css

اولین روشی که شما میتونید به تگهای html خودتون رنگ و قالب زیبایی رو بدید روش Inline هست. تگهای html دارای یک ویژگی یا Attribute به نام style هستن که شما میتونید با استفاده از این ویژگی به اون تگ استایل بدید.

نکته : استایل هایی که در این روش برای تگ ها تعریف میشه فقط برای همان تگ اعمال میشه.

دستورات زیر نحوه اعمال استایل به روش Inline رو نمایش میده :

<h1 style="color:blue; font-size:15px; font-weight:bold;">my car is white</h1>

<p style="color:red; font-size:15px; font-weight:bold;">A red car.</p>

در دستورات بالا برای هر تگ یک style تعریف شده و استایل های تعریف شده فقط برای همان تگ می باشد.

css in html use

استایل دهی به روش Internal

در روش استایل دهی به روش Internal برای تعریف استایل ها از تگ <style> در صفحات html استفاده می شود. معمولا تگ <style> در بخش <head> سند html تعریف می شود. دقت کنید که در این روش برای استایل دهی به المان های سند باید از selector ها استفاده شود.

به عنوان مثال فرض کنید می خواهیم به همه تگ های div موجود در صفحه یک استایل واحد را بدهیم :

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {background-color: red;}
      </style>
   </head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

همانطور که می بینید در بخش <style> مشخص کردیم که div های موجود در این سند رنگ red داشته باشند. چند مثال دیگر در ادامه مشاهده می کنید:

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {background-color: powderblue;}
         h1   {color: blue;}
         p    {color: red;}
      </style>
   </head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

استایل دهی به روش External در css

در این روش یک فایل با پسوند css ایجاد می کنیم و همه استایل هایی را که می خواهیم بنویسیم به روشی که برای روش Internal نوشتیم در آن تعریف می کنیم. سپس این فایل را توسط تگ <link> به سند html الصاق می کنیم.

فرض کنید سند html زیر را داریم که در بالای آن یک فایل css لینک شده است

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

خب همانطور که مشخص است یک فایل به نام styles.css باید وجود داشته باشد. این فایل هم در ادامه تعریف شده است

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

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

اما اگر از روش Inline یا Internal استفاده شود هر بار که سند html شما بارگزاری می شود کلیه دستورات و استایل ها هم مجدد باید بارگزاری شود. برای دریافت مثالهای بیشتر این لینک رو مطالعه کنید.

ویرایش شده در جمعه ۳ بهمن ۱۳۹۹ ساعت ۲۲:۰۲:۵۵