لیست کامل ویژگی های css + توضیح و مثال

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با لیست کامل ویژگی های css + توضیح و مثال با من همراه باشید.

لیست کامل ویژگی های css + توضیح و مثال

Free-Learn

لیست کامل ویژگی های CSS | دسته بندی شده

شما دوستان عزیز و محترم در ادامه میتوانید لیست کامل ویژگی های css را به همراه توضیح و مثال آنلاین و بصورت دسته بندی شده مشاهده نمایید.

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

Free-Learn

ویژگی های مربوط به انیمیشن Animation ها

ویژگی توضیح مثال
animation برای خلاصه نویسی ۸ ویژگی زیر مثال
animation-delay یک مدت زمان که باید طول بکشد تا انیمیشن شروع شود مثال
animation-direction جهت اجرای انیمیشن را مشخص میکند مثال
animation-duration مدت زمانی که باید طول بکشد تا انیمیشن تمام شود مثال
animation-fill-mode حذف استایل عناصر در هنگام تموم شدن انیمیشن مثال
animation-iteration-count تعداد دفعات اجرای انیمیشن مثال
animation-name یک نام برای انیمیشن که باید به keyframes وصل شود مثال
animation-play-state مشخص میکند که انیمیشن اجرا شود یا مکث شود مثال
animation-timing-function یک منحنی زمانی برای اجرای انیمیشن مشخص میکند مثال
keyframes@ قوانین / چگونگی اجرا شدن انیمیشن را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به پس زمینه Background ها

ویژگی توضیح مثال
background برای خلاصه نویسی ۸ ویژگی زیر مثال
background-attachment نحوه ضمیمه شدن تصویر زمینه را با صفحه مشخص میکند مثال
background-size اندازه / سایز تصویر زمینه را مشخص میکند مثال
background-clip مشخص میکند که پس زمینه (رنگ یا تصویر)
تا چه حد در یک عنصر گسترش یابد
مثال
background-color رنگ زمینه را مشخص میکند مثال
background-image تصویر زمینه را مشخص میکند مثال
background-origin نقطه مبدا یا شروع تصویر / رنگ زمینه را مشخص میکند مثال
background-position موقعیت قرار گیری تصویر زمینه را مشخص میکند مثال
background-repeat نحوه تکرار شدن تصویر زمینه را مشخص میکند مثال
background-blend-mode برای ترکیب رنگ زمینه با تصویر زمینه مثال

Free-Learn

ویژگی های مربوط به بوردِر Border ها

ویژگی توضیح مثال
border برای خلاصه نویسی ۳ ویژگی زیر مثال
border-color رنگ بوردر ( خط دور لبه ) عنصر را مشخص میکند مثال
border-style شکل شمایل بوردر ( خط دور لبه ) عنصر را مشخص میکند مثال
border-width اندازه بوردر ( خط دور لبه ) عنصر را مشخص میکند مثال
border-bottom برای خلاصه نویسی ۳ ویژگی زیر مثال
border-bottom-color رنگ بوردر پایین ( خط دور لبه ) عنصر را مشخص میکند مثال
border-bottom-style شکل شمایل بوردر پایین ( خط دور لبه ) عنصر را مشخص میکند مثال
border-bottom-width اندازه بوردر پایین ( خط دور لبه ) عنصر را مشخص میکند مثال
border-top برای خلاصه نویسی ۳ ویژگی زیر مثال
border-top-color رنگ بوردر بالا ( خط دور لبه ) عنصر را مشخص میکند مثال
border-top-style شکل شمایل بوردر بالا ( خط دور لبه ) عنصر را مشخص میکند مثال
border-top-width اندازه بوردر بالا ( خط دور لبه ) عنصر را مشخص میکند مثال
border-right برای خلاصه نویسی ۳ ویژگی زیر مثال
border-right-color رنگ بوردر راست ( خط دور لبه ) عنصر را مشخص میکند مثال
border-right-style شکل شمایل بوردر راست ( خط دور لبه ) عنصر را مشخص میکند مثال
border-right-width اندازه بوردر راست ( خط دور لبه ) عنصر را مشخص میکند مثال
border-left برای خلاصه نویسی ۳ ویژگی زیر مثال
border-left-color رنگ بوردر چپ ( خط دور لبه ) عنصر را مشخص میکند مثال
border-left-style شکل شمایل بوردر چپ ( خط دور لبه ) عنصر را مشخص میکند مثال
border-left-width اندازه بوردر چپ ( خط دور لبه ) عنصر را مشخص میکند مثال
border-image برای خلاصه نویسی ۵ ویژگی زیر مثال
border-image-outset میزان فضای خالی بین تصویر دور لبه و محتوای داخل عنصر مثال
border-image-repeat چگونگی تکرار شدن تصویر دور لبه عنصر را مشخص میکند مثال
border-image-slice نحوه بُرش خوردن تصویر دور لبه عنصر را مشخص میکند مثال
border-image-source مسیر / آدرس تصویر دور لبه عنصر را مشخص میکند مثال
border-image-width اندازه تصویر دور لبه عنصر را مشخص میکند مثال
border-radius برای خلاصه نویسی ۴ ویژگی زیر مثال
border-top-left-radius برای گرد کردن لبه بالا سمت چپ مثال
border-top-right-radius برای گرد کردن لبه بالا سمت راست مثال
border-bottom-left-radius برای گرد کردن لبه پایین سمت چپ مثال
border-bottom-right-radius برای گرد کردن لبه پایین سمت راست مثال

Free-Learn

ویژگی های مربوط به جدول ها Table ها

ویژگی توضیح مثال
border-collapse باعث میشه فقط یک خط به دور لبه جدول و سلول های جدول کشیده شود مثال
border-spacing میزان فاصله بین دیواره های سلول های جدول مثال
caption-side سمت قرار گیری کپشن / عنوان جدول را مشخص میکند مثال
empty-cells نحوه نمایش سلول های خالی را مشخص میکند مثال
table-layout چگونگی نمایش ستون ، سطرهای جدول را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به موقعیت دهی عناصر Position ها

ویژگی توضیح مثال
position موقعیت عنصر را مشخص میکند مثال
top موقعیت قرار گیری عنصر از سمت بالا مثال
bottom موقعیت قرار گیری عنصر از سمت پایین مثال
left موقعیت قرار گیری عنصر از سمت چپ مثال
right موقعیت قرار گیری عنصر از سمت راست مثال
float برای شناور کردن عناصر در سمت راست یا چپ مثال
clear مشخص میکند که در کدام سمت ، شناور شدن عناصر مجاز نیست مثال

Free-Learn

ویژگی های مربوط به فونت ها و متن ها Font / Text

ویژگی توضیح مثال
font برای برای تعریف نام فامیلی ، اندازه و.. فونت مثال
font-face@ برای تعریف فونت در یک صفحه وب مثال
font-family برای تعریف نام فامیلی ( خانواده ) فونت مثال
font-feature-settings اعمال یکسری تنظیمات پیشرفته بروی فونت
font-kerning میزان فضا ( فاصله ) بین کاراکترهای فونت را مشخص میکند
font-size اندازه فونت را مشخص میکند مثال
font-size-adjust میزان خوانایی فونت را به نسبت ابعاد صفحه مشخص میکند مثال
font-stretch میزان کشیدگی بین کاراکترهای فونت را مشخص میکند
font-style استایل / سبک فونت را مشخص میکند مثال
font-variant مشخص میکند که متن با حروف بزرگ نمایش داده شود مثال
font-variant-caps مشخص میکند که متن با حروف بزرگ نمایش داده شود مثال
font-weight برای مشخص کردن میزان وزن یک فونت مثال
letter-spacing برای ایجاد فاصله بین حروف / کاراکترهای متن مثال
line-height برای ایجاد فاصله بین سطر ( لاین های ) متن مثال
quotes استایل نقل قول های جاسازی شده در متن را مشخص میکند مثال
tab-size میزان اندازه کلید Tab ( به ازای کلید Tab که فشرده شود ) مثال
text-align تراز متن را بصورت افقی مشخص میکند مثال
text-align-last تراز سطر آخر متن را بصورت افقی مشخص میکند مثال
text-decoration برای خلاصه نویسی ۳ ویژگی زیر مثال
text-decoration-color رنگ خط ( دکوراسیون ) متن را مشخص میکند مثال
text-decoration-line خط ( دکوراسیون ) متن را مشخص میکند مثال
text-decoration-style استایل خط ( دکوراسیون ) متن را مشخص میکند مثال
text-indent میزان تورفتگی در سطرهای یک متن را مشخص میکند مثال
text-justify نحوه justify شدن متن را در هنگام استفاده از justify مشخص میکند مثال
text-overflow چگونگی سرریز شدن متن را مشخص میکند مثال
text-shadow برای ایجاد سایه برای متن مثال
text-transform برای تبدیل کردن حروف کوچک به بزرگ متن و یا برعکس مثال
white-space برای کنترل فضای سفید موجود در متن مثال
word-break نحوه شکسته شدن کلمات طولانی به سطر بعدی مثال
word-spacing فاصله بین کلمات متن را مشخص میکند مثال
word-wrap نحوه شکسته شدن کلمات طولانی به سطر بعدی مثال
writing-mode حالت یا مود نوشتن متن را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به ستون بندی Column ها

