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

[ClaimAlireza]

توجه:
کلیه ی حقوق این مقاله متعلق به سایت http://www.barnamenevis.org/ می باشد.
استفاده از مطالب این مقاله منوط به ذکر نام منبع است.

فایل ضمیمه پروژه را از انتهای همین مقاله داونلود کنید.

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

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

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

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

a:link, a:visited

{

color:#cc3300;

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 ها در کدهای سمت سرور بحث خواهد شد.

موفق باشید.

[fereshte22]

دوست عزیز از مقاله خوبتون ممنون هستم.
فقط فایلی که گذاشته بودید موقع نصب error میدهد و نصب نمیشود.

[ClaimAlireza]

ببینید framework2 و iis رو سیستمتون نصب هست.

[SalarSoft]

مرجع آموزشی Html 4.01 و CSS 2
http://salarsoft.somee.com/magaleh/m..._reference.htm

[fereshte22]

سلاممن میخواستم این امکان را به مدیر سایت بدهم که فونت صفحات خاص و یا عکس کنترل های خاص و خلاصه بعضی از خصوصیات ظاهری سایت را بتوند تغییر دهد.مثلا در textbox تغییرات مورد نظر خود را قرار دهد.و یا کلیک بر روی یک دکمه ذخیره تغییرات مورد نظر اعمال شودایا این کار را با css میتوان انجام داد؟اگر میشود چطوری؟ایا راه دیگری وجود دارد؟در ضمن من iis , framework2 روی سیستمم دارم ولی بازهم مشکلم حل نشد.ممنون

[ClaimAlireza]

در مورد سوال اول باید بگم که این کار به سادگی از طریق صفت CssClass می تونه انجام بشه.
به عنوان مثال اگر کاربر ما admin بود در اینصورت مثلا Label1.CssClass=textBox1.text .

در مورد اینکه چرا سیستم شما با این برنامه مشکل دارد هم متاسفانه چیزی به ذهنم نمیرسد.

موفق باشی.

[ClaimAlireza]

توجه:
کلیه ی حقوق این مقاله متعلق به سایت http://www.barnamenevis.org/ می باشد.
استفاده از مطالب این مقاله منوط به ذکر نام منبع است.

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

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

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

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

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

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

موفق باشید.

[ClaimAlireza]

توجه:
کلیه ی حقوق این مقاله متعلق به سایت http://www.barnamenevis.org/ می باشد.
استفاده از مطالب این مقاله منوط به ذکر نام منبع است.

فایل ضمیمه پروژه را از انتهای همین مقاله داونلود کنید.


مقدمه: شما برای ایجاد 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 مقدم شمرده می شوند.

[soghra]

سلام
من یه مشکل در استاده از stylesheet داردم همون طور که ClaimAlireza گفت stylesheet را به مستر پیجم add کردم و صفت cssclass یه کنترل مثلا یک باتن را برابر با اسم یک کلاس در style sheet گذاشتم ولی همچنان این کلاس و بقیه کلاس هاس (کلا style sheet )رو نمیشناسه
لطفا کمک کنید!!!

[darya_darya]

بعد از ایجاد cssبرای اعمال آن روی label,..فقط نوشتن نام cssدر قسمت cssclass در prperties کافیه احتیاج به کد دیگه ای نیست؟
چون من این کارو کردم ولی css ها اعمال نمی شوند وهیچ گونه خطایی هم نمی دهند
اشکال کجاست؟؟؟

[adel68]

با تشکر از زحمات شما عزیزان ،فایل شما در ویندوز 7 در هنگام اجرا خطا مدهد دلیلش را می توانید برایم بفرستید،باتشکر

[MJVMJV]

در هنگام نصب خطا مي دهد
Unable to locate application file 'Theme.msi'.
Unable to locate application file 'Css.msi'.
باتشكر