چگونگی استفاده از فایل های css در دات نت

مقدمه: از این فایل ها به منظور ایجاد یک سبک واحد برای نمایش label ها، hyperLink ها وبقیه عناصر صفحه استفاده می شود.

فایل های CSS یا Cascading Style Sheets همان طور که از اسمشان نیز بر می آید می توانند یک style را بسته به سلیقه طراح فراهم کنند.

از این style می توان برای اینکه هر یک از عناصر یک صفحه چگونه ظاهر شوند، استفاده نمود.
در ذیل چگونگی استفاده از آن ها توضیح داده شده است :

ابتدا بر روی نام پروژه در solution explorer کلیک راست کرده و Add new item را انتخاب کنید سپس روی style sheet کلیک کرده و add را بزنید.
شما در فایل ایجاد شده ابتدا body را پاک کنید، حال می توانید برای تک تک عناصر، style خاصی را تعریف کنید. مثلا شما می خواهید hyperLink های یک صفحه خاص به یک شکل خاصی نمایش داده شوند بنابراین به شکل زیر عمل می کنید:

کد:

---

a:link, a:visited
{
color:C#‎c3300;
text-decoration: uderline;
}
a:hover
{
text-decoration: none;
}
a:active
{
color:#ff9900;
text-decoration:uderline;
}

---

حال در هر صفحه ای که CSS را الحاق کنید، hyperLink ها به صورت تعریف شده نمایش داده خواهند شد.

همچنین شما می توانید کلاس های مختلفی را به شکل زیر جهت نمایش عناصر در یک صفحه تعریف کنید:

کد:

کد:

---

.ClaimAlireza
{
font-family: 'Trebuchet MS';
color: Navy;
position: relative;
cursor: w-resize;
background-color: yellow;
}

---

قسمت خیلی مهم این کلاس، صفت Position می باشد که اگر relative باشد، عناصری که از این کلاس استفاده می کنند بدون نیاز به درج جدول و ... می توانند بصورت مستقیم در صفحه جابجا شده و در جای مناسب قرار گیرند.(مانند تغییر جای یک عنصر در FrontPage)

حال برای استفاده ازاین کلاس ها کافی است نام کلاس مربوطه را در صفت CssCalss عنصر مربوطه وارد نمایید:

کد:

کد:

---

<asp:LabelID="Label1"runat="server"Text="it's hilighted label"style="left: 322px; top: 60px"CssClass="ClaimAlireza"></asp:Label>

---

برای الحاق فایل StyleSheet.css به یک صفحه خاص باید کد زیر را در قسمت مشخص شده وارد نمایید:

کد:

کد:

---

<headrunat="server">
<title>Untitled Page</title>
<linkhref="StyleSheet.css"rel="Stylesheet"type="text/css"/>
</head>

---

نتیجه گیری: طراحی صفحه های وب برای اکثر طراحان از گذشته کاری طاقت فرسا بوده است. از این رو می توان فایل های CSS را به عنوان Template از اینترنت دریافت کرده و از آن ها برای طراحی سایت بهره جست.

از این گذشته طراحی واحد برای تمامی عناصر و صفحات یک وب سایت خوب و معتبر کاری بس ضروری می باشد که CSS ها این مهم را برای طراحان راحت ساخته اند.
در مقاله بعدی در مورد محدودیت های CSS ها در کدهای سمت سرور بحث خواهد شد.

درمقاله قبلی چگونگی استفاده از فایل های CSS مورد بحث قرار گرفت.

فایل های CSS در وب سایت هایی که به صورت static html نوشته می شوند بسیار خوب کار می کنند مشکل زمانی به وجود می آید که از اونها در عناصر server-side استفاده می شود.

در حقیقت زمانی که ار CSS ها در وب سایت ها استفاده شود این کدها در مرورگرهای مختلف ممکن است نتایج متفاوتی را بهمراه داشته باشد و صفحات، آن طور که باید، نمایش داده نشوند.

مانند آنچه در مورد Html پیش می آید، که باعث بوجود آمدن Xhtml شده.

از این رو بحث استفاده از theme ها مطرح شده است.
از theme ها نیز می توان برای اینکه عناصر یک صفحه چگونه نمایش داده شوند، البته بدون اینکه مشکلی در render شدن صفحات از طریق مرورگرهای مختلف به وجود آید، استفاده کرد.

در مقاله بعدی چگونگی استفاده از theme ها را مورد بحث قرار می دهیم.

مقدمه: شما برای ایجاد theme به ایجاد فایل xxx.skin نیاز دارید.
در ذیل چگونگی ساخت theme به طور کامل توضیح داده شده است.

ابتدا روی نام پروژه در solution exporer کلیک راست کرده سپس در قسمت ASP.NET Folder، روی App-theme کلیک کنید.

حال روی فولدر Ap-theme کلیک راست کرده وفولدری ایجاد نمایید وآنرا Blue بنامید.

روی فولدر Blue کلیک راست کرده و Add New item را انتخاب نمایید.

از پنجره باز شده Skin File را انتخاب کرده وآن را BlueBits بنامید.

نوشتن کد در این فایل به مهارت خاصی نیاز ندارد.
تمام کاری که باید بکنید اینست که جهت نمایش سلیقه ای عناصر مختلف به صورت Html کد بنویسید.

فقط باید دقت کنید که صفت Text (در صورت وجود) وID را حذف نمایید وصفتی با نام SkinID را جهت استفاده های بعدی به صورت زیر اضافه نمایید.

کد:

کد:

---

<asp:LabelSkinid="BlueLabel"
runat="server"
Font-Names="century gothic"
Font-Size="10pt"
ForeColor="Blue">
</asp:Label>

---

از skinID به این منظور استفاده می گردد که شاید شما بخواهید در یک theme، مثلا آبی، دو نوع آبی مختلف(سرمه ای، آبی کم رنگ) برای label ها مشخص کنید.(چیزی شبیه CssClass ها)

theme ها را به شکل زیر در صفحاتی که می خواهید عناصر آن ها به شکل مورد نظر درآیند الحاق کنید.

کد:

---

<%@PageLanguage="C#‎"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Theme="Blue"%>

---

حال به شکل زیر از طریق skinID، به یک label خاص، Bluetheme را نسبت می دهید:

کد:

---

<asp:LabelID="Label1"SkinID="BlueLabel"runat="server"Text="Is this blue Label ?"></asp:Label>

---

توجه کنید که اگر برای عنصر تعریف شده، مثلا یک تقویم، هیچ skinID تعریف نگردد، تمام عنصرهای تقویم موجود در صفحه ای که theme به آن الحاق شده theme مورد نظر را به خود می گیرند.

این نکته را فراموش نکنید که از theme بیشتر برای ساده تر شدن ایجاد صفحات یکنواخت(از نظر ظاهری) استفاده می شود.
در صورتی که شما مثلا بخواهید یکی از label های صفحه علاوه بر علائم ظاهری theme حالت خاص دیگری نیز داشته باشند، دست شما برای اضافه کردن صفت به خصوص دیگر، به label مورد نظر باز می باشد ومهم این است که بدانید مقادیر این صفات بر صفات theme مقدم شمرده می شوند.