1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش HTML بخش شانزدهم :: روشهای مختلف استفاده از style sheet

شروع موضوع توسط hector2141 ‏10/9/12 در انجمن Html

  1. hector2141

    کاربر ارشد

    تاریخ عضویت:
    ‏6/9/12
    ارسال ها:
    14,318
    تشکر شده:
    2,702
    امتیاز دستاورد:
    0
    حرفه:
    daneshjo
    [​IMG]​
    در نسخه جديد(4/0) HTML امکان جداسازي کامل فرمت دهي از ساختار صفحات HTML فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه HTML منتقل شوند. بخشي از صقحات HTML که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات HTML معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات HTML آشنا خواهيد شد.


    چگونگي استفاده از استايل شيتها:

    مرورگرها از روي استيل هاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه HTML ميپردازند. تعريف و استفاده از استايل ها در صفحات HTML به سه روش مختلف ممکن ميباشد:

    1)استايل شيتهاي خارجي (external style sheet) :

    در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه HTMLاعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات HTML قرار ميگيرد، معرفي ميشوند.
    در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>    ​
    2)استايل شيتهاي داخلي (Internal Style Sheet) :

    کاربرد اين روش در حالتهائي است که صفحه HTML     نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه HTML گذاشته ميشود.مثال:
    <head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
    </head>    ​
    3)استايل شيتهاي درجا (Inline Styles) :

    کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:
    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>    ​
    تگ هاي استايل

    Start Tag Purpose کاربرد

    <style> Defines a style in a document تعريف استيلها درون يک سند

    <link> Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي

    <font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

    <basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

    <center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.

    تغييرات در نسخه جديد اچ تی ام ال (4/0) :

    هدف اوليه از طراحي زبان HTML ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان HTML و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات HTML ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 HTML توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده HTML اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد HTML زير که بر اساس نسخه 3/2 HTML ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:
    <p align="center"><font color="red">This is a paragraph</font></p>
    ​
     
    hector2141, ‏10/9/12
    #1