کاربر:Zaman/صفحه تمرین/css/1

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


https://www.w3schools.com/cssref/default.asp

///////////////////////////////////////


CSS Reference

❮ HomeNext ❯


CSS Properties

ویژگی های CSS

A

align-content تراز بین خطوط داخل یک ظرف انعطاف پذیر را در زمانی که موارد از همه فضای موجود استفاده نمی کند ، مشخص می کند
align-items تراز وسایل داخل یک ظرف انعطاف پذیر را مشخص می کند
align-self تراز وسایل انتخاب شده در یک ظرف انعطاف پذیر را مشخص می کند
all تنظیم مجدد کلیه خصوصیات (به جز یونیکد-بیدی و جهت)
animation یک ویژگی کوتاه برای تمام ویژگی های انیمیشن *
animation-delay تأخیر برای شروع یک انیمیشن را مشخص می کند
animation-direction مشخص می کند که آیا یک انیمیشن باید به جلو ، عقب یا در چرخه های متناوب بازی شود
animation-duration مشخص می کند که یک انیمیشن برای تکمیل یک چرخه چه مدت طول می کشد
animation-fill-mode در هنگام پخش انیمیشن سبکی را برای این عنصر مشخص نمی کند (قبل از شروع ، بعد از پایان آن یا هر دو)
animation-iteration-count تعداد دفعات نمایش انیمیشن را مشخص می کند
animation-name یک نام برای انیمیشنkeyframes را مشخص می کند
animation-play-state مشخص می کند که انیمیشن در حال اجرا است یا مکث شده است
animation-timing-function منحنی سرعت یک انیمیشن را مشخص می کند

B

backface-visibility مشخص می کند که آیا چهره پشتی یک عنصر هنگام مواجهه با کاربر قابل رویت است یا خیر
background A shorthand property for all the background-* properties

یک ویژگی کوتاه برای تمام ویژگی های پس زمینه *

background-attachment تنظیم می کند که آیا یک تصویر پس زمینه با بقیه صفحه پیمایش می شود ، یا ثابت است
background-blend-mode Specifies the blending mode of each background layer (color/image)

حالت ترکیب هر لایه پس زمینه (رنگ / تصویر) را مشخص می کند

background-clip Defines how far the background (color or image) should extend within an element

تعیین می کند که پس زمینه (رنگ یا تصویر) تا چه حد باید در یک عنصر گسترش یابد

background-color رنگ پس زمینه یک عنصر را مشخص می کند
background-image یک یا چند تصویر پس زمینه را برای یک عنصر مشخص می کند
background-origin موقعیت مبداء تصویر پس زمینه را مشخص می کند
background-position موقعیت یک تصویر پس زمینه را مشخص می کند
background-repeat Sets if/how a background image will be repeated

اگر / چگونه یک تصویر پس زمینه تکرار می شود را تنظیم می کند

background-size اندازه تصاویر پس زمینه را مشخص می کند
border یک خاصیت کوتاه برای مرزهای مرزی ، به سبک مرزی و رنگ مرزی
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color

یک ویژگی کوتاه برای مرز-پایین ، مرز ، به سبک مرز و حاشیه پایین

border-bottom-color رنگ حاشیه پایین را تنظیم می کند
border-bottom-left-radius شعاع مرز گوشه پایین سمت چپ را مشخص می کند
border-bottom-right-radius شعاع مرز گوشه پایین سمت راست را مشخص می کند
border-bottom-style سبک مرز پایین را تنظیم می کند
border-bottom-width عرض مرز پایین را تنظیم می کند
border-collapse تعیین می کند که مرزهای جدول باید به یک مرز واحد سقوط کنند یا از هم جدا شوند
border-color رنگ چهار مرز را تنظیم می کند
border-image A shorthand property for all the border-image-* properties

یک خاصیت کوتاه برای تمام خصوصیات حاشیه * تصویر

border-image-outset Specifies the amount by which the border image area extends beyond the border box

مبلغی را نشان می دهد که در آن منطقه تصویر مرزی فراتر از کادر مرزی گسترش می یابد

border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

مشخص می کند که آیا تصویر مرزی باید تکرار ، گرد یا کشیده شود

border-image-slice Specifies how to slice the border image

نحوه برش تصویر مرزی را مشخص می کند

border-image-source مسیر تصویر را برای استفاده به عنوان مرز مشخص می کند
border-image-width عرض تصویر حاشیه را مشخص می کند
border-left A shorthand property for all the border-left-* properties

یک ویژگی کوتاه مدت برای همه خصوصیات حاشیه * سمت چپ

border-left-color رنگ مرز چپ را تنظیم می کند
border-left-style سبک مرز چپ را تنظیم می کند
border-left-width عرض مرز چپ را تنظیم می کند
border-radius A shorthand property for the four border-*-radius properties

یک ویژگی کوتاه مدت برای چهار مرز - * - ویژگی های شعاع

border-right A shorthand property for all the border-right-* properties

یک ویژگی کوتاه مدت برای تمام خصوصیات حاشیه سمت راست *

border-right-color رنگ مرز مناسب را تنظیم می کند
border-right-style سبک مرز مناسب را تنظیم می کند
border-right-width عرض مرز مناسب را تنظیم می کند
border-spacing فاصله بین مرزهای سلولهای مجاور را تنظیم می کند
border-style سبک چهار مرز را تنظیم می کند
border-top A shorthand property for border-top-width, border-top-style and border-top-color

یک ویژگی کوتاه برای مرزهای با عرض ، مرز به سبک و مرز بالا

border-top-color رنگ حاشیه بالا را تنظیم می کند
border-top-left-radius شعاع مرز گوشه بالا سمت چپ را مشخص می کند
border-top-right-radius شعاع مرز گوشه بالا سمت راست را مشخص می کند
border-top-style سبک مرز بالا را تنظیم می کند
border-top-width عرض مرز بالا را تنظیم می کند
border-width عرض چهار مرز را تنظیم می کند
bottom موقعیت عناصر را از پایین عنصر والد آن تنظیم می کند
box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.

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

box-shadow یک یا چند سایه را به یک عنصر وصل کنید
box-sizing چگونگی محاسبه عرض و ارتفاع یک عنصر را تعریف می کند: آیا باید شامل بالشتک و مرز باشد یا خیر
break-after مشخص می کند که آیا شکستگی صفحه ، ستون ، یا منطقه باید بعد از عنصر مشخص رخ دهد
break-before مشخص می کند که یک شکستگی صفحه ، ستون یا منطقه باید قبل از عنصر مشخص شده رخ دهد یا خیر
break-inside مشخص می کند که آیا شکستگی صفحه ، ستون یا منطقه باید در داخل عنصر مشخص شده رخ دهد یا خیر

C

caption-side قرار دادن عنوان جدول را مشخص می کند
caret-color رنگ مکان نما (مراقبت) را در ورودی ها ، متن ها یا هر عنصر قابل ویرایش مشخص می کند
@charset رمزگذاری کاراکتر مورد استفاده در شیوه نامه را مشخص می کند
clear مشخص می کند که در کدام طرف عناصر شناور مجاز نیستند
clip کلیپ هایی را که کاملاً موقعیت یابی کرده اند ، کلیپ می کند
color رنگ متن را تنظیم می کند
column-count تعداد ستون هایی که یک عنصر باید به آنها تقسیم شود را مشخص می کند
column-fill نحوه پر کردن ستون ها ، متعادل یا نبود را مشخص می کند
column-gap فاصله بین ستون ها را مشخص می کند
column-rule A shorthand property for all the column-rule-* properties

یک ویژگی کوتاه مدت برای کلیه ویژگی های ستون-قانون- *

column-rule-color رنگ قاعده بین ستون ها را مشخص می کند
column-rule-style سبک قاعده بین ستون ها را مشخص می کند
column-rule-width عرض قاعده بین ستون ها را مشخص می کند
column-span مشخص می کند که یک عنصر در چند ستون باید بچرخد
column-width عرض ستون را مشخص می کند
columns یک ویژگی کوتاه برای تعداد ستون و شمارش ستون
content Used with the :before and :after pseudo-elements, to insert generated content

با استفاده از: قبل و بعد از شبه عناصر ، برای وارد کردن محتوای تولید شده

counter-increment ارزش یک یا چند پیشخوان CSS را افزایش یا کاهش می دهد
counter-reset یک یا چند پیشخوان CSS را ایجاد یا تنظیم مجدد می کند
cursor مکان نما ماوس را که هنگام اشاره به یک عنصر نشان داده می شود ، مشخص می کند

D

direction جهت متن / جهت نوشتن را مشخص می کند
display نحوه نمایش یک عنصر HTML خاص را مشخص می کند

E

empty-cells مشخص کردن یا نبودن مرزها و پس زمینه در سلولهای خالی در یک جدول

F

filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed

قبل از نمایش عنصر جلوه ها (به عنوان مثال تاری یا تغییر رنگ) را روی یک عنصر تعریف می کند

flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

یک خاصیت کوتاه برای خواص انعطاف پذیر رشد ، انعطاف پذیری ، و ویژگی های پایه فلکس

