ابزار طراحی استایل - Css Designer

• استایل ها، ویژگی هایی برای طراحی ظاهر عناصر مختلف سایت هستند.
• استایل ها در علم طراحی وب به Css (مخفف Cascading Style Sheets) معروف می باشند.
• به عنوان مثال رنگ یا تصویر زمینه سایت، فونت، سایز و رنگ متون سایت، سایه، حاشیه، ارتفاع، عرض، ضخامت و ... عناصر سایت توسط استایل ها مشخص می گردند.
• ابزار طراحی استایل در این سیستم این امکان را فراهم می کند که کاربر سایت بتواند با استفاده از امکاناتی که در این ابزار وجود دارد (بدون داشتن اطلاعات تخصصی)، استایل های مورد نظرش را طراحی کند.
• استایل هایی که کاربر می تواند تعریف کند به شرح زیر می باشد:
پس زمینه: رنگ، تصویر و ویژگیهای مربوطه
متن: رنگ، فونت، سایز، وزن، استایل، نوع
بلوک: حالت نمایش، تراز افقی و عمودی متن، فاصله بین خطوط، فاصله بین کلمات و حروف، دکور متن، تورفتگی متن
سایز: ارتفاع، عرض، تعیین حداقل و حداکثر ارتفاع و عرض، تعیین حالت اسکرول در هنگام سریز ارتفاع و عرض
باکس: فاصله از درون و فاصله از بیرون عناصر (در چهار جهت بالا، راست، پایین، چپ)
حاشیه: تعیین ضخامت، رنگ، استایل، سایه و گردی حاشیه عناصر (در چهار جهت بالا، راست، پایین، چپ)
و: نوع موقعیت عنصر، فاصله از بالا، راست، پایین و چپ صفحه یا عنصر مالک، حالت شناوری، قابلیت دیدن، نوع مکان نما، ترتیب نمایش لایه ای و ...

• ابزار طراحی استایل به صورت پنجره پاپ آپ باز می شود.
• در هر بخش از سایت که نیاز به استایل دارد آیکون Css Designer Icon 1 و یا آیکون Css Designer Icon 2 وجود دارد، که با کلیک روی آن پنجره زیر باز می شود:

Css Designer

• پنجره طراحی استایل شامل سه بخش می باشد:
1. بخش طراحی که با محیطی ویژوال امکان تعریف و تنظیم استایل های مورد نظر را فراهم می کند.
2. کدهای استاندارد Css که به صورت اتوماتیک و با تغییر بخش 1 تولید می شوند.
3. پیش نمایش استایل طراحی شده که همزمان با تغییرات به روز رسانی می شود.
نکته: بخش پیش نمایش قابل ویرایش می باشد و می توان متن دلخواه را به صورت آزمایشی وارد کرد.
• به صورت همزمان با تغییر هر بخش (1 یا 2) دو بخش دیگر به روز رسانی می شوند.
• در بخش 2 می توان کدهای استاندارد Css را وارد کرد. برای مثال اینجا را کلیک کنید.
• با کلیک روی دکمه ... در استایل background-image پنجره ابزار مدیریت فایل باز می شود و می توان تصویر مورد نظر را برای پس زمینه انتخاب کرد.
• هر جایی که نیاز به انتخاب رنگ می باشد، کافیست در باکس مورد نظر کلیک کنیم تا پنچره ای برای انتخاب رنگ باز شود.

Css Designer Color Picker

• معرفی استایل ها به همراه مقادیر نمونه:
 
توضیحاستایلمقادیر نمونه
رنگ پس زمینهbackground-color#EFEFEF
تصویر پس زمینهbackground-imageurl('Files/Skin/BG.jpg')
تکرار تصویر زمینهbackground-repeatrepeat-x
محل تصویر زمینهbackground-positiontop
الصاق تصویر زمینهbackground-attachfixed
پس زمینهbackgroundترکیبی
 
رنگ متنcolorblue
فونتfont-familytahoma,arial,courier
سایز فونتfont-size12px
وزن فونتfont-weightbold
استایل فونتfont-styleitalic
نوع فونتfont-variantnormal
 
حالت نمایشdisplayblock
تراز افقی متنtext-aligncenter
تراز عمودی متنvertical-alignmiddle
فاصله بین خطوطline-height1.5
نمایش متنtext-decorationunderline
تو رفتگی متنtext-indent5px
فاصله حروفletter-spacing2px
فاصله کلماتword-spacing2px
نمایش متنtext-transformlowercase
 
عرضwidth150px
ارتفاعheight200px
حداقل عرضmin-width100px
حداقل ارتفاعmin-height100px
حداکثر عرضmax-width400px
حداکثر ارتفاعmax-height500px
سریز عرض یا ارتفاعoverflowscroll
 
فاصله داخلیpadding5px
فاصله داخلی از بالاpadding-top10px
فاصله داخلی از راستpadding-right5px
فاصله داخلی از پایینpadding-bottom5px
فاصله داخلی از چپpadding-left5px
فاصله بیرونیmargin10px
فاصله بیرونی از بالاmargin-top10px
فاصله بیرونی از راستmargin-right10px
فاصله بیرونی از پایینmargin-bottom10px
فاصله بیرونی از چپmargin-left10px
 
حاشیهborderترکیبی
حاشیه بالاborder-topترکیبی
حاشیه راستborder-rightترکیبی
حاشیه پایینborder-bottomترکیبی
حاشیه چپborder-leftترکیبی
ضخامت حاشیهborder-width1px
ضخامت حاشیه بالاborder-top-width1px
ضخامت حاشیه راستborder-right-width1px
ضخامت حاشیه پایینborder-bottom-width1px
ضخامت حاشیه چپborder-left-width1px
رنگ حاشیهborder-colorred
رنگ حاشیه بالاborder-top-color#234245
رنگ حاشیه راستborder-right-color#CCC
رنگ حاشیه پایینborder-bottom-colorsilver
رنگ حاشیه چپborder-left-colorblack
استایل حاشیهborder-stylesolid
استایل حاشیه بالاborder-top-styleridge
استایل حاشیه راستborder-right-styledashed
استایل حاشیه پایینborder-bottom-styledotted
استایل حاشیه چپborder-left-stylenone
گردی حاشیهborder-radius10px
 
سایه افقیhorizontal-shadow5px
سایه عمودیvertical-shadow5px
عمق سایهshadow-depth10px
رنگ سایهshadow-colorgray
نوع سایهshadow-typeداخلی
سایهbox-shadowاتوماتیک
 
موقعیت عنصرpositionrelative
فاصله از بالاtop100px
فاصله از چپleft200px
فاصله از راستright150px
فاصله از پایینbottom250px
ترتیب نمایش عنصرz-index7
 
clearclearboth
حالت شناوریfloatright
قابلیت دیدنvisibilityhidden
مکان نماcursorpointer
 
طرح بندی جدولtable-layoutfixed
حالت حاشیه جدولborder-collapseseparate
فاصله حاشیه جدولborder-spacing10px
وضعیت سلول خالیempty-cellshide
محل عنوان جدولcaption-sidebottom