این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع url در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع url در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع URL در CSS
با استفاده از تابع url در CSS میتوان یک منبع یا آدرس و مسیر یک فایل و.. را مشخص کرد.
این تابع را میتوان در ویژگی های زیر بکار برد.
| list-style-image | filter | background-image |
| border-image-source | @import | @font-face |
| clip-path | cursor | |
Free-Learn
مثال از تابع URL در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده در ویژگی background-image
|
1 2 3 4 5 6 7 8 |
<style> body{ background-image:url("files/girls-2.png"); text-align:center; } </style> |
مثال شماره ۲ : استفاده در ویژگی list-style-image
|
1 2 3 4 5 6 7 |
<style> ul.MyList{ list-style-image: url('files/tick.png'); } </style> |
مثال شماره ۳ : استفاده در ویژگی font-face@
|
1 2 3 4 5 6 7 8 |
<style> @font-face{ font-family: 'FontMan'; src: url('myfont/Vazir.ttf') format('truetype'); } </style> |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 2 3 4 5 |
url ("URL_File"); یا url ('URL_File'); یا url "string"; |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||||
|---|---|---|---|---|---|---|---|
| URL_File | یک آدرس / مسیر نسبی یا مطلق فایل جهت فراخوانی هم میتواند داخل دابل کوتیشن ” ” قرار بگیرد هم تک کوتیشن ‘ ‘ هم بدون کوتیشن مثال :
|
||||||
| string | یک مقدار رشته ای – در دستور import@ اگه از url استفاده نکنیم بازم نتیجه میده مثال :
|
Free-Learn
نکات و توضیحات
- اگه آدرس رو درون دابل کوتیشن ” ” یا تک کوتیشن ‘ ‘ یا کلا از کوتیشن استفاده نکنیم، بازم فرقی نمیکند و بهمون خروجی میده ، ولی معمولا داخل دابل کوتیشن ” ” یا تک کوتیشن ‘ ‘ میگذارند.
