تعلم معايير الويب واتبع معايير الويب للتطوير والإنتاج. لقد ناقش موقع 52CSS.com معكم العديد من المشكلات المتعلقة بالتخطيط، والمحتوى الرئيسي المعروض على الصفحة هو الصور والنصوص. واليوم، سنناقش معكم المشكلات المتعلقة بتخطيط النص في تخطيط صفحة ويب CSS.
كيفية تعيين الخط واللون والحجم ومساحة الفقرة والأحرف الاستهلالية والمسافة البادئة للسطر الأول. أخيرًا، سنتحدث عن بعض التخطيطات الصينية شائعة الاستخدام على صفحات الويب، مثل اقتطاع الأحرف الصينية، ولف الكلمات ذات العرض الثابت (التفاف الكلمات وفواصل الكلمات)، وما إلى ذلك. نظرًا لأنني أكتب فقط بعض الخبرة التطبيقية، إذا كنت بحاجة إلى مقدمة كاملة لخصائص CSS ودراسة أكثر تعمقًا، فنحن نرحب بك للرجوع إلى المزيد من البرامج التعليمية على موقع 52CSS.com.
1. قم بتعيين خط النص واللون والحجم وما إلى ذلك باستخدام الخط وما إلى ذلك.
يقوم نمط الخط بتعيين الخطوط المائلة، مثل نمط الخط: مائل؛
يضبط وزن الخط سمك النص، مثل وزن الخط: غامق؛
حجم الخط يضبط حجم النص، مثل حجم الخط: 12 بكسل (أو 9 نقطة، يرجى الرجوع إلى دليل CSS لمعرفة مشكلات العرض في الوحدات المختلفة)
ارتفاع الخط يضبط تباعد الأسطر، مثل ارتفاع الخط: 150%؛
اللون يضبط لون النص (ملاحظة ليس لون الخط)، مثل اللون: أحمر؛
تقوم عائلة الخطوط بتعيين الخط، مثل عائلة الخطوط: "Lucida Grande"، وVerdana، وLucida، وArial، وHelvetica، وSong Dynasty، وsans-serif (هذه طريقة كتابة شائعة)
2. تخطيط الفقرة: استخدم الهامش والحشو ومحاذاة النص.
تستخدم الفقرات الصينية العلامة <p> (أو أي حاويات أخرى) ويمكن استخدام الهامش أو الحشو لليسار واليمين (أي ما يعادل المسافة البادئة) والمسافة البيضاء قبل الفقرة وبعدها. على سبيل المثال:
مثال لكود المصدر [www.downcodes.com]
ص {
الهامش: 18 بكسل 6 بكسل 6 بكسل 18 بكسل؛
/*هم أعلى، يمين، أسفل، يسار، في اتجاه عقارب الساعة بدءًا من الساعة الثانية عشرة ظهرًا*/
}
استخدم محاذاة النص لمحاذاة النص، على سبيل المثال:
مثال لكود المصدر [www.downcodes.com]
ص {
محاذاة النص: المركز /*محاذاة المركز*/
}
تتضمن طرق المحاذاة اليسار واليمين والضبط (ضبط كلا الطرفين)
هناك العديد من المبتدئين الذين ليسوا على دراية بالهامش والحشو، انظر الصورة أدناه للتمثيل.
3. النص الرأسي: استخدم وضع الكتابة.
تحتوي سمة وضع الكتابة على قيمتين، lr-tb وtb-rl، القيمة الافتراضية هي اليسار-اليمين، أعلى-أسفل، والأخيرة هي أعلى-أسفل، يمين-يسار.
على سبيل المثال:
مثال لكود المصدر [www.downcodes.com]
ص {
وضع الكتابة: tb-rl؛
}
يمكن دمجها مع تنضيد الاتجاه.
4. مشكلة التعداد النقطي: استخدام نمط القائمة
تتضمن رموز التعداد النقطي في CSS القرص (نقطة مصمتة)، والدائرة (دائرة مفتوحة)، والمربع (مربع مصمت)، والعلامة العشرية (الأرقام العربية)، والحرف الروماني السفلي (الأرقام الرومانية الصغيرة)، والحرف الروماني العلوي (الأرقام الرومانية الكبيرة)، والألفا السفلية (الأحرف الإنجليزية الصغيرة)، ألفا العليا (الأحرف الإنجليزية الكبيرة)، لا شيء (لا شيء). على سبيل المثال، قم بتعيين التعداد النقطي لقائمة (ul أو ol) على مربعات، مثل:
مثال لكود المصدر [www.downcodes.com]
لي {
نمط القائمة: مربع؛
}
بالإضافة إلى ذلك، يحتوي نمط القائمة أيضًا على بعض القيم، على سبيل المثال، يمكنك استخدام بعض الصور الصغيرة كنقاط نقطية، وما عليك سوى كتابة عنوان url ("عنوان الصورة") مباشرةً أسفل نمط القائمة. لكن موقع 52CSS.com لا يشجع بشدة هذا النهج. يوصى بتعيين الصورة كخلفية للي.
5. تأثير الغطاء المسقط
كائن زائف: يمكن استخدام الحرف الأول مع حجم الخط والتعويم لإنشاء تأثير الأحرف الاستهلالية.
على سبيل المثال:
مثال لكود المصدر [www.downcodes.com]
ص:الحرف الأول{
الحشو: 6 بكسل؛
حجم الخط: 32 نقطة؛
تعويم: يسار؛
}
6. المسافة البادئة للنص: استخدم المسافة البادئة للنص
يمكن للمسافة البادئة للنص أن تضع مسافة بادئة للسطر الأول في الحاوية بوحدة معينة. على سبيل المثال، تحتوي الفقرات الصينية عادةً على حرفين صينيين قبل كل فقرة. يمكن كتابتها على النحو التالي:
مثال لكود المصدر [www.downcodes.com]
ص {
مسافة بادئة للنص: 2em /*em وحدة نسبية، 2em ضعف حجم الكلمة*/
}
إذا كان حجم الخط هو 12 بكسل، فسيتم وضع مسافة بادئة للنص: 2em بمقدار 24 بكسل.
7. اقتطاع الأحرف الصينية ذات العرض الثابت: استخدم تجاوز النص (عرض تأثير علامة الحذف)
يمكن استخدام لغة الخلفية لاقتطاع محتوى الحقل في قاعدة البيانات، على سبيل المثال، 12 حرفًا صينيًا (باستخدام علامات الحذف فيما بعد). لكن في بعض الأحيان يكون من الضروري تصفية علامات html وما إلى ذلك، ولكن استخدام CSS للتحكم ليس لديه هذه المشكلة. على سبيل المثال، قم بتطبيق النمط التالي على القائمة:
مثال لكود المصدر [www.downcodes.com]
لي {
تجاوز: مخفي؛
تجاوز النص: القطع الناقص؛
مسافة بيضاء:nowrap;
}
8. فاصل أسطر للأحرف الصينية (الكلمة) ذو عرض ثابت: استخدم فاصل الكلمات
على سبيل المثال، إذا كنت تريد عرض العديد من أسماء الأماكن (يفترض أنها مفصولة بمسافات) في حاوية ذات عرض ثابت، لتجنب تقسيم أسماء الأماكن في المنتصف (أي تكون كلمة واحدة في الأعلى وكلمة أخرى مقطوع إلى السطر التالي). ثم يمكنك استخدام فاصل الكلمات. على سبيل المثال:
مثال لكود المصدر [www.downcodes.com]
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
نانجينغ شنغهاي شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي شنغهاي نانجينغ شنغهاي شنغهاي نانجينغ شنغهاي شانغهاي نانجينغ شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي نانجينغ شنغهاي شنغهاي نانجينغ شنغهاي شنغهاي
</div>
ومن الجدير بالذكر أنه لا يمكن استبدال المساحات الداخلية بـ (يجب أن تكون هناك مساحة ناعمة واحدة على الأقل). .
9. التدوين الصوتي الصيني: استخدام علامات الياقوت وسمات محاذاة الياقوت
على سبيل المثال، بالنسبة إلى <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>، يمكنك استخدام Ruby-align لتعيين المحاذاة. يظهر هذا في دليل CSS. يمكنك التحقق من عنصر محاذاة روبي للحصول على التفاصيل.