استفاده از CSS در برنامه هاي وب

ايجاد خروجي مناسب و با فرمت مطلوب ، از جمله اهداف مهم در تمامي برنامه هاي کامپيوتري است. برنامه هاي وب نيز از ايـن قاعده مستثني نبوده و طراحان و پياده کنندگان اين نوع از برنامه ها ، با بهره گيري از امکانات و تکنولوژي هاي متفاوت سعي در ارائه خروجي مناسب و با فرمت قابل قبول براي مخاطبان خود مي نمايند. خروجي يک برنامه وب ، در سطح سرويس گيرندگان ارائه مي گردد ، بديهي است بمنظور فرمت مناسب خروجي برنامه هاي وب ، مي بايست بر تکنولوژي هائي متمرکز گرديد که امکان بکارگيري آنان در سطح سرويس گيرنده و از طريق مرورگر کاربران ، ميسر مي باشد . مسئوليت ميزبان نمودن بخش رابط کاربر برنامه هاي وب برعهده مرورگر بوده و لازم است تمامي تلاش هاي انجام شده در اين خصوص با تاکيد بر اهميت و جايگاه مرورگر ها ، سازماندهي و مديريت گردد . ASP.NET ( پلات فرم دات نت براي ايجاد برنامه هاي وب ) ، از دو روش عمده در ارتباط با ايجاد فرمت مناسب خروجي ( Formatting) براي برنامه هاي وب ، استفاده مي نمايد :
• استفاده از CSS . از تکنولوژي CSS)Cascading style sheet) ، بمنظور کنترل شکل ظاهري عناصر موجود بر روي يک فرم وب استفاده مي گردد . از امکانات CSS ، مي توان در جهت تنظيم رنگ ، اندازه ، فونت و رفتار عناصر HTML موجود بر روي يک صفحه وب استفاده نمود .
• استفاده از XSLT . از تکنولوژي XSLT)Extensible Stylesheet Language Transformation ) ، بمنظور تبديل اطلاعات يک فايل XML به خروجي HTML و استقرار اطلاعات فوق بر روي يک فرم وب ، استفاده مي گردد . XSLT ، داده مورد نياز را از فايل XML دريافت و پس از تبديل آنان به عناصر HTML ، سبک هاي ( Styles ) مشخص شده را در رابطه با هر يک از عناصر بکار مي گيرد .
در اين مقاله قصد داريم به بررسي نحوه استفاده از CSS ، بمنظور تعريف فرمت خروجي برنامه هاي وب پرداخته و در مقاله اي جداگانه با نحوه استفاده از XSLT ، آشنا شويم .
CSS ، مسئوليت جمع آوري و سازماندهي تمامي اطلاعات مرتبط با فرمت بکارگرفته شده در ارتباط با عناصر HTML موجود بر روي يک فرم وب را برعهده دارد . با توجه به ذخيره سازي اطلاعات فوق در يک مکان ، مديريت و اعمال سياست هاي جديد در رابطه با شکل ظاهري يک برنامه وب ، بسادگي انجام خواهد شد . ويژوال استوديو دات نت ، ابزارهاي لازم بمنظور ايجاد و ويرايش Style را ارائه نموده است. در زمان ايجاد يک برنامه وب با استفاده از ويژوال استوديو دات نت ، يک Style sheet پيش فرض نيز ايجاد مي گردد .( بعنوان بخشي از يک پروژه جديد برنامه وب ، ) . لازم است به اين نکته اشاره گردد که فقط براي پروژه هاي ويژوال بيسک دات نت ، بصورت اتوماتيک يک Style sheet پيش فرض ، ايجاد مي گردد. براي پروژه هاي ويژوال سي شارپ ، مي بايست يک style sheet ، ايجاد نمود.
بمنظور اعمال فرمت دلخواه در رابطه با خروجي يک برنامه وب ، مي توان در سه سطح متفاوت اين کار راا انجام داد :
• Global . سبک هاي تعريف شده دريک فايل جداگانه ذخيره و تمامي صفحات مي توانند از آن استفاده نمايند .
• Page . سبک هاي موردنظر در بخش Head يک صفحه تعريف و تمامي عناصر موجود بر روي صفحه قادر به استفاده از آنان خواهند بود.
• Inline . سبک هاي مورد نظربعنوان خصلت يک عنصر HTML تعريف و صرفا" همان عنصر قادربه استفاده از آنان خواهد بود .
اولويت هر يک از سطوح فوق ، مشابه تعريف يک متغير و محدوده ( Scoping ) استفاده از آن مي باشد. سبک هاي تعريف شده Inline داراي اولويت بيشتر نسبت به Page بوده و سبک هاي Page داراي اولويت بيشتري نسبت به Global مي باشند . مثلا" در صورتيکه با استفاده از هر يک از روش هاي فوق ، سبک خاصي بمنظورنحوه نمايش يک پاراگراف ، تعريف شده باشد ، سبک تعريف شده inline داراي اولويت بيشتري خواهد بود.با توجه به اولويت مجموعه قوانين تعريف شده مربوط به سبک نمايش ، از Style Sheet ها ، بعنوان Cascading نيز ياد مي گردد . کد زير ، نحوه استفاده از سه روش فوق را بمنظور تعريف Style ، نشان مي دهد .

Style types definition

<HTML>
       <HEAD>
                    <title> WebForm1 </title>
                     
                     <LINK REL="StyleSheet" Type="text/css" HREF="Test.css">
                     
                      <Style>
                          p {
                                font -family : 'Times New Romans' , Thoma , font-size:medium ;
                               }
                      </Style>
         </HEAD>
                       <Body>
                            <P> The Alignment is from the style sheet . </p>
                            <P> The font is from the style in the page's head element . </P>
                             
                              <P style="FONT-SIZE : large ; FONT - STYLE : italic " > the italic is from the inline style . </P>
                      </Body>
</HTML>

Test.css file

P
     {
        font-size : small ;
        text - align : center ;
     }

}
در مثال فوق ، نحوه نسبت دهي خصلت Style به يک عنصر و در سه سطح متفاوت نشان داده شده است . براي خصلت font-size ، در سه سطح متفاوت ، style تعريف شده است .در موارديکه خصلت فوق ، بصورت Inline بهمراه يک عنصر HTML ، استفاده شده است ، تمامي تعاريف موجود ( در سطح Page و يا بصورت Reference ) ناديده گرفته مي شود و اولويت با سبک تعريف شده بصورت Inline ، خواهد بود . تعريف انجام شده در رابطه با اندازه فونت در فايل Test.css ، عملا" در صفحه فوق ، استفاده نخواهد شد ، چراکه در صفحه وب نيز براي خصلت فوق و در سطح Page ، سبک لازم تعريف و داراي اولويت بيشتري نسبت به سبک تعريف شده در فايل Test.css ، مي باشد . خصلت هاي text-align , font-family و font-style صرفا" يک مرتبه تعريف شده اند، بنابراين هر يک از آنان داراي تاثير خاص خود مي باشند .
تعريف و ذخيره سازي Style در يک فايل Style sheet ( فايلي با انشعاب css ) داراي مزاياي عمده اي نسبت به تعريف و استفاده از آنان بصورت محلي در هر يک از فرم هاي وب و يا استفاده از آنان بصورت Inline بهمراه عناصر HTML ، است :
• پشتيباني و نگهداري مجموعه قوانين تعريف شده ، صرفا" از طريق يک محل انجام خواهد شد . بنابراين ، تغييرات مورد نياز صرفا" از يک نقطه اعمال و تمامي برنامه متاثر از آن مي گردد.
• امکان استفاده از چندين style جداگانه که هريک مجموعه قوانين خاصي را تعريف مي نمايند ، فراهم مي گردد . در چنين مواردي ، مي توان با توجه به شرايط و اهداف برنامه از يکي از سبک هاي تعريف شده بصورت پويا ، استفاده نمود .مثلا" مي توان با استفاده از سبک هاي تعريف شده ، فرمت خروجي مورد نظر را در ارتباط با يک دستگاه خاص ( نمايشگر، چاپگر) ، ايجاد نمود. بعنوان نمونه ، يک برنامه مي تواند سه نوع سبک شامل : استاندارد ، Enlarged type و Printer friendly را تعريف نمايد که يکي از آنان با توجه به خواسته کاربر ، انتخاب و بکار گرفته شود.

استفاده از Style Sheet در فرم هاي وب