flex-basis طول اولیه یک مورد انعطاف پذیر را مشخص می کند
flex-direction جهت موارد انعطاف پذیر را مشخص می کند
flex-flow A shorthand property for the flex-direction and the flex-wrap properties

یک ویژگی کوتاه برای جهت فلکس و ویژگی های بسته بندی فلکس

flex-grow میزان رشد کالای مورد نظر نسبت به بقیه را مشخص می کند
flex-shrink چگونگی کوچک شدن کالا نسبت به بقیه را مشخص می کند
flex-wrap مشخص می کند که موارد انعطاف پذیر باید پیچیده شوند یا خیر
float مشخص می کند یک جعبه باید شناور باشد یا خیر
font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties

یک ویژگی کوتاه برای سبک قلم ، نوع قلم ، وزن قلم ، اندازه قلم / ارتفاع خط و خصوصیات قلم خانواده

@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts

قانونی که به وب سایت ها اجازه می دهد فونت هایی غیر از فونت های "وب ایمن" را بارگیری و استفاده کنند

font-family خانواده قلم را برای متن مشخص می کند
font-feature-settings امکان کنترل ویژگیهای پیشرفته تایپوگرافی در قلمهای OpenType را فراهم می کند
@font-feature-values به نویسندگان اجازه می دهد تا از ویژگیهای مختلفی که در OpenType فعال شده اند ، از یک نام مشترک در متن-font-variant استفاده کنند
font-kerning Controls the usage of the kerning information (how letters are spaced)

کنترل استفاده از اطلاعات هسته (نحوه فاصله حروف) را کنترل می کند

font-language-override استفاده از گلیف های مخصوص زبان را در یک حروف کنترل می کند
font-size اندازه قلم متن را مشخص می کند
font-size-adjust خواندن متن را در هنگام وقوع برگشت فونت حفظ می کند
font-stretch یک چهره معمولی ، متراکم و یا گسترده از خانواده فونت انتخاب می کند
font-style سبک فونت متن را مشخص می کند
font-synthesis کنترل هایی که فاقد حروف تایپ شده باشند (جسورانه یا حفره ای) ممکن است توسط مرورگر ساخته شود
font-variant مشخص می کند که آیا یک متن باید با قلم کوچک ببندید یا خیر
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values

کنترل استفاده از گلیف های متناوب مرتبط با نام های جایگزین تعریف شده در مقادیر @ font-feature

font-variant-caps کنترل استفاده از گلیف های متناوب برای حروف بزرگ را کنترل می کند
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)

کنترل استفاده از گلیف های متناوب برای اسکریپت های شرق آسیا (به عنوان مثال ژاپنی و چینی)

font-variant-ligatures کنترل هایی که پیوندها و اشکال متنی را در محتوای متنی عناصر مورد استفاده قرار می دهند ، کنترل می کند
font-variant-numeric کنترل استفاده از گلیف های متناوب برای اعداد ، کسریها و نشانگرهای معمولی را کنترل می کند
font-variant-position کنترل استفاده از گلیف های متناوب در اندازه کوچکتر که به عنوان متن یا اشتراک در رابطه با مبانی قلم قرار دارند
font-weight وزن یک قلم را مشخص می کند

G

grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties

یک ویژگی کوتاه برای ردیف های شبکه-الگوی ، ردیف های شبکه ، قالب ، زمینه ، شبکه-قالب-مناطق ، شبکه-خودکار-ردیف ها ، ستون های شبکه خودکار و ویژگی های جریان خودکار شبکه

grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

نامی را برای مورد شبکه مشخص کنید ، یا این ویژگی یک ویژگی کوتاه برای ویژگی های شبکه-ردیف شروع ، شبکه-ستون-شروع ، شبکه-ردیف انتهایی ، و شبکه-ستون انتهای شبکه است

grid-auto-columns اندازه ستون پیش فرض را مشخص کنید
grid-auto-flow چگونگی درج موارد خودکار قرار داده شده در شبکه را مشخص می کند
grid-auto-rows اندازه ردیف پیش فرض را مشخص می کند
grid-column A shorthand property for the grid-column-start and the grid-column-end properties

یک ویژگی کوتاه برای شبکه-ستون شروع و ویژگی های شبکه-ستون پایان

grid-column-end مکانی را برای پایان دادن به مورد شبکه مشخص می کند
grid-column-gap اندازه شکاف ستون ها را مشخص می کند
grid-column-start مکان شروع گرید را مشخص می کند
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties

یک ویژگی کوتاه برای خواص شبکه-ردیف شکاف و شبکه-ستون شکاف

grid-row A shorthand property for the grid-row-start and the grid-row-end properties

یک ویژگی مختصر برای شبکه-ردیف شروع و ویژگی های شبکه ردیف پایان

grid-row-end مکانی را برای پایان دادن به مورد شبکه مشخص می کند
grid-row-gap اندازه شکاف بین ردیف ها را مشخص می کند
grid-row-start مکان شروع گرید را مشخص می کند
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties

یک ویژگی کوتاه برای صفحات شبکه-قالب-ردیف ها ، شبکه-قالب-ستون ها و خصوصیات شبکه های منطقه

grid-template-areas Specifies how to display columns and rows, using named grid items

نحوه نمایش ستون ها و سطرها ، با استفاده از موارد شبکه نامگذاری شده را مشخص می کند

grid-template-columns Specifies the size of the columns, and how many columns in a grid layout

اندازه ستون ها و چند ستون در یک طرح شبکه را مشخص می کند

grid-template-rows Specifies the size of the rows in a grid layout

اندازه ردیف ها را در یک طرح شبکه مشخص می کند

H

hanging-punctuation مشخص می کند که آیا ممکن است یک شخصیت نگارشی در خارج از جعبه خط قرار گیرد
height ارتفاع یک عنصر را تنظیم می کند
hyphens نحوه تقسیم کلمات را برای بهبود طرح پاراگرافها تنظیم می کند

I

image-rendering درمورد اینکه چه ابعادی از یک تصویر برای حفظ مقیاس مهمتر است ، به مرورگر اشاره می کند
@import به شما امکان می دهد یک شیوه نامه را در یک صفحه سبک دیگر وارد کنید
isolation تعریف می کند که آیا یک عنصر باید محتوای جدید انباشته ایجاد کند یا خیر

J

justify-content تراز وسایل موجود در یک ظرف انعطاف پذیر را در هنگام استفاده از تمام فضای موجود مشخص می کند

K

@keyframes کد انیمیشن را مشخص می کند

L

left موقعیت سمت چپ یک عنصر موقعیت یابی را مشخص می کند
letter-spacing فضای بین کاراکترهای یک متن را افزایش یا کاهش می دهد
line-break نحوه / شکستن خطوط را مشخص می کند
line-height ارتفاع خط را تنظیم می کند
list-style ارتفاع خط را تنظیم می کند
list-style-image تصویری را به عنوان نشانگر لیست مورد مشخص می کند
list-style-position موقعیت نشانگرهای لیست مورد (نقاط گلوله) را مشخص می کند
list-style-type نوع نشانگر لیست مورد را مشخص می کند

M

margin تمام خصوصیات حاشیه را در یک بیانیه تنظیم می کند
margin-bottom حاشیه پایین یک عنصر را تنظیم می کند
margin-left حاشیه سمت چپ یک عنصر را تنظیم می کند
margin-right حاشیه مناسب یک عنصر را تنظیم می کند
margin-top حاشیه بالای یک عنصر را تنظیم می کند
max-height حداکثر ارتفاع یک عنصر را تنظیم می کند
max-width حداکثر عرض یک عنصر را تنظیم می کند
@media قوانین سبک را برای انواع / دستگاه ها و اندازه های مختلف رسانه تنظیم می کند
min-height حداقل ارتفاع یک عنصر را تنظیم می کند
min-width حداقل عرض یک عنصر را تنظیم می کند
mix-blend-mode مشخص می کند که چگونه محتوای عنصر باید با پیش زمینه والدین مستقیم آن مخلوط شود

O

object-fit چگونگی قرارگیری محتویات یک عنصر جایگزین را باید در جعبه ایجاد شده توسط ارتفاع و عرض استفاده شده مشخص کند
object-position تراز عنصر جایگزین شده در جعبه آن را مشخص می کند
opacity سطح کدورت را برای یک عنصر تنظیم می کند
order ترتیب مورد انعطاف پذیر را نسبت به بقیه تنظیم می کند
orphans حداقل تعداد خطوطی را که باید در انتهای صفحه باقی بماند در هنگام رخ دادن صفحه در یک عنصر تنظیم می کند
outline یک خاصیت کوتاه برای ویژگی های عرض کلی ، طرح کلی و ویژگی های رنگ رئوس
outline-color رنگ یک طرح کلی را تنظیم می کند
outline-offset یک طرح کلی را خاموش می کند ، و آن را فراتر از مرز می کند
outline-style سبک یک طرح کلی را تنظیم می کند
outline-width عرض یک طرح کلی را تنظیم می کند
overflow چه چیزی اتفاق می افتد در صورت سرریز محتوای جعبه عنصر
overflow-wrap برای جلوگیری از سرریز شدن مرورگر ممکن است خطوط کلمات را شکست یا خیر (وقتی یک رشته برای متناسب با جعبه حاوی آن خیلی طولانی است)
overflow-x مشخص می کند که اگر لبه های چپ / راست محتوا را بکشید ، در صورت سرریز ناحیه محتوای عنصر ، یا خیر
overflow-y مشخص کرد که آیا لبه های بالا / پایین محتوا را گیره می کند ، در صورت سرریز ناحیه محتوای عنصر

P

padding A shorthand property for all the padding-* properties

یک ویژگی کوتاه مدت برای تمام خصوصیات لنت *

padding-bottom بالشتک پایین یک عنصر را تنظیم می کند
padding-left بالشتک چپ یک عنصر را تنظیم می کند
padding-right بالشتک مناسب یک عنصر را تنظیم می کند
padding-top بالشتک بالای یک عنصر را تنظیم می کند
page-break-after رفتار شکست صفحه را بعد از یک عنصر تنظیم می کند
page-break-before رفتار شکست صفحه را قبل از یک عنصر تنظیم می کند
page-break-inside رفتار شکست صفحه را در داخل یک عنصر تنظیم می کند
perspective از یک منظر سه بعدی به یک عنصر سه بعدی می دهد
perspective-origin تعریف می کند که کاربر در چه موقعیتی به عنصر موقعیت یابی سه بعدی نگاه می کند
pointer-events تعریف می کند که آیا یک عنصر در برابر وقایع نشانگر واکنش نشان می دهد یا خیر
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

نوع روش موقعیت یابی مورد استفاده برای یک عنصر (استاتیک ، نسبی ، مطلق یا ثابت) را مشخص می کند

Q

quotes نوع علامت نقل قول ها را برای نقل قول های جاسازی شده تنظیم می کند

R

resize تعریف می کند (یا چگونه) یک عنصر توسط کاربر قابل تنظیم است
right موقعیت صحیح یک عنصر موقعیت یابی را مشخص می کند

S

scroll-behavior مشخص می کند که به جای یک پرش مستقیم ، موقعیت پیمایش را در یک جعبه قابل پیمایش صاف کنید

T

tab-size خاصیت عرض یک برگه را مشخص می کند
table-layout Defines the algorithm used to lay out table cells, rows, and columns

الگوریتمی را که برای ترسیم سلول های جدول ، ردیف ها و ستون ها استفاده می شود ، تعریف می کند

text-align Specifies the horizontal alignment of text

تراز افقی متن را مشخص می کند

text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

توضیح می دهد که چگونه آخرین خط یک بلوک یا یک خط درست قبل از شکستن خط اجباری هنگام تراز کردن متن "توجیه" است

text-combine-upright Specifies the combination of multiple characters into the space of a single character

ترکیب چندین کاراکتر را در فضای یک کاراکتر واحد مشخص می کند

text-decoration Specifies the decoration added to text

دکوراسیون اضافه شده به متن را مشخص می کند

text-decoration-color رنگ دکوراسیون متن را مشخص می کند
text-decoration-line نوع خط را در دکوراسیون متن مشخص می کند
text-decoration-style سبک خط را در دکوراسیون متن مشخص می کند
text-indent تورفتگی خط اول را در بلاک متن مشخص می کند
text-justify روش توجیهی را که هنگام ترسیم متن "توجیه" استفاده می شود ، مشخص می کند
text-orientation جهت گیری متن را در یک خط تعریف می کند
text-overflow مشخص می کند چه اتفاقی باید بیفتد وقتی متن عنصر حاوی را سرریز کند
text-shadow سایه متن را اضافه می کند
text-transform سرمایه گذاری متن را کنترل می کند
text-underline-position موقعیت زیر خطی را که با استفاده از ویژگی تزئین متن تنظیم شده است ، مشخص می کند
top موقعیت بالای یک عنصر موقعیت یابی را مشخص می کند
transform تحول 2D یا 3D را به یک عنصر اعمال می کند
transform-origin به شما امکان می دهد تا موقعیت را روی عناصر تبدیل شده تغییر دهید
transform-style نحوه ارائه عناصر تو در تو فضای 3D را مشخص می کند
transition A shorthand property for all the transition-* properties

یک ویژگی کوتاه مدت برای کلیه ویژگیهای گذار *

transition-delay زمان شروع اثر انتقال را مشخص می کند
transition-duration چند ثانیه یا میلی ثانیه یک اثر انتقال برای تکمیل را مشخص می کند
transition-property نام خاصیت CSS را برای اثر گذار مشخص می کند
transition-timing-function منحنی سرعت اثر گذار را مشخص می کند

U

unicode-bidi برای تنظیم یا بازگرداندن این متن برای پشتیبانی از چندین زبان در همان سند ، به همراه ویژگی جهت استفاده می شود
user-select مشخص می کند که آیا متن یک عنصر قابل انتخاب است یا خیر

V

vertical-align تراز عمودی یک عنصر را تنظیم می کند
visibility مشخص بودن یا نبودن یک عنصر را مشخص می کند

W

white-space نحوه استفاده از فضای سفید درون یک عنصر را مشخص می کند
widows حداقل تعداد خطوطی را که باید در بالای صفحه باقی بماند در هنگام وقوع شکستن صفحه در یک عنصر تنظیم می کند
width عرض یک عنصر را تنظیم می کند
word-break چگونگی شکستن کلمات هنگام رسیدن به انتهای یک خط را مشخص می کند
word-spacing فضای بین کلمات در یک متن را افزایش یا کاهش می دهد
word-wrap اجازه می دهد تا کلمات طولانی و ناگسستنی شکسته شوند و به سطر بعدی بپیوندند
writing-mode مشخص می کند که خطوط متن به صورت افقی یا عمودی گذاشته شده اند یا خیر

Z

z-index ترتیب پشته یک عنصر موقعیت یابی را تنظیم می کند


❮ HomeNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css3_browsersupport.asp

CSS Browser Support Reference

❮ PreviousNext ❯


CSS Reference With Browser Support

در جدول زیر تمام خصوصیات CSS و نحوه پشتیبانی از هر ویژگی در مرورگرهای مختلف آورده شده است:

عدد در سمت راست نماد مرورگر نشان می دهد که در ابتدا در کدام نسخه مرورگر از ویژگی پشتیبانی می شود.

ویژگی Edge Firefox Chrome Safari Opera
A
align-content 11 28 21 9 12.1
align-items 11 20 21 9 12.1
align-self 11 20 21 9 12.1
all 27 37 24
animation 10 16 43 9 30
animation-delay 10 16 43 9 30
animation-direction 10 16 43 9 30
animation-duration 10 16 43 9 30
animation-fill-mode 10 16 43 9 30
animation-iteration-count 10 16 43 9 30
animation-name 10 16 43 9 30
animation-play-state 10 16 43 9 30
animation-timing-function 10 16 43 9 30
B
backface-visibility 10 16 36 4 23
background 4 1 1 1 3.5
background-attachment 4 1 1 1 3.5
background-blend-mode 30 35 7.1 22
background-clip 9 4 4 3 10.5
background-color 4 1 1 1 3.5
background-image 4 1 1 1 3.5
background-origin 9 4 4 3 10.5
background-position 4 1 1 1 3.5
background-repeat 4 1 1 1 3.5
background-size 9 4 4 4.1 10
border 4 1 1 1 3.5
border-bottom 4 1 1 1 3.5
border-bottom-color 4 1 1 1 3.5
border-bottom-left-radius 9 4 5 5 10.5
border-bottom-right-radius 9 4 5 5 10.5
border-bottom-style 5.5 1 1 1 9.2
border-bottom-width 4 1 1 1 3.5
border-collapse 5 1 1 1.2 4
border-color 4 1 1 1 3.5
border-image 11 15 16 6 15
border-image-outset 11 15 15 6 15
border-image-repeat 11 15 15 6 15
border-image-slice 11 15 15 6 15
border-image-source 11 15 15 6 15
border-image-width 11 13 15 6 15
border-left 4 1 1 1 3.5
border-left-color 4 1 1 1 3.5
border-left-style 5.5 1 1 1 9.2
border-left-width 4 1 1 1 3.5
border-radius 9 4 5 5 10.5
border-right 4 1 1 1 3.5
border-right-color 4 1 1 1 3.5
border-right-style 5.5 1 1 1 9.2
border-right-width 4 1 1 1 3.5
border-spacing 8 1 1 1 4
border-style 4 1 1 1 3.5
border-top 4 1 1 1 3.5
border-top-color 4 1 1 1 3.5
border-top-left-radius 9 4 5 5 10.5
border-top-right-radius 9 4 5 5 10.5
border-top-style 5.5 1 1 1 9.2
border-top-width 4 1 1 1 3.5
border-width 4 1 1 1 3.5
bottom 5 1 1 1 6
box-decoration-break 32 22 6.1 11.5
box-shadow 9 4 10 5.1 10.5
box-sizing 8 29 10 5.1 9.5
break-after 10 65 50 10 37
break-before 10 65 50 10 37
break-inside 10 65 50 10 37
C
caption-side 8 1 1 1 4
caret-color 53 57 44
@charset 1.5 2 4 9
clear 5 1 1 1 6
clip 8 1 1 1 7
clip-path 12 54 55 9.1 42
color 3 1 1 1 3.5
column-count 10 52 50 9 37
column-fill 10 52 50 10 37
column-gap 10 52 50 9 37
column-rule 10 52 50 9 37
column-rule-color 10 52 50 9 37
column-rule-style 10 52 50 9 37
column-rule-width 10 52 50 9 37
column-span 10 50 9 37
column-width 10 52 50 9 37
columns 10 52 50 9 37
content 8 1 1 1 4
counter-increment 8 2 4 3.1 9.6
counter-reset 8 2 4 3.1 9.6
cursor 5.5 4 5 5 9.6
D
direction 5.5 1 2 1.3 9.2
display 8 3 4 3.1 7
E
empty-cells 8 1 1 1.2 4
F
filter 13 35 53 9.1 40
flex 11 28 29 9 17
flex-basis 11 28 29 9 17
flex-direction 11 28 29 9 17
flex-flow 11 28 29 9 17
flex-grow 11 28 29 9 17
flex-shrink 11 28 29 9 17
flex-wrap 11 28 29 9 17
float 4 1 1 1 7
font 4 1 1 1 3.5
@font-face 9 3.6 4 3 10
font-family 4 1 1 1 3.5
font-feature-settings 10 34 48 9.1 35
@font-feature-values 34
font-kerning 10 34 32 7
font-language-override 34
font-size 5.5 1 1 1 7
font-size-adjust 3
font-stretch 9 9 48 11 35
font-style 4 1 1 1 7
font-synthesis 34 10
font-variant 4 1 1 1 3.5
font-variant-alternates 34 9.1
font-variant-caps 34 52 39
font-variant-east-asian 34
font-variant-ligatures 10 34 34 7 19
font-variant-numeric 34 52 39
font-variant-position 34
font-weight 4 1 2 1.3 3.5
G
grid 10 52 57 10 44
grid-area 10 52 57 10 44
grid-auto-columns 10 52 57 10 44
grid-auto-flow 10 52 57 10 44
grid-auto-rows 10 52 57 10 44
grid-column 10 52 57 10 44
grid-column-end 10 52 57 10 44
grid-column-gap 10 52 57 10 44
grid-column-start 10 52 57 10 44
grid-gap 10 52 57 10 44
grid-row 10 52 57 10 44
grid-row-end 10 52 57 10 44
grid-row-gap 10 52 57 10 44
grid-row-start 10 52 57 10 44
grid-template 10 52 57 10 44
grid-template-areas 10 52 57 10 44
grid-template-columns 10 52 57 10 44
grid-template-rows 10 52 57 10 44
H
hanging-punctuation
height 4 1 1 1 7
hyphens 10 43 55 5.1 44
I
image-rendering 3.6 41 10 28
@import 5.5
isolation 36 41 7.1 30
J
justify-content 11 28 29 9 17
K
@keyframes 10 16 43 9 30
L
left 5.5 1 1 1 5
letter-spacing 4 1 1 1 3.5
line-break 5.5 1
line-height 4 1 1 1 7
list-style 4 1 1 1 7
list-style-image 4 1 1 1 7
list-style-position 4 1 1 1 3.5
list-style-type 4 1 1 1 3.5
M
margin 6 1 1 1 3.5
margin-bottom 6 1 1 1 3.5
margin-left 6 1 1 1 3.5
margin-right 6 1 1 1 3.5
margin-top 6 1 1 1 3.5
mask 53 4 4 15
mask-type 53 4 4 15
max-height 7 1 1 2 7
max-width 7 1 1 2 7
@media 9 3.5 21 4 9
min-height 7 1 1 2 4
min-width 7 1 1 2 4
mix-blend-mode 32 41 8 35
N
@namespace 9 1 1 1 8
O
object-fit 16 36 31 7.1 19
object-position 16 36 31 7.1 19
opacity 9 2 4 3.1 9
order 11 28 29 9 17
orphans 10 25 7 12.1
outline 8 1.5 1 1.2 7
outline-color 8 1.5 1 1.2 7
outline-offset 3.5 4 3 10.5
outline-style 8 1.5 1 1.2 7
outline-width 8 1.5 1 1.2 7
overflow 4 1 1 1 7
overflow-wrap 18 49 23 6.1 12.1
overflow-x 9 3.5 4 3 9.5
overflow-y 9 4 3 9.5
P
padding 4 1 1 1 3.5
padding-bottom 4 1 1 1 3.5
padding-left 4 1 1 1 3.5
padding-right 4 1 1 1 3.5
padding-top 4 1 1 1 3.5
@page 8 19 15 15
page-break-after 4 1 1 1.2 7
page-break-before 4 1 1 1.2 7
page-break-inside 8 19 1 1.3 7
perspective 10 16 36 9 23
perspective-origin 10 16 36 9 23
place-content 60 59 11.1 51
pointer-events 11 3.6 2 4 9
position 7 1 1 1.2 4
Q
quotes 8 1.5 11 5.1 4
R
resize 5 4 4 15
right 5.5 1 1 1 5
S
scroll-behavior 36 61 48
shape-image-threshold 62 37 10.1 24
shape-margin 62 37 10.1 24
@supports 22 28 9 12.1
T
tab-size 4 21 6.1 15
table-layout 5 1 14 1 7
text-align 3 1 1 1 3.5
text-align-last 5.5 49 47 34
text-combine-upright 11 48 48 34
text-decoration 3 1 1 1 3.5
text-decoration-color 36 57 7.1 44
text-decoration-line 36 57 7.1 44
text-decoration-style 36 57 44
text-emphasis 46 25 7.1 15
text-emphasis-color 46 25 7.1 15
text-emphasis-position 46 25 7.1 15
text-emphasis-style 46 25 7.1 15
text-indent 3 1 1 1 3.5
text-justify 5.5 55
text-orientation 41 48 10.1 35
text-overflow 6 7 4 3.1 11
text-shadow 10 3.5 4 4 9.6
text-transform 4 1 1 1 7
text-underline-position 33
top 5 1 1 1 6
touch-action 11 52 36 23
transform 10 16 36 9 23
transform-origin 10 16 36 9 23
transform-style 11 16 36 9 23
transition 10 16 26 6.1 12.1
transition-delay 10 16 26 6.1 12.1
transition-duration 10 16 26 6.1 12.1
transition-property 10 16 26 6.1 12.1
transition-timing-function 10 16 26 6.1 12.1
U
unicode-bidi 5.5 1 2 1.3 9.2
user-select 10 69 54 3.1 41
V
vertical-align 4 1 1 1 4
@viewport 10 29 16
visibility 4 1 1 1 4
W
white-space 8 3.5 1 3 9.5
widows 10 25 7 12.1
width 4 1 1 1 3.5
will-change 36 36 9.1 24
word-break 5.5 15 4 3.1 15
word-spacing 6 1 1 1 3.5
word-wrap 5.5 3.5 4 3.1 10.5
writing-mode 12 41 48 11 35
Z
z-index 4 3 1 1 4

Icon Explanations

توضیحات آیکون

Supported by Edge/Internet Explorer
Supported by Firefox
Supported by Google Chrome
Supported by Safari
Supported by Opera


Supported by Edge/Internet Explorer with prefix -ms-
Supported by Firefox with prefix -moz-
Supported by Google Chrome with prefix -webkit-
Supported by Safari with prefix -webkit-
Supported by Opera with prefix -webkit-


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_selectors.asp

CSS Selector Reference

❮ PreviousNext ❯


CSS Selectors

انتخابگرهای CSS

در CSS ، انتخابگرها الگویی هستند که برای انتخاب عنصر (های) مورد نظر برای استایل انتخاب می شوند.

برای نشان دادن انتخاب های مختلف از تستر انتخابگر CSS ما استفاده کنید.

Selector

انتخاب کننده

مثال توضیحات مثال
.class .intro Selects all elements with class="intro"

همه عناصر با کلاس = "مقدمه" را انتخاب می کند

.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute

همه عناصر را با مجموعه name1 و name2 در ویژگی کلاس خود انتخاب می کند

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1

همه عناصر را با name2 که نوادار عنصری با name1 است انتخاب می کند

#id #firstname Selects the element with id="firstname"

عنصر را با id = "firstname" انتخاب می کند

* * همه عناصر را انتخاب می کند
element p همه عناصر <p> را انتخاب می کند
element.class p.intro Selects all <p> elements with class="intro"

همه عناصر <p> را با کلاس = "مقدمه" انتخاب می کند

element,element div, p همه عناصر <div> و همه عناصر <p> را انتخاب می کند
element element div p همه عناصر <p> را در داخل عناصر <div> انتخاب می کند
element>element div > p تمام عناصر <p> را که والدین عنصر <div> است انتخاب می کند
element+element div + p تمام عناصر <p> که بلافاصله بعد از عناصر <div> قرار می گیرند را انتخاب می کند
element1~element2 p ~ ul هر عنصر <ul> را که از عنصر <p> مقدم است انتخاب می کند
[attribute] [target] همه عناصر با یک ویژگی هدف را انتخاب می کند
[attribute=value] [target=_blank] Selects all elements with target="_blank"

