fa

زبان برنامه نویسی سلام

مقدمه

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

هدف

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

چشم انداز

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

بیانیه ماموریت

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

تگ هایی سئویی

شاید براتون سوال پیش اومده باشه که سئو خب یعنی چی؟
ببینید مرورگر ها یکسری ربات ها دارند که سایتتون رو بررسی میکنند و به ساییتون رتبه میدن و مثلا من به عنوان یک ادم که دنبال سایت شما میگردم وقتی داخل گوگل سرچ میکنم یکسری نتیجه بهم میده که اونها سایت هایی که بیشترین سئو رو دارن بالاترین رتبه رو دارن حالا سوال اینجاس که ما چطور میتونیم سئوی سایتمون رو بالا ببریم؟ یکسری نکات هست که ما میتونیم به وسیله اونها سئو رو بالا ببریم مثلا استفاده از دستور های که معنایی هستن مثلا به جای اینکه بخش بالای سایت یا هدر رو با جعبه پیاده کنیم با دستور سر بخش بسازیم زیرا سربخش به مرورگر میفهمونه که اینجا هدر سایت هست و بهتره اینجوری و سئو بالا میره.

امکانات و قابلیت‌ها

• کامپایلری بودن: سرعت و کارایی بالا در اجرای برنامه‌ها.
• سینتکس ساده و فارسی: بهبود تجربه کاربری و کاهش نیاز به یادگیری زبان‌های دیگر.
• ایجاد طرح‌های گرافیکی و سایت‌ها: امکانات وسیع برای ایجاد صفحات و سایت‌های زیبا و متنوع.
• جذابیت برای کودکان و نوجوانان: مناسب برای آموزش و پرورش نسل جدید برنامه‌نویسان.

ورژن

(اطلاعات مربوط به ورژن‌ها اینجا قرار می‌گیرد)

پشتیبانی

(اطلاعات مربوط به پشتیبانی اینجا قرار می‌گیرد)

برنامه نویسی

(اطلاعات مربوط به برنامه نویسی اینجا قرار می‌گیرد)

طراحی رابط کاربری

در زبان برنامه برای طراحی رابط کاربری با دو مفهوم دستور و ویژگی روبرو هستیم.

دستور ها با فرمت گرامری زیر نوشته می شوند:

نام دستور:

تمام

ویژگی‌ها مولفه هایی هستند در داخل و بدنه‌ی یک دستور قرار می گیرد و ویژگی‌هایی را به آن بلوک دستوری اختصاص می دهند.

مثال:

نام دستور:
       نام ویژگی: مقدار ویژگی
تمام

اگر بخواهید می توانید چندین ویژگی مختلف را به آن بلوک اختصاص دهید. مثال:

نام دستور:
       نام ویژگی اول: مقدار ویژگی
       نام ویژگی دوم: مقدار ویژگی
تمام

دستور‌ها

دستور صفحه

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

نحوه نوشتن:

صفحه:
تمام

همه دستور‌ها دو قسمت دارند یکی قسمت باز و دیگری بسته انها. مثلا در دستور صفحه قسمت باز برابر با "صفحه:" و قسمت بسته برابر با "تمام" است. همه دستور‌ها با کلمه تمام بسته میشوند.

ویژگی‌های اختصاصی:

ویژگی	مقدار	مقادیر مجاز
محتوا	هرگونه متن
عنوان	عنوان صفحه
زبان	زبان صفحه	fa-IR, en-US
جهت	جهت صفحه	چپ چین, راست چین
نویسنده	نویسنده صفحه
توضیح	توضیح صفحه
کلمات	کلمات صفحه
نمایه	نمایه صفحه
فرمت متنی	فرمت متنی صفحه
بروزرسانی	بروزرسانی صفحه
محدوده نمایش	محدوده نمایش صفحه	width=device-width, initial-scale=1.0

دستور پاراگراف

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

صفحه:
	پاراگراف:
		محتوا=«این یک محتوا است»
	تمام
تمام

در اینجا ما یک متن را ساختیم. همچنین اینگونه به عناصر ویژگی میدهیم. وقتی میخواهیم متنی را به عنوان مقدار ویژگی به یک دستور بدهیم انرا میان گیومه («») میگزاریم.

ویژگی‌های اختصاصی:

ویژگی	مقدار
محتوا	هرگونه متن

دستور ضخیم

به وسیله دستور ضخیم میتوانیم یک متن را بولد کنیم همچنین این یک دستور از دسته دستور‌های اینلاین است. یعنی قبل و بعد خود فاصله ای نمیگزارد. منظور از بولد ضخیم یا ذخیم کردن آن است.

نحوه نوشتن:

صفحه:
	ضخیم:
		محتوا=«این یک متن ضخیم شده است»
	تمام
تمام

ویژگی‌های اختصاصی:

ویژگی	مقدار
محتوا	هرگونه متن

دستور قطعه

به وسیله دستور قطعه میتوانیم یک متن را در صفحه بگذاریم کنیم همچنین این یک دستور از دسته دستور‌های اینلاین است. یعنی قبل و بعد خود فاصله ای نمیگزارد. نحوه نوشتن:

صفحه:
	قطعه:
		محتوا=«این یک قطعه است»
	تمام
تمام

ویژگی‌های اختصاصی:

ویژگی	مقدار
محتوا	هرگونه متن

دستور گروه‌بندی

به وسیله گروه‌بندی میتوانید یک فیلد یا یک باکس درست کنید که در ان چیز های گوناگون بگزارید مانند متن ورودی یا هر چیز دیگر. همچنین میتوانید به این گروه‌بندی عنوان هم بدهید که در قسمت بعدی با ان آشنا می‌شوید نحوه نوشتن:

صفحه:
	گروه‌بندی:
	تمام
تمام

دستور عنوان گروه

به این دستور د قسمت قبلی اشاره کوچکی شد. با کمک آن دستور میتوان برای هر گروه‌بندی یک عنوان تنظیم کرد. نحوه نوشتن:

صفحه:
	گروه‌بندی:
			عنوان گروه:
					محتوا=«این یک گروه است»
 			تمام
	تمام
تمام

ویژگی‌های اختصاصی:

ویژگی	مقدار
محتوا	هرگونه متن

دستور تصویر

با کمک آن دستور میشود یک تصویر را در وبسایت قرار داد. نحوه نوشتن:

صفحه:
	تصویر:
		منبع=«ا./images/test.png»
	تمام
تمام

ویژگی‌های اختصاصی:

ویژگی	مقدار
منبع	آدرس تصویر

دستور خط بعدی

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

صفحه:
	قطعه:
		محتوا = «محتوای اول»
	تمام
	خط بعدی:
	تمام
	قطعه:
		محتوا = «محتوای دوم»
	تمام
تمام

دستور دکمه

با کمک آن دستور میتوانید یک دکمه در صفحه ایجاد کنید.

نحوه نوشتن:

صفحه:

	دکمه:
		محتوا = «ارسال»
	تمام
تمام

اگر بخواهید ظاهر دلخواهی را به دکمه اختصاص دهید می توانید مشابه شیوه زیر پیش بروید:

صفحه:

	دکمه:
		رنگ پس زمینه = «زرد»
		اندازه قلم = ۲۰
		رنگ = «سیاه»
		گردی = ۴
		فاصله = ۹
		محتوا = «ارسال»
	تمام
تمام

دستور ورودی

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

صفحه:
	ورودی:
	تمام
تمام

حتی اگر بخواهید به یک ورودی مقدار پیشفرضی را از قبل پر کنید می توانید به شیوه زیر اقدام کنید:

صفحه:
	ورودی:
		محتوا = ۳۳۳۳
	تمام
تمام

برای گذاشتن راهنما نیز اینگونه عمل کنید: البته این نکته جا نماند که راهنما ها یکسری متن های کم رنگ هستند که وقتی هیچ متنی در ورودی نیست نوشته شده اند و برای راهنمایی که هستند که مثلا این ورودی محل وارد کردن چه چیزی است

صفحه:
	ورودی:
		راهنما=«ایمیل خود را وارد کنید...»
	تمام
تمام

دستور ویرایشگر متن

هنگامی که بخواهید از کاربر یک یا چند خط ورودی متن دریافت کنید از دستور ویرایشگر متن استفاده می شود. اگر بخواهید به این دستور یک محتوای پیشفرض بدهید از محتوا و اگر بخواهید برای ان راهنما بسازید از راهنما استفاده میکنید. عملا ویرایشگر متن مانند دستور ورودی اما برای وارد کردن متن های بزرگ است نمونه:

صفحه:

	ویرایشگر متن:
		محتوا = «سلام به نام خدا.»
	تمام
تمام

دستور برچسب

گاهی هم میخواهید از راهنما استفاده نکنید چون خیلی ریز به نظر می اید و میخواهید از یک متن کنار ورودی یا ویرایشگر متن استفاده کنید برای این کار میتوانید از دستور برچسب استفاده کنید. نکته ای که وجود دارد این است که حتما و حتما و حتما برای اینکه این برچسب درست کار کند باید مقدار ویژگی برای با مقدار ویژگی شناسه ان ورودی یکی و برابر باشد. نمونه مثال:

صفحه:
	برچسب:
		محتوا = «نام»	
		برای=«input»
	تمام

	ورودی:
		شناسه=«input»
	تمام 
تمام 

دستور جعبه

مثال:

صفحه:
	جعبه:
		پاراگراف:
			محتوا = «سلام به نام خدا این یک متن است.»
		تمام
	تمام
تمام

دستور خط

با کمک آن دستور میتوانید یک خط ایجاد کنید.

نحوه نوشتن:

صفحه:
	خط:
	تمام
تمام

دستور لینک

با کمک آن دستور میتوانید یک لینک ایجاد کنید تا وقتی کاربر روی ان کلیک کرد به آدرس مورد نظر شما برود.

نحوه نوشتن:

صفحه:
	لینک:
		منبع=«https://salam.ir»
	تمام
تمام

دستور فهرست غیر مرتب

این دستور یک فهرست از ایتم ها میسازد که غیر مرتب اند. منظور این است که شمارش نمیشوند برای مثال مثل زیر نیستند.

• متن اول
• متن دوم
• متن سوم

فهرست بالا، یک فهرست غیر مرتب است چون شمارنده ندارد.

نحوه نوشتن:

صفحه:
	فهرست غیر مرتب:
	تمام
تمام

دستور فهرست مرتب

این دستور یک فهرست از ایتم ها میسازد که مرتب اند. منظور این است که شمارش میشوند برای مثال مثل زیر هستند

1. عنوان
2. موضوع
3. مقدار

فهرست بالا، یک فهرست مرتب است که شمارنده دارد. نحوه نوشتن:

صفحه:
	فهرست مرتب:
	تمام
تمام

دستور مورد

این تگ ها همان ایتم های فهرست ها هستند و فهرست ها بدون اینها ایتم ندارند. نحوه نوشتن:

صفحه:
	فهرست غیر مرتب:
		مورد:
			محتوا=«سلام1»
		تمام
		مورد:
			محتوا=«سلام2»
		تمام
	تمام
تمام

یا

صفحه:
	فهرست مرتب:
		مورد:
			محتوا=«سلام1»
		تمام
		مورد:
			محتوا=«سلام2»
		تمام
	تمام
تمام

دستور جدول

گاهی هم میخواهید جدول بسازید و نیاز به یک چهار چوب زیبا برای نمایش دستورات خود دارید البته این جدول نیاز به ردیف و ستون دارد که در ادامنه با ان اشنا میشوید

مثال:

صفحه:
	جدول:
	تمام
تمام

دستور ردیف

ردیف ها سطر هایی هستند که محتویات یک جدول را تشکیل میدهند از دستور ردیف می توانید در داخل یک دستور جدول اسفتاده کنید. البته ردیف هم به تنهایی نیاز مارا برطرف نمی کند نیاز است تا داخل ان ستون هم بنویسیم مثال:

صفحه:
	جدول:
		ردیف:
		تمام


		ردیف:
		تمام

		ردیف:
		تمام

	تمام
تمام

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

دستور ستون

مثال:

صفحه:
	جدول:
		مرز = "3px solid black"
		ردیف:
			ستون:
				محتوا = "ستون اول"
			تمام
			ستون:
				محتوا = "ستون دوم"
			تمام
		تمام


		ردیف:
			ستون:
				محتوا = "اول"
			تمام
			ستون:
				محتوا = "دوم"
			تمام
		تمام

		ردیف:
			ستون:
				محتوا = "اول"
			تمام
			ستون:
				محتوا = "دوم"
			تمام
		تمام

	تمام
تمام

دستور فهرست کشویی

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

مثال:

صفحه:
	فهرست کشویی:
		مورد:
			محتوا=«مورد اول»
		تمام
		مورد:
			محتوا=«مورد دوم»
		تمام
		مورد:
			محتوا=«مورد سوم»
		تمام
	تمام
تمام

دستور فرم

برای ارسال درخواست ها ما ورودی هارا داخل فرم ها قرار میدهیم تا مقدار انهارا گرفته و به ادرس مورد نظر ارسال کند

برخی ویژگی های پرکاربرد:

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

مثال:

صفحه:
	فرم:
		نوع=«GET»
		منبع=«https://yourapi.ir»
		روش=«»
	تمام
تمام

دستور زیرین

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

مثال:

صفحه:
	قطعه:
		محتوا=«2»
		زیرین:
			محتوا=«5»
		تمام
	تمام
تمام

دستور رویین

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

مثال:

صفحه:
	قطعه:
		محتوا=«2»
		رویین:
			محتوا=«5»
		تمام
	تمام
تمام

دستور سر بخش

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	سر بخش:
	تمام
تمام

دستور پا صفحه

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	پا صفحه:
	تمام
تمام

دستور ناوبری

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	ناوبری:
	تمام
تمام

دستور بخش

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	بخش:
	تمام
تمام

دستور مقاله

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	مقاله:
	تمام
تمام

دستور جدا گانه

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	جدا گانه:
	تمام
تمام

دستور اصلی

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	اصلی:
	تمام
تمام

دستور شکل

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است. این دستور برای این است که عکس را داخل ان قرار داد و به وسیله ربات ها شناسایی شود. مثال:

صفحه:
	شکل:
	تمام
تمام

دستور زیر نویس شکل

این دستور مربوط به موضوعات سئو است وگرنه با همان "جعبه" هم قابل پیاده سازی است.

مثال:

صفحه:
	شکل:
	زیر نویس شکل:  
	    محتوا=«عکس زیبا»  
	تمام  
	تمام
تمام

دستور فیلم

این دستور برای ایجاد فیلم و قراردادن فیلم در صفحه است.

مثال:

صفحه:
	فیلم:
	تمام
تمام

دستور سایت

این دستور برای ایجاد سایت و قراردادن سایت در صفحه است.

مثال:

صفحه:
	سایت:
	تمام
تمام

ویژگی های ظاهر

ویژگی هایی هستند که در تمامی دستور‌ها قابل استفاده هستند و به کمک آنها می‌توانید ظاهر دلخواه خود را به دستور‌ها اعمال کنید.

در زیر اسامی این ویژگی ها را مشاهده می کنید:

نام ویژگی	توضیح	معادل انگلیسی
عرض	تنظیم عرض عنصر در صفحه	width
ارتفاع	تنظیم ارتفاع عنصر در صفحه	height
رنگ برجسته	تعیین رنگ برجسته برای عناصر تعاملی	accent-color
ظاهر	تنظیم ظاهر پیش‌فرض مرورگر برای عنصر	appearance
نسبت ابعاد	تعیین نسبت عرض به ارتفاع عنصر	aspect-ratio
فیلتر پس‌زمینه	اعمال فیلتر به پس‌زمینه عناصر	backdrop-filter
تصویر پس‌زمینه	تعیین تصویر پس‌زمینه برای عنصر	background-image
پیوست تصویر پس‌زمینه	تنظیم پیوست تصویر پس‌زمینه (ثابت یا پیمایش)	background-attachment
برش پس‌زمینه	تعیین ناحیه برش پس‌زمینه	background-clip
رنگ پس‌زمینه	تعیین رنگ پس‌زمینه برای عنصر	background-color
مبدا پس‌زمینه	تعیین مبدا برای موقعیت‌یابی تصویر پس‌زمینه	background-origin
مبنای انعطاف	تعیین اندازه پایه برای عنصر انعطاف‌پذیر	flex-basis
موقعیت پس‌زمینه	تنظیم موقعیت تصویر پس‌زمینه	background-position
موقعیت افقی پس‌زمینه	تنظیم موقعیت افقی تصویر پس‌زمینه	background-position-x
موقعیت عمودی پس‌زمینه	تنظیم موقعیت عمودی تصویر پس‌زمینه	background-position-y
تکرار پس‌زمینه	تعیین الگوی تکرار برای تصویر پس‌زمینه	background-repeat
اندازه پس‌زمینه	تنظیم اندازه تصویر پس‌زمینه	background-size
گردی	تنظیم شعاع گوشه‌های مرزی برای گرد کردن آن‌ها	border-radius
مرز	تنظیم مشخصات مرز اطراف عنصر	border
رنگ مرز انتهایی بلوک	تعیین رنگ مرز انتهایی در جهت بلوک	border-block-end-color
سبک مرز انتهایی بلوک	تعیین سبک مرز انتهایی در جهت بلوک	border-block-end-style
عرض مرز انتهایی بلوک	تنظیم عرض مرز انتهایی در جهت بلوک	border-block-end-width
رنگ مرز ابتدایی بلوک	تعیین رنگ مرز ابتدایی در جهت بلوک	border-block-start-color
سبک مرز ابتدایی بلوک	تعیین سبک مرز ابتدایی در جهت بلوک	border-block-start-style
عرض مرز ابتدایی بلوک	تنظیم عرض مرز ابتدایی در جهت بلوک	border-block-start-width
رنگ مرز پایین	تعیین رنگ مرز پایین عنصر	border-bottom-color
گردی پایین چپ	تنظیم شعاع گوشه پایین چپ مرز	border-bottom-left-radius
گردی پایین راست	تنظیم شعاع گوشه پایین راست مرز	border-bottom-right-radius
سبک مرز پایین	تعیین سبک مرز پایین عنصر	border-bottom-style
عرض مرز پایین	تنظیم عرض مرز پایین عنصر	border-bottom-width
ادغام مرز	ادغام مرزها در جدول	border-collapse
گردی انتها	تنظیم شعاع گردی برای انتهای مرز	border-end-end-radius
گردی شروع	تنظیم شعاع گردی برای شروع مرز	border-end-start-radius
برآمدگی تصویر مرز	تعیین فاصله تصویر مرز از حاشیه	border-image-outset
تکرار تصویر مرز	نحوه تکرار تصویر مرز	border-image-repeat
برش تصویر مرز	برش تصویر مرز	border-image-slice
منبع تصویر مرز	منبع تصویر مرز	border-image-source
عرض تصویر مرز	تعیین عرض تصویر مرز	border-image-width
رنگ مرز انتهایی خطی	رنگ مرز انتهایی خطی	border-inline-end-color
سبک مرز انتهایی خطی	سبک مرز انتهایی خطی	border-inline-end-style
عرض مرز انتهایی خطی	عرض مرز انتهایی خطی	border-inline-end-width
رنگ مرز ابتدایی خطی	رنگ مرز ابتدایی خطی	border-inline-start-color
سبک مرز ابتدایی خطی	سبک مرز ابتدایی خطی	border-inline-start-style
عرض مرز ابتدایی خطی	عرض مرز ابتدایی خطی	border-inline-start-width
رنگ مرز چپ	رنگ مرز چپ	border-left-color
سبک مرز چپ	سبک مرز چپ	border-left-style
عرض مرز چپ	عرض مرز چپ	border-left-width
رنگ مرز راست	رنگ مرز راست	border-right-color
سبک مرز راست	سبک مرز راست	border-right-style
عرض مرز راست	عرض مرز راست	border-right-width
فاصله مرز	فاصله بین مرزهای جدول	border-spacing
گردی ابتدا و انتها	تنظیم شعاع گردی برای ابتدا و انتها مرز	border-start-end-radius
شعاع ابتدایی شروع مرز	تنظیم شعاع گردی برای شروع مرز	border-start-start-radius
رنگ مرز بالا	رنگ مرز بالا	border-top-color
گردی بالا چپ	تنظیم شعاع گردی برای بالا چپ مرز	border-top-left-radius
گردی بالا راست	تنظیم شعاع گردی برای بالا راست مرز	border-top-right-radius
سبک مرز بالا	سبک مرز بالا	border-top-style
عرض مرز بالا	عرض مرز بالا	border-top-width
پایین	فاصله از پایین عنصر	bottom
نوع اندازه‌گیری جعبه	نحوه محاسبه اندازه جعبه	box-sizing
سایه جعبه	سایه اطراف جعبه	box-shadow
شکست درون	نحوه شکست محتوای درون	break-inside
شکست قبل	نحوه شکست قبل از عنصر	break-before
شکست بعد	نحوه شکست بعد از عنصر	break-after
موقعیت عنوان	موقعیت عنوان جدول	caption-side
رنگ نشانگر متنی	رنگ نشانگر متنی	caret-color
پاک‌سازی	تنظیم پاک‌سازی درون یک عنصر	clear
مسیر برش	تعیین مسیر برش برای یک عنصر	clip-path
قاعده برش	قاعده برش برای اشکال	clip-rule
رنگ	تعیین رنگ برای عنصر	color
درهم‌آمیزی رنگ	نحوه درهم‌آمیزی رنگ‌ها	color-interpolation
درهم‌آمیزی رنگ فیلترها	نحوه درهم‌آمیزی رنگ‌ها در فیلترها	color-interpolation-filters
طرح رنگ	طرح رنگ برای طراحی	color-scheme
تعداد ستون‌ها	تعداد ستون‌ها در طراحی	column-count
پر کردن ستون‌ها	نحوه پر کردن ستون‌ها	column-fill
فاصله بین ستون‌ها	فاصله بین ستون‌ها	column-gap
رنگ خط افقی ستون	رنگ خط افقی بین ستون‌ها	column-rule-color
سبک خط افقی ستون	سبک خط افقی بین ستون‌ها	column-rule-style
عرض خط افقی ستون	عرض خط افقی بین ستون‌ها	column-rule-width
گستردگی ستون‌ها	نحوه گستردگی ستون‌ها	column-span
ستون‌ها	تعریف چندین ستون	columns
حاوی بودن	تعیین ویژگی حاوی بودن برای عنصر	contain
اندازه بلوک ذاتی	اندازه بلوک ذاتی برای عنصر	contain-intrinsic-block-size
ارتفاع ذاتی	ارتفاع ذاتی برای عنصر	contain-intrinsic-height
اندازه درون‌خطی ذاتی	اندازه درون‌خطی ذاتی برای عنصر	contain-intrinsic-inline-size
اندازه ذاتی	اندازه ذاتی برای عنصر	contain-intrinsic-size
عرض ذاتی	عرض ذاتی برای عنصر	contain-intrinsic-width
ظرف	تعیین ظرف برای طراحی	container
نام ظرف	نام ظرف برای طراحی	container-name
نوع ظرف	نوع ظرف برای طراحی	container-type
محتوا	تعیین محتوای عنصر	content
مشاهده محتوا	نحوه مشاهده محتوا	content-visibility
افزایش شمارنده	نحوه افزایش شمارنده	counter-increment
بازنشانی شمارنده	نحوه بازنشانی شمارنده	counter-reset
تنظیم شمارنده	نحوه تنظیم شمارنده	counter-set
نشانگر	تعیین نشانگر ماوس	cursor
جهت	جهت متن و عناصر	direction
قرارگیری	نحوه قرارگیری عنصر	display
سلول‌های خالی	نحوه نمایش سلول‌های خالی	empty-cells
پر کردن	تنظیم پر کردن درون یک عنصر	fill
شفافیت پر کردن	تعیین شفافیت پر کردن	fill-opacity
قاعده پر کردن	قاعده پر کردن برای اشکال	fill-rule
فیلتر	فیلترهای CSS	filter
انعطاف	تنظیم انعطاف درون یک عنصر	flex
جهت انعطاف	جهت انعطاف درون یک عنصر	flex-direction
جریان انعطاف	ترکیب جهت و جریان انعطاف	flex-flow
رشد انعطاف	تعیین رشد انعطاف	flex-grow
کوچک‌شدن انعطاف	تعیین کوچک‌شدن انعطاف	flex-shrink
چینش انعطاف	نحوه چینش عناصر انعطاف پذیر	flex-wrap
شناور	تنظیم شناوری یک عنصر	float
نام فونت	نام فونت مورد استفاده	font-family
تنظیمات ویژگی فونت	تنظیمات ویژگی‌های خاص فونت	font-feature-settings
کرنینگ فونت	تنظیم کرنینگ فونت	font-kerning
بازنویسی زبان فونت	تنظیم زبان فونت	font-language-override
اندازه‌گیری اپتیکال فونت	تنظیم اندازه‌گیری اپتیکال فونت	font-optical-sizing
اندازه فونت	تعیین اندازه فونت	font-size
کشیدگی فونت	تنظیم کشیدگی فونت	font-stretch
سبک فونت	تعیین سبک فونت	font-style
نوع فونت	نوع واریانت فونت	font-variant
نمایش فونت	نحوه نمایش فونت	font-display
وزن فونت	تعیین وزن فونت	font-weight
شبکه	تنظیم شبکه برای طرح‌بندی	grid
منطقه شبکه	تعیین منطقه‌ای در شبکه	grid-area
ستون‌های خودکار شبکه	تعیین ستون‌های خودکار در شبکه	grid-auto-columns
جریان خودکار شبکه	نحوه جریان خودکار در شبکه	grid-auto-flow
ردیف‌های خودکار شبکه	تعیین ردیف‌های خودکار در شبکه	grid-auto-rows
ستون‌های شبکه	تعیین ستون‌های شبکه	grid-column
پایان ستون شبکه	تعیین پایان ستون در شبکه	grid-column-end
شروع ستون شبکه	تعیین شروع ستون در شبکه	grid-column-start
ردیف‌های شبکه	تعیین ردیف‌های شبکه	grid-row
پایان ردیف شبکه	تعیین پایان ردیف در شبکه	grid-row-end
شروع ردیف شبکه	تعیین شروع ردیف در شبکه	grid-row-start
الگوی شبکه	تعیین الگوی شبکه	grid-template
مناطق الگوی شبکه	تعیین مناطق در الگوی شبکه	grid-template-areas
ستون‌های الگوی شبکه	تعیین ستون‌های الگوی شبکه	grid-template-columns
ردیف‌های الگوی شبکه	تعیین ردیف‌های الگوی شبکه	grid-template-rows
توجیه محتوا	تنظیم نحوه توجیه محتوا	justify-content
چپ	تعیین موقعیت عنصر از سمت چپ	left
فاصله بین حروف	تنظیم فاصله بین حروف	letter-spacing
ارتفاع خط	تعیین ارتفاع خط	line-height
سبک فهرست	تنظیم سبک نمایش فهرست‌ها	list-style
فاصله	تنظیم حاشیه اطراف عنصر	margin
فاصله پایین	تنظیم حاشیه پایین عنصر	margin-bottom
فاصله چپ	تنظیم حاشیه سمت چپ عنصر	margin-left
فاصله راست	تنظیم حاشیه سمت راست عنصر	margin-right
فاصله بالا	تنظیم حاشیه بالای عنصر	margin-top
حداکثر ارتفاع	تعیین حداکثر ارتفاع عنصر	max-height
حداکثر عرض	تعیین حداکثر عرض عنصر	max-width
حداقل ارتفاع	تعیین حداقل ارتفاع عنصر	min-height
حداقل عرض	تعیین حداقل عرض عنصر	min-width
تناسب شیء	تنظیم نحوه تناسب شیء	object-fit
شفافیت	تنظیم شفافیت عنصر	opacity
بیش از حد	تنظیم نحوه نمایش بیش از حد محتوا	overflow
بیش از حد (X)	تنظیم نحوه نمایش بیش از حد در محور X	overflow-x
بیش از حد (Y)	تنظیم نحوه نمایش بیش از حد در محور Y	overflow-y
فاصله	تنظیم فاصله درون عنصر	padding
زینت متن	تنظیم زینت متن	text-decoration
قابلیت مشاهده	تنظیم قابلیت مشاهده عنصر	visibility
الویت موقعیت	تنظیم اولویت موقعیت عنصر	z-index
رنگ مرز	تعیین رنگ حاشیه	outline-color
فاصله حاشیه	تنظیم فاصله حاشیه	outline-offset
سبک حاشیه	تعیین سبک حاشیه	outline-style
عرض حاشیه	تنظیم عرض حاشیه	outline-width
لنگر بیش از حد	تنظیم لنگر برای بیش از حد	overflow-anchor
بیش از حد بلوک	تنظیم نحوه نمایش بیش از حد در بلوک	overflow-block
فاصله برش بیش از حد	تنظیم فاصله برش در حالت بیش از حد	overflow-clip-margin
بیش از حد درون خطی	تنظیم نحوه نمایش بیش از حد در خطی	overflow-inline
پیچش بیش از حد	تنظیم نحوه پیچش متن در حالت بیش از حد	overflow-wrap
پرسپکتیو	تنظیم پرسپکتیو	perspective
موقعیت	تعیین موقعیت عنصر	position
تغییر اندازه	کنترل قابلیت تغییر اندازه عنصر	resize
راست	تنظیم موقعیت از سمت راست	right
چرخش	چرخش عنصر	rotate
فاصله ردیف	فاصله بین ردیف‌های گرید	row-gap
مقیاس	مقیاس عنصر	scale
رفتار پیمایش	تنظیم رفتار پیمایش	scroll-behavior
تراز متن	تنظیم تراز متن	text-align
تراز‌کردن‌ اقلام	تراز کردن اقلام درون کانتینر	align-items
بالا	تنظیم موقعیت از بالا	top
تبدیل	تنظیم تغییرات شکل عنصر	transform
مرکز تبدیل	تعیین مرکز تغییرات	transform-origin
ترجمه	تنظیم موقعیت عنصر	translate
انتخاب کاربر	کنترل انتخاب متن توسط کاربر	user-select
انتقال	تنظیم انتقال‌ها	transition
تراز عمودی	تنظیم تراز عمودی	vertical-align
فضای سفید	تنظیم فضای سفید	white-space
فاصله کلمه	تنظیم فاصله بین کلمات	word-spacing

