تاریخ انتشار: دوشنبه, ۲۲ ارديبهشت ۱۳۹۹، ۱۱:۰۶ ب.ظ نویسنده: محمدیان

 ویژگی ها در css

توضیح کوتاه و کاربرد ویژگی css 

align-content

ویژگی align-content برای یک عنصر نگهدارنده ( container ) که در داخل آن تگ ها یا عناصر داخلی قرار گرفته استفاده می شود. توسط این ویژگی عنصرهای داخلی که بیشتر از یک ردیف هستند در چند ردیف نسبت به محور عمود هم ترازسازی می شوند.

align-items

ویژگی align-item جهت هم ترازسازی تگ های داخلی یک عنصر نگهدارنده ( container ) نسبت به محور عمود در یک ردیف کاربرد دارد.

 

 

align-self

ویژگی align-self منجر به هم ترازسازی یک تگ داخلی html که درون تگ نگهدارنده ( container ) قرار گرفته کاربرد دارد. 

all

ویژگی all کلیه خصوصیات css در تگ و یا تگ های html به جز صفات direction و unicode-bidi که جهت متن را مشخص می کنند، را به حالت initial و inherit بازنشانی یا ریست می کند.

animation

توسط خاصیت animation می توانید برخی صفات انیمیشن را درون یک تگ html از طریق همین خصوصیت مقداردهی و خلاصه نویسیکنید.

animation-delay

توسط خاصیت animation-delay می توانید برای یک تگ html ، اجرای انیمیشن را به تاخیر بیندازد.

animation-direction

توسط خاصیت animation-direction می توانید جهت گیری انیمیشن را درون یک تگ html تعیین کنید

animation-duration

توسط خاصیت animation-duration می توانید برای یک تگ html ، مدت زمان چرخه یک انیمیشن را مشخص نمایید.

animation-fill-mode

خاصیت animation-fill-mode می تواند قبل از شروع اجرای انیمیشن یا پس از پایان اجرای انیمیشن درون تگ html مورد نظر ، یک سبک یا استایل ایجاد کند.

animation-iteration-count

خاصیت animation-iteration-count جهت تعیین تعداد دفعات تکرار شدن انیمیشن درون یک تگ html کاربرد دارد.

animation-name

خاصیت animation-name جهت تعیین یک یا چند نام برای انیمیشن هایی که با دستور keyframe@ ساخته شده اند، برای یک تگ html کاربرد دارد.

animation-play-state

توسط خاصیت animation-play-state می توانید برای یک تگ html ، چرخه یک انیمیشن را متوقف کنید یا به حرکت در آورید.

animation-timing-function

خاصیت animation-timing-function ، منحنی سرعت یک انیمیشن درون یک تگ html را مشخص می کند.

backface-visibility

خاصیت backface-visibility تعیین می کند زمانی که تگ html در فضای سه بعدی توسط ویژگی transform حرکت داده می شود، توسط بیننده پشت آن قابل مشاهده باشد یا خیر.

background

توسط خاصیت background ، می توانیم چندین ویژگی دیگر را برای مدیریت پس زمینه در css به صورت مقادیر ترکیبی تعریف نماییم.

background-attachment

با استفاده از خاصیت background-attachment می توانید تنظیم نمایید اگر صفحه وب شما Scroll دارد، تصویر پس زمینه در اسکرول به بالا و پایین در جای خود ثابت بماند یا خیر.

background-blend-mode

برای تعیین حالت آمیختگی رنگ در لایه های مختلف پس زمینه یک تگ html استفاده می شود.

background-clip

توسط خاصیت background-clip می توانیم تعیین کنیم که پس زمینه تگ html در کدام ناحیه و یا ناحیه ها قرار بگیرد.

background-color

توسط خاصیت background-color می توانیم یک رنگ پس زمینه برای یک تگ html تعیین کنیم.

background-image

توسط خاصیت background-image ، می توان یک یا چند تصویر روی هم را به عنوان پس زمینه تگ html قرار داد.

background-origin

توسط خاصیت background-origin ، می توانیم تعیین کنیم که شروع ترسیم پس زمینه تگ html در کدام ناحیه باشد.

background-position

توسط خاصیت background-position ، مکان یک پس زمینه بر روی تگ html را می توانیم تعیین نماییم.

background-repeat

توسط خاصیت background-repeat می توان تعیین کرد که تصویر تکرار شود یا نه و یا اینکه چگونه تکرار شود.

background-size

از خاصیت background-size برای تعیین اندازه تصویر پس زمینه یک تگ html استفاده می شود.

border

توسط خاصیت border می توانید سه مقدار ضخامت ، استایل و رنگ در حاشیه یا border را در یک تگ html تعیین نمایید.

border-bottom

توسط خاصیت border-bottom می توانید یک حاشیه یا border در قسمت پایینی تگ html مربوطه تعیین کنید.

border-bottom-color

توسط خاصیت border-bottom-color می توانید رنگ در حاشیه پایینی یا رنگ در border پایینی را در تگ html مربوطه تعیین نمایید.

border-bottom-left-radius

توسط خاصیت border-bottom-left-radius می توانیم گوشه سمت چپ و پایینی یک تگ html را گرد کنیم.

border-bottom-right-radius

توسط خاصیت border-bottom-right-radius می توانیم گوشه سمت راست و پایینی یک تگ html را گرد کنیم.

border-bottom-style

توسط خاصیت border-bottom-style می توانید استایل حاشیه پایینی و یا استایل border پایینی را در تگ html مربوطه تعیین نمایید.

border-bottom-width

توسط خاصیت border-bottom-width می توانید مقدار ضخامت در حاشیه پایینی یا مقدار ضخامت در border پایینی را در تگ html مربوطه تعیین نمایید.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

border-collapse

توسط خاصیت border-collapse می توانیم لبه های دوخطی یک جدول html را به لبه های یک خطی و مجزا در جدول html تبدیل نماییم.

border-color

