این آموزش در تاریخ ۱۴۰۰/۱۱/۳۰ آپدیت شده است.

لیست کامل ویژگی های 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-decoration-thickness اندازه خط ( دکوراسیون ) متن را مشخص میکند مثال
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 برای بُرش زدن عناصر ( منسوخ شده ) مثال
clip-path برای بُرش زدن عناصر ( از این استفاده کنید ) مثال
color برای مشخص کردن رنگ متن تگ مثال
content برای قرار دادن محتوا در قبل یا بعد از یک تگ
به کمک شبه کلاس های after:: و before::		 مثال
counter-increment برای اضافه کردن یک یا چندین واحد به شمارنده ها مثال
counter-reset برای ایجاد یا ریست کردن شمارنده ها مثال
cursor برای مشخص کردن استایل / شکل شمایل اشاره گر ماوس مثال
direction برای مشخص کردن جهت ( راست چین یا چپ چین ) بودن صفحه مثال
display برای مشخص کردن حالت نمایش یک عنصر
( مثلا یک عنصر بلاکی ( Block ) باشه یا درون سطری ( Inline )		 مثال
filter برای ایجاد فیلترهای رنگی ( معمولا بروی تصاویر ) مثال
hanging-punctuation مشخص میکند که علائم نگارشی موجود در یک متن
در خارج از باکس متن قرار بگیرند یا خیر		 –
hyphens برای ایجاد خط پیوند ( – ) به کلماتی که شکسته میشوند مثال
import@ برای وارد کردن ( Import ) فایل های 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 برای ایجاد اسکرول نرم ( یا به انگلیسی Soft Scroll ) مثال
unicode-bidi برای نمایش بهتر محتوای چند جهته
( مثلا یک متن انگلیسی درون یک متن فارسی )		 مثال
user-select نحوه انتخاب شدن متن توسط کاربر را مشخص میکند
( مثلا متونیم کاری کنیم که کاربر نتونه متن رو با ماوس انتخاب کنه )		 مثال
vertical-align تراز عمودی تگ های درون سطری ( یا Inline ) را مشخص میکند مثال
visibility قابل مشاهده یا مخفی بودن یک عنصر را مشخص میکند مثال
z-index ترتیب قرارگیری عناصر بروی همدیگه ( انباشته شدن ) را مشخص میکند مثال

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

Free-Learn

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