العنوان هو عنصر مهم في أي صفحة ويب تجذب انتباه القارئ وتساعد على هيكلة المحتوى. تتمثل إحدى طرق جعل العنوان أكثر جاذبية وتعبيرا في تعيينه على نمط خط معين.
يمكن تعيين نمط الخط باستخدام كس ، وهي لغة النمط لصفحات الويب. كس يسمح لك بتغيير جوانب مختلفة من مظهر عناصر الصفحة ، بما في ذلك الخطوط. في هذه المقالة ، سنلقي نظرة على الطرق الرئيسية لتعيين نمط الخط لرأس باستخدام كس.
تتمثل إحدى أسهل الطرق لتعيين نمط الخط للعنوان في استخدام خصائص عائلة الخط وحجم الخط ووزن الخط. يمكنك استخدام خاصية عائلة الخط لتحديد الخط الذي تحتاجه. يتم استخدام خاصية حجم الخط لتعيين حجم الخط ، ويتم استخدام خاصية وزن الخط لتعيين سمك الخط. على سبيل المثال:
ح1 {
الخط الأسرة: أريال ، بلا الرقيق;
حجم الخط: 24 بكسل;
وزن الخط: غامق;
}
نتيجة لهذه الإعدادات ، سيتم عرض رأس المستوى الأول بخط أريال بحجم 24 بكسل وحروف جريئة.
- أمثلة على إعدادات نمط الخط للعناوين
- استخدام الأنماط المضمنة
- تطبيق فئات النمط
- استخدام أوراق الأنماط الخارجية
- تغيير نمط الخط باستخدام جافا سكريبت
أمثلة على إعدادات نمط الخط للعناوين
مثال 1: تغيير حجم الخط ولون العنوان العنوان |
مثال 2: تغيير نوع الخط وإضافة غامق إلى العنوان العنوان |
مثال 3: إضافة تسطير سفلي إلى العنوان العنوان |
استخدام الأنماط المضمنة
في هتمل ، يمكنك تطبيق أنماط مضمنة على العناصر باستخدام سمة النمط. تتيح لك هذه السمة تعيين خصائص نمط مختلفة ، مثل اللون وحجم الخط والمحاذاة وما إلى ذلك.
على سبيل المثال ، لتعيين نمط الخط لرأس ، يمكنك استخدام سمة النمط كما يلي:
العنوان
في هذا المثال ، قمنا بتعيين نمط الرأس على النحو التالي:
- اللون: # ف 0000-يتم تعيين لون نص الرأس إلى الأحمر;
- حجم الخط: 24 بكسل-تم تعيين حجم خط العنوان على 24 بكسل;
- محاذاة النص: محاذاة نص العنوان إلى المركز.
يمكن استخدام سمة النمط لتعيين أنماط لعناصر هتمل الأخرى ، بما في ذلك الفقرات والقوائم وغيرها الكثير. ما عليك سوى إضافة سمة النمط إلى العنصر المطلوب وتحديد خصائص النمط مفصولة بفاصلة منقوطة.
ولكن تجدر الإشارة إلى أن استخدام الأنماط المضمنة يمكن أن يؤدي بسرعة إلى إرباك التعليمات البرمجية وسوء صيانتها. لذلك ، يوصى باستخدام أوراق الأنماط الخارجية أو الأنماط الداخلية لترميز أكثر وضوحا وتنظيما.
إذا كنت بحاجة إلى تعيين نمط الخط لجميع رؤوس مستوى معين ، فمن الأفضل استخدام ورقة أنماط خارجية. سيسمح لك ذلك بإدارة جميع الرؤوس في نفس الوقت وتبسيط دعم الأنماط وتحديثها.
تطبيق فئات النمط
تسمح لك فئات الأنماط بتعيين أنماط محددة لتجميع عناصر من نوع مماثل من صفحات الويب. لإنشاء فئة نمط ، تحتاج إلى استخدام سمة "الفئة" وتحديد قيمتها. بعد ذلك ، باستخدام المحدد في كس (داخل علامة النمط أو في ملف منفصل) ، يمكنك تحديد الأنماط اللازمة لهذه الفئة.
مثال:
لتطبيق النمط على العنصر المطلوب ، تحتاج إلى إضافة فئة "العنوان" إلى العلامة المقابلة:
مثال على رأس
الآن سيحتوي العنوان على الأنماط المحددة: خط 24 بكسل وخط غامق ولون نص رمادي غامق.
باستخدام فئات الأنماط ، يمكنك بسهولة تطبيق نفس الأنماط على عناصر متعددة في الصفحة ، مما يبسط عملية التخطيط ويسرعها إلى حد كبير.
استخدام أوراق الأنماط الخارجية
لاستخدام ورقة أنماط خارجية ، تحتاج إلى إنشاء ملف منفصل بالملحق.كس ، والتي سوف تحتوي على جميع الأنماط اللازمة. ثم يتم إرفاق هذا الملف بمستند هتمل باستخدام علامة.
مثال على رمز توصيل ورقة أنماط خارجية:
في هذا المثال ، يسمى الملف الذي يحتوي على أنماط "الأنماط.كس " ويقع في نفس الدليل مثل ملف هتمل.
بعد توصيل ورقة أنماط خارجية ، يمكنك استخدام الأنماط من هذا الملف لتعيين نمط الخط للرأس. على سبيل المثال ، لتعيين نمط رأس باستخدام ورقة أنماط خارجية ، يمكنك استخدام التعليمات البرمجية التالية:
وزن الخط: غامق;
اللون: أحمر;
}
في هذا المثال ، يكون حجم الخط 24 بكسل ، غامق وأحمر للعناوين التي تحتوي على فئة "العنوان".
تغيير نمط الخط باستخدام جافا سكريبتجافا سكريبت يسمح لك بتغيير حيوي نمط الخط على صفحة ويب. هناك عدة طرق لتغيير نمط الخط باستخدام جافا سكريبت.
الطريقة الأولى هي استخدام النمط.فونتفاميلي الملكية. تتيح لك هذه الخاصية تعيين الخط لعنصر الصفحة. على سبيل المثال ، لتعيين الخط "أريال" للعنوان ، يمكنك استخدام التعليمات البرمجية التالية:وثيقة.كيريسيليكتور ("ح1").أسلوب.فونتفاميلي = "أريال";
إذا كنت بحاجة إلى تحديد خطوط متعددة بترتيب التفضيل ، فيمكنك استخدام بناء الجملة التالي:وثيقة.كيريسيليكتور ("ح1").أسلوب.فونتفاميلي = "أريال ، بلا الرقيق";
الطريقة الثانية هي استخدام طريقة سيتاتريبوت (). تسمح لك طريقة سيتاتريبوت () بتعيين سمة لعنصر. لتعيين الخط "أريال" للعنوان ، يمكنك استخدام التعليمات البرمجية التالية:وثيقة.كيريسيليكتور ("ح1").سيتاتريبوت ("نمط" ، " الخط الأسرة: أريال؛");
الطريقة الثالثة هي تغيير فئة العنصر. يمكنك إنشاء نمط خط في كس وتطبيقه على عنصر باستخدام جافا سكريبت. على سبيل المثال ، دعونا إنشاء فئة "فونتستيل" في ملف كس:.فونت ستايل {