يعد تغيير حجم الخط في عناصر هتمل أحد أكثر الطرق شيوعا لتصميم صفحات الويب بصريا. طريقة واحدة لتغيير حجم الخط هو استخدام أنماط كس. مع ذلك ، يمكنك بسهولة تعيين حجم الخط لأي عنصر ، بما في ذلك شعبة.
لتغيير حجم الخط داخل شعبة ، يمكنك استخدام الخاصية المغلق حجم الخط. تتيح لك هذه الخاصية تعيين حجم الخط بالبكسل أو النسب المئوية أو وحدات القياس الأخرى. على سبيل المثال ، لتعيين حجم الخط إلى 18 بكسل لعنصر مع فئة "ميديف" ، تحتاج إلى إضافة رمز كس التالي:
.ميديف {
حجم الخط: 18 بكسل;
}
في هذا المثال .ميديف هي فئة عنصر ديف الذي نريد تغيير حجم الخط. سلسلة حجم الخط: 18 بكسل ؛ يحدد حجم الخط المطلوب. يمكنك أيضا استخدام وحدات قياس أخرى مثل إم (إم) أو ريم (نسبي إم) أو النسب المئوية ( ٪ ).
معرفة كيفية تغيير حجم الخط في ديف باستخدام كس ، يمكنك بسهولة التحكم في مظهر كتل النص على صفحات الويب الخاصة بك. هذا يفتح إمكانيات لا حصر لها لإنشاء تصميم فريد وجذاب.
- فهم المغلق وشعبة
- استخدام خاصية حجم الخط
- تغيير الحجم باستخدام وحدات القياس المطلقة
- تغيير الحجم باستخدام وحدات القياس النسبية
- استخدام إم و ريم لتغيير حجم الخط
- تطبيق الميراث لتغيير حجم الخط في شعبة
- استخدام استعلامات الوسائط لتغيير حجم الخط حسب حجم الشاشة
فهم المغلق وشعبة
شعبة (تقسيم) هو عنصر الحاوية التي تسمح لك لتجميع العناصر الأخرى داخل نفسك. إنها إحدى اللبنات الأساسية لصفحات الويب وتستخدم لتقسيم المحتوى إلى كتل منطقية.
لتعيين نمط لشعبة باستخدام كس ، تحتاج إلى استخدام محددات. تتيح لك المحددات تحديد عناصر معينة على الصفحة وتطبيق نمط عليها.
. يمكن تعيين قيمة هذه الخاصية بالبكسل أو النسب المئوية أو وحدات القياس الأخرى.
وفيما يلي مثال على رمز كس الذي يغير حجم الخط داخل ديف:
شعبة {
حجم الخط: 18 بكسل;
}
في هذا المثال ، سيكون لجميع عناصر ديف على الصفحة حجم خط 18 بكسل.
بالإضافة إلى تغيير حجم الخط ، كس يسمح لك لتعيين أنماط أخرى مختلفة ل ديف ، مثل لون الخلفية ، والهوامش ، والحدود ، وأكثر من ذلك. يتيح لك الجمع بين خصائص وقيم كس المختلفة إنشاء تصميم فريد وجذاب لصفحات الويب.
استخدام خاصية حجم الخط
الخاصية حجم الخط في المغلق يسمح لك لتعيين حجم الخط لعنصر. يمكن أن تأخذ قيما مختلفة ، مثل المطلق (مثل البكسل والنقاط) والنسبية (مثل النسب المئوية ، إم ، ريم).
لتغيير حجم الخط داخل شعبة باستخدام الخاصية حجم الخط في المغلق ، يجب تحديد القيمة المناسبة لهذه الخاصية. على سبيل المثال:
شعبة {
حجم الخط: 20 بكسل;
}
في هذا المثال ، سيتم تعيين حجم الخط داخل عنصر ديف إلى 20 بكسل. يمكنك أيضا استخدام القيم النسبية مثل النسب المئوية:
شعبة {
حجم الخط: 150%;
}
في هذه الحالة ، سيكون حجم الخط داخل ديف أكبر 1.5 مرة من حجم الخط المحدد لسلف العنصر.
يتيح لك استخدام خاصية حجم الخط التحكم بمرونة في حجم الخط للعناصر المختلفة وإنشاء تركيبة مرئية فعالة وعالية الجودة لموقعك على الويب.
تغيير الحجم باستخدام وحدات القياس المطلقة
يمكن تغيير حجم الخط في عنصر ديف بسهولة باستخدام وحدات القياس المطلقة.
يحدد هذا الرمز حجم الخط داخل عنصر ديف إلى 20 بكسل.
وحدة قياس مطلقة أخرى هي النقطة (نقطة). يمكن استخدامه أيضا لتعيين حجم الخط.:
يحدد هذا الرمز حجم الخط داخل عنصر ديف إلى 12 نقطة.
يرجى ملاحظة أنه عند استخدام وحدات القياس المطلقة ، سيكون حجم الخط دائما هو نفسه بغض النظر عن حجم نافذة المتصفح أو المعلمات الأخرى.
وبالتالي ، فإن استخدام وحدات القياس المطلقة يسمح لك بتعيين حجم الخط بدقة في عنصر ديف والتحكم في مظهره.
تغيير الحجم باستخدام وحدات القياس النسبية
حجم الخط: 120%;
شعبة {
و
| ريم | . |
|---|---|
| قيمة م |
يشير إلى حجم خط العنصر الذي يتم تطبيقه عليه. على سبيل المثال ، إذا قمت بتعيين القيمة | 2 م |
القيمة
من ريم
يشير أيضا إلى حجم خط العنصر ، ومع ذلك يتم تعريفه بالنسبة لحجم الخط في العنصر الجذر
أتش تي أم أل
. على سبيل المثال ، إذا قمت بتعيين القيمة
1ريم
بالنسبة للخط في القسم ، سيكون حجم الخط مساويا لحجم الخط المحدد لعنصر الجذر
أتش تي أم أل
| ، ولا يعتمد على حجم الخط في العنصر الأصل. | المعنى |
|---|---|
| الوصف | أتش تي أم أل |
حجم الخط في ديف: 32 بكسل (16 بكسل*2)
حجم الخط في ديف: 16 بكسل
| الناتج: | |
|---|---|
| حجم الخط للعنصر الأصل | أتش تي أم أل |
.الأم {
في هذا المثال ، يتم تطبيق فئة" الأصل " على عنصر ديف الأصل ، وتعيين الخاصية حجم الخط حجم الخط إلى 18 بكسل. الآن كل المحتوى ، بما في ذلك عنصر ف داخل ديف ، سوف ترث حجم الخط هذا.
إذا كان من المرغوب فيه تغيير حجم الخط داخل عنصر فرعي معين فقط ، فيمكنك تطبيق خاصية حجم الخط على هذا العنصر مباشرة عن طريق تجاوز حجم الخط الموروث:
أتش تي أم أل
المغلق
.الأم {
حجم الخط: 18 بكسل;
}
.الطفل {
حجم الخط: 14 بكسل;
}
في هذا المثال ، لا يزال يتم تعيين حجم الخط الموروث لعناصر شعبة الطفل إلى 18 بكسل ، ولكن العنصر ص مع فئة "الطفل" يتجاوز ذلك ويحدد حجم الخط إلى 14 بكسل.
وهكذا ، وذلك باستخدام الميراث الملكية نمط في كس ، يمكنك بسهولة تغيير حجم الخط لعناصر ديف وعناصر الطفل ، في تقديركم.
استخدام استعلامات الوسائط لتغيير حجم الخط حسب حجم الشاشة
من أجل تنفيذ تخطيط التكيف وتغيير حجم الخط اعتمادا على حجم الشاشة ، يمكنك استخدام استعلامات الوسائط في كس. تسمح لك استعلامات الوسائط بتطبيق أنماط معينة فقط عند استيفاء الشروط المحددة في استعلام الوسائط.
لتغيير حجم الخط باستخدام استعلامات الوسائط ، يمكنك استخدام الخاصية
حجم الخط
في المغلق. على سبيل المثال ، لتكبير الخط على الأجهزة الصغيرة ، يمكنك تعيين التعليمات البرمجية التالية:
"'المغلق