ویژگی رنگ پس زمینه

رنگ‌ها را به شیوه های مختلفی در رایانه می توان بیان کرد. در زیر به آنها می پردازیم:

• با کمک نام آنها
• با کمک کد رنگی در سیستم RGB
• به کمک کد رنگی در سیستم HEX

در زیر به اسامی نام رنگ‌ها می پردازیم:

نام رنگ	معادل انگلیسی
بی‌رنگ, بی رنگ, شفاف	transparent
سیاه	black
سفید	whit
صورتی	pink
بنفش	purple
قرمز	red
سبز	green
زرد	yellow
ابی, آبی	blue
قهوه‌ای, قهوه ای	brown
نارنجی	orange
خاکستری	gray
طوسی	silver
طلایی	gold
بژ	beige
زیتونی	olive
لاجوردی	navy
فیروزه‌ای, فیروزه ای	turquoise
نیلی	indigo
خرمایی	crimson
قرمز تیره	darkred
صورتی تیره	deeppink
آتشین	firebrick
صورتی داغ	hotpink
قرمز هندی	indianred
اسطوخودوسی	lavenderblush
مرجانی روشن	lightcoral
صورتی روشن	lightpink
زرشکی	maroon
رز مه آلود	mistyrose
قرمز بنفش کم	palevioletred
پوست	bisque
مرجانی	coral
نارنجی تیره	darkorange
سالمون تیره	darksalmon
سالمون روشن	lightsalmon
نارنجی قرمز	orangered
خامه پاپایا	papayawhip
هلو	peachpuff
سالمون	salmon
گوجه فرنگی	tomato
خمیر ذرت	cornsilk
طلایی تیره	darkgoldenrod
خاکی تیره	darkkhaki
طلایی روشن	lightgoldenrodyellow
زرد روشن	lightyellow
خاکی	khaki
پرتقالی کم	palegoldenrod
زرد کم	palegoldenrod
سبز دریایی	aquamarine
چارتوز	chartreuse
سبز تیره	darkgreen
زیتونی تیره	darkolivegreen
سبز دریایی تیره	darkseagreen
خاکستری تیره	darkslategray
سبز جنگلی	forestgreen
زرد سبز	greenyellow
شهد	honeydew
سبز چمنی	lawngreen
سبز روشن	lightgreen
سبز دریایی روشن	lightseagreen
لیمو سبز	lime
لیمو سبز روشن	limegreen
آب دریایی میانه	mediumaquamarine
سبز دریایی میانه	mediumseagreen
سبز بهاری میانه	mediumspringgreen
سبز زیتونی تیره	olivedrab
سبز کم	palegreen
سبز دریایی	seagreen
سبز بهاری	springgreen
فیروزه ای	teal
سبز زرد	yellowgreen
آبی آسمانی روشن	aliceblue
آبی	aqua
آبی روشن	azure
آبی کاپیتان	cadetblue
آبی گل گندم	cornflowerblue
آبی آسمانی تیره	darkcyan
فیروزه ای تیره	darkturquoise
آبی آسمانی عمیق	deepskyblue
آبی آسمانی داج	dodgerblue
آبی روشن	lightblue
فیروزه ای روشن	lightcyan
آبی آسمانی روشن	lightskyblue
آبی فولادی روشن	lightsteelblue
آبی میانه	mediumblue
فیروزه ای میانه	mediumturquoise
آبی نیمه شب	midnightblue
آبی روشن	paleturquoise
آبی پودری	powderblue
آبی سلطنتی	royalblue
آبی آسمانی	skyblue
آبی فولادی	steelblue
آبی بنفش	blueviolet
ارغوانی تیره	darkmagenta
بنفش ارکیده تیره	darkorchid
آبی ارغوانی تیره	darkslateblue
بنفش تیره	darkviolet
سرخابی	fuchsia
اسطوخودوس	lavender
ارکیده میانه	mediumorchid
ارغوانی میانه	mediumpurple
آبی ارغوانی میانه	mediumslateblue
قرمز بنفش میانه	mediumvioletred
ارکیده	orchid
آلو	plum
بنفش	purple
بنفش ربکا	rebeccapurple
آبی تخته سنگ	slateblue
خار مریم	thistle
بنفش	violet
سفید قدیمی	antiquewhite
بادام سفید شده	blanchedalmond
چوب بری	burlywood
شکلاتی	chocolate
کتان	linen
موکاسین	moccasin
سفید ناواجو	navajowhite
توری قدیمی	oldlace
پرو	peru
قهوه ای گل رز	rosybrown
قهوه ای زین اسب	saddlebrown
قهوه ای شنی	sandybrown
سیه نا	sienna
حنا	tan
گندمی	wheat
گل سفید	floralwhite
خاکستری روشن	gainsboro
خاکستری سفید	ghostwhite
خاکستری	gray
خاکستری کم	lightgry
خاکستری تخته سنگی روشن	lightslategray
نعنایی	mintcream
صدف	seashell
خاکستری نقره ای	silver
خاکستری تخته سنگی	slategray
برفی	snow
سفید دودی	whitesmoke

قدرت گرفته توسط تیم زبان برنامه‌نویسی سلام، ۱۴۰۳