این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کار با توابع یا Functions در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با توابع یا Functions در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با توابع یا Functions در CSS3
یسری تابع یا Function در CSS وجود دارد که ما با استفاده از آنها میتوانیم کارهای عملیاتی پیشرفته تری رو روی یک تگ در یک صفحه وب پیاده نماییم.
برخی از توابع زبان CSS :
- Attr() : کار روی صفت های یک عنصر
- Calc() : انجام محاسبات جهت تنظیم اندازه ها
- Var() : برای تعریف متغیرها در یک صفحه وب
- max() : تنظیم بیشترین مقدار
- min() : تنظیم کمترین مقدار
لیست کامل توابع زبان CSS بهمراه مثال را مشاهده نمایید.
Free-Learn
کار با تابع ()Attr در CSS3
با استفاده از این تابع در CSS3 ما میتوانیم صفت یک تگ را در یک صفحه ی وب بدست آوریم یا ( میتونیم همانند انتخابگرها آن را انتخاب کنیم ) سپس عملیات مورد نظرمون رو روش پیاده کنیم.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
attr( Attribute_Name ); |
- Attribute_Name : نام اون صفتی که میخوایم انتخاب کنیم
مثال شماره ۱ : بدست آوردن مقدار صفت href یک لینک
|
1 2 3 4 5 6 7 |
<style> a:after { content: " (" attr(href) ") "; } </style> |
مثال شماره ۲ : بدست آوردن Class و Id تگ Div
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> div:before{ content:" (" attr(class) ") "; color:red; } div:after{ content:" (" attr(id) ") "; color:blue; } </style> |
مثال شماره ۳ : استفاده از صفت مَن درآوردی ( یعنی صفتی که جز صفت های HTML نیست و همینجوری خودمون درستش میکنیم )
|
1 2 3 4 5 6 7 8 |
<style> div:after{ content:" (" attr(freelearn) ") "; color:blue; } </style> |
Free-Learn
کار با تابع ()Calc در CSS3
با استفاده از این تابع میتوان عملیات محاسبات ریاضی رو روی مقدار یک ویژگی انجام داد، مثلا میتونیم بگیم اندازه عرض فلان تگ یه عددی تقسیم بر یه عدد دیگه باشه و..
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
calc(Expression); |
- Expression : استفاده از عبارات ریاضی برای محاسبات
از عبارات ریاضی ( عملگرهایی ) که میتوانیم در این تابع استفاده نماییم :
- + جمع
- – تفریق
- * ضرب
- / تقسیم
مثال شماره ۱ : محاسبه اندازه عرض تگ با استفاده از تابع calc ( گفتیم ۱۰۰درصد تقسیم بر ۲ بشه ) پس باید در خروجی اون تگ اندازه عرضش بشه ۵۰درصد
|
1 2 3 |
.MyBox{ width:calc(100% / 2); } |
مثال شماره ۲ : استفاده از عمل جمع برای محاسبه اندازه Padding
|
1 2 3 |
.MyBox{ padding:calc(5px + 5px); } |
Free-Learn
کار با تابع ()Var در CSS3
در ادامه آموزش کار با توابع یا Functions در CSS3 میخواهیم با تابع Var آشنا شویم ، با استفاده از این تابع میتوان ویژگی های سفارشی ( که توسط خودمون ایجاد میشن ) بهمراه مقادیر سفارشی ایجاد نماییم و از آنها در صفحه وبمان به راحتی استفاده نماییم.
در جلسه بعدی ایشالا بطور کامل با جریان متغیرها یا Variables در CSS آشنا خواهید شد.
شکل کلی برای استفاده از این تابع بصورت زیر می باشد :
|
1 |
var( Property_Name , Value ); |
- Property_Name : نام ویژگی دلخواه ما – ضروری
- Value : مقدار جایگزین : درصورتی که ویژگی دلخواه ما عمل نکرد – اختیاری
مثال شماره ۱ : تعریف ویژگی های دلخواه مان ( که میشه همون متغیرهامون ) در قسمت ریشه یا root یک صفحه وب
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> :root{ --mybgcolor:#FF5722; --mytextcolor:#fff; --mypadding:15px; --mytextcenter:center; } .MyBox{ background-color:var(--mybgcolor); color:var(--mytextcolor); padding:var(--mypadding); text-align:var(--mytextcenter); } </style> |
مثال شماره ۲ : استفاده از مقدار جایگزین (در این مثال ویژگی mytextcenter اصلا وجود ندارد پس در اینصورت از مقدار جایگزین استفاده خواهد کرد )
|
1 2 3 |
div{ text-align:var(--mytextcenter,center); } |
Free-Learn
کار با تابع ()max در CSS3
با استفاده از این تابع میتونیم چندین مقدار بصورت همزمان برای تگ مشخص کنیم بعدش خودکار خودش بیشترین یا بزرگترین مقدار رو انتخاب میکنه و اعمالش میکنه.
شکل کلی :
|
1 |
max( Value1, Value2 , ... ); |
مثال شماره ۱ : از بین ۳مقداری که براش مشخص کردیم، بزرگترین مقدار انتخاب و اعمال میشه
|
1 2 3 |
.MyBox{ width: max( 20px, 100px , 50% ); } |
Free-Learn
کار با تابع ()min در CSS3
با استفاده از این تابع میتونیم چندین مقدار بصورت همزمان برای تگ مشخص کنیم بعدش خودکار خودش کمترین یا کوچکترین مقدار رو انتخاب میکنه و اعمالش میکنه.
شکل کلی :
|
1 |
min( Value1, Value2 , ... ); |
مثال شماره ۱ : از بین ۳مقداری که براش مشخص کردیم، کوچکترین مقدار انتخاب و اعمال میشه
|
1 2 3 |
.MyBox{ width: min( 20px, 100px , 50% ); } |
