أوراق الأنماط المتتالية (كس) هي الوسيلة الرئيسية لتصميم صفحات الويب. أنها تسمح لك لتعيين أنماط مختلفة لعناصر هتمل ، بما في ذلك نمط الخط ومعلماته.
تعد الخطوط جزءا مهما من تصميم صفحات الويب ، حيث تلعب دورا رئيسيا في تصميم النص ونقل المعلومات. يمكنك تغيير الخط وحجمه وسمكه ولونه والمزيد باستخدام كس.
يمكن تعيين نمط الخط باستخدام خاصية عائلة الخط. تتيح لك هذه الخاصية تحديد خط معين للنص على صفحة الويب. على سبيل المثال ، يمكنك استخدام الخطوط أريال ، فيردانا ، تايمز نيو رومان ، إلخ. ولكن يجب أن نتذكر أن الخطوط المحددة يجب أن تكون متاحة على جهاز الكمبيوتر الخاص بالمستخدم.
عند تحديد قيمة لخاصية عائلة الخط ، يمكنك تحديد خطوط متعددة مفصولة بفواصل. في هذه الحالة ، سيستخدم المتصفح أول خط متاح من القائمة.
- المغلق: تحديد نمط الخط
- كيفية اختيار وتخصيص خط الخط
- تغيير حجم الخط باستخدام كس
- تحديد اللون والخلفية للنص
- تغيير شكل الخط ونمطه
- كيفية ضبط التباعد بين الحروف والكلمات
المغلق: تحديد نمط الخط
لتعيين نمط الخط ، يجب عليك استخدام محدد العنصر الذي يتم تطبيق النمط عليه وخاصية الخط. تتيح لك خاصية الخط تحديد جميع معلمات الخط الأساسية في إعلان واحد.
مثال:
- - يحدد الخط أريال ، إذا كان متوفرا ، وإلا سيتم استخدام الخط بلا الرقيق;
- حجم الخط: 16 بكسل ؛ - يضبط حجم الخط على 16 بكسل;
- وزن الخط: غامق ؛ - يجعل النص غامقا;
- نمط الخط: مائل ؛ - الخط المائل;
- زخرفة النص: تسطير ؛ - نص تحته خط;
- تحويل النص: أحرف كبيرة ؛ - يجلب النص إلى أحرف كبيرة;
- ارتفاع الخط: 1.5 ؛ - يحدد ارتفاع الخط 1.5 مرة أعلى من حجم الخط.
يمكن استخدام هذه الخصائص داخل محدد العنصر وبالاقتران مع خصائص كس الأخرى لإنشاء نمط الخط المطلوب على صفحة ويب.
كيفية اختيار وتخصيص خط الخط
هناك عدة عوامل يجب مراعاتها عند اختيار نوع الخط. أولا ، عليك أن تقرر نمط النص الذي تريد نقله. يمكن أن تكون الخطوط كلاسيكية وحديثة ومستقبلية وما إلى ذلك. كل نمط له خصائصه الفريدة التي يمكن أن تساعدك على التعبير عن نغمة المحتوى الخاص بك.
ثانيا ، من المهم أن تأخذ في الاعتبار سهولة قراءة الخط. اختر خطوطا قابلة للقراءة على صفحات الويب ، خاصة عند استخدام حجم خط صغير أو على أجهزة مختلفة بشاشات مختلفة.
أخيرا ، عند تكوين إعدادات خط الخط ، هناك العديد من الخصائص المهمة التي يمكن تخصيصها. يسمح لك حجم الخط بالتحكم في حجمه أو تمييز الكلمات الرئيسية باستخدام العلامة القوية أو إضافة التركيز باستخدام خط مائل.
تغيير حجم الخط باستخدام كس
هناك عدة طرق لتعيين حجم الخط:
| الطريق | الوصف |
|---|---|
| وحدات القياس المطلقة | باستخدام وحدات مثل بكسل (بكسل) أو نقاط (بت) لتعيين حجم الخط الثابت. على سبيل المثال: |
| وحدات القياس النسبية | استخدام الوحدات النسبية مثل النسب المئوية ( ٪ ) أو م لتعيين حجم الخط بالنسبة لحجمه الحالي. على سبيل المثال: |
| قيمة أصغر وأكبر | استخدام الكلمات الرئيسية أصغر وأكبر لتغيير حجم الخط النسبي. على سبيل المثال: |
عند اختيار الطريقة المناسبة لتعيين حجم الخط ، يجب أن تأخذ في الاعتبار متطلبات إمكانية الوصول وسهولة قراءة النص على صفحة الويب. تجدر الإشارة أيضا إلى أن المتصفحات المختلفة يمكنها عرض أحجام الخطوط بشكل مختلف.
من المهم ملاحظة أنه يمكن تغيير حجم الخط للعناصر الفردية على الصفحة ، وكذلك لفئات أو محددات معينة. على سبيل المثال:
ص {حجم الخط: 18 بكسل;
}
يسمح لك بتعيين لون النص. يمكنك استخدام اسم اللون (على سبيل المثال,
أحمر
| للأحمر أو | الأزرق | للأزرق) ، رمز اللون في النظام الست عشري (على سبيل المثال, |
|---|---|---|
| للأحمر) أو رمز اللون في شكل رغب (على سبيل المثال, | رغب(255 ، 0 ، 0) |
النتيجة
مرحبا ، العالم!
| ف { اللون: أحمر؛} | مرحبا ، العالم! | الممتلكات |
|---|---|---|
| يسمح لك بتعيين لون الخلفية للنص. يمكنك استخدام نفس أساليب إشارة اللون كما ل | اللون |
.
| مثال: | أتش تي أم أل | المغلق |
|---|---|---|
| مرحبا ، العالم! | ف { لون الخلفية: أصفر؛} |
النتيجة
مرحبا ، العالم!
- ف { اللون: أبيض ؛ الخلفية-اللون: أزرق؛}
- مرحبا ، العالم!
- وبالتالي ، باستخدام
- خصائص اللون
- و
لون الخلفية
في كس ، يمكنك تعيين اللون والخلفية للنص وخلق تأثيرات مثيرة للاهتمام وجميلة.
تغيير شكل الخط ونمطه
الخط الأسرة: يحدد عائلة الخط لاستخدامها في النص. عند تحديد عائلات خطوط متعددة مفصولة بفواصل ، سيبحث المتصفح عن الخط بالترتيب المشار إليه حتى يعثر على خط متوافق.
حجم الخط: يحدد حجم الخط. يمكنك تحديد قيمة بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى.
الخط الوزن: يحدد تشبع الخط. القيمة "غامق" تجعل الخط غامقا ، والقيمة" عادي " ترجع الخط العادي.
font-family: Arial, sans-serif;
text-decoration: underline;
يتم استخدام خاصية تباعد الحروف لتعيين التباعد بين الأحرف. تشير قيمة هذه الخاصية إلى قيمة الفاصل الزمني بالبكسل أو وحدات القياس الأخرى المتاحة. على سبيل المثال ، لزيادة التباعد بين الحروف بمقدار 2 بكسل ، تحتاج إلى استخدام قاعدة كس التالية: