القائمة الرئيسية

الصفحات

طريقة كتابة النص في HTML و CSS | تنسيق html

 

النص في HTML و CSS

عنصر منظم

تغيير مكان النص في HTML،جميع اكواد css،تحريك النص في HTML،تغيير نوع الخط في HTML،رموز HTML،توسيط النص في HTML


عنصر منظم يشير إلى عناصر HTML ذات المعنى والوظيفة الواضحة ، مثل `` يمثل العنصر فقرة. مقارنة بإصدار HTML 4.01 ، يضيف إصدار HTML5 سلسلة من العناصر المنظمة.

عناصر HTML4.01 المنظمة

اسمالشفرة
عنصر العنوان<h1>~<h6>
عنصر فقرة<p>
عنصر غامق<b>
عناصر مائلة<i>
عنصر مرتفع / منخفض<sup>/<sub>
الخط مقطوع<br>
عنصر خط أفقي<hr>

عناصر هيكلية جديدة في HTML5

  • <article> جزء
  • <section> جزء
  • <nav> جزء
  • <aside> جزء
  • <header> جزء
  • <main> جزء
  • <footer> جزء

العناصر في HTML4

عنصر العنوان

يشير عنصر عنوان HTML على وجه التحديد إلى<h1>~<h6>العنصر ، الذي يقدم 6 مستويات مختلفة من العناوين ،<h1>مستوى العنصر هو الأعلى ،<h6>مستوى العنصر هو الأدنى. كل عنصر على خطه الخاص.

ملحوظة:

  • لمحركات البحث للزحف إلى محتوى صفحات HTML ،<h1> العناصر في المرتبة الثانية بعد<title>جزء. لكي يتم الزحف إليها بواسطة محركات البحث ، يوصى بأن تحتوي صفحة HTML على صفحة واحدة فقط<h1> جزء.
  • لا تستخدم العناوين ذات المستوى المنخفض لتقليل حجم الخط في العناوين ، ولكن استخدم خاصية حجم الخط CSS.
  • تجنب تخطي مستوى من العناوين ، ابدأ دائمًا من<h1> تبدأ العناصر ، استخدم بدوره<h2> جزء،<h3> عناصر،...

عنصر فقرة

HTML <p> يمثل العنصر فقرة. يوضح العنصر عادة أن نص الفقرة الحالية مفصول عن نص فقرات أخرى بمسافة بيضاء. يظهر رمز عينة التالية<p> استخدام العنصر:

<p>هذه هي الفقرة الأولى.</p>
<p>هذه هي الفقرة الثانية.</p>
  • 1
  • 2

عنصر غامق

HTML <b> تُستخدم العناصر لتحديد ما يجب تذكيره. تم اعتبار هذا العنصر ليكونعنصر غامق، لأن معظم المتصفحات تقوم بتحليل هذا العنصر لتقديم تأثير غامق.

إذا لم تستخدم لأغراض دلالية<b> العناصر ، فإن أفضل طريقة لجعل النص يظهر بخط غامق هي تعيين خاصية وزن الخط لـ CSS إلى غامق.

<b> سيناريوهات التطبيق لعناصر مثل الكلمات الرئيسية في الملخصات ، وأسماء المنتجات في التعليقات ، أو نص نموذجي آخر يجب عرضه بالخط العريض.

قبل<b> معنى العنصر هو جعل النص غامق. ومع ذلك ، نظرًا لأن إصدار HTML4 ، فإن العلامات ليست في صالح معلومات النمط ، لذلك<b> لقد تغير معنى العناصر.

عناصر مائلة

HTML<i> تُستخدم العناصر لتعريف سلسلة من النصوص التي تحتاج إلى تمييز النص العادي لسبب ما ، مثل المصطلحات التقنية أو العبارات الأجنبية أو الأنشطة الفكرية للشخصيات في الروايات. تحليل تشغيل المستعرض<i> تظهر العناصر بشكل عام بخط مائل.

عنصر مرتفع / منخفض

HTML <sup> يتم تمثيل العناصر كعناصر مرتفع ، HTML<sub> يتم تمثيل العناصر كعناصر منخفضة. خصائص هذين العنصرين هي كما يلي:

<sup> محتوى النص المحدد بواسطة العنصر أعلى وأصغر من المحتوى الرئيسي.
<sub> محتوى النص المحدد بواسطة العنصر أقل وأصغر من المحتوى الرئيسي.
يظهر نموذج التعليمات البرمجية التالي<sup> العنصر و<sub> استخدام العنصر:

<p>سوف تتعلم E = MC في الفصل الدراسي التالي<sup>2</sup> معادلة.</p>
<p>التركيب الكيميائي للماء يسمى H<sub>2</sub>O。</p>
  • 1
  • 2

bd65bcaa-96a4-4b84-9c9e-012befc62bb3.png

الخط مقطوع

HTML <br> يقوم العنصر بإنشاء فاصل أسطر في صفحة HTML. كتبت في<br> يتم تقديم محتوى النص خلف العنصر في السطر الثاني.

<span>ها ها ها ها</span>
<span>ها ها ها ها</span>

<span>ها ها ها ها</span>
<br>
<span>ها ها ها ها</span>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

يمكنك أن ترى الثاني يذهب أدناه

عنصر خط أفقي

HTML <hr> يتم استخدام العنصر لتمثيل انتقال السمة بين عناصر الفقرة. في الإصدارات السابقة من HTML ،<hr> يمثل العنصر خطًا أفقيًا ، كما أن تحليل تشغيل المستعرض هو أيضًا تأثير خط أفقي. لكن حاليا<hr> يتم تعريف العناصر على أنها دلالية ، وليست عرضية.

يظهر رمز عينة التالية<br> استخدام العنصر:

<p>§1: هذه فقرة.</p>
<hr>
<p>§2: هذه فقرة أخرى.</p>
  • 1
  • 2
  • 3

إصدار HTML5 للعناصر المنظمة

<article>جزء

HTML <article> تُستخدم العناصر لتحديد الهياكل القابلة للتخصيص أو القابلة لإعادة الاستخدام بشكل مستقل في صفحات HTML ، مثل منشورات المنتدى ، ومقالات مواقع الأخبار ، وما إلى ذلك.

<article>
<h1>تطوير الواجهة الأمامية</h1>
<p>تطوير الواجهة الأمامية الآن هو الاتجاه السائد في مجال تطوير البرمجيات.</p>
<p><small>حقوق التأليف والنشر تنتمي إلى *** شركة.</small></p>
</article>
  • 1
  • 2
  • 3
  • 4
  • 5

<section> جزء

HTML <section> يتم استخدام العنصر لتعريف جزء مستقل من صفحة HTML. لا يحتوي الجزء المستقل على عنصر دلالي أكثر تحديدًا لوصف العنصر.
حول<section> عند استخدام عناصر في التنمية ، انتبه إلى النقاط التالية:

بشكل عام ، ما إذا كان سيتم تضمين عنصر العنوان (<h1> ~ <h6>) كعنصر فرعي لتحديد كل منها<section> جزء.

إذا كان يمكن تقسيم محتوى العنصر إلى عدة أجزاء ، فيجب استخدامه<article> العنصر بدلاً من ذلك<section> جزء.

<section>
<article>
<p>هذا هو محتوى الاختبار الأول.</p>
</article>
<article>
<p>هذا هو محتوى الاختبار الثاني.</p>
</article>
</section>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

لا <section> يتم استخدام العنصر كحاوية عادية ، يجب أن يكون هذا<div> استخدام العنصر.

<nav> جزء

HTML <nav> تُستخدم العناصر لتحديد روابط التنقل في صفحات HTML ، وأكثرها شيوعًا هي القوائم والأدلة والفهارس.

<nav>
<ul>
<li><a href="#">تصميم وبناء موقع ثابت</a></li>
<li><a href="#">بناء جملة جافا سكريبت الأساسية</a></li>
<li><a href="#">فن برمجة DOM</a></li>
</ul>
</nav>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

التأثير الموضح في المثال أعلاه هو<ul> تأثير عنصر عرض القائمة ، لأنه لا يوجد<nav> يقوم العنصر بتعيين أي نمط CSS ، ولا يوجد أي تأثير افتراضي.

على<nav> عند استخدام عناصر في التنمية ، انتبه إلى النقاط التالية:

لا يجب استخدام جميع الروابط<nav> العنصر ، يُستخدم هذا العنصر فقط لوضع بعض الروابط الشائعة في شريط التنقل.
قد تكون هناك صفحات HTML متعددة<nav> جزء.

<aside> جزء

HTML <aside> يتم استخدام العنصر لتعريف محتوى غير ذي صلة تقريبًا ببقية صفحة HTML. يعتبر مستقلاً عن المحتوى ويمكن تقسيمه بشكل منفصل دون التأثير على الكل. عادةً ما يكون الشريط الجانبي أو مربع وسيلة الشرح أكثر شيوعًا.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>عنصر جانبا</title>
<style>
aside {
width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e;
}
</style>
</head>

<body>
<article>
<p>
أفلام ديزني<cite>بنت البحر</cite><cite>The Little Mermaid</cite>) ظهر لأول مرة على الشاشة عام 1989.
</p>
<aside>
خلال عرضه الأولي ، حصل الفيلم على 87 مليون دولار أمريكي في شباك التذاكر.
</aside>
<p>
المزيد عن الفيلم ...
</p>
</article>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

<header> جزء

HTML <header> يتم استخدام العنصر لتعريف محتوى صفحة HTML التي لها دور التوجيه والملاحة. وأكثرها شيوعًا هي الشعار ومربع البحث واسم المؤلف وما إلى ذلك.