در زمان ايجاد يک برنامه وب با استفاده از ويژوال استوديو دات نت ، يک Style sheet جديد با نام Style.css بصورت اتوماتيک نيز ايجاد مي گردد. ويژوال استوديو ، در اغلب موارد بصورت اتوماتيک از Style ايجاد شده در هر يک از صفحات وب و يا فرم هاي وب ، استفاده نمي نمايد ( فراخواني فايل فوق، بصورت اتوماتيک انجام نمي شود) . بمنظور استفاده از Style sheet ايجاد شده ، مي بايست از يک عنصر لينک در بخش head مربوط به page استفاده گردد :

Using Global style

<HEAD>
<title>WebForm1</title>
...
<LINK REL="StyleSheet" TYPE = "text/css" HREF="Styles.css">
</HEAD>

تغيير Style

بمنظور تغيير Style تعريف شده و يا ايجاد Style جديد ، مي توان از ابزار Style Builder در ويژوال استوديو دات نت ، استفاده نمود . در اين رابطه مراحل زير را دنبال مي نمائيم :
• فعال نمودن Style Sheet در ويژوال استوديو دات نت . پس از فعال نمودن Style sheet ، ويژوال استوديو دات نت ، تعاريف مرتبط با Style را در پنجره Document نمايش و يک Outline از Style sheet را در پنجره Tool ، نمايش خواهد داد.
Style مورد نظر بمنظور اعمال تغييرات را از طريق پنجره Tool ، انتخاب مي نمائيم . در ادامه ، ويژوال استوديو تعاريف مرتبط با Style را در پنجره Document نشان مي دهد
• بر روي Style definition ، کليک راست نموده (يا کليک راست بر روي Style از طريق پنجره Tool ) و از طريق منوي مربوطه گزينه Build Style را انتخاب مي نمائيم .ويژوال استوديو دات نت ، ويزارد Style Builder را فعال مي نمايد .

• با استفاده از Style Builder مي توان فرمت دلخواه را در ارتباط با يک Style تعريف نمود .

افزودن Style

براي افزودن سبک مورد نظر به يک Style خاص ، مي توان از نام عنصر استفاده نمود . در اين رابطه ،امکان استفاده از اسامي کلاس ها و يا ID مربوط به عناصر نيز وجود دارد .
• فعال نمودن Style Sheet ، کليک راست بر روي پنجره Style sheet و يا Tool و انتخاب Add Rule از طريق منوي pop up . ويژوال استوديو دات نت در ادامه ويزارد Add Style Rule را فعال مي نمايد.
• انتخاب نوع Style موردنظر که قصد ايجاد آن وجود دارد . در اين رابطه مي توان اقدام به ايجاد Style در رابطه با عناصر HTML ، کلاس ها و يا عناصري با ID خاص ، نمود. نام آيتم مورد نظر را تايپ نموده و در ادامه با انتخاب گزينه "<" ( افزودن )، آيتم انتخابي به مجموعه قوانين ، اضافه گردد .
• مراحل فوق ، براي هر يک از آيتم هائي که مي خواهيم style در رابطه با آنان بکارگرفته شود ، تکرار مي گردد.

استفاده از Style بهمراه کلاس ها

با استفاده از کلاس هاي Style ، مي توان فرمت يکساني را در رابطه با عناصر متفاوت HTML موجود بر روي يک فرم وب ، بکارگرفت. زمانيکه يک Style در ارتباط با يک کلاس ايجاد مي گردد، ويژوال استوديو دات نت ، با استفاده از مشخصه classname . ، يک تعريف Style را به Style sheet اضافه مي نمايد.

style class

.emphasis
   {
      font-style :italic ;
    }

Style Class فوق، مسئوليت ايجاد فرمت مناسب ( ايتاليک ) را براي تمامي عناصري که از اين کلاس استفاده مي نمايند، برعهده دارد. براي استفاده از Style فوق بهمراه عناصر HTML از خصلت class استفاده ميگردد. بمنظور استفاده از style بهمراه کنترل هاي سرويس دهنده ، از خصلت CssClass استفاده مي گردد .

Style class

<P> This paragraph is test <Span Class="emphasis"> some text</span></p>
<asp:TextBox ID="Text1" Runat="Server" CssClass="emphasis" >some text </asp:TextBox>

ايجاد Style براي عناصر خاص

