آموزش تابع url در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع url در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع URL در CSS
با استفاده از تابع url در CSS میتوان یک منبع ( Source ) را در یک صفحه وب فراخوانی کرد، یا بصورت کلی تر میتونیم بگیم این تابع میتونه به منابع خارجی ( مثه تصویر ، فایل های فونت و… ) یک پیوند ( لینک ) ایجاد کنه.
این تابع را میتوان در ویژگی های زیر بکار برد.
| 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("img/bg3.png"); text-align:center; } </style> |
مثال شماره ۲ : استفاده در ویژگی list-style-image
|
1 2 3 4 5 6 7 8 |
<style> ul{ list-style-type: square; list-style-image: url("img/demo_list.png"); } </style> |
مثال شماره ۳ : استفاده در ویژگی cursor
|
1 2 3 4 5 6 7 |
<style> .my-cursor { cursor: url(img/my-cursor.png),auto; } </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
نکات و توضیحات
اگه آدرس رو درون دابل کوتیشن ” ” یا تک کوتیشن ‘ ‘ یا کلا از کوتیشن استفاده نکنیم، بازم فرقی نمیکند و بهمون خروجی میده ، ولی معمولا داخل دابل کوتیشن ” ” میگذارند.