ویژگی توضیح مثال
columns برای خلاصه نویسی ۲ ویژگی زیر مثال
column-count تعداد ستون های متن را مشخص میکند مثال
column-width اندازه ستون های متن را مشخص میکند مثال
column-gap ایجاد یک فضای خالی بین ستون های متن مثال
column-rule برای خلاصه نویسی ۳ ویژگی زیر مثال
column-rule-color رنگ خط بین ستون های متن را مشخص میکند مثال
column-rule-style استایل / شکل شمایل خط بین ستون های متن را مشخص میکند مثال
column-rule-width اندازه خط بین ستون های متن را مشخص میکند مثال
column-span برای جلوگیری از ستونی شدن یک عنصر مثال
column-fill نحوه فیت ( تکمیل یا پُر ) شدن ستون ها را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به فلکس Flex ها

ویژگی توضیح مثال
flex برای خلاصه نویسی ۳ ویژگی زیر مثال
flex-basis طول اولیه آیتم فلکس را مشخص میکند مثال
flex-grow میزان رشد کردن آیتم فلکس را مشخص میکند مثال
flex-shrink میزان کوچک شدن آیتم فلکس را مشخص میکند مثال
flex-flow برای خلاصه نویسی ۲ ویژگی زیر مثال
flex-direction جهت قرار گیری آیتم های فلکس را مشخص میکند مثال
flex-wrap نحوه شکسته شدن آیتم های فلکس را به سطر بعدی مشخص میکند مثال
justify-content برای تراز افقی آیتم های فلکس مثال
align-content برای تراز عمودی سطرهای آیتم های فلکس مثال
align-items برای تراز عمودی آیتم های فلکس مثال
align-self برای تراز یک آیتم خاص در ظرف فلکس مثال
order برای سفارشی سازی ترتیب قرارگیری آیتم های فلکس مثال

Free-Learn

ویژگی های مربوط به گرید Grid ها

ویژگی توضیح مثال
grid برای خلاصه نویسی ۶ ویژگی زیر مثال
grid-template-rows تعداد و اندازه سطرهای گرید را مشخص میکند مثال
grid-template-columns تعداد و اندازه ستون های گرید را مشخص میکند مثال
grid-template-areas نمایش آیتم های گرید از طریق نام
( که با استفاده از grid-area مشخص میشود )
مثال
grid-auto-rows اندازه سطرهای گرید را مشخص میکند مثال
grid-auto-columns اندازه ستون های گرید را مشخص میکند مثال
grid-auto-flow نحوه قرار گیری آیتم ها را در ظرف مشخص میکند
( مثلا سطر به سطر یا ستون به ستون )
مثال
grid-area میتوان یک نام را برای آیتم مشخص کرد مثال
grid-row برای خلاصه نویسی ۲ ویژگی زیر مثال
grid-row-start سطر شروع کننده آیتم را مشخص میکند مثال
grid-row-end سطر پایان دهنده آیتم را مشخص میکند مثال
grid-template مثال
grid-gap برای خلاصه نویسی ۲ ویژگی زیر مثال
grid-column-gap میزان فضای خالی بین ستون های گرید مثال
grid-row-gap میزان فضای خالی بین سطرهای گرید مثال
grid-column برای خلاصه نویسی ۲ ویژگی زیر مثال
grid-column-start ستون شروع کننده آیتم را مشخص میکند مثال
grid-column-end ستون پایان دهنده آیتم را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به اندازه دهی عناصر

