آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Style Sheet ها

دوره های مرتبط با این مقاله

Style Sheet خارجی (external)

Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ link به style sheet لینک شود. تگ link، درون بخش head قرار می گیرد.

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

Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است.

 
                hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");} 
        

فضاهای بین مقدار صفت و واحدها را خالی نگذارید!

Style Sheet داخلی (internal)

Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. Style های داخلی با استفاده از تگstyle در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:

نمونه یک:

نمونه یک

<style>
    hr {
        color: sienna;
    }

    p {
        margin-left: 20px;
    }

    body {
        background-image: url("images/back40.gif");
    }
</style>

امتحان کنید

Style های Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

> نمونه دو:

نمونه دو


   

This is a paragraph

امتحان کنید

Style Sheetهای چندگانه

اگر بعضی از صفت ها برای یک selector در style sheet های مختلف تعیین شده باشد، valueها از style sheet معینی به ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای صفت های زیر برای سلکتور h3 است:

                   h3
                    ‎{
                    color:red;
                    text-align:left;
                    font-size:8pt;
                    ‎}
                   

و یک style sheet داخلی دارای صفت های زیر برای سلکتور h3 است:

            
                        h3
                        ‎{
                        text-align:right;
                        font-size:20pt;
                        ‎}
                       

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، صفت های h3 اینگونه خواهد بود:

             
                        color:red;
                        text-align:right;
                        font-size:20pt;
                        

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

Style های چندگانه به یک استایل cascade می شوند .

Style ها را می توان به طریق زیر معین کرد:

  • درون یک عنصر HTML
  • درون بخش head صفحه HTML
  • در یک فایل CSS خارجی
نکته:

حتی style sheet های خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن:

  • هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟
  • معمولاً می توان گفت که همه style ها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

پبش فرض مرورگر

  • style sheet خارجی
  • style sheet داخلی (در بخش head)
  • استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد.

نکته:

اگر لینک به style sheet خارجی بعد از style sheet داخلی درheadHTML داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند

  • 6632
  •    2150
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .