این آموزش در تاریخ ۱۴۰۰/۱۱/۱۳ آپدیت شده است.
آموزش ویژگی quotes در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی quotes در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی quotes در CSS
با استفاده از ویژگی quotes در CSS میتوان استایل / شکل یا نحوه نمایش نقل قول های باز و بسته را مشخص و یا تعریف کرد.
در زبان HTML ما با استفاده از تگ q میتونیم یک نقل قول ایجاد کنیم.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی quotes را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از حالت های مختلف
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .MyQuote-1 { quotes: "\00AB" "\00BB"; } .MyQuote-2 { quotes: "(" ")"; } .MyQuote-3 { quotes: "salam_" "_salam"; } </style> |
مثال شماره ۲ : استفاده از نقل قول های تودرتو
|
1 2 3 |
.MyQuote{ quotes: "«" "»" "*" "*" "@" "@"; } |
Free-Learn
جدول مشخصات ویژگی quotes در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | تعریف نشده / بسته به نحوه تعریف کاربر |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS2 |
| نحوه استفاده در جاوااسکریپت | object.style.quotes=” ‘\0027’ ‘\0027’ ‘\2039’ ‘\203A’ “; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی quotes در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| quotes | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
quotes: none | String[String+] | initial|inherit; |
Free-Learn
جدول مقادیر ویژگی quotes در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||||
|---|---|---|---|---|---|---|---|
| none | نقل قول ها در خروجی هیچ استایلی ندارند | ||||||
| auto | به نسبت زبانی که توسط صفت lang مشخص میشود مرورگرها خودکار خودشون مشخص میکنن |
||||||
| String[String+] | برای مشخص کردن استایل یک یا چندین نقل قول نقل قول ها میتونن تودرتو باشن بخش اول سطح اول از نقل قول ها را مشخص میکند و بخش دوم سطح های بعدی ( برای تودرتو ) را مشخص میکند میتوان از کاراکترهای موجود بروی صفحه کلید استفاده کرد مثال :
میتوان از کاراکترهای مَن درآوردی استفاده کرد مثال :
میتوان از کد موجودیت ها استفاده کرد مثال :
|
||||||
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر | ||||||
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
برخی از موجودیت های پراستفاده نقل قول ها
هرچند میشه از کاراکترهای موجود بروی صفحه کلید نیز استفاده کرد ولی خب برخی از کاراکترها هستند که مورد تایید و بیشترین سازگاری رو با مرورگرهای اینترنتی دارند که در جدول زیر میتوانید این کاراکترها را مشاهده نمایید.
| کد موجودیت / کاراکتر | مثال |
|---|---|
| ۰۰۲۲\ | “ |
| ۰۰۲۷\ | ‘ |
| ۲۰۳۹\ | ‹ |
| ۲۰۳A\ | › |
| ۰۰AB\ | « |
| ۰۰BB\ | » |
| ۲۰۱۸\ | ‘ |
| ۲۰۱۹\ | ’ |
| ۲۰۱C\ | “ |
| ۲۰۱D\ | ” |
Free-Learn
نکات و توضیحات
- مقدار auto در مرورگر سافاری ( Safari ) پشتیبانی نمیشود.
- نقل قول ها میتونن تودرتو باشن ( مثلا از تگ q داخل تگ q استفاده کردیم ) ، ما میتونیم برای هر یک از این q ها استایل تعریف کنیم، پس بصورت زیر خواهیم داشت :
|
1 2 3 |
.MyQuote{ quotes: [ q برای اولین تگ ] [ q برای دومین تگ ] [ ... ] ; } |