توسط خاصیت border-color می توانیم رنگ در حاشیه یا رنگ در border را در تگ html مربوطه تعیین نماییم.

border-image

خاصیت border-image اجازه می دهد تا یک تصویر را برای حاشیه اطراف یک تگ html مشخص کنیم.

border-image-outset

توسط خاصیت border-image-outset می توانیم حاشیه تصویری را در خارج از سطح یک تگ html گسترش دهیم.

border-image-repeat

توسط خاصیت border-image-repeat می توانیم چگونگی تغییر سایز و چینش تکه های حاشیه تصویری را در یک تگ htmlتعیین کنیم.

border-image-slice

توسط خاصیت border-image-slice می توانیم تصویری که به عنوان حاشیه تگ html تعیین شده است را به 9 قسمت تقسیم کنیم.

border-image-source

توسط خاصیت border-image-source می توانیم آدرس تصویری که در حاشیه یک تگ html ، جای می گیرد را تعیین کنیم.

border-image-width

توسط خاصیت border-image-width می توانیم اندازه تکه های حاشیه تصویری در یک تگ html را با مقدار دهی بزرگ یا کوچک کنیم.

border-left

توسط خاصیت border-left می توانید سه مقدار ضخامت ، استایل و رنگ در حاشیه چپ یا border چپ را در یک تگ html تعیین نمایید.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

border-left-color

توسط خاصیت border-left-color می توانیم رنگ حاشیه چپ یا رنگ border چپ را در یک عنصر html تعیین نماییم.

border-left-style

توسط خاصیت border-left-style می توانیم استایل حاشیه چپ یا استایل border چپ یک تگ html را تعیین می نماییم.

border-left-width

توسط خاصیت border-left-width می توانیم ضخامت حاشیه چپ یا ضخامت border چپ یک تگ html را تعیین می نماییم.

border-radius

توسط خاصیت border-radius می توانیم گوشه های بالا ، پایین ، راست و چپ یک تگ html را گرد کنیم.

border-right

توسط خاصیت border-right می توانید سه مقدار ضخامت ، استایل و رنگ در حاشیه راست یا border راست را در یک تگ html تعیین نمایید.

border-right-color

توسط خاصیت border-right-color می توانیم رنگ حاشیه راست یا رنگ border راست را در یک عنصر html تعیین نماییم.

border-right-style

توسط خاصیت border-right-style می توانیم استایل حاشیه راست یا استایل border راست یک تگ html را تعیین می نماییم.

border-right-width

توسط خاصیت border-right-width می توانیم ضخامت حاشیه راست یا ضخامت border راست یک تگ html را تعیین می نماییم.

border-spacing

توسط خاصیت border-spacing می توانیم یک فاصله مشخص بین سلول های یک جدول html که با تگ table تعریف شده است تعیین نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

border-style

توسط خاصیت border-style می توانیم استایل حاشیه یا استایل border یک تگ html را تعیین می نماییم.

border-top

توسط خاصیت border-top می توانید سه مقدار ضخامت ، استایل و رنگ در حاشیه بالا یا border بالا را در یک تگ html تعیین نمایید.

border-top-color

توسط خاصیت border-top-color می توانیم رنگ حاشیه بالا یا رنگ border بالا را در یک عنصر html تعیین نماییم.

border-top-left-radius

توسط خاصیت border-top-left-radius می توانیم گوشه سمت چپ و بالایی یک تگ html را گرد کنیم.

border-top-right-radius

توسط خاصیت border-top-right-radius می توانیم گوشه سمت راست و بالایی یک تگ html را گرد کنیم.

border-top-style

توسط خاصیت border-top-style می توانیم استایل حاشیه بالا یا استایل border بالا یک تگ html را تعیین می نماییم.

border-top-width

توسط خاصیت border-top-width می توانیم ضخامت حاشیه بالا یا ضخامت border بالا یک تگ html را تعیین می نماییم.

border-width

توسط خاصیت border-width می توانیم ضخامت حاشیه یا ضخامت border یک تگ html را تعیین می نماییم.

bottom

توسط خاصیت bottom می توانیم فاصله از پایین را برای آن دسته از تگ های html که خصوصیت position را گرفته اند، از مبدا آنها تعیین نماییم.

box-decoration-break

توسط خاصیت box-decoration-break می توانیم ویژگی های دیگری از جمله background و padding و border و border-image و box-shadow و margin و clip را وقتی که تگ html اینلاین داخل آنها Fragment یا تکه تکه می شود، به چه طریقی در آن تگ html اینلاین تکه تکه شده اعمال بشوند.

box-shadow

از ویژگی box-shadow برای اضافه کردن سایه به یک تگ html یا یک باکس استفاده می شود.

box-sizing

توسط خاصیت box-sizing می توانیم روش اندازه دهی به یک تگ html را که بر اساس مدل قسمت بندی در حالت پیش فرضتعیین می شود، تغییر دهیم.

break-after

 

break-before

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

break-inside

 

caption-side

توسط خاصیت caption-side می توانیم عنوان جدول html را که در داخل تگ table با تگ caption تعیین شده است را، جهت دهی کنیم.

caret-color

توسط خاصیت caret-color می توانیم رنگ نشانگر چشمک زنی که در تگ های قابل ویرایش ( دارای خصوصیت contenteditable ) و تگ هایی که ورودی می پذیرند همچون تگ input و تگ textarea تغییر دهیم.

charset@

توسط خاصیت charset@ می توانیم کاراکترست را در زبان طراحی سی اس اس تعریف کنیم. و انکدینگ زبان مورد نظر را در زبان css مشخص می کنیم.

clear

ویژگی clear می تواند اطراف تگ html شناور را که با خاصیت float تعریف کردید، پاکسازی کند. در این حالت تگ های html دیگر به پایین تگ html شناور سقوط می کنند.

clip

با خصوصیت clip می توانیم مشکل بزرگ بودن تصاویر یا محتوایی که در محدوده تگ html با موقعیت absolute قرار نمی گیرند را حل کرده و به شکل مستطیل آنها را برش دهیم.