ویژگی توضیح مثال
width اندازه معمولی عرض یک عنصر را مشخص میکند مثال
height اندازه معمولی ارتفاع یک عنصر را مشخص میکند مثال
max-width بیشترین اندازه عرض یک عنصر را مشخص میکند مثال
max-height بیشترین اندازه ارتفاع یک عنصر را مشخص میکند مثال
min-width کمترین اندازه عرض یک عنصر را مشخص میکند مثال
min-height کمترین اندازه ارتفاع یک عنصر را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به Transform ها و Transition ها

ویژگی توضیح مثال
transition برای خلاصه نویسی ۴ ویژگی زیر مثال
transition-delay مدت زمانی که باید طول بکشد تا عمل انتقال شروع شود مثال
transition-duration مدت زمانی که باید طول بکشد تا عمل انتقال به پایان برسد مثال
transition-property اون ویژگی ای که باید تحت تاثیر عمل انتقال قرار بگیرد را مشخص میکند مثال
transition-timing-function یک منحنی زمانی برای چگونگی اجرا شدن عمل انتقال مثال
transform برای ایجاد حالت های ۲بعدی یا ۳بعدی بروی عناصر مثال
transform-origin موقعیت قرار گیری حالت های بعدی یا ۳بعدی را مشخص میکند مثال
transform-style مشخص میکند که آیا عناصر فرزند در حالت ۲بعدی یا ۳بعدی قرار بگیرند یا خیر مثال

Free-Learn

ویژگی های مربوط به لیست ها List ها

ویژگی توضیح مثال
list-style برای خلاصه نویسی ۳ ویژگی زیر مثال
list-style-image یک تصوبر را برای علامت گذاری آیتم های لیست مشخص میکند مثال
list-style-position موقعیت قرارگیری علامت گذاری آیتم های لیست را مشخص میکند مثال
list-style-type نوع ( حالت ) شکل علامت گذاری آیتم های لیست را مشخص میکند مثال

Free-Learn

ویژگی های مربوط به Margin ها

ویژگی توضیح مثال
margin برای خلاصه نویسی ۴ ویژگی زیر مثال
margin-top ایجاد یک فضای خالی به سمت بالای یک عنصر مثال
margin-right ایجاد یک فضای خالی به سمت راست یک عنصر مثال
margin-bottom ایجاد یک فضای خالی به سمت پایین یک عنصر مثال
margin-left ایجاد یک فضای خالی به سمت چپ یک عنصر مثال

Free-Learn

ویژگی های مربوط به Padding ها

ویژگی توضیح مثال
padding برای خلاصه نویسی ۴ ویژگی زیر مثال
padding-top ایجاد یک فضای خالی بین دیواره عنصر و محتوا از سمت بالا عنصر مثال
padding-right ایجاد یک فضای خالی بین دیواره عنصر و محتوا از سمت راست عنصر مثال
padding-bottom ایجاد یک فضای خالی بین دیواره عنصر و محتوا از سمت پایین عنصر مثال
padding-left ایجاد یک فضای خالی بین دیواره عنصر و محتوا از سمت چپ عنصر مثال

Free-Learn

دیگر ویژگی های CSS | بدون دسته بندی