با استفاده از ID مربوط به عناصر،مي توان Style مورد نظر در ارتباط با عناصر خاص موجود بر روي يک فرم وب را تعريف نمود. ID مربوط به عناصر ، مي بايست براي هر يک از عناصر موجود بر روي صفحه ، منحصربفرد مي باشد. فرمت مشخص شده ، صرفا" در رابطه با يک عنصر بر روي هر صفحه بکارگرفته مي شود . زمانيکه يک Style rule براي يک عنصر با ID مشخص شده ،ايجاد مي گردد ، ويژوال استوديو دات نت ، يک تعريف Style را با استفاده از شناسه elementID # ايجاد و آن را به Style sheet ،اضافه مي نمايد.

Style by element ID

#Inserted
{
text-decoration : underline ;
}
#deleted
{
text-decoration : line-through ;
}

Style هاي تعريف شده در ويژوال استوديو ، اغلب بصورت صحيح در بخش form designer نشان داده نمي شوند . در صورتيکه خروجي مورد نظر در ارتباط با يک فرمت خاص مشاهده نمي گردد، مي توان عمليات زير را دنبال نمود:
• اطميان از ذخيره سازي صحيح Style sheet تعريف شده
• فرم وب را در حالت HTML view و Design view مشاهده و بين آنان سوئيچ نمائيد .
• برروي فرم وب کليک سمت راست نموده و گزينه View In Browser را بمنظور نمايش فرم وب در مرورگر ، انتخاب نمائيد.

ايجاد Style تودرتو

در صورتيکه به تعاريف Style در Style sheet پيش فرض ، ( فايل Styles.css ) نگاهي داشته باشيم ، متوجه خواهيم شد که برخي تعاريف style ، چندين نام عنصر را شامل مي شوند . تعاريف فوق ، فرمت عناصر تودرتو را مشخص مي نمايد. Style زير ، نوع هاي متفاوتي از Bullet را تعريف مي نمايد( nested) .

Nested Style

UL LI {
       list-style-type : square ;
      }
UL LI LI {
        list-style-type : disc ;
       }
UL LI LI {
       list-style-type : circle ;
      }

بمنظور ايجاد Style هاي تودرتو ، مي توان با استفاده از جعبه محاوره اي Add Style Rule ، چندين آيتم را به ساختار سلسله مراتبي Style rule اضافه نمود.

تغيير Style Sheet در زمان اجراء

همانگونه که قبلا" اشاره گرديد ، مي توان چندين Style sheet را تعريف تا امکان استفاده از آنان بصورت پويا و با توجه به شرايط موجود در برنامه در اخيتار کاربر قرارداده شود. ( مشاهده فرم وب ، نسخه چاپي فرم وب ، ارائه نسخه بزرگتر فرم وب و ... ) . بمنظور سوئيچ نمودن اتوماتيک بين Style Sheet ها ، مي توان از خصلت media استفاده نمود. خصلت فوق ، Style sheet مورد نظر را در ارتباط با چاپ و يا نمايش بر روي نمايشگر ، مشخص مي نمايد. کد زير ، نحوه استفاده از دو style را بمنظور مشاهده فرم وب بر روي نمايشگر و يا چاپ آن، نشان مي دهد :

Two style sheets for one web form

بمنظور سوئيچ نمودن بين Style sheet در زمان اجراء ، يک اسکريپت سمت سرويس گيرنده را نوشته تا تغيير لازم در عنصر href مربوط به لينک style sheet را ايجاد نمايد . کد زير ، يک فرم وب را ايجاد نموده که بين style sheet هاي Style1.css و Style2.css ، سوئيچ مي نمايد ( زمانيکه کاربر بر روي لينک موجود کليک مي نمايد ) .

Changing style sheets at run time

<HTML>
<HEAD id=myhead>
<title> ChangeSheets </title>
<LINK ID="ScreenStyle" REL="stylesheet" TYPE="text/css" HREF="Style1.css">
<Script language="vbscript">
    Sub SwitchSheets( )
         if document.all("screenstyle").GetAttribute("HREF") = "Style1.css" then
                  document.all("ScreenStyle").SetAttribute "HREF" , "Style2.css" , 0
         else
                  document.all("ScreenStyle").SetAttribute "HREF" , "Style1.css" , 0
   End Sub
</Script>
</HEAD>
     <body>
           <form id="form1" method="post" runat="server">
                 <h2> Sample Styles </h2>
                  <p> Sample Paragraph </p>
                  <p><a onclick="switchsheets" href="#"> Click here
                  </a> to switch between sheets. </p>
            </form>
   </body>
</HTML>