color

توسط خاصیت color می توانیم رنگ متن را در یک تگ html تعیین کنیم.

column-count

ویژگی column-count می تواند تعداد ستون ها را برای محتوای تگ html مورد نظر تعیین کند.

column-fill

ویژگی column-fill می تواند چیدمان ستون ها را برای محتوای تگ html مورد نظر از منظر ارتفاع تعیین کند.

column-gap

ویژگی column-gap می تواند فاصله بین ستون های محتوای تگ html مورد نظر را تعیین کند.

column-rule

ویژگی column-rule می تواند خطی بین ستون های محتوای تگ html مورد نظر جهت تشخیص بهتر فاصله بین ستون هاایجاد کند.

column-rule-color

ویژگی column-rule-color می تواند رنگ خطوط بین ستون های محتوای تگ html مورد نظر را جهت تشخیص بهتر فاصله بین ستون ها تعیین کند.

column-rule-style

ویژگی column-rule-style می تواند یک سبک یا استایل برای خطوط بین ستون های محتوای تگ html مورد نظر جهت تشخیص بهتر فاصله بین ستون ها تعیین کند.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

column-rule-width

ویژگی column-rule-width می تواند ضخامت خطوط بین ستون های محتوای تگ html مورد نظر را جهت تشخیص بهتر فاصله بین ستون ها تعیین کند.

column-span

ویژگی column-span می تواند محدوده پوشش عنصری که در داخل تگی با محتوای ستونی قرار گرفته را در داخل ستون و یا در خارج از ستون تعیین کند.

column-width

ویژگی column-width می تواند عرض ستون ها را برای محتوای تگ html مورد نظر تعیین کند.

columns

ویژگی columns می تواند تعداد ستون ها و عرض ستون ها را برای محتوای تگ html مورد نظر تعیین کند.

content

خاصیت content همراه با عناصر کاذب before:: و after:: جهت تولید محتوا در قبل یا بعد تگ های html کاربرد دارد.

counter-increment

با استفاده از خصوصیت counter-increment می توانیم تعیین کنیم که شمارنده چندتا چندتا افزایش یا کاهش پیدا کند.

counter-reset

با استفاده از خصوصیت counter-reset می توانیم نام و تنظیم مجدد شمارنده در زبان طراحی سی اس اس را تعیین کنیم.

cursor

توسط خاصیت cursor می توانیم شکل ظاهری مکان نما یا نمایشگر موس را در زمانی که موس روی تگ html مورد نظر قرار می گیرد، تعیین نماییم.

direction

توسط خاصیت direction می توانیم جهت نوشتن را در یک تگ html تعیین کنیم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

display

خصوصیت display در سی اس اس برای چگونگی نمایش و مشخص کردن چارچوب تگ های html به کار می رود.

empty-cells

توسط خاصیت empty-cells می توانیم تعیین کنیم که حاشیه یا border سلول های یک جدول html نمایش داده شود یا خیر.

filter

به کمک خاصیت filter در CSS3 می توانیم عناصر html را قبل از نمایش در صفحه وب  به شیوه دلخواه خود پردازش و رندر نماییم.

flex

توسط خاصیت flex می توانیم آیتم ها یا تگ های html درون یک تگ container پدری ، با حالت Flexbox صفحه آرایی نماییم.

flex-basis

توسط خاصیت flex-basis می توانیم ارتفاع اولیه تگ های html که به صورت فلکس باکس صفحه آرایی می شوند، را تعیین کنیم.

flex-direction

توسط خاصیت flex-direction می توانیم آیتم ها یا تگ های html درون یک تگ container پدری ، که در حالت فلکس باکسصفحه آرایی می شوند را، چیدمان افقی یا عمودی نماییم.

flex-flow

توسط خاصیت flex-flow می توانیم آیتم ها یا تگ های html درون یک تگ container پدری ، که در حالت فلکس باکس صفحه آرایی می شوند را، چیدمان افقی یا عمودی نموده و یا آنها را کنار هم در یک خط و یا به خط بعدی منتقل نماییم.

flex-grow

توسط خاصیت flex-grow می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container پدری صفحه آرایی شدند را افزایش دهیم.

flex-shrink

توسط خاصیت flex-shrink می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container پدری صفحه آرایی شدند را کاهش دهیم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

flex-wrap

توسط خاصیت flex-wrap می توانیم آیتم ها یا تگ های html درون یک تگ container پدری ، که در حالت فلکس باکس صفحه آرایی می شوند را، در یک خط کنار هم بیاوریم و یا به خط بعدی منتقل نماییم.

float

توسط خاصیت float می توانیم تگ یا تگ های html را به سمت راست یا چپ تگ نگهدارنده خود شناور کرده و یا هل دهیم.

font

توسط خاصیت font می توانیم برخی صفات فونت در زبان سی اس اس را بر روی یک تگ html مختصرنویسی نماییم.

font-face@

توسط خاصیت font-face@ می توانیم فونت های دلخواه و سفارشی را در زبان سی اس اس تعریف کنیم.

font-family

توسط خاصیت font-family می توانیم اسم یک فونت را برای یک تگ html تعیین نماییم.

font-feature-settings

 

font-feature-values@

 

font-kerning

توسط خاصیت font-kerning می توانیم فاصله بین حروف یک فونت را براساس مقدار font-kerning در مرورگر کاربر برای تگ html مورد نظر تعریف کنیم.

font-language-override

 

font-size

توسط خاصیت font-size می توانیم اندازه یک فونت را بر روی یک تگ html تعریف نمود.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

font-size-adjust

خصوصیت font-size-adjust به شما امکان کنترل بهتر اندازه فونت را می دهد زمانی که اولین فونت انتخاب شده در دسترس نیست.

font-stretch

توسط خاصیت font-stretch می توانیم اشکال مختلف یک فونت را براساس عرض کاراکترها بر روی تگ html مورد نظر انتخابکنیم.

font-style

توسط خاصیت font-style می توانیم استایل یک فونت استاندارد را به سبک ایتالیک ( خط کج ) ، مورب ( اریب ) و یا نرمال ( عادی ) بر روی یک تگ html تعریف نماییم.

font-synthesis

 

font-variant

توسط خاصیت font-variant می توانیم تعیین کنیم که حروف بزرگ انگلیسی با اندازه کوچک تر نمایش داده شود.

font-variant-alternates

 

font-variant-caps

 

font-variant-east-asian

 

font-variant-ligatures

 

font-variant-numeric

 

font-variant-position

 

font-weight

توسط خاصیت font-weight می توانیم ضخامت یک فونت را که به وزن فونت نیز معروف می باشد، بر روی یک تگ html تعریف نماییم.

grid

توسط خاصیت grid می توانیم لیستی از شماره و عرض ردیف ها و ستون ها و چیدمان عناصر نام گذاری شده برای آیتم های گریدمشخص نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

grid-area

توسط خاصیت grid-area می توانیم مکان و اندازه شروع و انتهای ردیف و ستون آیتم های گرید ( grade ) را مشخص نماییم.

grid-auto-columns

توسط خاصیت grid-auto-columns می توانیم عرض و ارتفاع ترک های ضمنی ستونی آیتم های گرید را مشخص نماییم.

grid-auto-flow

توسط خاصیت grid-auto-flow می توانیم مکان آیتم های گرید که به شکل واضح مشخص نشده اند را به صورت خودکار مشخص نماییم.

grid-auto-rows

توسط خاصیت grid-auto-rows می توانیم عرض و ارتفاع ترک های ضمنی ردیفی آیتم های گرید را مشخص نماییم.

grid-column

توسط خاصیت grid-column می توانیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و شروع و انتهای ستون آیتم های گرید ( grade ) را مشخص نماییم.

grid-column-end

توسط خاصیت grid-column-end می توانیم اندازه خط ستون انتهای یک آیتم گرید را مشخص نماییم.

grid-column-gap

توسط خاصیت grid-column-gap می توانیم فاصله بین ستونی آیتم های گرید ( grade ) را مشخص نماییم.

grid-column-start

توسط خاصیت grid-column-start می توانیم اندازه خط ستون شروع یک آیتم گرید را مشخص نماییم.

grid-gap

توسط خاصیت grid-gap می توانیم فاصله بین ردیف و ستون آیتم های گرید ( grade ) را مشخص نماییم.

grid-row

توسط خاصیت grid-row می توانیم یک شماره با span ( ترک ) و یا یک شماره خط جهت تعیین اندازه و شروع و انتهای ردیف آیتم های گرید ( grade ) را مشخص نماییم.

grid-row-end

توسط خاصیت grid-row-end می توانیم اندازه خط ردیف انتهای یک آیتم گرید را مشخص نماییم.

grid-row-gap

توسط خاصیت grid-row-gap می توانیم فاصله بین ردیفی آیتم های گرید ( grade ) را مشخص نماییم.

grid-row-start

توسط خاصیت grid-row-start می توانیم اندازه خط ردیف شروع یک آیتم گرید را مشخص نماییم.

grid-template

توسط خاصیت grid-template می توانیم لیستی از شماره و عرض ردیف ها و ستون ها و چیدمان عناصر نام گذاری شده برای آیتم های گرید مشخص نماییم.

grid-template-areas

توسط خاصیت grid-template-areas می توانیم یک رشته ( string ) چیدمانی برای آیتم های گرید که توسط خصوصیت grid-area نام گذاری شده اند، تعیین نماییم.

grid-template-columns

توسط خاصیت grid-template-columns می توانیم لیستی از شماره و عرض ستون ها را برای آیتم های گرید مشخص نماییم.

grid-template-rows

توسط خاصیت grid-template-rows می توانیم لیستی از شماره و عرض ردیف ها را برای آیتم های گرید مشخص نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

hanging-punctuation

 

height

توسط خاصیت height می توانیم اندازه ارتفاع محتوا در تگ html مربوطه را مشخص نماییم.

hyphens

توسط خاصیت hyphens می توانیم در مرورگر یک خط تیره برای متونی که به خط بعدی می روند تعیین نماییم.

image-rendering

 

import@

توسط قانون کاربردی import@ می توانیم یک فایل سی اس اس را در فایل سی اس اس دیگر ادغام یا ترکیب نماییم.

isolation

توسط خاصیت isolation می توانیم گروهی از تگ های html را در مقابل آمیخته شدن با محتوای پشت سرشان ایزوله کنیم.

justify-content

به کمک ویژگی justify-content در CSS3 می توانیم عناصر داخلی را نسبت به محور اصلی ( main-axis ) ، هم ترازسازی کنیم.

keyframes@

توسط قانون کاربردی keyframes@ می توانیم یک کد انیمیشن مشخص نماییم. این انیمیشن یک نوع تغییر شکل تدریجی در مجموعه ای از سبک های css به سبک های css دیگر هست.

left

توسط خاصیت left می توانیم فاصله از چپ را برای آن دسته از تگ های html که خصوصیت position را گرفته اند، از مبدا آنها تعیین نماییم.

letter-spacing

توسط خاصیت letter-spacing می توانیم فاصله بین حروف یک کلمه را بر روی یک تگ html تعریف نماییم.

line-break

 

line-height

به کمک خاصیت line-height در CSS1 می توانیم ارتفاع ردیف های یک نوشته را درون یک تگ html مشخص کنیم.

list-style

به کمک خاصیت list-style می توانیم تصویر ، مکان و نوع نشانه گر آیتم های لیست را درون تگ های html مشخص کنیم.

list-style-image

به کمک خاصیت list-style-image در CSS1 می توانیم تصویری برای نشانه گر آیتم های یک لیست درون یک تگ html مشخص کنیم.

list-style-position

به کمک خاصیت list-style-position می توانیم مکان نشانه گر آیتم های لیست را در خارج یا داخل باکس اصلی یک تگ html مشخص کنیم.

