CSS در HTML

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

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

صفت Style  به طور کلی به شکل زیر درکدهای HTML نوشته می شود . 

 

style="property:value"

 این تگ را  در بین تگ Body  تایپ کنید .  شما می توانید برای هر تگ از Style  استفاده کنید . فرض کنید می خواهید تگ های مربوط به هدینگ و بادی دارای یکسری ویژگیهای خاص باشد . کافیست تگ Style را در بین تگ Head  همانند تصویر زیر قرار داده و دستورات Css را تایپ کنید .

 

 

<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>
</head>

 

شکل کلی کد بالا به این صورت باید تایپ شود .

 

 

<!DOCTYPE html>
<html>
<head>
          <style>
                   body {background-color:lightgray}
                   h1   {color:blue}
                   p    {color:green}
          </style>
</head>
<body>
       <h1>This is a heading</h1>
       <p>This is a paragraph.</p>
</body>
</html>

 شما می توانید برای یک تگ ویژگیهای زیادی تایپ کنید . به دستورات زیر دقت کنید . مثلا تگ p  چند ویژگی را در زیر مجموعه خود قرار داده است

 

<!DOCTYPE html>
<html>
<head>
<style>
           h1 {
                 color:blue;
                 font-family:verdana;
                 font-size:300%;
                }
           p  {
               color:red;
               font-family:courier;
               font-size:160%;
              }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:03
مجموعه های بیشتر: « Block در HTML کامنت در HTML »

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا