أتش تي أم أل هي لغة الترميز الرئيسية لصفحات الويب ، ولكن يجب أيضا استخدام كس لإنشاء تصميم موقع فريد وجذاب. أحد عناصر التصميم المهمة هي الخطوط التي تساعد في تمييز النص على الصفحة ونقل المعلومات بنبرة مختلفة. في هذه المقالة ، سوف ننظر إلى المبادئ الأساسية كس للخطوط في هتمل وتقديم أمثلة على استخدامها.
في كس ، وهناك العديد من الخصائص الأساسية لاستخدام الخطوط: الخط الأسرة ، حجم الخط ، الخط الوزن ونمط الخط. تتيح لك خاصية عائلة الخط تعيين خط واحد أو أكثر لعنصر هتمل. يمكنك تحديد خط معين مثل أريال أو تايمز نيو رومان ، أو تحديد نوع الخط العام مثل "بلا الرقيق" ل بلا الرقيق أو "الرقيق" للخطوط الرقيق.
مثال:
الخط الأسرة: أريال ، بلا الرقيق;
تتيح لك خاصية حجم الخط تعيين حجم الخط بالبكسل أو النسب المئوية أو الأبعاد الأخرى. يوصى باستخدام الأحجام النسبية مثل النسب المئوية أو "م" لضمان قدرة أكثر مرونة على التكيف مع الموقع.
مثال:
حجم الخط: 16 بكسل;
تحدد خاصية وزن الخط تشبع الخط ويمكن تعيينها على أنها "عادية" (تشبع قياسي) أو "غامق" (غامق) أو "أكثر جرأة" (حتى أكثر تشبعا) أو قيمة رقمية من 100 إلى 900.
تتيح لك خاصية نمط الخط تعيين نمط الخط ، على سبيل المثال ، مائل. يمكن أن تكون قيم هذه الخاصية " عادية "(نمط الخط القياسي) أو" مائل "(نمط الخط المائل) أو" مائل " (نمط الخط المائل).
مثال:
نمط الخط: مائل;
معا ، هذه الخصائص كس تسمح لك لخلق خطوط فريدة وجميلة لموقع الويب الخاص بك ، مع التركيز على أسلوبه وتحسين تصور المعلومات.
- مبادئ كس الأساسية لخطوط هتمل
- أنواع الخطوط في المغلق
- تعيين الخط في كس
- تصميم الخط في كس
- أمثلة كس لخطوط هتمل
مبادئ كس الأساسية لخطوط هتمل
باستخدام خاصية عائلة الخط ، يمكنك تحديد خط معين ، على سبيل المثال:
الخط الأسرة: "أريال" ، بلا الرقيق;
تخبر هذه الخاصية المتصفح باستخدام الخط الأريال لعرض النص. إذا كان الخط أريال غير متوفر ، سيتم استخدام الخط بلا الرقيق.
بالإضافة إلى الخط ، يمكنك أيضا تغيير حجم النص باستخدام خاصية حجم الخط. على سبيل المثال:
حجم الخط: 16 بكسل;
تحدد هذه الخاصية حجم النص بالبكسل. تحدد قيمة 16 بكسل حجم الخط إلى 16 بكسل.
كقاعدة عامة ، لسهولة قراءة النص على صفحة الويب ، يتم تعيين قيمة حجم الخط في النطاق من 14 بكسل إلى 18 بكسل. ومع ذلك ، اعتمادا على تصميم الموقع ، قد يختلف هذا النطاق.
بالإضافة إلى هذه الخصائص ، هناك خصائص أخرى ، مثل وزن الخط لتعيين تشبع الخط (على سبيل المثال ، غامق للخط الغامق) ، وزخرفة النص لإضافة شرطات سفلية أو نص يتوسطه خط ، وغيرها الكثير.
من المهم أن نفهم أن كس يسمح لك بتطبيق هذه الخصائص وغيرها على عناصر معينة (على سبيل المثال ، الرؤوس) ، وكذلك على الفئات ومعرفات العناصر.
باستخدام خصائص كس الصحيحة ، يمكنك تحسين قراءة النص ومظهره بشكل كبير على صفحة الويب ، مما يجعله أكثر جاذبية للمستخدمين.
أنواع الخطوط في المغلق
كس لديها العديد من أنواع الخطوط التي يمكن استخدامها لتخصيص مظهر النص على صفحة ويب.
تحدد عائلة الخطوط مجموعة من الخطوط التي لها نمط مشابه. على سبيل المثال ، أريال ، هلفتيكا و سانس الرقيق هي عائلات الخط التي هي "بلا الرقيق" أو "غروتيسك".
يحدد حجم الخط ارتفاع الأحرف بالبكسل أو وحدات القياس الأخرى. يمكن تحديد حجم الخط كقيمة مطلقة (على سبيل المثال ، 12 بكسل) أو قيمة نسبية (على سبيل المثال ، 1.2 م) ، والتي تعتمد على حجم خط العنصر الأصل.
يحدد سمك الخط مدى عرض النص الغامق أو الرقيق. يمكن أن تكون قيم سمك الخط قيما عادية أو جريئة أو أكثر جرأة أو أفتح أو رقمية من 100 إلى 900 ، حيث 400 هو السماكة العادية و 700 غامق.
يسمح لك نمط الخط بتعيين النص بخط مائل أو غامق. القيم الممكنة لنمط الخط: عادي (عادي) ، مائل (مائل) ، مائل (مائل).
يحدد متغير الخط زخرفة نص إضافية ، مثل الأحرف الصغيرة أو الكبيرة. أمثلة على متغيرات الخطوط: أحرف عادية ، أحرف صغيرة (أحرف صغيرة كبيرة) ، أحرف صغيرة بالكامل (جميع الأحرف الصغيرة الكبيرة).
تتيح لك زخارف الخطوط إضافة زخارف مختلفة إلى النص ، مثل التسطير ويتوسطه خط وسطر فوق النص وسطر عبر النص. قيم زخرفة الخط: لا شيء (بدون زخارف) ، تسطير (تسطير) ، خط علوي (سطر فوق النص) ، خط من خلال (خط من خلال النص).
يحدد لون الخط لون النص. يمكنك تحديد لون الخط باستخدام أسماء الألوان (على سبيل المثال ، الأحمر والأزرق والأخضر) أو عن طريق تحديد قيمة في عشري (على سبيل المثال ، #فف0000).
يتيح لك تظليل النص إضافة ظل إلى النص. يمكن تعيين الظل كما الأفقي والرأسي تعويض واللون وطمس. على سبيل المثال ، ظل النص: 2 بكسل 2 بكسل 4 بكسل #000000; يضيف ظلا 2 بكسل لأسفل و 2 بكسل إلى اليمين مع اللون #000000 وطمس 4 بكسل.
هذه ليست سوى بعض من ميزات كس لتخصيص الخطوط على صفحة ويب. مع هذه الخصائص ، يمكنك إنشاء مجموعة متنوعة من الحلول الأسلوبية والتصاميم الجذابة.
تعيين الخط في كس
في أوراق الأنماط المتتالية (كس) ، يتم استخدام الخطوط لتحديد التمثيل المرئي للنص على صفحات الويب. باستخدام كس ، يمكنك تعيين خصائص الخط المختلفة ، مثل الحجم واللون ونمط الخط ، جريئة ، وغيرها الكثير.
والغرض الرئيسي من الخطوط في كس هو ضمان قراءة النص وخلق التأثير البصري المطلوب للمستخدمين. يمكن أن يؤثر اختيار الخط الصحيح بشكل كبير على إدراك وفهم المعلومات على صفحة الويب.
في كس ، هناك عدة طرق لتعيين خط لعنصر معين أو مجموعة من العناصر على صفحة ويب:
- استخدام القيم العالمية مثل" بلا الرقيق "أو"الرقيق". تسمح هذه القيم للمتصفح بتحديد خط تلقائيا من مجموعة محددة مسبقا.
- تحديد اسم الخط بشكل صريح باستخدام خاصية "عائلة الخط". في هذه الحالة ، يمكنك تحديد أسماء خطوط متعددة مفصولة بفواصل لتعيين قائمة أولويات للخطوط. سيحاول المتصفح عرض النص بخط متاح على جهاز الكمبيوتر الخاص بالمستخدم ، أولا تجربة الخط الأول من القائمة.
- تنزيل خط من خادم خارجي باستخدام خاصية "وجه الخط". يتيح لك ذلك استخدام خطوط غير قياسية على صفحات الويب غير المتوفرة على جهاز الكمبيوتر الخاص بالمستخدم. يتم تنزيل الخط من الخادم وتطبيقه على عناصر معينة باستخدام كس.
التخصيص الصحيح وتخصيص الخطوط في كس يمكن أن تجعل صفحات الويب أكثر جاذبية ومفهومة للمستخدمين. يتيح لك ذلك إنشاء نمط مرئي فريد والتأكد من أن النص قابل للقراءة على أي جهاز أو متصفح.
تصميم الخط في كس
يوفر تصميم الخط في كس فرصا كبيرة لتغيير مظهر النص على صفحة ويب. باستخدام كس ، يمكنك تعيين ليس فقط الخطوط القياسية ، ولكن أيضا تلك المخصصة ، تعيين الأحجام واللون والنمط ، فضلا عن تأثيرات مختلفة مثل الظلال أو الشرطات السفلية.
لنمط الخطوط في كس ، يتم استخدام خصائص مختلفة تسمح لك بالتحكم في مظهر النص. وهنا بعض منهم:
| الممتلكات | الوصف |
|---|---|
| الخط الأسرة | يحدد الخط للنص |
| حجم الخط | يحدد حجم الخط |
| نمط الخط | يحدد نمط الخط (على سبيل المثال ، مائل ، مائل) |
| الخط الوزن | يحدد تشبع الخط (على سبيل المثال ، غامق) |
| اللون | يحدد لون النص |
| زخرفة النص | مجموعات الزخارف للنص (على سبيل المثال ، الشرطات السفلية) |
:
ص {الخط الأسرة: أريال ، بلا الرقيق;
}
في هذا المثال ، قمنا بتعيين الخط أريال أو أي خط بلا الرقيق الأخرى ، وحجم هو 16 بكسل ولون النص هو #333333 لجميع الفقرات على الصفحة.بالإضافة إلى ذلك ، يمكنك استخدام كس لتعيين تأثيرات مختلفة للنص. على سبيل المثال ، لتعيين ظل للنص ، يمكنك استخدام الخاصية
نص الظل
. يوجد أدناه مثال على ظل للنص:
ص {
ظل النص: 2 بكسل 2 بكسل 4 بكسل #999999;
تصميم الخط في كس يجعل من الممكن لخلق مظهر فريد وجذاب لصفحة ويب. باستخدام الأنماط المطبقة بشكل صحيح ، يمكنك تحسين إمكانية قراءة النص وتعزيز الانطباع العام لموقع الويب.
أمثلة كس لخطوط هتمل
خصائص وقيم مختلفة يمكن استخدامها لنمط الخطوط أتش تي أم أل باستخدام المغلق. لنلق نظرة على بعض الأمثلة:
1. تغيير حجم الخط:
لتغيير حجم الخط ، يمكنك استخدام الخاصية
ح1 {
حجم الخط: 24 بكسل;
}
2. تغيير لون الخط:
يتم استخدام خاصية اللون للتغيير
ص {
اللون: أحمر;
}
3. تغيير نمط الخط:
الممتلكات
ص {
نمط الخط: مائل;
}
4. تحميل الخط من الخارج:
استخدام العقار
@الخط الوجه
يمكننا تنزيل الخط واستخدامه من الخارج. هنا مثال:
@الخط الوجه {
الخط الأسرة: 'ميكوستومفونت';