أوراق الأنماط المتتالية (كس) توفر العديد من الاحتمالات لتغيير مظهر صفحة ويب. واحدة من وظائف كس الأكثر تنوعا وتستخدم بشكل متكرر هو تغيير عرض الحروف في النص. يمكن أن يكون تغيير عرض الحروف مفيدا لإنشاء تصميم فريد أو تحسين التسلسل الهرمي المرئي أو تحسين إمكانية قراءة النص.
لتغيير عرض الحروف في كس ، يمكنك استخدام العديد من الخصائص والقيم ، مثل:
- تباعد الحروف: خاصية تسمح لك بضبط التباعد بين الأحرف;
- تباعد الكلمات: خاصية تسمح لك بضبط التباعد بين الكلمات;
- محاذاة النص: خاصية تحدد محاذاة النص;
- زخرفة النص: خاصية تسمح لك بإضافة عناصر زخرفية إلى النص ، مثل التسطير ويتوسطه خط ويتوسطه خط;
- تحويل النص: خاصية تسمح لك بتغيير حالة النص;
- المسافة البادئة للنص: خاصية تحدد المسافة البادئة للسطر الأول من النص.
باستخدام هذه الخصائص ، يمكنك إنشاء تأثيرات فريدة من نوعها ، وتحسين مظهر النص على صفحة ويب. بعد ذلك ، دعونا نلقي نظرة على كل خاصية بالتفصيل ونرى أمثلة على تطبيقها.
- ما هو المغلق ودورها في تصميم مواقع الإنترنت?
- طرق لتعيين عرض الحروف الخط في المغلق
- القيم المطلقة لعرض الحروف
- القيم النسبية لعرض الحروف
- باستخدام خاصية امتداد الخط
ما هو المغلق ودورها في تصميم مواقع الإنترنت?
لا يمكن المبالغة في تقدير دور كس في تصميم الويب. يسمح لك بإنشاء مواقع ويب فريدة وجميلة ، كما يوفر سهولة ومرونة في تخصيص المظهر. بفضل كس ، يمكنك بسهولة تغيير مظهر موقع ويب بأكمله عن طريق تغيير بضعة أسطر من التعليمات البرمجية.
باستخدام كس ، يمكنك إنشاء صفحات الويب استجابة واستجابة التي تغير مظهرها تلقائيا اعتمادا على حجم الشاشة. هذا مهم بشكل خاص نظرا لأن معظم الأشخاص يستخدمون الأجهزة المحمولة لتصفح مواقع الويب.
واحدة من أهم مزايا كس هي القدرة على إنشاء أنماط متتالية. هذا يعني أنه إذا كانت هناك عدة قواعد لعنصر واحد ، فيمكنك تعيين أولوية كل قاعدة. يتيح لك ذلك إنشاء تسلسلات هرمية معقدة للنمط وتحديد النمط الذي سيتم تطبيقه بالضبط على كل عنصر.
- المغلق يسمح للمطورين للسيطرة على مظهر وتخطيط صفحات الويب.
- المغلق تمكن من إنشاء مواقع استجابة واستجابة.
- كس يسمح لك لخلق أنماط المتتالية والتحكم بدقة أولويتها.
- كس يجعل رمز أكثر وحدات وقابلة لإعادة الاستخدام.
- يوفر المغلق مرونة كبيرة وسهولة في تخصيص المظهر.
في الختام ، يلعب المغلق دورا رئيسيا في تصميم الويب ، مما يوفر القدرة على إنشاء مواقع ويب جميلة وسريعة الاستجابة وعملية. يجعل عملية تصميم صفحة الويب أكثر كفاءة ومرونة ، ويسمح أيضا للمطورين بالتحكم في كل جانب من جوانب مظهر موقع الويب لإنشاء أسلوب فريد يسهل التعرف عليه.
طرق لتعيين عرض الحروف الخط في المغلق
في كس ، هناك عدة طرق لتعيين عرض الحروف الخط. باستخدام هذه الطرق ، يمكنك بسهولة تغيير مظهر النص على صفحة الويب.
1. تتيح لك خاصية امتداد الخط تعيين أو تغيير عرض أحرف الخط. القيم المحتملة لهذه الخاصية طبيعية ومكثفة وموسعة وغيرها. على سبيل المثال ، إذا قمت بتعيين القيمة على مكثف ، فستبدو الأحرف أضيق ، وإذا قمت بتعيين القيمة على موسع ، فستصبح أوسع.
2. تتيح لك خاصية تباعد الحروف تعيين المسافة بين الأحرف في النص. يتم تعيين قيمة هذه الخاصية بالبكسل أو وحدات القياس الأخرى. إذا قمت بتعيين قيمة موجبة ، فستزداد المسافة بين الحروف ، وإذا قمت بتعيين قيمة سالبة ، فستكون أقرب إلى بعضها البعض.
3. تشبه خاصية تباعد الكلمات خاصية تباعد الحروف ، ولكنها تحدد المسافة بين الكلمات. يتم تعيين قيمة هذه الخاصية أيضا بالبكسل أو وحدات القياس الأخرى.
4. يتم استخدام خصائص عرض النص والسكتة الدماغية ولون النص لإنشاء تأثير حد الحرف. يمكنك استخدام خاصية عرض النص-الحد لتعيين عرض الحد ، وخاصية لون النص-الحد لتعيين لون الحد.
5. تسمح لك خاصية تحويل النص بتغيير حالة النص وعرضه. قيم هذه الخاصية هي: الأحرف الكبيرة — جميع الأحرف ستكون كبيرة ، صغيرة — جميع الأحرف ستكون صغيرة ، كبيرة — الحرف الأول من كل كلمة سيكون كبيرا ، لا شيء-لن تكون هناك تغييرات.
يمكن دمج كل هذه الطرق في مجموعات مختلفة لتحقيق المظهر المطلوب للنص على صفحة الويب.
القيم المطلقة لعرض الحروف
. تتيح لك هذه الخاصية تعيين فاصل زمني ثابت بين الأحرف في النص.
، ثم سيتم فصل كل حرف في النص عن بعضها البعض بمقدار 2 بكسل.
بالنسبة للنص بحجم خط 16 بكسل ، سيكون تباعد الأحرف 3.2 بكسل (0.2*16).
يمكن أن يكون استخدام عرض الأحرف المطلق مفيدا لإنشاء تأثير مساحة بين الأحرف يختلف عن المساحة العادية. على سبيل المثال ، يمكن استخدام هذا لإنشاء عناوين أو لإنشاء نمط خاص في النص.
تم تعيين كبير جدا. لذلك ، يوصى باستخدام هذه الميزة بحذر حتى لا تضعف قراءة النص.
القيم النسبية لعرض الحروف
كس لديها العديد من القيم النسبية التي يمكن استخدامها لتعيين عرض الحروف في النص.
1. م: تحدد هذه القيمة عرض الأحرف بالنسبة إلى حجم خط العنصر الأصل. على سبيل المثال ، إذا كان حجم خط العنصر الأصل 16 بكسل وقمت بتعيين عرض الحرف على 2 م ، فسيكون حجم العرض 32 بكسل.
2. ريم: تحدد هذه القيمة أيضا عرض الأحرف بالنسبة لحجم الخط ، ولكن على عكس إم ، فإنها تشير دائما إلى حجم خط عنصر الجذر (هتمل). على سبيل المثال ، إذا كان حجم خط العنصر الجذر 20 بكسل وقمت بتعيين عرض الحرف على 1 ريم ، فسيكون حجم العرض أيضا 20 بكسل ، بغض النظر عن حجم خط العنصر الأصل.
3. ٪ : تحدد هذه القيمة عرض الأحرف بالنسبة لعرض العنصر الأصل. على سبيل المثال ، إذا قمت بتعيين عرض الرسالة إلى 50 ٪ ، وسوف يستغرق نصف عرض العنصر الأصل.
4. فولكس فاجن: تحدد هذه القيمة عرض الحروف كنسبة مئوية من عرض نافذة العرض. على سبيل المثال ، إذا قمت بتعيين عرض الحرف على 10 فولت واط ، فسيشغل 10 ٪ من عرض إطار العرض.
5. ف: تحدد هذه القيمة عرض الأحرف كنسبة مئوية من ارتفاع إطار العرض. على سبيل المثال ، إذا قمت بتعيين عرض الحرف على 5 فولت في الساعة ، فسيشغل 5 ٪ من ارتفاع إطار العرض.
اختيار عرض الرسالة النسبية في كس يسمح لك لخلق تصميم أكثر مرونة واستجابة من شأنها أن تبدو جيدة على مختلف الأجهزة والشاشات.
باستخدام خاصية امتداد الخط
تتيح لك خاصية امتداد الخط تغيير عرض أحرف الخط من خلال التحكم في ضغط الأحرف أو توسيعها داخل الكلمة. يمكن أن يكون مفيدا عند إنشاء تأثيرات التصميم أو لضمان قراءة أفضل للنص.
يمكن تعيين قيمة خاصية امتداد الخط ككلمة رئيسية أو قيمة رقمية. بعض الكلمات الرئيسية المتاحة هي:
| المعنى | الوصف |
|---|---|
| مكثف للغاية | مضغوط جدا |
| خط مكثف للغاية | |
| خط مكثف مضغوط للغاية | خط مضغوط |
| شبه مكثف | خط شبه مضغوط |
| أمر طبيعي | الخط العادي |
| شبه موسع | توسيع |
| خط شبه ممتد | الخط الممتد |
| هو خارج الموسعة | خط ممتد للغاية |
| فائقة التوسع | خط ممتد للغاية |
يمكن استخدام القيمة النسبية أو المطلقة كقيمة رقمية. على سبيل المثال:
- سيزيد من عرض الحروف بمقدار 1.5 مرة
مثال على استخدام خاصية امتداد الخط:
امتداد الخط
الخط الوزن