בעת כתיבת מאמר או מסמך, לעתים קרובות אנו זקוקים לכמה תווים להיות במקרים ספציפיים. בדף אינטרנט, רכיב ה-HTML שהטקסט שלו דורש שינוי מוחל עם המאפיין CSS ' שינוי טקסט '. מאפיין זה גם חוסך זמן בצורה כזו שלאחר הוספת כל הדמויות, ניתן לשנות את המארז שלהם בבת אחת.

פוסט זה ילמד אותך כיצד אנו יכולים לשנות מקרי טקסט עם CSS. אז הבה נתחיל!

כיצד להשתמש באותיות רישיות ובאותיות קטנות באמצעות CSS?

ב-CSS, ה' שינוי טקסט ' המאפיין שולט באותיות רישיות של הטקסט. הוא משמש גם להמרת טקסט לאותיות גדולות או קטנות.

שינוי טקסט ערכי נכסים

הערכים האפשריים של המאפיין CSS-transform text מפורטים להלן:

• • ' אותיות רישיות ”: ערך זה הופך את כל התווים בטקסט של האלמנט לאותות רישיות.
  • ' אותיות קטנות ”: ערך זה משנה את הטקסט של האלמנט לאותיות קטנות.
  • ' לְנַצֵל ': ערך זה משנה את האות הראשונה של כל מילה באותיות גדולות.
  • ' אף אחד ': ערך זה מגביל את הטקסט של האלמנט לשינוי.
  • ' התחלתי ”: ערך זה מגדיר את ערך ברירת המחדל.
  • ' לָרֶשֶׁת ”: ערך זה קובע את ערכו מאלמנט האב שלו.

נתח את הדוגמה למטה!

דוגמה: הפיכת טקסט לאותיות גדולות וקטנות

ראשית, הוסף רכיב div עם שם המחלקה ' קופסא '. בתוך הגוף, הוסף שלוש תגיות כותרת

,

ו-

, כאשר הטקסט של הכותרת

הוא כולו באותיות רישיות,

באותיות קטנות, והשלישי גם באותיות קטנות.

להלן קוד ה-HTML:

< div מעמד = 'קופסא' >
< h1 > אותיות קטנות: ברוכים הבאים ל-LINUXHINT h1 >
< h2 > אותיות רישיות: ברוכים הבאים ל-linuxhint h2 >
< h3 > השתמש באותיות רישיות: ברוכים הבאים ל-linuxhint h3 >
div >

תיבה בסגנון div

.קופסא {
גובה: 200 פיקסלים;
רוֹחַב: 80 % ;
גבול: 4 פיקסלים מוצק #e4cfcf;
צבע רקע: כחול צוער;
שוליים: 1px אוטומטי;
ריפוד: 10px;
}

ה-div שנוצר בקובץ ה-HTML שלמעלה מעוצב כעת עם מאפייני CSS המוסברים להלן:

• • ' גוֹבַה ” משמש להגדרת גובה ה-div.
  • ' רוֹחַב ' משמש להגדרת רוחב ה-div.
  • ' גבול 'מאפיין משמש להחלת הגבול סביב האלמנט, שהוא ברוחב של 4 פיקסלים, סוג קו אחיד וצבע #e4cfcf.
  • ' צבע רקע ' מציין את צבע הרקע של האלמנט.
  • ' שולים ' מאפיין מתאים את החלל בכל צד של האלמנט.
  • ' ריפוד 'מאפיין משמש כדי לייצר מרחב סביב התוכן של אלמנט ה-div או בתוך הגבול של האלמנט.

בלוקי הקוד שלהלן מציינים שכל רכיבי הכותרות מעוצבים עם ערכים שונים של מאפייני שינוי הטקסט. האלמנט

מוחל עם המאפיין text-transform עם הערך מוגדר כ' אותיות קטנות ”:

h1 {
שינוי טקסט: אותיות קטנות;
}

האלמנט

מוחל עם המאפיין text-transform עם הערך מוגדר כ' אותיות רישיות ”:

h2 {
טקסט-טרנספורמציה: אותיות גדולות;
}

עבור רכיב

, הערך של מאפיין ה-text-transform מוגדר כ' לְנַצֵל ”:

h3 {
טקסט-טרנספורמציה: שימוש באותיות רישיות;
}

על ידי מתן הקוד שהוזכר לעיל, הטקסט של הכותרת הראשונה הופך כולו לאותיות קטנות והכותרת השנייה לאותיות גדולות. ואילו האות הראשונה של כל מילה היא באות רישיות בכותרת השלישית:

גדול! למדנו בהצלחה כיצד להפוך את הטקסט לאותיות רישיות, קטנות והכל באותיות רישיות.

סיכום

מאפיין ה-text-transform של CSS שולט באותיות רישיות של הטקסט ומשמש כדי לשנות את המקרים של הטקסט של המסמך. מאפיין זה חל על כל הרכיבים, כאשר הערכים של מאפיין זה יכולים להיות אותיות רישיות, קטנות, אותיות רישיות או אף אחד. בלוג זה הסביר את ההליך של המרת טקסט לאותיות גדולות ואותיות קטנות באמצעות המאפיין CSS-transform text.