الفرق بين المراجعتين ل"HTML/pre"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1')
(إضافة قسمين)
 
(مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة)
سطر 3: سطر 3:
  
 
مثال عن استخدام العنصر <code><nowiki><pre></nowiki></code> لعرض شيفرة CSS بسيطة: <syntaxhighlight lang="html">
 
مثال عن استخدام العنصر <code><nowiki><pre></nowiki></code> لعرض شيفرة CSS بسيطة: <syntaxhighlight lang="html">
<!-- Some example CSS code -->
+
<!-- شيفرة CSS -->
 
<pre>
 
<pre>
 
body {
 
body {
سطر 12: سطر 12:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
== بطاقة العنصر ==
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 49: سطر 50:
  
 
أصبحت الخاصيتان <code>cols</code> و <code>width</code> (اللتان تحددان العدد الأمثل للمحارف في السطر) مهملتين في HTML5 ولا يجب استخدامهما في الصفحات الحديثة.
 
أصبحت الخاصيتان <code>cols</code> و <code>width</code> (اللتان تحددان العدد الأمثل للمحارف في السطر) مهملتين في HTML5 ولا يجب استخدامهما في الصفحات الحديثة.
 +
 +
== التنسيق الافتراضي ==
 +
أغلبية المتصفحات تعرض العنصر <code><nowiki><pre></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، والخاصية <code>[[CSS/font-family|font-family]]</code> إلى <code>monospace</code> (خط ذو عرض ثابت)، والخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code>، وجعل الهامش <code>[[CSS/margin|margin]]</code> العلوي والسفلي مساويًا إلى <code>1em</code> والهامش الأيمن والأيسر مساويًا إلى <code>0</code>:<syntaxhighlight lang="css">
 +
pre {
 +
  display: block;
 +
  font-family: monospace;
 +
  white-space: pre;
 +
  margin: 1em 0;
 +
}
 +
</syntaxhighlight>
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
سطر 54: سطر 65:
 
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-pre-element HTML5].
 
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-pre-element HTML5].
 
*مواصفة [http://www.w3.org/TR/html401/struct/text.html#h-9.3.4 HTML 4.01]، أهملت هذه المواصفة الخاصية <code>cols</code>.
 
*مواصفة [http://www.w3.org/TR/html401/struct/text.html#h-9.3.4 HTML 4.01]، أهملت هذه المواصفة الخاصية <code>cols</code>.
[[تصنيف:HTML]]
+
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements]]
+
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Text Content]]
+
[[تصنيف:HTML Text Content|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 09:21، 18 فبراير 2018

يُمثِّل العنصر <pre> نصًا منسقًا مسبقًا (preformatted text)، والنص الموجود داخل هذا العنصر يُعرَض بخطٍ ذي عرضٍ ثابت (monospaced font) كما هو مكتوب في الملف المصدري تمامًا، وستُعرَض الفراغات الموجودة كما هي.

مثال عن استخدام العنصر <pre> لعرض شيفرة CSS بسيطة:

<!-- شيفرة CSS -->
<pre>
body {
  color:red;
}
</pre>

بطاقة العنصر

تصنيفات المحتوى محتوى تنظيمي.
المحتوى المسموح محتوى عادي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLPreElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصيتان cols و width (اللتان تحددان العدد الأمثل للمحارف في السطر) مهملتين في HTML5 ولا يجب استخدامهما في الصفحات الحديثة.

التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر <pre> مع ضبط الخاصية display إلى block، والخاصية font-family إلى monospace (خط ذو عرض ثابت)، والخاصية white-space إلى pre، وجعل الهامش margin العلوي والسفلي مساويًا إلى 1em والهامش الأيمن والأيسر مساويًا إلى 0:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

مصادر ومواصفات