מאפייני 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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.