list-style-type

به کمک خاصیت list-style-type می توانیم نوع نشانه گر آیتم های لیست را در یک تگ html مشخص کنیم.

margin

خصوصیت margin ، فضای بیرونی بین تگ های html را تعیین می کند.

margin-bottom

توسط خاصیت margin-bottom می توانیم عرض فضای خارجی پایین تگ html را مشخص نماییم.

margin-left

توسط خاصیت margin-left می توانیم عرض فضای خارجی چپ تگ html را مشخص نماییم.

margin-right

توسط خاصیت margin-right می توانیم عرض فضای خارجی راست تگ html را مشخص نماییم.

margin-top

توسط خاصیت margin-top می توانیم عرض فضای خارجی بالا در تگ html را مشخص نماییم.

max-height

توسط خاصیت max-height می توانیم یک ارتفاع حداکثر را برای محتوا در تگ html مربوطه مشخص نماییم.

max-width

توسط خاصیت max-width می توانیم یک عرض حداکثر را برای محتوا در تگ html مربوطه مشخص نماییم.

media@

 

min-height

توسط خاصیت min-height می توانیم یک ارتفاع حداقل را برای محتوا در تگ html مربوطه مشخص نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

min-width

توسط خاصیت min-width می توانیم یک عرض حداقل را برای محتوا در تگ html مربوطه مشخص نماییم.

mix-blend-mode

به کمک خاصیت mix-blend-mode در CSS3 می توانیم مشخص کنیم چگونه محتوای یک عنصر html را با پس زمینه والد مستقیم آن ترکیب شود.

object-fit

به کمک خاصیت object-fit می توانیم برای محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elementsابعاد مشخصی تعیین کنیم.

object-position

به کمک خاصیت object-position می توانیم محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elements ) را ترازبندی کنیم.

opacity

به کمک خاصیت opacity می توانیم درجه شفافیت یک تگ html را تعیین کنیم. ما می توانیم میزان شفافیت عنصر html را تا حدناپدید شدن عنصر کنترل نماییم.

order

به کمک خاصیت order می توانیم ترتیب نمایش عنصرهای داخلی آیتم های فلکس را بدون تغییر در ساختار HTML عوض کنیم.

orphans

 

outline

به کمک خاصیت outline می توانیم رنگ ، عرض ، اندازه و سبک یا استایل خط بیرونی عنصر html را تعیین نماییم.

outline-color

به کمک خاصیت outline-color می توانیم رنگ خط بیرونی عنصر html را تعیین نماییم.

outline-offset

به کمک خاصیت outline-offset می توانیم فاصله بین خط بیرونی ( outline ) و border عنصر html را تعیین نماییم.

outline-style

به کمک خاصیت outline-style می توانیم سبک یا استایل خط بیرونی عنصر html را تعیین نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

outline-width

به کمک خاصیت outline-width می توانیم عرض خط بیرونی عنصر html را تعیین نماییم.

overflow

به کمک خاصیت overflow می توانیم تعیین نماییم، محتوای عنصر html که خارج از مرز های تگ اچ تی ام ال ( بالا ، پایین ، راست و چپ ) قرار گرفته است، نمایش داده شود یا خیر.

overflow-wrap

 

overflow-x

به کمک خاصیت overflow-x می توانیم نحوه نمایش محتوای عناصر html که خارج از مرز چپ و راست افتادند، را تعیین نماییم.

overflow-y

به کمک خاصیت overflow-y می توانیم نحوه نمایش محتوای عناصر html که خارج از مرز بالا و پایین افتادند، را تعیین نماییم.

padding

توسط خاصیت padding می توانیم عرض فضای داخلی عنصر html را در چهار جهت اصلی ( بالا ، پایین ، راست ، چپ ) مشخص نماییم.

padding-bottom

توسط خاصیت padding-bottom می توانیم عرض فضای داخلی پایین تگ html را مشخص نماییم.

padding-left

توسط خاصیت padding-left می توانیم عرض فضای داخلی چپ تگ html را مشخص نماییم.

padding-right

توسط خاصیت padding-right می توانیم عرض فضای داخلی راست تگ html را مشخص نماییم.

padding-top

توسط خاصیت padding-top می توانیم عرض فضای داخلی بالا در عنصر html را مشخص نماییم.

 

لیست کامل ویژگی های CSS

page-break-after

به کمک خاصیت page-break-after می توانیم رفتار مربوط به شکسته شدن صفحه ( رفتن به صفحه بعد ) را بعد از یک تگ html تنظیم نماییم.

page-break-before

به کمک خاصیت page-break-before می توانیم رفتار مربوط به شکسته شدن صفحه ( رفتن به صفحه بعد ) را قبل از یک تگ html تنظیم نماییم.

 

لیست کامل ویژگی های CSS

page-break-inside

به کمک خاصیت page-break-inside می توانیم رفتار مربوط به شکسته شدن صفحه ( رفتن به صفحه بعد ) را در داخل یک تگ html تنظیم نماییم.

perspective

به کمک خاصیت perspective در CSS3 می توانیم یک فضای سه بعدی برای عنصر html مورد نظر فعال نماییم.

perspective-origin

به کمک خاصیت perspective-origin در CSS3 می توانیم مشخص نماییم که عنصر html سه بعدی ، روی محور x و y از کجا شروع شود.

pointer-events

به کمک خاصیت pointer-events می توانیم رویداد های نشانگر موس را در عناصر html کنترل نماییم.

position

توسط خاصیت position می توانیم موقعیت مکانی یک تگ html را در جهات مختلف تعیین نماییم.

quotes

به کمک خاصیت quotes می توانیم با ایجاد مقادیر رشته ای ، نوع یا علامت کوتیشن را که درون یک عنصر html مشخص نماییم.

resize

به کمک خاصیت resize می توانیم اندازه تگ های html که قابلیت تغییر اندازه توسط کاربر دارند را تغییر دهیم.