همه عناصر با هدف = "_ خالی" را انتخاب می کند

[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"

همه عناصر را با یک ویژگی خاص انتخاب می کند که حاوی کلمه "گل" است

[attribute|=value] [lang|=en] همه عناصر را با مقدار ویژگی lang انتخاب می کند که از "en" شروع می شود
[attribute^=value] a[href^="https"] هر عنصر <a> را انتخاب می کند که مقدار ویژگی href با "https" شروع می شود
[attribute$=value] a[href$=".pdf"] هر عنصر <a> را انتخاب می کند که مقدار ویژگی href با ".pdf" به پایان می رسد
[attribute*=value] a[href*="w3schools"] هر عنصر <a> را انتخاب می کند که مقدار ویژگی href در آن حاوی بستر "w3schools" است
:active a:active پیوند فعال را انتخاب می کند
::after p::after بعد از محتوای هر عنصر <p> چیزی وارد کنید
::before p::before قبل از محتوای هر عنصر <p> چیزی وارد کنید
:checked input:checked هر عنصر <input> بررسی شده را انتخاب می کند
:default input:default عنصر پیش فرض <input> را انتخاب می کند
:disabled input:disabled هر عنصر <input> غیرفعال را انتخاب می کند
:empty p:empty هر عنصر <p> که فرزند ندارد را انتخاب می کند (از جمله گره های متنی)
:enabled input:enabled هر عنصر <input> فعال شده را انتخاب می کند
:first-child p:first-child هر عنصر <p> که فرزند اول والدینش است را انتخاب می کند
::first-letter p::first-letter حرف اول هر عنصر <p> را انتخاب می کند
::first-line p::first-line اولین خط از هر عنصر <p> را انتخاب می کند
:first-of-type p:first-of-type هر عنصر <p> را که اولین <p> عنصر والدین خود است ، انتخاب می کند
:focus input:focus عنصر ورودی که دارای تمرکز است را انتخاب می کند
:hover a:hover پیوندها را روی موشواره انتخاب کنید
:in-range input:in-range عناصر ورودی را با یک مقدار در یک محدوده مشخص انتخاب می کند
:indeterminate input:indeterminate عناصر ورودی را که در یک حالت نامشخص قرار دارند انتخاب می کند
:invalid input:invalid همه عناصر ورودی را با مقدار نامعتبر انتخاب می کند
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)

هر عنصر <p> را با یک ویژگی lang برابر با "آن" (ایتالیایی) انتخاب می کند

:last-child p:last-child هر <p> عنصری را که آخرین فرزند والدینش است ، انتخاب می کند
:last-of-type p:last-of-type هر عنصر <p> را که آخرین عنصر <p> پدر و مادر خود است ، انتخاب می کند
:link a:link همه پیوندهای ناظر را انتخاب می کند
:not(selector) :not(p) هر عنصر را انتخاب می کند که یک عنصر <p> نیست
:nth-child(n) p:nth-child(2) هر عنصر <p> را که فرزند دوم والدینش است انتخاب می کند
:nth-last-child(n) p:nth-last-child(2) هر <p> عنصری را انتخاب می کند که فرزند دوم والدینش است و از آخرین فرزند حساب می شود
:nth-last-of-type(n) p:nth-last-of-type(2) هر عنصر <p> که دومین عنصر <p> پدر و مادرش است را انتخاب می کند و از آخرین فرزند حساب می کند
:nth-of-type(n) p:nth-of-type(2) هر عنصر <p> که دومین عنصر <p> پدر و مادر خود است را انتخاب می کند
:only-of-type p:only-of-type هر عنصر <p> را که تنها <p> عنصر والدینش است ، انتخاب می کند
:only-child p:only-child هر عنصر <p> را که تنها فرزند والدینش است انتخاب می کند
:optional input:optional عناصر ورودی را بدون ویژگی "لازم" انتخاب می کند
:out-of-range input:out-of-range عناصر ورودی را با مقدار خارج از محدوده مشخص انتخاب می کند
::placeholder input::placeholder عناصر ورودی را با ویژگی "مکان نگهدارنده" مشخص شده انتخاب می کند
:read-only input:read-only عناصر ورودی را با ویژگی "readonly" مشخص شده انتخاب می کند
:read-write input:read-write عناصر ورودی را با ویژگی "readonly" که مشخص نشده انتخاب می کند
:required input:required عناصر ورودی را با ویژگی "لازم" مشخص شده انتخاب می کند
:root :root عنصر ریشه سند را انتخاب می کند
::selection ::selection بخشی از عنصری را که توسط کاربر انتخاب می شود ، انتخاب می کند
:target #news:target عنصر فعال فعلی #news را انتخاب کنید (با کلیک روی URL که حاوی آن نام لنگر است)
:valid input:valid همه عناصر ورودی را با یک مقدار معتبر انتخاب می کند
:visited a:visited همه پیوندهای بازدید شده را انتخاب می کند


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_functions.asp

CSS Functions Reference

❮ PreviousNext ❯


CSS Functions

توابع CSS

توابع CSS به عنوان یک مقدار برای خواص مختلف CSS استفاده می شود.

مقدار توضیحات
attr() مقدار یک ویژگی از عنصر انتخاب شده را برمی گرداند
calc() به شما امکان می دهد محاسبات را برای تعیین مقادیر خاصیت CSS انجام دهید
cubic-bezier() یک منحنی بزیر مکعبی را تعریف می کند
hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)

با استفاده از مدل Hue-Saturation-Lightness (HSL) رنگ ها را تعریف می کند

hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)

با استفاده از مدل Hue-Saturation-Lightness-Alpha (HSLA) رنگ ها را تعریف می کند

linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom)

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

radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges)

شیب شعاعی را به عنوان تصویر پس زمینه تنظیم می کند. حداقل دو رنگ تعریف کنید (از مرکز تا لبه ها)

repeating-linear-gradient() یک شیب خطی را تکرار می کند
repeating-radial-gradient() شیب شعاعی را تکرار می کند
rgb() رنگ ها را با استفاده از مدل قرمز-سبز-آبی (RGB) تعریف می کند
rgba() Defines colors using the Red-Green-Blue-Alpha model (RGBA)

با استفاده از مدل قرمز-سبز-آبی-آلفا (RGBA) رنگ ها را تعریف می کند

var() مقدار یک ویژگی خاص را درج می کند


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_ref_aural.asp

CSS Aural Reference

❮ PreviousNext ❯


Aural Style Sheets

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

ارائه شنیداری قابل استفاده است:

  • توسط افراد نابینا
  • برای کمک به کاربران در یادگیری خواندن
  • برای کمک به کاربرانی که مشکل خواندن دارند
  • برای سرگرمی خانگی
  • در ماشین
  • توسط جوامع کم توان چاپ

ارائه شنیداری ، سند را به متن ساده تبدیل می کند و این را به یک خواننده صفحه نمایش می دهد (برنامه ای که تمام شخصیت های صفحه را می خواند).

نمونه ای از ورق سبک Aural:

h1, h2, h3, h4 {

  voice-family: male;

  richness: 80;

  cue-before: url("beep.au")

}

مثال بالا باعث می شود تا سینت سایزر گفتار صدا را صدا کند ، سپس هدرها را با صدای بسیار غنی مرد صحبت کنید.



CSS Aural Reference

مرجع شنیداری CSS

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2). ستون "CSS" نشان می دهد که در آن نسخه CSS خاصیت تعریف شده است (CSS1 یا CSS2).

ویژگی توضیحات مقدار CSS
azimuth مکان هایی را که صدا باید از آنجا تهیه شود تنظیم می کند angle

left-side

far-left

left

center-left

center

center-right

right

far-right

right-side

behind

leftwards

rightwards

2
cue خصوصیات نشانه را در یک بیانیه تنظیم می کند cue-before

cue-after

2
cue-after صدایی را که بعد از صحبت کردن در مورد یک عنصر پخش می شود ، مشخص می کند none

url

2
cue-before صدایی را که باید قبل از صحبت کردن در مورد یک عنصر پخش شود ، مشخص می کند none

url

2
elevation مکان هایی را که صدا باید از آنجا تهیه شود تنظیم می کند angle

below

level

above

higher

lower

2
pause خواص مکث را در یک بیانیه تنظیم می کند pause-before

pause-after

2
pause-after مکث را پس از صحبت کردن در مورد یک عنصر مشخص می کند time

%

2
pause-before مکث را قبل از صحبت کردن در مورد یک عنصر مشخص می کند time

%

2
pitch صدای صحبت کننده را مشخص می کند frequency

x-low

low

medium

high

x-high

2
pitch-range تغییر در صدای گویندگان را مشخص می کند. (صدای یکنواخت یا صدای متحرک؟) number 2
play-during صدایی را که باید هنگام پخش محتوای عنصر پخش شود ، مشخص می کند auto