<header>
<h1>عنوان الصفحة الرئيسية</h1>
</header>
<article>
<header>
<h2>تطوير الواجهة الأمامية</h2>
<p>تطوير الواجهة الأمامية الآن هو الاتجاه السائد في مجال تطوير البرمجيات.</p>
</header>
<p>هذا هو محتوى الاختبار الأول.</p>
<p><a href="#">المزيد من المحتوى ....</a></p>
</article>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

صفحة HTML لا تحتوي على قيود ، يمكن أن تظهر واحدة فقط<header> العنصر ، يمكنك إضافة واحد لكل كتلة محتوى<header> جزء.

<main> جزء

HTML <main> يتم استخدام العنصر لتعريف المحتوى الرئيسي لصفحة HTML. يشير قالب المحتوى الرئيسي إلى المحتوى المرتبط مباشرة بعنوان الصفحة أو الوظيفة الرئيسية. يجب أن يكون هذا الجزء من المحتوى فريدًا في صفحة HTML ، بدون أي محتوى مكرر.

حول<main> عند استخدام عناصر في التنمية ، انتبه إلى النقاط التالية:

يمكن أن يظهر واحد فقط في صفحة HTML<main> جزء.
<mian> لا يمكن أن يظهر العنصر في<article> جزء،<aside> جزء،<nav> جزء،<header> العنصر و<footer>الجزء الداخلي من العنصر.

<footer> جزء

HTML <footer> يتم استخدام العنصر لتعريف محتوى الفصل في عنصر HTML أو تذييل العنصر الجذر. يحتوي التذييل عادةً على معلومات مثل مؤلف الفصل أو بيانات حقوق النشر أو ارتباطات المستندات.

على<footer> يجب ملاحظة العناصر عند استخدامها في التنمية<footer>يجب تضمين معلومات المؤلف في العنصر في<address> جزء.

فارغ

عندما يقوم المستعرض بتشغيل صفحة HTML وتحليلها ، وعندما يصادف مسافتين متتاليتين أو أكثر ، فسيتم عرضها فقط كتأثير مسافة. تسمى هذه الخاصيةللطي الفضاء الأبيض

هروب الشخصية

الطابع الحرفيوصفهروب الشخصية
الفراغ&nbsp;
<أقل من تسجيل&lt;
>أكثر من&gt;
&علامة العطف&amp;
"علامات الاقتباس&quot;
©حقوق النشر&copy;
®علامة تجارية&reg;
علامة تجارية&trade;
×علامة الضرب&times;
÷قطاع&divide;

العناصر الدلالية

العناصر الدلاليةعلى غرار العناصر المنظمة ، فهي كلها عناصر ذات معاني محددة ، والفرق هو أن العناصر الدلالية تحدد أكثر دلالات أو نمط كلمة أو سطر من المحتوى.
تعرض القائمة التالية بعض العناصر الدلالية:

اسمالشفرةتعريفتأثير
عنصر غامق<strong>محتوى نص مهم جدا في صفحات HTMLيتم عرض تأثير الاستعراض افتراضيًا عندما يقوم المستعرض بتشغيل صفحة HTML
أكد على العناصر<em>محتوى نصي في صفحات HTML يتطلب من المستخدمين التركيز على القراءةيتم عرض التأثير المائل بشكل افتراضي عندما يقوم المستعرض بتشغيل صفحة HTML
عنصر مرجعي<blockquote> مع<q>HTML blockquote يتم استخدام العنصر لتعريف المحتوى المرجعي المقتبس لفترات طويلة في صفحة HTML ، والذي يتم وضع مسافة بادئة له بشكل عام بعد أن يقوم المتصفح بتحليله. لغة البرمجةq يتم استخدام العنصر لتعريف المحتوى المقتبس القصير في صفحة HTML ، وسيستخدم المتصفح علامات الاقتباس على كلا الجانبين بعد التحليل.الرمز 1
عنصر الاقتباس<cite>مرجع لعمل في صفحة HTML. يجب أن يحتوي هذا العنصر على عنوان أو عنوان URL يشير إلى العمل بتنسيق مختصر ، والذي قد يكون نموذجًا مختصرًا بناءً على اصطلاح إضافة البيانات الوصفية المرجعية.سيتم عرض التأثير المائل بعد تحليل المتصفح
تحديد العنصر<dfn>حدد المصطلحات في صفحات HTMLسوف تفعل بعض المتصفحات<dfn> يتم عرض العناصر بخط مائل بعد التحليل ، ولكن متصفحات Safari و Chrome لن تغير نمطها.
عنصر العنوان<address>توفر صفحة HTML معلومات اتصال لشخص أو مؤسسةبعد تحليل المتصفح ، سيتم عرضه بخط مائل
عنصر تعديل المحتوى<del> مع<ins>HTML delيتم استخدام العنصر لتعريف محتوى النص المحذوف في صفحة HTML ، HTMLins يتم استخدام العنصر لتعريف محتوى النص المدرج في صفحة HTML.الرمز 2

