انقر هنا للعودة إلى العمود التعليمي HTML HTML. إذا كنت ترغب في تصفح البرنامج التعليمي CSS ، يرجى النقر هنا.
أعلاه: تخطيط اللغة CSS . الفصل 13 حدد نمطًا للنص
أعتقد أنه من الجيد مناقشة ممارسة استخدام CSS لتعيين أنماط النص في الفصل. بشكل عام ، ربما تكون معالجة محتوى النص هي المكان الذي يتم فيه استخدام CSS أكثر من غيره ، حتى بالنسبة لمواقع الويب التي لا تتوافق تمامًا مع المعايير. إزالة العلامات المتكررة على صفحات الويب كانت مرة واحدة (والآن) جذابة للغاية للمصممين ، وليس من الصعب رؤية ميزة هائلة لاستخدام CSS للتحكم في الطباعة النصية ، أي تفصل طرق المحتوى وعرضها.
من العديد من الأمثلة السابقة ، نعلم أن CSS يمكنها التعامل مع العديد من المواقف ، وأن إعداد أنماط النص هو أسهل طريقة لإضافة عناصر التصميم لأكثر صفحات الويب الأساسية. في الوقت نفسه ، يمكن لإضافة CSS إلى النص أيضًا أن تمنعنا من إضافة صور غير ضرورية في الصفحة.
في هذا الفصل ، سنرى كيف يأخذ CSS نصًا مملًا وعاديًا من النص إلى ارتفاع آخر (بألوان جديدة وأحجام وخطوط). كيف تجعل النص التشعبي يبدو أكثر برودة؟
يعد تحديد أنماط النص واحدة من أفضل الوظائف التي يعد CSS جيدة في ، حتى عند مواجهة المتصفحات التي يبلغ عمرها قديمة قليلاً ولا تدعم وظائف CSS المتقدمة بشكل غير كامل. في الماضي ، قد يرغب المصممون والمطورين في إنشاء صفحات ويب لا تطاق ويصعب استخدامها وفقًا لمعايير اليوم عند تصميم النصوص لتحقيق تأثيرات الحجم والجرأة (هل سبق لك أن رأيت صفحات ويب حيث يتم تمثيل النصوص في الغالب بالصور؟ لكنك تستخدم متصفحات النص ...)
لتزويدك ببعض البدائل لاستخدام الصور والإجابة على السؤال أعلاه ، في هذا الفصل ، ستبدأ بفقرة نصية لم يتم تصميمها بعد ، وتضيف تدريجياً قواعد CSS المختلفة إليها ، مما يجعله تصميمًا مقنعًا. الأوقات المتغيرة باستمرار
ابدأ بالنظر إلى نص ستتم معالجته في خط المتصفح المسبق. في حالتي ، فإن الخط المسبق هو 16 بكسل. استخدم متصفح Safari على Mac OS X. بسبب هذا ، سيتم تصوير النص الذي تراه بطريقة مضادة للتخليص. إذا كنت تستخدم Windows XP وابدأ ClearType ، فيمكنك رؤية تأثير مماثل.
الأوقات (أو الأوقات المتغيرة الجديدة الرومانية) هي خطوط مسبقات مسبقًا للعديد من المتصفحات ، ومع ذلك ، يتم تغيير هذا بسهولة من قبل المستخدمين إلى خطوطهم المفضلة ، لذلك لا يمكنك بالتأكيد الاعتماد على هذه القيمة المسبقة.
يوضح الشكل 1301 محتوى النص الذي استخدمناه في هذا الفصل الذي لم تتم إضافته بالأناقة: عنوان بسيط يتميز بـ <h1> ، وهنا ثلاث نصائح للديكور المنزلي.
الشكل 13-1 يعرض المتصفح العنوان ، وتغيير تأثير النص مسبقًا
واحدة من أبسط تأثيرات نمط النص الأكثر فعالية والأكثر فعالية هي سمة ارتفاع الخط. يمكن أن تجعل إضافة مسافة إضافية بين كل سطر من النص فقرات نصية أسهل في القراءة ، وأكثر جاذبية ، وكذلك إحضار تأثيرات رائعة على صفحتك.
يمكنك إكمال هذه التقنية عن طريق إضافة قواعد CSS التالية إلى علامة <Body>. بالطبع ، يمكنك أيضًا إضافة هذه القاعدة إلى علامات أخرى ، مثل الرغبة فقط في تغيير ارتفاع خط <p>.
جسم {
ارتفاع الخط: 1.5EM ؛
}
معنى هذا الرمز هو: يجب أن يكون ارتفاع سطر النص في الصفحة 1.5 ضعف ارتفاع النص. أحب استخدام وحدات EM عند تحديد ارتفاع الخط ، لأنها ستتغير مع حجم الخط.
يوضح الشكل 13-2 التأثير بعد إضافة ارتفاع الخط.
الشكل 13-2 تأثير بعد ارتفاع النص مسبقًا بالإضافة إلى ارتفاع الخط
تبدو رائعة ، والنتائج التي يمكن أن يحققها ارتفاع الخط الصغير مذهلة.
الصفحة السابقة 1 2 3 4 5 الصفحة التالية اقرأ النص الكامل