روشهای استفاده css در تگ های html

وردپرسی | طراحی سایت با وردپرس

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

روشهای استفاده css در تگ های html

  • 184 بازدید
  • ۲۸ دی, ۱۳۹۲
بطور کل سی اس اس را می توان به دو گونه در تگهای html استفاده نمود، روش داخلی و خارجی. در خارجی ستایلها در یک فایل جدا نوشته می شوند و در روش داخلی ، دستورها را داخل همان فایل html قرار می دهیم. استفاده داخلی خود دو روش دارد.  در ادامه به آموزش هر دوی این روش ها می پردازیم .
adding-css-to-html-with-link-embed-inline-and-import
روش اول

ویژگی یا ویژگیهای سی اس اس را دورن یک جفت کوتیشن داخل تگ و جلوی ویژگی style بنویسید

 

فرمول :

<نام تگ   style=" مقدار :ویژگی سی اس اس ;مقدار : ویژگی سی اس اس ;...">

 

مثال ۱:

متنی که با پاراگراف p  ایجاد شده به رنگ قرمز نشان دهد

<p style="text-color:red"> this is a test </p>

 

مثال ۲:

متنی که با پاراگراف p ایجاد شده به رنگ قرمز و اندازه قلم ۲۴ نشان دهد

<p style="text-color:red; font-size:24 "> this is a test </p>

 

به هر تعداد دلخواهی می توانید ویژگیهای سی اس اس را درون تگ مقدار دهید

روش دوم

همانطور که در روش اول مشاهده کردید نوشتن ویژگیهای سی اس اس درون تگ ها باعث طولانی شدن و ناخوانا شدن تگ می شود

لذا بهتر است از تگ style استفاده نمائید

می توانید این تگ را دورن تگ head مقدار دهید یا درون بدنه body بنویسید

 

روش استفاده :

<head>

         <style  type="text/css">
                      نام تگ {

                                   مقدار : ویژگی سی اس اس ;

                                    مقدار : ویژگی سی اس اس ;

                                   مقدار : ویژگی سی اس اس ;

                                   مقدار : ویژگی سی اس اس ;

                                   ....

                                    }

       </style>

</head>

 

 دورن تگ style به هر تعداد دلخواه می توانید برای تگ های مختلف ویژگی سی اس اس تعریف کنید

مثال ۱:

برای متن هایی که با تگ p ایجاد می شوند رنگ قرمز و اندازه ۲۴ و برای متن هایی که با تگ h1 ایجاد می شوند رنگ زمینه ابی و حالت چشمک زن که البته در فایر فاکس قابل مشاهده است تعریف کنید

<head>
   <style  type="text/css">
                   p {
                         color:red;
                         font-size:24;}
                  h1{
                         background-color:blue;
                         text-decoration:blink;
                      }
</style>
</head>
<body>
          <p> test1 </p>
          <h1> test2 </h1>
</body>

 

ادامه مطلب: آموزش طراحی سایت




ارسال نظر