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

سه‌شنبه، 29 بهمن 1387

تخمین زمان مطالعه:

ايجاد خروجی مناسب و با فرمت مطلوب ، از جمله اهداف مهم در تمامی برنامه های کامپيوتری است. برنامه های وب نيز از ايـن قاعده مستثنی نبوده و طراحان و پياده کنندگان اين نوع از برنامه ها ، با بهره گيری از امکانات و تکنولوژی های متفاوت سعی در ارائه خروجی مناسب و با فرمت قابل قبول برای مخاطبان خود می نمايند. خروجی يک برنامه وب ، در سطح سرويس گيرندگان ارائه می گردد ، بديهی است بمنظور فرمت مناسب خروجی برنامه های وب ، می بايست بر تکنولوژی هائی متمرکز گرديد که امکان بکارگيری آنان در سطح سرويس گيرنده و از طريق مرورگر کاربران ، ميسر می باشد . مسئوليت ميزبان نمودن بخش رابط کاربر برنامه های وب برعهده مرورگر بوده و لازم است تمامی تلاش های انجام شده در اين خصوص با تاکيد بر اهميت و جايگاه مرورگر ها ، سازماندهی و مديريت گردد . 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>

ارسال نظر

با تشکر، نظر شما پس از بررسی و تایید در سایت قرار خواهد گرفت.

متاسفانه در برقراری ارتباط خطایی رخ داده. لطفاً دوباره تلاش کنید.

مقالات مرتبط

تازه های مقالات

بیشترین بازدید هفته