الرمز 1

<blockquote>
<p>
هذا جزء من النص المستخدم في الاقتباس.
</p>
</blockquote>
<p>وصف:<q>الإعلان ليس عنصر HTML.</q></p>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

QQ 20200104164342.png

عنصر الاقتباس

الرمز 2

<p>واجهة أمامية جيدة<del>صعب</del><ins>سهل</ins>دراسة</p>
  • 1

نوع الخط

تعيين الخط

CSS font-family تقوم السمة بتعيين الخط في صفحة HTML من خلال قائمة بأسماء الخطوط أو أسماء مجموعات الخطوط.

p {
عائلة الخطوط: Times New Roman؛
}
  • 1
  • 2
  • 3

قم بتعيين اسم الخط أو اسم عائلة الخط

طريقتان للإعداد. لا يوصى بتعيين قيمة لملكية عائلة الخطوط. ولهذا السبب ، عندما يقوم المستعرض بتشغيل صفحة HTML ، فمن المحتمل جدًا عدم العثور على هذا الخط أو عائلة الخطوط ، مما يؤدي إلى عدم عرض الخط كما هو متوقع.

اسم عائلة الخط

يجب أن يكون اسم عائلة الخطفعالمن. يمكن تقسيمها إلى الحالات التالية:

  • إذا كان اسم عائلة الخط مكونًا من سلسلة تعريف قانونية واحدة أو أكثر ، فلا يمكن أن تكون هناك علامات اقتباس.
  • إذا كان اسم عائلة الخط مكونًا من سلسلة تعريف غير قانونية واحدة أو أكثر ، فيجب استخدام علامات الاقتباس.
  • لا يمكن استخدام أحرف علامات الترقيم والأحرف الرقمية في بداية أسماء عائلة الخطوط بدون علامات اقتباس.
اسم عائلة الخط العام

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

  • serif: خط Serif مع خطوط زخرفية خاصة أو serifs في نهاية السكتة الدماغية.
  • sans-serif: خط Sans serif ، أي الخط الأملس في نهاية السكتة الدماغية.
  • monospace: خط monospace ، أي أن كل كلمة في الخط لها نفس العرض.
  • مخطوطة: خط متصل. بعض هذه الخطوط لها حدود مستمرة ، وبعضها له تأثيرات مائلة خاصة.
  • الخيال: بشكل أساسي تلك الخطوط ذات التأثيرات الفنية الخاصة.

تعيين أسماء خطوط متعددة أو أسماء عائلة الخطوط

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

p {
font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}
  • 1
  • 2
  • 3

حجم الخط

p {
font-size: 24px;
}
  • 1
  • 2
  • 3

قيمة خاصية حجم الخط

اسمالشفرة
الحجم المطلقxx-smallx-smallsmallmediumlargex-largex-large
القيمة النسبية للحجمlargersmaller
قيمة الطولpxemremex
النسبة المئويةهذه القيمة هي نسبة بالنسبة إلى حجم الخط للعنصر الأصلي.

يجب الانتباه إلى النقاط التالية عند استخدام عنصر العنوان في التطوير:

  • من الأفضل استخدام الحجم النسبي لحجم الخط الافتراضي للمستخدم ، وتجنب استخدامهem أوex وحدة الحجم المطلق.
  • إذا كان يجب عليك استخدام الحجم المطلق ،px إنه الخيار الأفضل بين العديد من الوحدات.

سماكة

p {
font-weight: bolder;
}
  • 1
  • 2
  • 3

قيمة خاصية حجم الخط

اسمالشفرة
قيمه مطلقهnormal معbold قيمتان.normal تعادل القيمة العددية 400 ،bold تعادل القيمة العددية 700.
قيمة ذات صلةlighter معbolder قيمتان. أفتح / أكثر جرأة من القيمة الموروثة من العنصر الأصلي (في نطاق قيم سمك الخط المحتملة).
قيمة عدديةالقيم بين 100 ~ 900.

ملحوظة: بعض الخطوط متوفرة فقطnormal معbold قيمتان.

تعيين مائل

.italic {
font-style: italic;
}