right

توسط خاصیت right می توانیم فاصله از راست را برای آن دسته از تگ های html که خصوصیت position را گرفته اند، از مبدا آنها تعیین نماییم.

scroll-behavior

به کمک خاصیت scroll-behavior می توانیم مشخص کنیم که وقتی یک کاربر روی یک پیوند در یک باکس قابل اسکرول کلیک می کند، آیا به جای یک پرش مستقیم، می تواند، نوع حرکت اسکرول را در تگ html مربوطه تحریک کند.

tab-size

به کمک خاصیت tab-size می توانیم عرض کاراکتر تب را در برخی عناصر html مشخص نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

table-layout

به کمک خاصیت table-layout در CSS2 می توانیم الگوریتم یا چارت ستون های یک جدول html را از حالت پیش فرض تغییر دهیم.

text-align

به کمک خاصیت text-align می توانیم نحوه چیدمان متن عنصر اچ تی ام ال را درون سند html در موقعیت راست ، چپ ، وسط و یا تراز راست و چپ مشخص نماییم.

text-align-last

توسط خاصیت text-align-last در CSS3 می توانیم موقعیت آخرین خط متن یک تگ html را تعیین نماییم.

text-combine-upright

 

text-decoration

به کمک خاصیت text-decoration می توانیم رنگ ، موقعیت و سبک خط را بر ( رو ، بالا و یا پایین متن نوشته ) در تگ htmlمربوطه تعیین نماییم.

text-decoration-color

به کمک خاصیت text-decoration-color می توانیم رنگ خطی که بوسیله این خصوصیت بر روی یک نوشته ، بالای نوشته و یا پایین نوشته یک تگ html قرار گرفته را تعیین نماییم.

text-decoration-line

به کمک خاصیت text-decoration-line می توانیم موقعیت خط متن را بر ( روی متن نوشته ، بالای متن نوشته و یا پایین متن نوشته ) در تگ html مربوطه تعیین نماییم.

text-decoration-style

به کمک خاصیت text-decoration-style می توانیم سبک یا استایل خط متن یک نوشته که توسط خصوصیت text-decoration در بالای متن نوشته ، پایین متن نوشته یا بر روی متن نوشته در یک تگ html ایجاد می شود، را تعیین نماییم.

text-indent

به کمک خاصیت text-indent می توانیم میزان تورفتگی نوشته در تگ html را درون سند html تعیین نماییم.

text-justify

به کمک خاصیت text-justify می توانیم وضعیت متن تراز شده در یک تگ اچ تی ام ال را تعیین نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

text-orientation

 

text-overflow

به کمک خاصیت text-overflow می توانیم تا زمانی که متن از عنصر html نگهدارنده اش سرریز می شود، کاربر را با خبر کنیم.

text-shadow

از خاصیت text-shadow در CSS3 ، برای سایه دار کردن متن و نوشته در صفحات وب استفاده می شود.

text-transform

از خاصیت word-spacing در CSS3 جهت تعیین حروف کوچک یا بزرگ درون متن یک تگ html استفاده می شود.

text-underline-position

 

top

توسط خاصیت top می توانیم فاصله از بالا را برای آن دسته از تگ های html که خصوصیت position را گرفته اند، از مبدا آنها تعیین نماییم.

transform

به کمک خاصیت transform در CSS3 می توانیم منجر به تغییر شکل یا تغییر مکان یا تغییر وضعیت یک عنصر html در فضای سه بعدی یا دوبعدی شویم.

transform-origin

به کمک خاصیت transform-origin در CSS3 می توانیم مبدا مختصات تغییر شکل یا انیمیشن را در تگ html تعیین نماییم.

transform-style

به کمک خاصیت transform-style در CSS3 می توانیم تعیین کنیم که فرزندان یک تگ html پدر در حالت سه بعدی یا دوبعدی قرار گیرند.

transition

خاصیت transition در css3 جهت تعیین افکت تغییر یا ترانزیشن در تگ html به کار می رود.

transition-delay

به کمک خاصیت transition-delay در CSS3 می توانیم مدت زمانی برای مکث یا تاخیر در اجرای افکت تغییر یا transition در یک تگ html تعیین نماییم.

transition-duration

به کمک خاصیت transition-duration در CSS3 می توانیم مدت زمانی برای اجرای افکت تغییر یا transition در یک تگ html تعیین نماییم.

transition-property

به کمک خاصیت transition-property در CSS3 می توانیم مدت زمانی برای اجرای افکت تغییر یا transition در یک تگ htmlتعیین نماییم.

transition-timing-function

به کمک خاصیت white-space در CSS3 می توانیم سرعت افکت تغییر یا سرعت ترانزیشن را در تگ html که برایش ترانزیشنتعیین نمودیم، تغییر دهیم.

unicode-bidi

به کمک خاصیت unicode-bidi در CSS2 می توانیم متن تگ های html که با دو زبان مختلف در دو جهت مختلف هستند را کنترلکنیم.

user-select

به کمک خاصیت user-select می توانیم انتخاب یا عدم انتخاب متون داخل تگ های html را توسط کاربر کنترل نماییم.

vertical-align

به کمک خاصیت vertical-align در CSS1 می توانیم عناصردرون خطی یا اینلاین html را در راستای عمود ترازبندی نماییم.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

visibility

به کمک خاصیت visibility در CSS2 می توانیم قابلیت نمایانی یا عدم نمایانی یک تگ html را تعیین تعیین نماییم.

white-space

به کمک خاصیت white-space در CSS1 می توانیم فضاهای خالی متن یا space ها یا tab های متن را درون یک تگ htmlمدیریت کنیم.

widows

 

width

توسط خاصیت width می توانیم اندازه عرض محتوا در تگ html مربوطه را مشخص نماییم.

word-break

به کمک خاصیت word-break می توانیم مشخص کنیم که یک کلمه از محتوای تگ html مربوطه در انتهای خط با شکست به خط بعدی مواجه شود یا خیر.

