فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

css خارجی چیست:

css خارجی چیست:

یکی از رایج ترین روش ها در پروژه های واقعی استفاده از روش External برای افزودن کد های CSS به صفحه است. در این روش شما میتوانید ظاهر تمام صفحات وب سایت را با ویرایش در یک فایل، تغییر دهید. در روش External کد ها مستقیما داخل صفحات وبسایت قرار نمیگیر. در عوض ارجاعی از یک فایل خارجی که کد های CSS در آن نوشته شده است در صفحه قرار میگیرد.با داشتن یک فایل css خارجی، می توانید با یک تغییر کوچک، ظاهر یک وب سایت را کامل تغییر دهید.

ارجاعات در یک صفحه توسط عنصر <link> که در قسمت <head> قرار دارد، در صفحه قرار میگیرند.

مثال:

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

فایل خارجی (External) که کد های CSS در آن قرار میگیرد میتواند توسط هر ویرایشگر متنی نوشته شده و با پسوند CSS ذخیره شوند.

این فایل نباید حاوی هیچ تگی از زبان HTML باشد.

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

                         } body 
  ;background-color: lightblue
                              {

                           } h1 
                 ;color: navy
           ;margin-left: 20px
                             {

CSS داخلی:

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

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

                     <html>
                     <head>
                    <style>
                     } 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>

ضافه کردن کد های CSS در روش Inline

روش Inline ممکن است موقعی استفاده شود که یک عنصر نیاز داشته باشد استایل منحصر به فردی داشته باشد.در این روش صفت style به عنصر مربوطه اضافه میشود. صفت style اضافه شده میتواند شامل هر صفتی از زبان CSS باشد.

نمونه مثال زیر نشان میدهد که در روش Inline چطور میتوان رنگ و صفت margin-left عنصر <h1> را تغییر داد :

                                                          <html>
                                                          <body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
                  <p style="color:red;">This is a paragraph.</p>
                                                         <html/>
                                                         <body/>

نکته : در روش Inline به این دلیل که محتوا و نحوه ی نمایش عناصر با هم ترکیب میشوند، مزایای استفاده از زبان CSS را که یکی از آنها جداسازی محتوا از نحوه ی نمایش است به چالش میکشد. از این روش در موارد ضروری استفاده کنید.

اگر چندین صفت از زبان CSS برای یک عنصر در روش های مختلف (External ، Internal ، Inline) تعریف شده باشد، آخرین مقداری که خوانده میشود روی عنصر مربوطه اعمال میشود.

فرض کنید که در روش External ، برای عنصر <h1> استایل زیر تعریف شده است :

           }  h1
 ;color: navy
               {

و استایل تعریف شده در روش Internal هم ، برای عنصر <h1> به صورت زیر است :

         }  h1
 ;color: orange
             {

اگر استایل تعریف شده در روش Internal بعد از ارجاعی باشد که استایل در روش External را مشخص میکند ، عنصر <h1> به رنگ orange خواهد بود :

                                                    <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
                                                   <style>
                                                      } h1
                                           ;color: orange
                                                         {
                                                  </style>
                                                   </head>

با این حال ، اگر استایل تعریف شده به روش Internal قبل از ارجاع روش External باشد، عنصر <h1> به رنگ orange خواهد بود :

                                                    <head>
                                                   <style>
                                                      } h1 
                                           ;color: orange
                                                         {  
                                                  </style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
                                                   </head>
دیدگاه‌های نوشته