.oblique {
font-style: oblique;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

ليس كل الخطوط لها بالضبطoblique معitalic الصورة الرمزية. ومع ذلك ، سيقوم المتصفح بمحاكاة الصور الرمزية المفقودة باستخدام الصور الرمزية الموجودة.

خاصية الخط

يتم استخدام خاصية الخط CSS كاختصار لخصائص عائلة الخط وحجم الخط ووزن الخط ونمط الخط ومتغير الخط وارتفاع خصائص الخط ، أو لتعيين خط عناصر HTML إلى خط النظام.

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

  • يجب تحديد سمات نمط الخط ومتغير الخط ووزن الخط قبل سمة حجم الخط.
  • يجب تعريف سمة ارتفاع السطر بعد سمة حجم الخط ، بواسطة/ منفصل ، على سبيل المثال16px/3
  • يجب تعريف سمة عائلة الخط أخيرًا.

خط النظام

إذا تم تحديد قيمة سمة الخط ككلمة أساسية للنظام ، فيجب أن تكون إحدى كلمات النظام الأساسية التالية:

  • التسمية التوضيحية: خط النظام المستخدم لعناصر تحكم التسمية التوضيحية (مثل الأزرار والقوائم المنسدلة وما إلى ذلك).
  • الرمز: خط النظام المستخدم لرمز التسمية.
  • القائمة: خط النظام المستخدم في القائمة (كما هو موضح في القائمة المنسدلة وقائمة القائمة أدناه).
  • message-box: خط النظام المستخدم لمربعات الحوار.
  • تسمية توضيحية صغيرة: خط النظام المستخدم لعناصر تحكم التسمية التوضيحية الصغيرة.
  • شريط الحالة: خط النظام المستخدم لشريط حالة النافذة.
.p1 {
font: 12px/14px sans-serif;
}

.p2 {
font: 80% sans-serif;
}

.p3 {
font: bold italic large serif;
}

.p4 {
font: status-bar;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

تضمين خطوط الويب

@font-face وهي واحدة من @ Rules of CSS ، تستخدم لإدخال الخطوط عبر الإنترنت لصفحات HTML. من خلال @ font-face ، يمكننا إعداد ملف الخط بأنفسنا ، حتى نتمكن من التخلص من الاعتماد على خط الكمبيوتر الخاص بالمستخدم.

@font-face {
[ font-family: <family-name>; ] ||
[ src: <src>; ] ||
[ unicode-range: <unicode-range>; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: <font-feature-settings>; ] ||
[ font-variation-settings: <font-variation-settings>; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <font-weight>; ] ||
[ font-style: <font-style>; ]
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • font-family: سيتم استخدام اسم الخط المحدد لخاصية الخط أو عائلة الخطوط.
  • src: تمريرurl() تحدد الوظيفة موقع ملف الخط البعيد ، أو من خلالlocal() تحدد الوظيفة الخط على الكمبيوتر المحلي للمستخدم.
  • font-variant: نفس خاصية font-variant.
  • امتداد الخط: نفس خاصية امتداد الخط.
  • وزن الخط: مثل خاصية وزن الخط.
  • نمط الخط: مثل خاصية نمط الخط.
@font-face {
font-family: "Alibaba PuHuiTi";
src: url("/fonts/Alibaba-PuHuiTi-Regular.ttf");
}

body {
font-family: "Alibaba PuHuiTi", serif
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

نمط النص

اسمالشفرةتعريف
تعديل النصtext-decorationتعيين تخطيط النص في صفحة HTML
تباعد الأسطرline-heightقم بتعيين مقدار المسافة بين أسطر متعددة من العناصر في صفحة HTML
تباعد الحروف / الكلماتletter-spacing/word-spacingتقنين الأحرف هو مصطلح تستخدمه صناعة الطباعة لوصف الفجوة بين الحروف
محاذاة أفقيةtext-alignقم بتعيين المحاذاة الأفقية لمحتوى النص لصفحة HTML بالنسبة للعنصر الموجود فيه
انحياز عموديvertical-alignتعيين المحاذاة الرأسية للعناصر المضمنة أو عناصر خلايا الجدول في صفحات HTML
المسافة البادئة النصtext-indentيضبط مقدار المسافة البادئة قبل السطر الأول من النص في عناصر مستوى الكتلة في صفحات HTML
ظل النصtext-shadowاضبط ظل محتوى النص في صفحة HTML
التفاف النصword-wrapمعword-breakلف النص تلقائيًا والطرف الأيمن من المتصفح
التعامل مع الفراغاتwhite-spaceقم بتعيين كيفية معالجة المساحة البيضاء في عناصر HTML

زخرفة النص

يتم استخدام خاصية CSS text-decoration لتعيين تخطيط النص في صفحات HTML (التسطير أو السطر العلوي أو يتوسطه خط أو وميض). سمة زخرفة النص هي سمة مختصرة ، ويمكن استخدام أي من القيم الثلاث للسمة العادية. السمات الشائعة هي كما يلي:

  • سمة سطر نص الزخرفة: تُستخدم لتعيين نوع الزخرفة للنص في العنصر.
  • السمة text-decoration-color: تستخدم لتعيين لون خط زخرفة النص.
  • السمة text-decoration-style: تستخدم لتعيين نمط السطر الذي تم تعيينه بواسطة السطر text-decoration-line.

يوضح نموذج التعليمات البرمجية التالي استخدام السمات المشتركة الثلاثة لتزيين النص:

p {
text-decoration-color: lightcoral; / * تسطير اللون * /
text-decoration-line: underline; / * تسطير * /
text-decoration-style: solid; /* خط الصلبة */
}
  • 1
  • 2
  • 3
  • 4
  • 5

تمتد سمة زخرفة النص لتشمل العناصر المنحدرة. هذا يعني أنه إذا كان عنصر الأصل يحدد سمة تعديل النص ، فلا يمكن للعناصر المنحدرة حذفها

تباعد الأسطر (ارتفاع الخط)

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

كما هو موضح في الشكل أعلاه ، الخط الأحمر هو الخط العلوي ، والخط البنفسجي هو الخط الأوسط ، والخط الأخضر هو الخط الأساسي ، والخط الأصفر هو الخط السفلي. يشير الجزء العلوي والوسطى والخط السفلي وأسفل خاصية المحاذاة الرأسية التي سيتم شرحها لاحقًا في هذا القسم إلى هذه الخطوط الأربعة.

  • تباعد الأسطريُعرف أيضًا باسمارتفاع الصفيشير إلى مسافة الخط الأساسي في سطري محتوى النص ، أي المسافة بين الخطين الأخضر. هذه هي المساحة 1 و 2 و 3 و 4 في الشكل أعلاه.
  • تباعد الأسطريشير إلى المسافة بين الخط السفلي للصف السابق والخط العلوي للصف التالي ، أي المسافة بين الخط الأصفر للصف السابق والخط الأحمر للصف التالي.
  • حجم الخطالقيمة هي المسافة من الخط العلوي إلى الخط السفلي ، أي المسافة من الخط الأحمر إلى الخط الأصفر. هذه هي المساحة 1 و 2 و 4 في الشكل أعلاه.

قيمة سمة ارتفاع السطر

السماتالمعنى
الكلمة الرئيسية العاديةتعتمد هذه القيمة على جهاز الكمبيوتر الخاص بالمستخدم. بشكل عام ، القيمة الافتراضية التي يستخدمها المتصفح هي 1.2.
قيمة عدديةقيمة التأثير النهائي هي القيمة الرقمية مضروبة في حجم خط العنصر (قيمة سمة حجم الخط)
قيمة الطولإذا كنت تستخدمem قد تنتج الوحدات تأثيرات غير مؤكدة.
النسبة المئويةقيمة التأثير النهائي هي قيمة النسبة المئوية مضروبة في حجم خط العنصر (قيمة سمة حجم الخط).
.div1 {
line-height: 1.2;
font-size: 10pt;
}

/ * رقم قيمة بدون وحدة / بدون وحدة * /
.div2 {
line-height: 1.2em;
font-size: 10pt;
}

/* طول طول */
.div3 {
line-height: 120%;
font-size: 10pt;
}

/* النسبة المئوية */
.div4 {
font: 10pt/1.2 Georgia, "Bitstream Charter", serif;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

تباعد الحروف (تباعد الحروف) وتباعد الكلمات (تباعد الكلمات)

تباعد الحروف

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

قيمة سمة تباعد الحروف

السماتالمعنى
normalيتم تحديد القيمة وفقًا للمسافة العادية للخط الحالي.
قيمة الطولحدد التباعد بين النص لاستبدال التباعد الافتراضي ، والذي يمكن أن يكون سالبًا.
.first-example {
letter-spacing: 0.4em;
}

.second-example {
letter-spacing: 1em;
}

.third-example {
letter-spacing: -0.05em;
}

.fourth-example {
letter-spacing: 6px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

تباعد الكلمات

يتم استخدام خاصية تباعد الكلمات في CSS لتحديد المسافة بين العلامات أو الكلمات في صفحات HTML ،هذه السمة صالحة للغة الإنجليزية ، ولكنها غير صالحة للصينية.

السماتالمعنى
normalيتم تحديد القيمة وفقًا للمسافة العادية للخط الحالي.
قيمة الطولحدد التباعد بين الكلمات لاستبدال التباعد الافتراضي.
النسبة المئويةحدد التباعد بين الكلمات لاستبدال النسبة المئوية الافتراضية للمسافة.
.first-example {
word-spacing: 15px;
}

.second-example {
word-spacing: 5em;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

المحاذاة الأفقية (محاذاة النص)

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

.example {
text-align: right;
}
  • 1
  • 2
  • 3

قيمة السمة محاذاة النص لها 7 أنواع

السماتالمعنى
startإذا كان اتجاه المحتوى من اليسار إلى اليمين ، فإنه يساوي اليسار ، وإلا فهو صحيح.
endإذا كان اتجاه المحتوى من اليسار إلى اليمين ، فإنه يساوي اليمين ، وإلا فسيتم تركه.
leftتتم محاذاة المحتوى في السطر إلى اليسار.
rightتتم محاذاة المحتوى في السطر إلى اليمين.
centerمحتوى السطر في المنتصف.
justifyيتم محاذاة النص إلى كلا الجانبين وليس له تأثير على السطر الأخير.
justify-allمعjustify متناسق ، ولكن فرض محاذاة السطر الأخير عند كلا الطرفين.

محاذاة عمودية (محاذاة عمودية)

تُستخدم خاصية المحاذاة الرأسية لـ CSS لتعيين المحاذاة الرأسية للعناصر المضمنة أو عناصر خلايا الجدول في صفحات HTML. يمكن تطبيق سمة المحاذاة الرأسية على بيئتين:

  • يضبط المحاذاة الرأسية لنموذج المربع لعنصر مضمن وعنصر الحاوية الرئيسي للعنصر المضمن.
  • تعيين المحاذاة الرأسية للمحتوى في خلية في الجدول.

إن سمة المحاذاة العمودية صالحة فقط للعناصر المضمنة وخلايا النموذج ، وليس للعناصر على مستوى الكتلة.

ستختلف قيمة سمة المحاذاة الرأسية وفقًا لبيئتي تطبيق:

  • القيمة المطبقة على العناصر المضمنة
    • بالنسبة إلى قيمة العنصر الأصل
      • الخط الأساسي: قم بمحاذاة الخط الأساسي للعنصر مع الخط الأساسي للعنصر الرئيسي.
      • sub: قم بمحاذاة خط الأساس للعنصر مع خط الأساس المنخفض للعنصر الأصلي.
      • super: محاذاة الخط الأساسي للعنصر مع الخط الأساسي المرتفع للعنصر الأصلي.
      • text-top: قم بمحاذاة الجزء العلوي من العنصر بأعلى خط العنصر الأصل.
      • text-bottom: قم بمحاذاة الجزء السفلي من العنصر مع الجزء السفلي من خط العنصر الأصل.
      • الوسط: قم بمحاذاة منتصف العنصر مع خط الأساس للعنصر الرئيسي بالإضافة إلى نصف ارتفاع العنصر الأصل.
    • القيمة المتعلقة بالخط
      • أعلى: قم بمحاذاة الجزء العلوي من العنصر ونسله مع الجزء العلوي من الخط بأكمله.
      • القاع: قم بمحاذاة الجزء السفلي من العنصر ونسله مع الجزء السفلي من الخط بأكمله.
  • القيمة المطلوب تطبيقها على خلايا النموذج
    • الخط الأساسي: قم بمحاذاة الخط الأساسي للخلية مع خطوط الأساس لجميع الخلايا الأخرى في الصف بمحاذاة الخط الأساسي.
    • أعلى: قم بمحاذاة الحافة العلوية من الهامش الداخلي للخلية مع أعلى الصف.
    • الوسط: توسيط نموذج مربع هامش الخلية في الصف.
    • أسفل: محاذاة الحافة السفلية من الهامش الداخلي للخلية مع الجزء السفلي من الصف.
img.top {
vertical-align: text-top;
}

img.bottom {
vertical-align: text-bottom;
}

img.middle {
vertical-align: middle;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

المسافة البادئة النص

تُستخدم خاصية المسافة البادئة للنص CSS لتعيين مقدار المسافة البادئة قبل السطر الأول من محتوى النص لعناصر مستوى الكتلة في صفحات HTML.

.example {
text-indent: 5em;
}
  • 1
  • 2
  • 3
السماتالمعنى
قيمة الطولالسماح بقيم سالبة
النسبة المئويةاستخدم النسبة المئوية لعرض عنصر مستوى الكتلة كمسافة بادئة
each-lineستؤثر المسافة البادئة النصية على السطر الأول والاستخدام<br> السطر الأول بعد العنصر فاصل السطر القسري.
hangingتعكس هذه القيمة المسافة البادئة لجميع الأسطر: سيتم وضع مسافة بادئة لجميع الأسطر باستثناء السطر الأول ، ويبدو أن السطر الأول له قيمة مسافة بادئة سالبة.

ظل النص

تُستخدم خاصية CSS text-shadow لتعيين ظل محتوى النص في صفحة HTML.

selector {
text-shadow: color offset-x offet-y blur-raduis;
}
  • 1
  • 2
  • 3
  • اللون: اختياري ، اضبط لون الظل لمحتوى النص.

  • offset-x: مطلوب ، اضبط الإزاحة الأفقية لظل محتوى النص.

    • إذا كانت القيمة أقل من 0 ، فهذا يعني الإزاحة إلى اليسار.
    • إذا كانت القيمة تساوي 0 ، فهذا يعني أنه لا يوجد إزاحة في الاتجاه الأفقي.
    • إذا كانت القيمة أكبر من 0 ، فهذا يعني الإزاحة إلى اليمين.
  • offset-y: مطلوب ، اضبط الإزاحة الرأسية لظل محتوى النص.

    • إذا كانت القيمة أقل من 0 ، فإنها تشير إلى تحول صعودي.
    • إذا كانت القيمة تساوي 0 ، فهذا يعني أنه لا يوجد إزاحة في الاتجاه العمودي.
    • إذا كانت القيمة أكبر من 0 ، فإنها تشير إلى تحول إلى أسفل.
  • blur-raduis: اختياري ، اضبط نصف قطر ظل الضبابية لمحتوى النص.

    في حالة عدم التحديد ، يتم تعيين القيمة الافتراضية على 0. كلما كانت القيمة أكبر ، زاد نصف قطر التمويه ، وأصبح الظل أكبر وأفتح.

تعيين ظل واحد

.example {
text-shadow: red 0 -2px;
}
  • 1
  • 2
  • 3

ضبط ظلال متعددة

.example {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}
  • 1
  • 2
  • 3

عند تعيين ظلال متعددة لمحتوى النص من خلال خاصية ظل النص ، يتم تطبيق ترتيب الظلال من اليسار إلى اليمين ، مع الظل المحدد الأول في الأعلى.

التفاف النص (التفاف الكلمات وفاصل الكلمات)

  • بالنسبة إلى النص الغربي ، يلتف المتصفح تلقائيًا في مسافات نصفية أو واصلات.
  • بالنسبة إلى النص الصيني ، يمكنك الالتفاف بعد أي نص. عادة ، يتم لف علامات الترقيم والنص السابق ككل.

سمة التفاف الكلمات

تنتمي خاصية التفاف الكلمات إلى خاصية خاصة لشركة Microsoft وتمت إعادة تسميتها لتجاوز الالتفاف في مواصفات نص CSS3. التفاف الكلمات كما التفاف الفائضالاسم المستعار

تحتوي قيمة السمة overflow-wrap على النوعين التاليين:

  • عادي: يشير إلى فاصل أسطر في نهاية كلمة عادية.
  • فاصل: يشير إلى أنه إذا لم يكن هناك مساحة إضافية في السطر لاستيعاب الكلمة حتى النهاية ، فإن الكلمات العادية التي لا يمكن تقسيمها ستضطر إلى الانقسام واللف.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>خاصية التفاف الفائض</title>
<style>
.example {
width: 13em;
background: gold;
}

.break {
overflow-wrap: break-word;
}
</style>
</head>

<body>
<p class="example">
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher
Vorschriften)
</p>
<p class="example break">
FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher
Vorschriften)
</p>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

سمة فاصل الكلمات

يتم استخدام خاصية فاصل الكلمات CSS لتعيين طريقة التفاف النص في صفحات HTML. من خلال تحديد قيمة السمة المحددة ، يمكن إعلام المتصفح لتحقيق فاصل الأسطر في أي موضع.

تحتوي قيمة سمة فاصل الكلمات على الأنواع الثلاثة التالية:

  • عادي: استخدم قاعدة فاصل الأسطر الافتراضية.
  • فاصل الكل: بالنسبة لمحتوى النص بخلاف الصينية واليابانية والكورية ، يمكن للإعداد أن يقطع الخطوط بين أي أحرف.
  • Keep-all: المحتوى النصي باللغات الصينية واليابانية والكورية قيد التشغيل باستمرار ، ومحتوى النص بلغات أخرى يعادل المحتوى العادي.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>سمة فاصل الكلمات</title>
<style>
.narrow {
width: 60%;
padding: 20px;
text-align: start;
border: solid 1px #a9a9a9;
}

.normal {
word-break: normal;
}

.breakAll {
word-break: break-all;
}

.keepAll {
word-break: keep-all;
}
</style>
</head>

<body>
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グ レ ー ト ブ リ テ ン お よ び ア イ ド と い う は に い </p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グ レ ー ト ブ リ テ ン お よ び ア イ ド と い う は に い </p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グ レ ー ト ブ リ テ ン お よ び ア イ ド と い う は に い </p>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

التعامل مع المساحة البيضاء

يتم استخدام خاصية المسافة البيضاء في CSS لتعيين كيفية التعامل مع المساحة البيضاء في عناصر HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>سمة المساحة البيضاء</title>
<style>
#example-element {
width: 16rem;
}

#example-element p {
background-color: #eee;
padding: .75rem;
text-align: left;
}

.example {
/ * عيّن قيمًا مختلفة لسمة المسافة البيضاء لاختبار التأثير * /
}
</style>
</head>

<body>
<div id="example-element" class="example">
<p>But ere she from the church-door stepped
She smiled and told us why:
'It was a wicked woman's curse,'
Quoth she, 'and what care I?'

She smiled, and smiled, and passed it off
Ere from the door she stept—</p>
</div>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

تلخص القائمة التالية سلوك قيم سمة المسافة البيضاء المختلفة:

الخط مقطوعالمسافات وعلامات التبويبانتقال النص
normalدمجدمجيتغيرون
nowrapدمجدمجلا تغيير
preاحتفظاحتفظلا تغيير
pre-wrapاحتفظاحتفظيتغيرون
pre-lineاحتفظدمجيتغيرون
break-spacesاحتفظاحتفظيتغيرون

How to Learn HTML and CSS Fast and Easily


تعليقات

التنقل السريع