word-spacing

از خاصیت word-spacing در CSS3 جهت تعیین فاصله بین کلمات متن در یک تگ اچ تی ام ال استفاده می شود.

word-wrap

به کمک خاصیت word-wrap در CSS3 می توانیم کلماتی با طول بلند که در یک خط جا نمی شوند، را شکسته و در خط بعدینمایش دهیم.

writing-mode

از خاصیت writing-mode در CSS3 جهت تغییر جهت نوشته از بالا به پایین در یک تگ html کاربرد دارد.

z-index

از ویژگی z-index جهت تعیین ترتیب عناصر html زمانی که روی هم قرار می گیرند، استفاده می شود.

 

لیست کامل ویژگی های CSS | صفات CSS | صفات CSS3

 منبع : وبسایت سایت آموزی

تاریخ انتشار: دوشنبه, ۲۲ ارديبهشت ۱۳۹۹، ۱۰:۲۵ ب.ظ نویسنده: محمدیان

تگ های پایه HTML
تعریف نوع سند <!DOCTYPE>
تعریف یک سند HTML <html>
تعریف اطلاعات مربوط به سند <head>
تعریف یک عنوان برای سند <title>
تعریف بدنه اصلی سند <body>
تعریف تیتر عناوین سرصفحه <h1> ... to ... <h6>
تعریف یک پاراگراف <p>
درج یک شکست خط (حالت اینتر زدن) <br>
تعریف تغییر موضوع یا جدا کردن محتوای صفحه از یکدیگر <hr>
درج یادداشت یا همان کامنت <!-- ... -->

 

تگ های قالب بندی متن
توضیحات خواص تگ
کلمه ای که مخفف چند کلمه است   <abbr>
درج اطلاعات تماس نویسنده، صاحب سند یا مقاله   <address>
ضخیم یا شاخص کردن قسمتی از متن   <strong>
جدا کردن بخشی از متن که ممکن است جهتش تغییر کند   <bdi>
جهت فعلی متن را نادیده میگیرد و حروف را برعکس میچیند   <bdo>
تعریف بخشی از متن که از جای دیگری (منبع دیگری) نقل شده است cite <blockquate>
تعریف عنوان یک اثر   <cite>
تکه ای از متن که فونت زبان ماشین (کد کامپیوتر) دارد   <coed>
تعریف متنی که از سند حذف شده است. (متن خط خورده) cite - datetime <del>
نمونه تعیین کننده یک اصطلاح را نشان میدهد (فونت متفاوت)   <dfn>
تعریف یک متن تاکید شده (فونت متفاوت)   <em>
تعریف بخشی از متن با حالت مفهومی مثل آیکن ها   <i>
تعریف متنی که در یک سند درج شده است، (زیر خط دار) بر عکس <del> cite - datetime <ins>
تعریف ورودی صفحه کلید با فونت کامپیوتری   <kbd>
هایلایت کردن قسمتی از متن   <mark>
تعریف یک مقیاس اندازه گیری در یک محدوده مشخص form - high - low - min - max - optimum - value <meter>
تعریف یک متن قالب بندی و پیش فرمت شده   <pre>
تعریف پیشرفت یک کار یا پروسه را نشان میدهد form - high - low - min - max - optimum - value <progress>
تعریف یک نقل قول کوتاه cite <q>
حاشیه نویسی روبی   <rp>
مربوط به زبانهای آسیای شرقی مثل چین و ژاپن   <rt>
حاشیه نویسی روبی   <ruby>
متنی را تعریف میکند که گزاره درستی نیست، اما قبلا درست بوده   <s>
خروجی نمونه از یک برنامه کامپیوتری با فونت مخصوص   <samp>
متن با اندازه کوچک   <small>
متن یا کلمه ای که زیر مجموعه متن یا کلمه دیگری است (پائین متن والد)   <sub>
متن یا کلمه ای که زیر مجموعه متن یا کلمه دیگری است (بالای متن والد)   <sup>
تعریف یک قالب (توسط کلاینت قابل مشاهده نیست)   <template>
تعریف یک عنصر برای نمایش زمان datetime <time>
تعریف یک متن زیرخط دار   <u>
تعریف متنی که نام یک متغیر را نشان میدهد   <var>
تعریف یک شکست خط احتمالی   <wbr>

توضیح تگ meterr : اگر مقدار از low کمتر باشد و optimum از high بیشتر باشد (رنگ قرمز میشود). اگر مقدار از high بیشتر باشد و optimum از low کمترباشد (رنگ قرمز میشود). بقیه مقادیر با رنگ زرد و سبز نمایش داده میشوند. موارد کاربردی : مثلاً مصرف دیسک و نمرات.

میتوان با طول و عرض و سایه به آن استایل و انیمیشن داد.

تگ های فرم و ورودی ها

توضیحات خواص تگ
تعریف یک فرم html برای قرار دادن ورودی های کاربر enctype - method - novalidate - onreset - onsubmit - target - accept_charset action - autocomplete - name <form>
تعریف یک کنترل ورودی alt - autocomplete - autofocus - dirname - disabled - form - formaction height - list max - maxlength - min - multiple - name - onload - pattern - placeholder - readonly - required - size - src - step - type - value - width <input>
تعریف یک کنترل ورودی چندخطی autofocus - dirname - disabled - form - maxlength - name - placeholder - readonly - required wrap - cols - rows -  <textarea>
تعریف دکمه قابل کلیک autofocus - disabled - form - formaction - name - type - value <button>
تعریف یک لیست افتادنی dropdown autofocus - disabled - form - multiple - name - required - size <select>
تعریف گروهی از گزینه های مرتبط در یک لیست disabled - label <optgroup>
تعریف یک گزینه درون لیست افتادنی disabled - value - label - selected <option>
تعریف یک برچسب یا عنوان برای عناصر فرم form - for <label>
گروه بندی عناصر مربوط به هم درون یک فرم disabled - name <fieldset>
تعریف یک عنوان برای عنصر <fieldset>   <legend>
لیستی از گزینه های از پیش تعریف شده برای کنترل ورودی را مشخص میکند   <datalist>
تعریف نتیجه یک محاسبه form - for <output>