ویژگی توضیح مثال
all برای ریست کردن استایل یک عنصر مثال
backface-visibility مشخص میکند که آیا قسمت پشتی یک عنصر قابل مشاهده باشد یا خیر مثال
box-decoration-break نحوه نمایش زمینه ها در عناصر درون خطی
در هنگام شکسته شدن به سطرهای بعدی را مشخص میکند
مثال
box-shadow برای عناصر ( خوده عنصر و باکس اصلی ) سایه ایجاد میکند مثال
box-sizing مشخص میکند که آیا اندازه عرض و ارتفاع یک عنصر
باید شامل اندازه های Padding و Border باشد یا خیر
مثال
break-after شکسته شدن صفحه را بعد از یک عنصر خاص مشخص میکند
break-inside شکسته شدن صفحه را داخل یک عنصر خاص مشخص میکند
break-before شکسته شدن صفحه را قبل از یک عنصر خاص مشخص میکند
caret-color رنگ اشاره گر ماوس را مشخص میکند مثال
charset@ نحوه رمزگذاری کاراکترهای مورد استفاده در فایل CSS را مشخص میکند
clip برای بُرش زدن عناصر موقعیت دار ( با موقعیت Absolut ) مثال
color برای مشخص کردن رنگ متن یک عنصر مثال
content برای قرار دادن محتوا در قبل یا بعد از یک عنصر
به کمک شبه کلاس های after:: و before::
مثال
counter-increment برای اضافه کردن یک یا چندین واحد به شمارنده ها مثال
counter-reset برای ایجاد یا ریست کردن شمارنده ها مثال
cursor برای مشخص کردن استایل / شکل شمایل اشاره گر ماوس مثال
direction برای مشخص کردن جهت ( راست چین یا چپ چین ) بودن یک صفحه وب مثال
display برای مشخص کردن حالت نمایش یک عنصر
( مثلا یک عنصر بلاکی باشه یا درون خطی )
مثال
filter برای ایجاد فیلترهای رنگی جذاب بروی عناصر
( معمولا تصاویر )
مثال
hanging-punctuation مشخص میکند که علائم نگارشی موجود در یک متن
در خارج از باکس متن قرار بگیرند یا خیر
hyphens برای ایجاد یک خط پیوند ( – )
به کلماتی که شکسته میشوند، جهت خوانایی بهتر
مثال
import@ برای وارد کردن ( ایمپورت ) فایل های CSS به درون یک فایل CSS دیگر مثال
media@ برای مشخص کردن نوع رسانه ( مثلا صفحه نمایش کامپیوتر یا موبایل )
برای واکنش گرایی صفحات وب
مثال
isolation میتوان از مخلوط شدن عناصر با زمینه ها ( رنگ زمینه ) جلوگیری کرد مثال
mix-blend-mode نحوه مخلوط شدن محتوای یک عنصر با عنصر پدرش را مشخص میکند مثال
object-fit نحوه قرارگیری محتویات یک عنصر جایگزین شده
را در یک باکس ایجاد شده با اندازه عرض و ارتفاع خاص مشخص میکند
مثال
object-position موقعیت قرارگیری محتویات یک عنصر جایگزین شده را مشخص میکند مثال
opacity برای مشخص کردن میزان شفافیت / کدر بودن یک عنصر مثال
overflow برای خلاصه نویسی ۲ ویژگی زیر مثال
overflow-x نحوه سرریز شدن یک عنصر را بصورت افقی مشخص میکند مثال
overflow-y نحوه سرریز شدن یک عنصر را بصورت عمودی مشخص میکند مثال
perspective برای ایجاد یک فضا / حالت ۳D بروی عناصر مثال
perspective-origin زاویه دید / موقعیت قرارگیری فضای ۳D را مشخص میکند مثال
pointer-events مشخص میکند که آیا یک عنصر به اشاره گر ماوس واکنش نشان دهد یا خیر
( مثلا بروی یک لینک برود ولی قابل کلیک نباشد )
مثال
resize نحوه تغییر اندازه دادن عناصر را مشخص میکند مثال
scroll-behavior برای ایجاد اسکرول نرم ( متحرک / انیمیشن )
وقتی بروی لینک های درون صفحه ای کلیک میشود
مثال
unicode-bidi برای نمایش بهتر محتوای چند جهته
( مثلا یک متن انگلیسی درون یک متن فارسی )
( باید حتما با ویژگی direction مورد استفاده قرار بگیرد )
مثال
user-select نحوه انتخاب شدن متن یک عنصر توسط کاربر را مشخص میکند
( مثلا متونیم کاری کنیم کاربر نتونه متن را کپی کند )
مثال
vertical-align تراز عمودی یک عنصر را مشخص میکند مثال
visibility قابل مشاهده یا مخفی بودن یک عنصر را مشخص میکند مثال
z-index ترتیب قرارگیری عناصر بروی همدیگه ( انباشته شدن ) را مشخص میکند مثال

لیست کامل ویژگی های CSS + توضیح و مثال

Free-Learn

دریافت PDF یا پرینت این مطلب