none

url

mix

repeat

2
richness غنای صدای گویندگان را مشخص می کند. (صدای غنی یا صدای نازک؟) number 2
speak مشخص می کند که آیا محتوای به صورت غیرقانونی ارائه می شود یا خیر normal

none

spell-out

2
speak-header نحوه رسیدگی به هدرهای جدول را مشخص می کند. آیا باید هدرها را قبل از هر سلول یا فقط قبل از سلولی با هدر متفاوت از سلول قبلی صحبت کرد always

once

2
speak-numeral نحوه صحبت کردن اعداد را مشخص می کند digits

continuous

2
speak-punctuation نحوه صحبت کردن با علائم نگارشی را مشخص می کند none

code

2
speech-rate سرعت صحبت را مشخص می کند number

x-slow

slow

medium

fast

x-fast

faster

slower

2
stress Specifies the "stress" in the speaking voice

"استرس" را در صدای گویندگان مشخص می کند

number 2
voice-family خانواده صوتی صحبت کردن را مشخص می کند specific-voice

generic-voice

2
volume حجم صحبت را مشخص می کند number

%

silent

x-soft

soft

medium

loud

x-loud

2


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_websafe_fonts.asp

CSS Web Safe Font Combinations

❮ PreviousNext ❯


Commonly Used Font Combinations

معمولاً ترکیبی از فونت استفاده می شود

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

برای اطمینان از حداکثر سازگاری بین مرورگرها و سیستم عامل ها ، خاصیت خانواده قلم باید چندین نام قلم را به عنوان یک سیستم "برگشت" نگه داشته شود. اگر مرورگر از قلم اول پشتیبانی نمی کند ، قلم بعدی را امتحان می کند.

با قلم مورد نظر خود شروع کنید و با یک خانواده عمومی پایان دهید تا مرورگر اگر فونت دیگری در دسترس نیست ، بتوانید یک قلم مشابه را در خانواده عمومی انتخاب کنید:

Example

p {

  font-family: "Times New Roman", Times, serif;

}

Try it Yourself »

در زیر چند نوع فونت متداول که توسط خانواده عمومی سازماندهی شده اند ، آورده شده است.


Serif Fonts

فونت های سریف

خانواده قلم متن نمونه
Georgia, serif

This is a heading

This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading

This is a paragraph

"Times New Roman", Times, serif

This is a heading

This is a paragraph



Sans-Serif Fonts

فونت های Sans-Serif

خانواده قلم متن نمونه
Arial, Helvetica, sans-serif

This is a heading

This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading

This is a paragraph

"Comic Sans MS", cursive, sans-serif

This is a heading

This is a paragraph

Impact, Charcoal, sans-serif

This is a heading

This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading

This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading

This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading

This is a paragraph

Verdana, Geneva, sans-serif

This is a heading

This is a paragraph

Monospace Fonts

فونت های Monospace

خانواده قلم متن نمونه
"Courier New", Courier, monospace

This is a heading

This is a paragraph

"Lucida Console", Monaco, monospace

This is a heading

This is a paragraph

نکته: همچنین تمام فونت های Google موجود و نحوه استفاده از آنها را بررسی کنید.


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_animatable.asp

CSS Animatable

CSS متحرک

❮ PreviousNext ❯


Definition and Usage

تعریف و کاربرد

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

ویژگی های متحرک می توانند به تدریج از یک مقدار به ارزش دیگر ، مانند اندازه ، اعداد ، درصد و رنگ تغییر کنند.


Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را نشان می دهد که به طور کامل از انیمیشن های CSS پشتیبانی می کند.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

اعداد به دنبال -webkit- ، -moz- یا -o- اولین نسخه ای را که با پیشوند کار می کند مشخص می کنند.

43.0

4.0 -webkit-

10.0 16.0

5.0 -moz-

9.0

4.0 -webkit-

30.0

15.0 -webkit-

12.0 -o-


Example

رنگ پس زمینه را از قرمز تا آبی تحریک کنید:

@keyframes mymove {

  from {background-color: red;}

  to {background-color: blue;}

}


Try it Yourself »



Animatable Properties

ویژگی های متحرک

این ویژگی ها در CSS قابل انیمیشن هستند:

ویژگی
backgroundTry it
background-colorTry it
background-positionTry it
background-sizeTry it
borderTry it
border-bottomTry it
border-bottom-colorTry it
border-bottom-left-radiusTry it
border-bottom-right-radiusTry it
border-bottom-widthTry it
border-colorTry it
border-leftTry it
border-left-colorTry it
border-left-widthTry it
border-rightTry it
border-right-colorTry it
border-right-widthTry it
border-spacingTry it
border-topTry it
border-top-colorTry it
border-top-left-radiusTry it
border-top-right-radiusTry it
border-top-widthTry it
bottomTry it
box-shadowTry it
clipTry it
colorTry it
column-countTry it
column-gapTry it
column-ruleTry it
column-rule-colorTry it
column-rule-widthTry it
column-widthTry it
columnsTry it
filterTry it
flexTry it
flex-basisTry it
flex-growTry it
flex-shrinkTry it
fontTry it
font-sizeTry it
font-size-adjust
font-stretch
font-weightTry it
gridTry it
grid-areaTry it
grid-auto-columnsTry it
grid-auto-flowTry it
grid-auto-rowsTry it
grid-columnTry it
grid-column-endTry it
grid-column-gapTry it
grid-column-startTry it
grid-gapTry it
grid-rowTry it
grid-row-endTry it
grid-row-gapTry it
grid-row-startTry it
grid-templateTry it
grid-template-areasTry it
grid-template-columnsTry it
grid-template-rowsTry it
heightTry it
leftTry it
letter-spacingTry it
line-heightTry it
marginTry it
margin-bottomTry it
margin-leftTry it
margin-rightTry it
margin-topTry it
max-heightTry it
max-widthTry it
min-heightTry it
min-widthTry it
object-positionTry it
opacityTry it
orderTry it
outlineTry it
outline-colorTry it
outline-offsetTry it
outline-widthTry it
paddingTry it
padding-bottomTry it
padding-leftTry it
padding-rightTry it
padding-topTry it
perspectiveTry it
perspective-originTry it
rightTry it
text-decoration-colorTry it
text-indentTry it
text-shadowTry it
topTry it
transformTry it
transform-originTry it
vertical-alignTry it
visibility
widthTry it
word-spacingTry it
z-indexTry it


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_units.asp

CSS Units

❮ PreviousNext ❯


CSS Units

واحدهای CSS

CSS چندین واحد مختلف برای بیان طول دارد.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

(بسیاری از خصوصیات CSS مقادیر "طول" مانند width ، margin ، padding ، font-sizeو غیره را در نظر می گیرند.

بسیاری از خصوصیات CSS مقادیر "طول" مانند عرض ، حاشیه ، بالشتک ، اندازه قلم و غیره را در نظر می گیرند.)

طول عددی است که توسط واحد طول مانند 10px ، 2em و غیره دنبال می شود.

فضای سفید بین عدد و واحد نمی تواند ظاهر شود. اما اگر مقدار 0 باشد ، واحد قابل حذف نیست.

برای برخی از خصوصیات CSS ، طول منفی مجاز است.

دو نوع واحد طول وجود دارد: مطلق و نسبی.


Absolute Lengths

طول مطلق

واحدهای طول مطلق ثابت هستند و طول بیان شده در هر یک از این موارد دقیقاً به همین اندازه ظاهر می شوند.

واحدهای طول مطلق برای استفاده در صفحه توصیه نمی شوند ، زیرا اندازه صفحه نمایش بسیار متفاوت است. اما در صورت شناخته شدن محیط خروجی ، مانند طرح چاپ ، می توان از آنها استفاده کرد.

واحد توضیحات
cm centimetersTry it
mm millimetersTry it
in inches (1in = 96px = 2.54cm)Try it
px * pixels (1px = 1/96th of 1in)Try it
pt points (1pt = 1/72 of 1in)Try it
pc picas (1pc = 12 pt)Try it

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

* پیکسل (px) نسبت به دستگاه مشاهده است. برای دستگاه های کم فشار در dpi ، 1px یک پیکسل دستگاه (نقطه) نمایشگر است. برای چاپگرها و صفحه نمایش های با وضوح بالا 1px حاوی پیکسل های چند دستگاه است.


Relative Lengths

طول نسبی

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

واحد توضیحات
em نسبت به اندازه قلم عنصر (2em به معنی 2 برابر اندازه قلم فعلی) Try it
ex نسبت به ارتفاع x قلم فعلی (به ندرت استفاده می شود) Try it
ch نسبت به عرض "0" (صفر) Try it
rem نسبت به اندازه قلم عنصر ریشه Try it
vw Relative to 1% of the width of the viewport*

نسبت به 1٪ عرض منظره *

Try it
vh Relative to 1% of the height of the viewport*

نسبت به 1٪ ارتفاع منظره *

Try it
vmin Relative to 1% of viewport's* smaller dimension

نسبت به 1٪ از ابعاد * كوچكتر viewport

