مرجع دستورات css ونحوه كاربرآنها
Background
| نـام خـاصيت | تـوضيحـات | مقادير |
|---|---|---|
| background | از خاصيت پس زمينه ( background ) در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه يک عنصر مثل جدول يا صفحه استفاده می شود |
background-color background-image background-repeat background-attachment background-position |
| background-attachement | تعيين می کند کند که آيا عکسی که به عنوان پس زمينه عنصر انتخاب شده است ، ثابت باشد و يا با حرکت عنصر در هنگام بالا و پايين رفتن صفحه ، آن عکس نيز حرکت کند . اين مسئله در مواردی مثل تعيين پس زمينه برای کل يک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمايش در مرورگر است ، کاربرد دارد . که 2 حالت زير را می تواند داشته باشد : |
scroll fixed |
| background-color |
تعيين کننده يک رنگ به عنوان پس زمينه عنصر است . رنگ میتواند به روش های زير تعيين شود : |
color-rgb color-hex color-name transparent |
| background-image | مسير کامل يک عکس را که قرار است به عنوان پس زمينه عنصر استفاده شود ، را تعيين می کند . |
url(URL) none |
| background-position |
مکان شروع قرارگيری عکس را در پس زمينه عنصر تعيين می کند . اين حالت معمولا در هنگام کوچکتر بودن عکس از پس زمينه عنصر کاربرد دارد و می تواند يکی از حالت های زير باشد : |
top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
| background-repeat |
چنانچه عکس انتخابی به عنوان پس زمينه يک عنصر از اندازه آن عنصر کوچکتر باشد ، تعيين می کند که آيا با تکرار عکس در سطح پس زمينه عنصر ، کل آنرا بپوشاند يا خير . که حالت های تکرار به صورت زير می تواند باشد : |
repeat repeat-x repeat-y no-repeat |
Border
| نـام خـاصيت | تـوضيحـات | مقادير |
|---|---|---|
| border | با استفاده از مجموعه خواص border در CSS ، می توان برای بيشتر عنصرهای HTML خطوط حاشيه تعيين کرد . خطوط حاشيه خطوطي هستند ، که به دور عنصر مورد نظر کشيده می شوند . |
border-width border-style border-color |
| border-bottom | در برگيرنده خواص کلی خط حاشيه برای خط حاشيه پايين عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : |
border-bottom-width border-style border-color |
| border-bottom-color | رنگ خط حاشيه پايين عنصر را تعيين می کند . |
border-color |
| border-bottom-style | خط حاشيه پايين عنصر را تعيين می کند . |
border-style |
| border-bottom-width | پهنای خط حاشيه پايين عنصر را تعيين می کند . |
thin medium thick length |
| border-color |
تعيين کننده رنگ خطوط حاشيه است . رنگ میتواند به روش های زير تعيين شود : |
color |
| border-left |
در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت چپ عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : |
border-left-width border-style border-color |
| border-left-color | رنگ خط حاشيه سمت چپ عنصر را تعيين می کند . |
border-color |
| border-left-style | style خط حاشيه سمت چپ عنصر را تعيين می کند . |
border-style |
| border-left-width | پهنای خط حاشيه سمت چپ عنصر را تعيين می کند . |
thin medium thick length |
| border-right |
در برگيرنده خواص کلی خط حاشيه برای خط حاشيه سمت راست عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : |
border-right-width border-style border-color |
| border-right-color | رنگ خط حاشيه سمت راست عنصر را تعيين می کند . |
border-color |
| border-right-style | style خط حاشيه سمت راست عنصر را تعيين می کند . |
border-style |
| border-right-width | پهنای خط حاشيه سمت راست عنصر را تعيين می کند . |
thin medium thick length |
| border-style |
توسط اين خاصيت می توان حالت خطوط حاشيه را بر حسب يکی از حالت های زير تعيين کرد : |
none hidden dotted dashed solid double groove ridge inset outset |
| border-top |
در برگيرنده خواص کلی خط حاشيه برای خط حاشيه بالای عنصر به صورت يک خاصيت چند مقداری است . عملکرد آن به صورت زير است : |
border-top-width border-style border-color |
| border-top-color | رنگ خط حاشيه بالای عنصر را تعيين می کند . |
border-color |
| border-top-style | style خط حاشيه بالای عنصر را تعيين می کند . |
border-style |
| border-top-width | هنای خط حاشيه بالای عنصر را تعيين می کند . |
thin medium thick length |
| border-width | توسط اين خاصيت می توان ضخامت خطوط حاشيه را به وسيله يکی از حالت های زير تعيين کرد : |
thin medium thick length |
Classification
| نـام خـاصيت | تـوضيحـات | مقادير |
|---|---|---|
| clear | با مجموعه خواص ارائه شده در اين قسمت می توان نحوه و مکان نمايش عناصر را در صفحه توسط CSS تنظيم کرد . |
left right both none |
| cursor |
نوع اشاره گر موس را در هنگام قرار گيری بر روی عنصر مورد نظر تعيين می کند ، که انواع حالت های آن عبارتند از : |
url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
| display |
خاصيت display نحوه نمايش عنصر مورد نظر را در صفحه تعيين می کند ، که می تواند يکی از حالت های زير را داشته باشد : |
none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
| float |
توسط اين خاصيت ، نحوه تراز بندی و موقعيت قرار گيری عناصر را در صفحه نسبت به هم تعيين می کنيم ، که می تواند يکی از حالت های زير باشد : |
left right none |
| position |
توسط اين خاصيت می توان موقعيت و مختصات قرار گيری عنصر را در صفحه تعيين کرد ، که می تواند يکی از حالت های زير باشد : |
static relative absolute fixed |
| visibility |
توسط اين خاصيت نمايش يا عدم نمايش عنصر را در صفحه تعيين می کنيم ، که 2 حالت ممکن دارد : |
visible hidden collapse |
Dimension
| خــاصيت | توضيحــات | مقـادير |
| height |
توسط اين خاصيت ، به يکی از روش های زير ارتفاع عنصر را تعيين می کنيم : |
auto length درصد % |
| max-height |
حداکثر ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند : |
none length درصد % |
| min-height |
حداقل ارتفاع مجاز را برای عنصر به يکی از روش های زير تعيين می کند : |
none length درصد % |
| width |
توسط اين خاصيت ، به يکی از روش های زير عرض عنصر را تعيين می کنيم : |
auto length درصد % |
| max-width |
حداکثر عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند : |
none length درصد % |
| min-width |
حداقل عرض مجاز را برای عنصر به يکی از روش های زير تعيين می کند : |
none length درصد % |
Font
| نام خاصيت | نوع خاصيت | شرح |
| font-family |
نام قلم font name |
به وسيله اين خاصيت می توان از يک ليست آماده ( بر حسب نرم افزاری که برای طراحی صفحات
استفاده می کنيد ) ، يک قلم را به عنوان قلم نوشته تعيين کنيد . |
| font-size |
xx-small x-small small medium large x-large xx-large smaller larger length درصد % |
به وسيله اين خاصيت می توان سايز قلم نوشته را توسط يکی از حالت های زير تعيين کرد
: |
| font-style |
normal
italic oblique |
از اين خاصيت با استفاده از حالت های زير می توان برای اعمال جلوه های نمايشی به متن
استفاده کرد : |
| font-variant |
normal small-caps |
توسط اين خاصيت می توان نوشته را به صورت معمولی ( noraml ) و يا حروف بزرگ ( small-caps ) نمايش داد . |
| font-weight |
normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
توسط اين گزينه می توان ميزان ضخامت قلم نوشته را بر حسب يکی از حالت های زير تعيين
کرد : |
Generated Content
| خـاصيت | توضيحـات | مقاديـر |
|---|---|---|
| content | Generates content in a document. Used with the :before and :after pseudo-elements | string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote |
| counter-increment | Sets how much the counter increments on each occurrence of a selector | none identifier number |
| counter-reset | Sets the value the counter is set to on each occurrence of a selector | none identifier number |
| quotes | Sets the type of quotation marks | none string string |
List and Marker
| نام خاصيت | نوع خاصيت | شرح |
| list-style-image |
none URL مسير فايل |
در اين حالت يک عکس به عنوان نشانه ليست در ابتدای هر آيتم ليست ، به صورت يک آيکون
کوچک نشان داده می شود . برای تعيين عکس به روش زير عمل می کنيم : |
| list-style-position |
inside outside |
موقعيت قرار گيری نشانه و متن آيتم های ليست را بر حسب يکی از حالت های زير تعيين می کند : - inside : نشانه ليست و متن آيتم های آن کمی تو رفته تر نمايش داده می شوند . - outside : نشانه ليست و متن آيتم های به صورت عادی نمايش داده می شوند . |
| list-style-type |
none disc cicle square demical demiacl-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian hiragana katakana hiragana-iroha katakana-iroha |
نوع نشانه ليست را از يکی از موارد زير تعيين می کند : |
Margin
با استفاده از خاصيت margin در CSS ، می توان فضای خالی به دور عناصر ايجاد کرد . اين امکان نيز وجود دارد که با تعيين مقدارهای منفی ، باعث هم پوشانی و تداخل عناصر در يکديگر شد .می توان حاشيه دور عناصر را به صورت کلی در خاصيت چند مقداری margin و يا به صورت تکی برای هر يک از جهات 4 گانه عنصر تعيين کرد .
| نام خاصيت | نوع خاصيت | شرح |
| margin-top |
auto length درصد % |
ميزان حاشيه را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير می تواند
مقدار دهی شود : |
| margin-right |
auto length درصد % |
ميزان حاشيه را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می تواند
مقدار دهی شود : |
| margin-bottom |
auto length درصد % |
ميزان حاشيه را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند مقدار
دهی شود : |
| margin-left |
auto length درصد % |
ميزان حاشيه را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می تواند
مقدار دهی شود : |
Outlines
| خـاصيت | توضيحـات | مقاديـر |
|---|---|---|
| outline | A shorthand property for setting all the outline properties in one declaration | outline-color outline-style outline-width |
| outline-color | Sets the color of the outline around an element | color invert |
| outline-style | Sets the style of the outline around an element | none dotted dashed solid double groove ridge inset outset |
| outline-width | Sets the width of the outline around an element | thin medium thick length |
Padding
با استفاده از خاصيت padding در CSS ، می توان فاصله بين خطوط حاشيه دور يک عنصر را با محتويات درونی آن تنظيم کرد . برای مثال فاصله بين خطوط حاشيه يک خانه جدول با متن درون آن را با استفاده از خاصيت padding تنظيم می کنيم
.نکته : در خاصيت padding استفاده از مقادير منفي مجاز نيست .
فاصله درونی عناصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود ، که می توان با استفاده از خاصيت چند مقداری padding آن را برای تمام جهات تنظيم کرده و يا به صورت خاصيت تک مقداری ، ميزان فاصله را در هر جهت به صورت مجزا تعيين کرد .
| نام خاصيت | نوع خاصيت | شرح |
| padding-top |
length درصد % |
ميزان فاصله درونی را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير
می تواند مقدار دهی شود : |
| padding-right |
length درصد % |
ميزان فاصله درونی را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می
تواند مقدار دهی شود : |
| padding-bottom |
length درصد % |
ميزان فاصله درونی را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند
مقدار دهی شود : |
| padding-left |
length درصد % |
ميزان فاصله درونی را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می
تواند مقدار دهی شود : |
Positioning
| نام خاصيت | نوع خاصيت | شرح |
| left |
auto length درصد % |
مختصات نقطه شروع عنصر را از سمت چپ در صفحه يا عنصر در برگيرنده عنصر مورد نظر را
به يکی از روش های زير تعيين می کند : |
| right |
auto length درصد % |
مختصات نقطه شروع عنصر را از سمت راست در صفحه يا عنصر در برگيرنده عنصر مورد نظر را
به يکی از روش های زير تعيين می کند : |
| top |
auto length درصد % |
مختصات نقطه شروع عنصر را از سمت بالا در صفحه يا عنصر در برگيرنده عنصر مورد نظر را
به يکی از روش های زير تعيين می کند : |
| bottom |
auto length درصد % |
مختصات نقطه شروع عنصر را از سمت پايين در صفحه يا عنصر در برگيرنده عنصر مورد نظر
را به يکی از روش های زير تعيين می کند : |
| overflow |
visible hidden scroll auto |
توسط اين خاصيت تعيين می شود که چنانچه محتويات يک عنصر از عرض يا طول تعيين شده برای
آن بيشتر شد ، مرورگر برای نمايش قسمت اضافه چه کاری انجام دهد ، که می تواند يکی از
حالت های زير باشد : |
Table
| نام خاصيت | نوع خاصيت | شرح |
| border-collapse |
collapse seprate |
نحوه نمايش حاشيه يک جدول را به يکی از 2 حالت زير تعيين می کند : |
| border-spacing | length |
اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول
بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . |
| caption-side |
top right bottom left |
اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ <
caption > ايجاد می شود . حالت های ممکن عبارتند : |
| empty-cells |
show hide |
مشخص می کند که آيا خانه های خالی جدول و خطوط حاشيه های آنها نمايش داده شود يا خير
، که دو حالت دارد : |
Text
| نام خاصيت | نوع خاصيت | شرح |
| color |
نام رنگ rgb (r,g,b) عدد هگزادسيمال |
تعيين کننده رنگ نوشته است . رنگ میتواند به روش های زير تعيين شود :
|
| direction |
rtl ltr |
جهت نوشته را مشخص می کند که بر حسب زبان نوشته می تواند يکی از حالت های زير باشد
: |
| line-height |
معمولی normal عدد number اندازه length درصد % |
به وسيله اين خاصيت می توان فاصله بين خطوط را در پاراگراف تعيين کرد . برای اين کار
يکی از حالت های زير را بايد استفاده کرد : |
| letter-spacing |
معمولی normal اندازه length |
برای تعيين اندازه فاصله بين حروف در نوشته استفاده می شود ، که يکی از 2 حالت زير
می تواند باشد : |
| text-align |
left right center justify |
جهت چيدمان نوشته را در صفحه ، جدول ، پاراگراف و ... تعيين می کند ، که يکی از حالت
های زير می تواند باشد : |
| text-decoration |
none underline overline line-through |
از اين خواص برای اعمال جلوه های تصويری به نوشته استفاده می شود که يکی از خواص زير
و يا ترکيبی از آنها را می توان استفاده کرد : |
| text-indent |
length درصد % |
به وسيله اين خاصيت ميران تو رفتگی و نقطه شروع اولين خط از يک پاراگراف را به يکی
از دو حالت زير می توان تعيين کرد : |
| text-transform |
none capitalize uppercase lowercase |
از اين خاصيت برای کتنرل بزرگ يا کوچک بودن حروف در نوشته استفاده می شود ، که می تواند
يکی از حالت های زير را داشته باشد : |
| white-space |
normal pre nowrap |
توسط اين خاصيت می توان نحوه نمايش فاصله های خالی بين حروف و کلمات در نوشته توسط
مرورگر را مديريت کرد ، که 3 حالت دارد : |
| word-spacing |
normal length |
توسط اين خاصيت می توان فاصله بين کلمات را در يک نوشته تعيين کرد ، که يکی از 2 حالت
زير را می تواند داشته باشد : |
منبع مطالب آموزشي سايت برگرفته از سايت زير ميباشد
Developerstudio.ir
كليه حقوق كپي رايت متعلق به شركت دلتارايانه ميباشد
Copyright © Deltarayaneh.comInc.All Rights Reserved.
E-Mail : Delta_Rayaneh@yahoo.Com