* خاصیت accept فقط برای تگ input از نوع file قابل استفاده است.

* خاصیت checked برای تگ input از نوع radio و checkbox قابل استفاده است.

* خاصیت یا رویداد onsearch مربوط به تگ input از نوع search میباشد برای زمانیکه کاربر فیلد را پر کرده است.

تگ ایحاد فریم

تعریف یک فریم درون خطی یا inline در صفحه height - name - onload - src - width - sandbox - srcdoc <iframe>

 

تگ های تصاویر - images
توضیحات خواص تگ
تعریف یک تصویر  alt - height - onload - src - width - ismap - usemap <img>
تعریف یک نقشه با مختصات تصویر در سمت کلاینت name <map>
تعریف یک محدوده درون نقشه تصویر alt - coords - download - href - hreflang - media - rel - shape - target <area>
قابل استفاده برای کشیدن گرافیک دلخواه در جاوااسکریپت  height - width <canvas>
تعریف یک عنوان برای عنصر <figure> در بالا و پائین آن   <figcaption>
محتوای مربوط به خود را مشخص میکند   <figure>
یک ظرف برای منایع تصویری متعدد تعریف میکند   <picture>
تعریف یک ظرف برای گرافیک یا تصویر svg   <svg>

 

تگ های صوت و ویدئو
توضیحات خواص تگ
تعریف یک محتوای صوتی رجوع به پائین جدول <audio>
تعریف منبع محتوای چندرسانه ای برای عناصر رسانه مثل audio,video,picture media - sizes - src - srcset - type <source>
تعریف متن آهنگ برای audio, video default - kind - label - oncuechange - srclang <track>
تعریف یک ویدئو یا فیلم رجوع به پائین جدول <video>

خواص مربوط به تگ های audio و video

onvolumechange

onwaiting

preload

src

autoplay

controls

loop

muted

onabort

oncanplay

oncanplaythrough

ondurationchange

onemptied

onended

onerror

onloadeddata

onloadedmetadata

onloadstart

onpause

onplay

onplaying

onprogress

onratechange

onseeked

onseeking

onstalled

onsuspend

ontimeupdate

تگ های لینک - links
توضیحات خواص تگ
تعریف یک لینک anchor target - href - hreflang - rel - onload - media - type <a>
تعریف ارتباط بین یک سند و یک منبع خارجی (معمولاً برای الحاق css به سند html) target - hreflang - rel - onload - media - type - sizes <link>
تعریف مجموعه لینک های ناوبری ----- <nav>

 

تگ های لیست - lists
توضیحات خواص تگ
تعریف یک لیست غیر ترتیبی   <ul>
تعریف یک لیست ترتیبی   <ol>
تعریف یک آیتم لیست   <li>
تعریف یک لیست توضیحی   <dl>
تعریف نام یا اصطلاح (تیتر عنوان) درون لیست توضیحی   <dt>
تعریف توضیحات مربوط به لیست توضیحی   <dd>

 

تگ های جدول - tables
توضیحات خواص تگ
تعریف یک جدول ----- <table>
تعریف عنوان یا برچسب جدول ----- <caption>
تعریف سلول هدر درون یک جدول colspan - headers - rowspan - scope <th>
تعریف یک ردیف در جدول ----- <tr>
تعریف یک سلول در جدول colspan - headers - rowspan <td>
گروه بندی محتوای سرصفحه ------ <thead>
گروه بندی محتوای بدنه جدول ------ <tbody>
گروه بندی محتوای فوتر جدول ------ <tfoot>
خصوصیات ستون را برای هر ستون در داخل عنصر <colgroup> را مشخص می کند ------ <col>
یک گروه از یک یا چند ستون برای قالب بند درون جدول مشخص میکند ----- <colgroup>

 

تگ های استایل و اجزای صفحه
توضیحات خواص تگ
تعریف کدهای استایل css درون سند html media - onerror - onload - type <style>
تعریف یک بخش یا بلوک درون سند   <div>
تعریف یک بخش یا بلوک درون سند   <span>
تعریف هدر برای یک سند یا یک بخش   <header>
تعریف فوتربرای یک سند یا یک بخش   <footer>
محتوای اصلی یک سند را مشخص می کند   <main>
تعریف یک بخش درون یک سند   <section>
تعریف یک مقاله   <article>
محتوای کناری را جدا از محتوای صفحه تعریف میکند   <details>
جزئیات دیگری را تعریف میکند که کاربر میتواند آنرا مشاهده یا مخفی کند   <dialog>
یک کادر یا پنجره گفتگو را تعریف میکند   <summary>
میتوان یک محتوای قابل خواندن یا قابل ترجمه توسط ماشین های مترجم را ایجاد نمود.   <data>

 

تگ های اطلاعات متا
توضیحات خواص تگ
اطلاعات مربوط به سند را تعریف میکند ---- <head>
متادیتا (اطلاعات متا/ابر داده) را در مورد یک سند html تعریف میکند charset - content - http-equiv - name <meta>
مسیر اصلی مربوط به یک سند html را برای کلیه url های نسبی در یک سند مشخص میکند href - target <base>
تگ های مربوط به برنامه نویسی
توضیحات خواص تگ
تگ های اسکریپت سمت کلاینت async - charset - defer - onerror - onload - src - type <script>
محتوای جایگزین برای کاربرانی که مرورگرشان از جاوااسکریپت پشتیبانی نمیکند ----- <noscript>
یک ظرف را برای یک برنامه خارجی (غیر html) تعریف میکند onerror - src - type - height - onabort - oncanplay - width <embed>
یک شی تعبیه شده را تعریف میکند مثلاً فلش swf onerror - src - type - height - onabort - oncanplay - width form <object>
پارامتری را برای یک شی تعریف میکند ----- <param>