برترین مقالات کامپیوتر

استفاده از 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>               Powered By yosafysite.tk