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

در کامل ترین دوره تخصصی آموزش طراحی سایت فرانت اند در ایران مطابق با استانداردهای W3C آمریکا ثبت نام کن :

دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 و jQuery

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

شما در این مقاله مرجع با یک جدول کامل از لیست همه خصوصیات css اعم از صفات ورژن های قبلی css ، خواص منسوخ شده css و حتی کلیه صفات جدید css3 آشنا خواهید شد.

به همین منظور مطابق مقاله مرجع لیست کامل صفات HTML ، کلیه خواص قدیمی ، منسوخ شده و جدید css3 را در داخل یک جدول جامع به همراه توضیح کوتاهی از صفت در اختیار خواهید داشت.

همچنین از طریق لینک صفات مربوطه می توانید به برگه توضیحات کامل و جامع صفت css مورد نظر بروید و در مورد آن صفت اختصاصی تر بدانید.

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

لیست کامل تمام صفات کاربردی CSS به ترتیب حروف الفبای انگلیسی و بر اساس آخرین نسخه CSS3

 ویژگی ها در css

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

align-content

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

align-items

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

css و css3

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 تعیین شده است را به ۹ قسمت تقسیم کنیم.

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

تو