weschool - www w3schools com html5




إضافة كيانات HTML باستخدام محتوى CSS (6)

كيف تستخدم خاصية content CSS لإضافة كيانات html؟

استخدام شيء مثل هذا يطبع   إلى الشاشة بدلاً من الفضاء غير الانفصال:

.breadcrumbs a:before {
    content: ' ';
}

CSS ليس HTML.   هو مرجع حرف مسمى في HTML ؛ يعادل الرقم المرجعي الرقمي العشري   . 160 هي نقطة الرمز العشري للحرف NO-BREAK SPACE في Unicode (أو UCS-2 ؛ راجع مواصفات HTML 4.01 ). التمثيل الست عشري لنقطة التشفير هذه هو U + 00A0 (160 = 10 × 16 1 + 0 × 16 0 ). سوف تجد ذلك في المخططات البيانية لقواعد Unicode والرموز الشخصية .

في CSS ، تحتاج إلى استخدام تسلسل هروب Unicode لمثل هذه الأحرف ، والذي يعتمد على القيمة السداسية عشر لنقطة الشفرة الخاصة بالحرف. لذلك تحتاج إلى الكتابة

.breadcrumbs a:before {
  content: '\a0';
}

يعمل هذا طالما يأتي التسلسل الهروب الأخير في قيمة سلسلة. إذا اتبعت الأحرف ، فهناك طريقتان لتجنب سوء الفهم:

أ) (المذكورة بواسطة الآخرين) استخدم بالضبط ستة أرقام سداسية عشرية لتسلسل الهروب:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

ب) إضافة حرف مسافة بيضاء واحدة (مثل ، مسافة) بعد تسلسل الهروب:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(حيث أن f هو رقم سداسي عشري ، \a0f قد يعني GURMUKHI LETTER EE هنا ، أو ਏ إذا كان لديك خط مناسب.)

سيتم تجاهل المساحة البيضاء المحددة ، وسيتم عرض foo ، حيث تكون المساحة المعروضة هنا هي حرف NO-BREAK SPACE .

يتميز نهج المسافة البيضاء ( '\a0 foo' ) بالمزايا التالية على النهج المكون من ستة أرقام ( '\0000a0foo' ):

  • فمن الأسهل الكتابة ، لأن الأصفار الأولية ليست ضرورية ، ولا تحتاج إلى حساب الأرقام ؛
  • فمن الأسهل قراءة ، لأن هناك مسافة بيضاء بين تسلسل الهروب والنص التالي ، ولا تحتاج إلى حساب الأرقام ؛
  • يتطلب مساحة أقل ، لأن الأصفار الأولية ليست ضرورية ؛
  • وهو متوافق مع الإصدار الأعلى ، نظرًا لأن Unicode الذي يدعم نقاط الكود التي تتجاوز U + 10FFFF في المستقبل سيتطلب تعديل مواصفات CSS.

وبالتالي ، لعرض مسافة بعد حرف هرب ، استخدم مسافتين في ورقة الأنماط -

.breadcrumbs a:before {
  content: '\a0  foo';
}

- أو اجعلها صريحة:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

راجع CSS 2.1 ، القسم "4.1.3 الأحرف والحالة" للحصول على التفاصيل.


أعلم أن هذه رسالة قديمة جدًا ، ولكن إذا كانت المسافة بينك وبينك بعد ذلك ، فلماذا لا:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

لقد استخدمت هذه الطريقة من قبل. يلتف تماما إلى خطوط أخرى مع ">" من جانبها في الاختبار.


فمثلا :

http://character-code.com/arrows-html-codes.php

مثال: إذا كنت تريد تحديد شخصيتك ، فقد اخترت "& # 8620" "& # x21ac" (نستخدم قيم HEX )

.breadcrumbs a:before {
    content: '\0021ac';
}

النتيجة: ↬

هذا هو :)


في CSS ، تحتاج إلى استخدام تسلسل هروب Unicode بدلاً من كيانات HTML. هذا يعتمد على القيمة الست عشرية للحرف.

لقد وجدت أن أسهل طريقة لتحويل الرمز إلى \25BE الست عشري ، مثل من ▾ ( ▾ ) إلى \25BE هو استخدام آلة حاسبة Microsoft =)

نعم فعلا. تمكين وضع المبرمجين ، تشغيل النظام العشري ، أدخل 9662 ، ثم التبديل إلى ست عشري وستحصل على 25BE . ثم قم بإضافة خط مائل عكسي \ إلى البداية.



التحديث : تشير PointedEars إلى أن الموقف الصحيح في   في جميع الحالات المغلق سيكون
'\a0 ' مما يدل على أن المساحة عبارة عن فاصل لسلسلة سداسية عشرية ويتم امتصاصها بواسطة التسلسل الهروب. وأشار كذلك إلى هذا الوصف الموثوق الذي يبدو وكأنه حل جيد للمشكلة التي وصفتها وثبتتها أدناه.

ما عليك القيام به هو استخدام unicode هرب. على الرغم مما قيل لك \00a0 ليس موقفًا مثاليًا لـ   داخل CSS ؛ لذا حاول:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

على وجه التحديد باستخدام \0000a0 كـ   . إذا حاولت ، كما اقترح mathieu و millikin:

content:'No\00a0Break'   /* becomes No਋reak */

يأخذ B في أحرف هربت سداسي. يحدث نفس الشيء مع 0-9a-fA-F.





css-content