Articles
מבוא ל-CSS
מאפייני CSS הקשורים לטקסט

מאפייני CSS הקשורים לטקסט

מאמר זה מסביר על מאפייני CSS הקשורים לטקסט.

תוכלו ללמוד על השימוש וכיצד לכתוב את המאפיינים text-align, text-decoration, ו-text-transform.

YouTube Video

יצירת HTML לתצוגה מקדימה

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

טיפוגרפיה (קשור לטקסט)

מאפיין text-align 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

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

ערכים עיקריים של text-align

left (ממוקם לשמאל) 
1p {
2    text-align: left;
3}
  • left מיישר את הטקסט לשמאל (זו שיטת היישור המוגדרת כברירת מחדל עבור שפות רבות).
right (ממוקם לימין) 
1p {
2    text-align: right;
3}
  • right מיישר את הטקסט לימין. הוא יעיל במיוחד עבור שפות הנכתבות מימין לשמאל, כמו ערבית ועברית.
center (ממוקם למרכז) 
1p {
2    text-align: center;
3}
  • center מיישר את הטקסט למרכז. הוא בשימוש תכוף עבור כותרות וכותרות משנה.
justify (מיושר) 
1p {
2    text-align: justify;
3}
  • justify מיישר באופן שווה את הגושים משמאל ומימין, מה שמעניק תחושה של מראה מסודר. משתמשים בו בעיצובים כמו עיתונים ומגזינים.
start (מיושר לפי התחלה) 
1p {
2    text-align: start;
3}
  • start מיישר את הטקסט לפי מיקום ההתחלה. בשפות שנכתבות משמאל לימין, זה מתנהג בדומה ליישור לשמאל.
סוף (מיושר לסוף) 
1p {
2    text-align: end;
3}
  • סוף מיישר טקסט על פי המיקום האחרון. בשפות שנכתבות משמאל לימין, זה מתנהג בדומה ליישור לימין.

text-align שימוש ודוגמאות

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

סיכום

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

בואו נשתמש ביעילות ביישור טקסט כחלק מהעיצוב שלכם באמצעות text-align.

המאפיין text-decoration 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

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

הסבר:

  • המחלקה text-decoration-underline מציגה קו תחתון על הטקסט.
  • המחלקה text-decoration-overline מציירת קו מעל הטקסט.
  • המחלקה text-decoration-line-through מחילה קו חוצה על הטקסט.
  • המחלקה text-decoration-custom-underline היא דוגמה להתאמה אישית של צבע, סגנון, ועובי של קו תחתון.

ערכים עיקריים של text-decoration

none 
1p {
2    text-decoration: none;
3}
  • ציון none יסיר כל קישוט מהטקסט. משמש, לדוגמה, כשברצונך להסיר את הקו התחתון מקישורים.
underline 
1p {
2    text-decoration: underline;
3}
  • ציון underline יצייר קו תחתון מתחת לטקסט. ניתן להשתמש בו עבור קישורים או חלקים שברצונך להדגיש.
overline 
1p {
2    text-decoration: overline;
3}
  • ציון overline יצייר קו מעל הטקסט. משמש לשינוי המראה או לקישוט מיוחד.
line-through 
1p {
2    text-decoration: line-through;
3}
  • ציון line-through יצייר קו חוצה על הטקסט. משמש לציון תיקונים.
blink（点滅）
  • blink הוא ערך שגורם לטקסט להבהב, אך אינו בשימוש בפועל מכיוון שאינו נתמך כבר על ידי רוב הדפדפנים.

הגדרות מתקדמות של text-decoration

text-decoration מאפשר הגדרות מפורטות כדלקמן:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • המאפיין text-decoration-color מאפשר לציין את צבע הקווים התחתוניים או הקווים החוצים. כברירת מחדל, הוא תואם את צבע הטקסט, אך ניתן להוסיף דגש ויזואלי על ידי בחירת צבע שונה.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • המאפיין text-decoration-style מאפשר לציין את סגנון הקווים הדקורטיביים. הערכים כוללים את האפשרויות הבאות:.
    • solid (ברירת מחדל, קו מוצק)
    • double (קו כפול)
    • dotted (קו מנוקד)
    • dashed (קו מקווקו)
    • wavy (קו גל)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • המאפיין text-decoration-thickness מאפשר לציין את עובי הקווים הדקורטיביים. ניתן להתאים אותו באמצעות יחידות כמו 2px או 0.1em, לדוגמה.

סיכום:

  • text-decoration הוא מאפיין להוספת קווים דקורטיביים לטקסט, כגון קווים תחתוניים או קווים חוצים.
  • עם text-decoration-color, text-decoration-style ו-text-decoration-thickness, ניתן לבצע התאמה אישית מפורטת יותר.
  • משמש לעיתים קרובות להדגשת קישורים או טקסט חשוב, או כאלמנט עיצובי.

בעזרת text-decoration, ניתן להוסיף דגש או הדגשה עדינה לטקסט.

מאפיין text-transform 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

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

הסבר:

  • המחלקה text-transform-none מציגה טקסט מבלי לשנות אותו מהמינוח המקורי.
  • המחלקה text-transform-capitalize ממירה את האות הראשונה של כל מילה לאות גדולה.
  • המחלקה text-transform-uppercase ממירה את כל הטקסט לאותיות גדולות.
  • המחלקה text-transform-lowercase ממירה את כל הטקסט לאותיות קטנות.

ערכים עיקריים של text-transform

none 
1p {
2    text-transform: none;
3}
  • הגדרת none משאירה את הטקסט ללא שינוי.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • הגדרת capitalize ממירה את האות הראשונה של כל מילה לאות גדולה. גבולות המילים מזוהים באמצעות רווחים או סימני פיסוק.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • הגדרת uppercase ממירה את כל הטקסט לאותיות גדולות.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • הגדרת lowercase ממירה את כל הטקסט לאותיות קטנות.
full-width
  • הגדרת full-width ממירה טקסט לאותיות ברוחב מלא. זה משמש בדרך כלל כסגנון מיוחד בעת עבודה עם קאנג׳י או קאנה, אך דפדפנים מעטים תומכים בזה.

סיכום:

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

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לגופניםמאפייני CSS הקשורים למרווחי טקסט