Try it
vmax Relative to 1% of viewport's* larger dimension

نسبت به 1٪ ابعاد بزرگتر * viewport

Try it
% نسبت به عنصر پدر و مادر Try it

نکته: واحد های em و rem در ایجاد یک طرح کاملاً مقیاس پذیر کاربردی هستند!

* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

* Viewport = اندازه پنجره مرورگر. اگر منظره وسیع 50 سانتی متر باشد ، 1vw = 0.5cm.



Browser Support

پشتیبانی مرورگر

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که از واحد طول کاملاً پشتیبانی می کند.

واحد طول
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0

❮ PreviousNext ❯

///////////////////////////////////////

https://www.w3schools.com/cssref/css_pxtoemconversion.asp

PX to EM Conversion

❮ PreviousNext ❯


PX to EM Converter

مبدل PX به EM

  • اندازه پیش فرض تنظیم کنید (معمولاً 16px)
  • سپس ، بر اساس اندازه پیش فرض ، مقدار پیکسل را به em تبدیل کنید
  • یا بر اساس اندازه پیش فرض ، یک مقدار em را به پیکسل تبدیل کنید

اندازه پیش فرض تنظیم کنید:

px


Convert PX to EM:

px

Convert EM to PX:

em

Convert


Result:




Body Font Size

اندازه قلم بدنه

In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table.

در جدول زیر ، اندازه قلم بدنه را در پیکسل ها (px) انتخاب کنید تا جدول تبدیل کامل "px to em و درصد" نمایش داده شود.

نکته: اندازه پیش فرض معمولاً 16px است.

px em درصد
5px 0.3125em 31.25%
6px 0.3750em 37.50%
7px 0.4375em 43.75%
8px 0.5000em 50.00%
9px 0.5625em 56.25%
10px 0.6250em 62.50%
11px 0.6875em 68.75%
12px 0.7500em 75.00%
13px 0.8125em 81.25%
14px 0.8750em 87.50%
15px 0.9375em 93.75%
16px 1.0000em 100.00%
17px 1.0625em 106.25%
18px 1.1250em 112.50%
19px 1.1875em 118.75%
20px 1.2500em 125.00%
21px 1.3125em 131.25%
22px 1.3750em 137.50%
23px 1.4375em 143.75%
24px 1.5000em 150.00%
25px 1.5625em 156.25%

تفاوت بین PX ، EM و درصد چیست؟

Pixel is a static measurement, while percent and EM are relative measurements. Percent depends on its parent font size. EM is relative to the current font size of the element (2em means 2 times the size of the current font). So, If the font size of body is 16 pixels, then 150% will be 24 pixels (1.5 * 16), and 2em will be 32 pixels (16 * 2). Look at CSS Units for more measurement units.

پیکسل اندازه گیری استاتیک است ، در حالی که درصد و EM اندازه گیری نسبی هستند. درصد به اندازه قلم والدین بستگی دارد. EM نسبت به اندازه فونت فعلی عنصر (2em به معنی 2 برابر اندازه قلم فعلی) است. بنابراین ، اگر اندازه قلم بدنه 16 پیکسل باشد ، 150٪ آن 24 پیکسل (1.5 * 16) و 2em 32 پیکسل (16 * 2) خواهد بود. برای واحدهای اندازه گیری بیشتر به واحدهای CSS مراجعه کنید. ❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_colors.asp

CSS Colors

❮ PreviousNext ❯


Color Names Supported by All Browsers

اسامی رنگی که توسط همه مرورگرها پشتیبانی می شود

All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

همه مرورگرهای مدرن از 140 رنگ زیر پشتیبانی می کنند (برای دیدن رنگ به عنوان رنگ پس زمینه به همراه رنگ متن متفاوتی کلیک کنید) بر روی نام رنگ یا مقدار شش برابر کلیک کنید:

برای مرور کامل رنگهای CSS ، به آموزش رنگهای ما مراجعه کنید.

AliceBlue

#F0F8FF

AntiqueWhite

#FAEBD7

Aqua

#00FFFF

Aquamarine

#7FFFD4

Azure

#F0FFFF

Beige

#F5F5DC

Bisque

#FFE4C4

Black

#000000

BlanchedAlmond

#FFEBCD

Blue

#0000FF

BlueViolet

#8A2BE2

Brown

#A52A2A

BurlyWood

#DEB887

CadetBlue

#5F9EA0

Chartreuse

#7FFF00

Chocolate

#D2691E

Coral

#FF7F50

CornflowerBlue

#6495ED

Cornsilk

#FFF8DC

Crimson

#DC143C

Cyan

#00FFFF

DarkBlue

#00008B

DarkCyan

#008B8B

DarkGoldenRod

#B8860B

DarkGray

#A9A9A9

DarkGrey

#A9A9A9

DarkGreen

#006400

DarkKhaki

#BDB76B

DarkMagenta

#8B008B

DarkOliveGreen

#556B2F

DarkOrange

#FF8C00

DarkOrchid

#9932CC

DarkRed

#8B0000

DarkSalmon

#E9967A

DarkSeaGreen

#8FBC8F

DarkSlateBlue

#483D8B

DarkSlateGray

#2F4F4F

DarkSlateGrey

#2F4F4F

DarkTurquoise

#00CED1

DarkViolet

#9400D3

DeepPink

#FF1493

DeepSkyBlue

#00BFFF

DimGray

#696969

DimGrey

#696969

DodgerBlue

#1E90FF

FireBrick

#B22222

FloralWhite

#FFFAF0

ForestGreen

#228B22

Fuchsia

#FF00FF

Gainsboro

#DCDCDC

GhostWhite

#F8F8FF

Gold

#FFD700

GoldenRod

#DAA520

Gray

#808080

Grey

#808080

Green

#008000

GreenYellow

#ADFF2F

HoneyDew

#F0FFF0

HotPink

#FF69B4

IndianRed

#CD5C5C

Indigo

#4B0082

Ivory

#FFFFF0

Khaki

#F0E68C

Lavender

#E6E6FA

LavenderBlush

#FFF0F5

LawnGreen

#7CFC00

LemonChiffon

#FFFACD

LightBlue

#ADD8E6

LightCoral

#F08080

LightCyan

#E0FFFF

LightGoldenRodYellow

#FAFAD2

LightGray

#D3D3D3

LightGrey

#D3D3D3

LightGreen

#90EE90

LightPink

#FFB6C1

LightSalmon

#FFA07A

LightSeaGreen

#20B2AA

LightSkyBlue

#87CEFA

LightSlateGray

#778899

LightSlateGrey

#778899

LightSteelBlue

#B0C4DE

LightYellow

#FFFFE0

Lime

#00FF00

LimeGreen

#32CD32

Linen

#FAF0E6

Magenta

#FF00FF

Maroon

#800000

MediumAquaMarine

#66CDAA

MediumBlue

#0000CD

MediumOrchid

#BA55D3

MediumPurple

#9370DB

MediumSeaGreen

#3CB371

MediumSlateBlue

#7B68EE

MediumSpringGreen

#00FA9A

MediumTurquoise

#48D1CC

MediumVioletRed

#C71585

MidnightBlue

#191970

MintCream

#F5FFFA

MistyRose

#FFE4E1

Moccasin

#FFE4B5

NavajoWhite

#FFDEAD

Navy

#000080

OldLace

#FDF5E6

Olive

#808000

OliveDrab

#6B8E23

Orange

#FFA500

OrangeRed

#FF4500

Orchid

#DA70D6

PaleGoldenRod

#EEE8AA

PaleGreen

#98FB98

PaleTurquoise

#AFEEEE

PaleVioletRed

#DB7093

PapayaWhip

#FFEFD5

PeachPuff

#FFDAB9

Peru

#CD853F

Pink

#FFC0CB

Plum

#DDA0DD

PowderBlue

#B0E0E6

Purple

#800080

RebeccaPurple

#663399

Red

#FF0000

RosyBrown

#BC8F8F

RoyalBlue

#4169E1

SaddleBrown

#8B4513

Salmon

#FA8072

SandyBrown

#F4A460

SeaGreen

#2E8B57

SeaShell

#FFF5EE

Sienna

#A0522D

Silver

#C0C0C0

SkyBlue

#87CEEB

SlateBlue

#6A5ACD

SlateGray

#708090

SlateGrey

#708090

Snow

#FFFAFA

SpringGreen

#00FF7F

SteelBlue

#4682B4

Tan

#D2B48C

Teal

#008080

Thistle

#D8BFD8

Tomato

#FF6347

Turquoise

#40E0D0

Violet

#EE82EE

Wheat

#F5DEB3

White

#FFFFFF

WhiteSmoke

#F5F5F5

Yellow

#FFFF00

YellowGreen

#9ACD32


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_colors_legal.asp

CSS Legal Color Values

❮ PreviousNext ❯


CSS Colors

رنگ ها در CSS با روش های زیر قابل تعیین است:

  • رنگهای شش ضلعی
  • رنگ های RGB
  • رنگ های RGBA
  • رنگهای HSL
  • رنگهای HSLA
  • Predefined/Cross-browser color names
  • نام های رنگی تعریف شده / متقابل مرورگر
  • With the currentcolor keyword
  • با کلمه کلیدی currentcolor

Hexadecimal Colors

رنگهای شش ضلعی

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

یک رنگ شش ضلعی با این موارد مشخص شده است: #RRGGBB ، که در آن عدد صحیح شش ضلعی RR (قرمز) ، GG (سبز) و BB (آبی) اجزای رنگ را مشخص می کنند. همه مقادیر باید بین 00 تا FF باشد.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.

به عنوان مثال ، مقدار # 0000ff به صورت آبی رنگ ارائه می شود ، زیرا ترکیب آبی رنگ روی بالاترین مقدار آن (ff) قرار داده شده و بقیه به 00 تنظیم شده است.

Example

رنگ های مختلف HEX را تعریف کنید:

#p1 {background-color: #ff0000;}   /* red */

#p2 {background-color: #00ff00;}   /* green */

#p3 {background-color: #0000ff;}   /* blue */

Try it Yourself »


RGB Colors

رنگ های RGB

An RGB color value is specified with the rgb() function, which has the following syntax:

مقدار رنگ RGB با تابع rgb () مشخص شده است که دارای نحو زیر است:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

Example

رنگ های مختلف RGB را تعریف کنید:

#p1 {background-color: rgb(255, 0, 0);}   /* red */

#p2 {background-color: rgb(0, 255, 0);}   /* green */

#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Try it Yourself »



RGBA Colors

رنگ های RGBA

مقادیر رنگ RGBA یک فرمت از مقادیر رنگ RGB با کانال آلفا است - که کدورت جسم را مشخص می کند.

An RGBA color is specified with the rgba() function, which has the following syntax:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

رنگ های مختلف RGB را با کدورت تعریف کنید:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Try it Yourself »


HSL Colors

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

HSL مخفف رنگ ، اشباع و سبکی است - و نمایانگر هماهنگی استوانه ای از رنگ ها است.

An HSL color value is specified with the hsl() function, which has the following syntax:

مقدار رنگ HSL با تابع hsl () مشخص شده است که دارای نحو زیر است:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

رنگ یک درجه در چرخ رنگ (از 0 تا 360) - 0 (یا 360) قرمز است ، 120 سبز ، 240 رنگ آبی است. اشباع یک درصد درصد است. 0٪ به معنی سایه خاکستری و 100٪ رنگ کامل است. سبکی نیز درصد است؛ 0٪ سیاه و 100٪ سفید است.

Example

رنگ های مختلف HSL را تعریف کنید:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */

#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */

#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

Try it Yourself »


HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

رنگ های مختلف HSL را با کدورت تعریف کنید:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Try it Yourself »


Predefined/Cross-browser Color Names

نام های رنگی تعریف شده / متقابل مرورگر

140 color names are predefined in the HTML and CSS color specification.

140 رنگ در مشخصات HTML و CSS از پیش تعریف شده است.

For example: blue, red, coral, brown, etc:

به عنوان مثال: blue ، red ، coral ، قهوه ای ، و غیره:

نیاز به اصلاح ترجمه

Example

نام رنگ های مختلف را تعریف کنید:

#p1 {background-color: blue;}

#p2 {background-color: red;}

#p3 {background-color: coral;}

#p4 {background-color: brown;}

Try it Yourself »

لیستی از تمام نامهای از پیش تعریف شده را می توان در مرجع نام رنگ ها یافتید.


The currentcolor Keyword

کلمه کلیدی currentcolor به مقدار خاصیت رنگ یک عنصر اشاره دارد.

Example

The border color of the following <div> element will be blue, because the text color of the <div> element is blue:

رنگ حاشیه عنصر <div> زیر به رنگ آبی خواهد بود ، زیرا رنگ متن عنصر <div> به رنگ آبی است:

#myDIV {

  color: blue; /* Blue text color */

  border: 10px solid currentcolor; /* Blue border color */

}

Try it Yourself »


❮ PreviousNext ❯

///////////////////////////////////////


https://www.w3schools.com/cssref/css_default_values.asp

CSS Default Values Reference

❮ PreviousNext ❯


Default CSS Values for HTML Elements

مقادیر پیش فرض CSS برای عناصر HTML

جدول زیر مقادیر پیش فرض مرورگر CSS را برای همه عناصر HTML نشان می دهد.

عنصر مقدار پیش فرض CSS Try it
a:link color: (internal value);

text-decoration: underline;

cursor: auto;

Try it »
a:visited color: (internal value);

text-decoration: underline;

cursor: auto;

Try it »
a:link:active color: (internal value); Try it »
a:visited:active color: (internal value); Try it »
abbr None.
address display: block;

font-style: italic;

Try it »
area display: none;
article display: block;
aside display: block;
audio None.
b font-weight: bold; Try it »
base None.
bdi None.
bdo unicode-bidi: bidi-override;
blockquote display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 40px;

margin-right: 40px;

Try it »
body display: block;

margin: 8px;

Try it »
body:focus outline: none; Try it »
br None.
button None
canvas None.
caption display: table-caption;

text-align: center;

Try it »
cite font-style: italic; Try it »
code font-family: monospace; Try it »
col display: table-column; Try it »
colgroup display: table-column-group Try it »
datalist display: none;
dd display: block;

margin-left: 40px;

Try it »
del text-decoration: line-through; Try it »
details display: block;
dfn font-style: italic; Try it »
dialog None.
div display: block; Try it »
dl display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

Try it »
dt display: block; Try it »
em font-style: italic; Try it »
embed:focus outline: none;
fieldset display: block;

margin-left: 2px;

margin-right: 2px;

padding-top: 0.35em;

padding-bottom: 0.625em;

padding-left: 0.75em;

padding-right: 0.75em;

border: 2px groove (internal value);

Try it »
figcaption display: block;
figure display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 40px;

margin-right: 40px;

Try it »
footer display: block;
form display: block;

margin-top: 0em;

Try it »
h1 display: block;

font-size: 2em;

margin-top: 0.67em;

margin-bottom: 0.67em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
h2 display: block;

font-size: 1.5em;

margin-top: 0.83em;

margin-bottom: 0.83em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
h3 display: block;

font-size: 1.17em;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
h4 display: block;

margin-top: 1.33em;

margin-bottom: 1.33em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
h5 display: block;

font-size: .83em;

margin-top: 1.67em;

margin-bottom: 1.67em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
h6 display: block;

font-size: .67em;

margin-top: 2.33em;

margin-bottom: 2.33em;

margin-left: 0;

margin-right: 0;

font-weight: bold;

Try it »
head display: none;
header display: block;
hr display: block;

margin-top: 0.5em;

margin-bottom: 0.5em;

margin-left: auto;

margin-right: auto;

border-style: inset;

border-width: 1px;

Try it »
html display: block;
html:focus outline: none;
i font-style: italic; Try it »
iframe:focus outline: none;
iframe[seamless] display: block;
img display: inline-block; Try it »
input None.
ins text-decoration: underline; Try it »
kbd font-family: monospace; Try it »
label cursor: default; Try it »
legend display: block;

padding-left: 2px;

padding-right: 2px;

border: none;

Try it »
li display: list-item;
link display: none;
main None.
map display: inline;
mark background-color: yellow;

color: black;

Try it »
menu display: block;

list-style-type: disc;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

menuitem None.
meta None.
meter None.
nav display: block;
noscript None.
object:focus outline: none;
ol display: block;

list-style-type: decimal;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

Try it »
optgroup None.
option None.
output display: inline;
p display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

Try it »
param display: none;
picture None.
pre display: block;

font-family: monospace;

white-space: pre;

margin: 1em 0;

Try it »
progress None.
q display: inline; Try it »
q::before content: open-quote; Try it »
q::after content: close-quote; Try it »
rp None.
rt line-height: normal;
ruby None.
s text-decoration: line-through; Try it »
samp font-family: monospace; Try it »
script display: none;
section display: block; Try it »
select None.
small font-size: smaller; Try it »
source None.
span None.
strike text-decoration: line-through; Try it »
strong font-weight: bold; Try it »
style display: none;
sub vertical-align: sub;

font-size: smaller;

Try it »
summary display: block;
sup vertical-align: super;

font-size: smaller;

Try it »
table display: table;

border-collapse: separate;

border-spacing: 2px;

border-color: gray;

Try it »
tbody display: table-row-group;

vertical-align: middle;

border-color: inherit;

td display: table-cell;

vertical-align: inherit;

template None.
textarea None.
tfoot display: table-footer-group;

vertical-align: middle;

border-color: inherit;

th display: table-cell;

vertical-align: inherit;

font-weight: bold;

text-align: center;

thead display: table-header-group;

vertical-align: middle;

border-color: inherit;

time None.
title display: none;
tr display: table-row;

vertical-align: inherit;

border-color: inherit;

track None.
u text-decoration: underline; Try it »
ul display: block;

list-style-type: disc;

margin-top: 1em;

margin-bottom: 1 em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

Try it »
var font-style: italic; Try it »
video None.
wbr None.


❮ PreviousNext ❯

///////////////////////////////////////