עיצוב טקסט בCSS

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

כמו שלימדתי אתכם במדריך הקודם על טקסט בHTML בשביל לכתוב פיסקה אנחנו נכתוב את התגית <p>
כברירת מחדל, הפיסקה לא מעוצבת בכלל,
היום במדריך אנחנו הולכים לעצב אותה...

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

עכשיו אנחנו נכתוב את שם התגית שבה אנחנו משתמשים בשביל לכתוב את הפיסקה (p), וכך נעצב את כל הפיסקאות בדף שלנו, או שפשוט נוסיף class.

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

צבע

p {color: green;}

שימו לב שבסוף כל תכונה שמים את הסימן ;
האפשרות color בCSS משנה את צבע הטקסט,
ניתן לכתוב את הצבע או בשם- red, green, black וכו'
ניתן גם לכתוב בצורת rgb כך- (rgb(47, 95, 157
ניתן לכתוב גם בrgb באחוזים- (rgb(100%,0%,0%
אפשר גם לכתוב בצורה הזו- ff0000#

קו תחתון

בשביל להוסיף קו תחתון לטקסט נשתמש בתכונה text-decoration ובערך underline, כך-

p {text-decoration: underline;}

בשביל להסיר קו תחתון מהטקסט נשתמש בתכונה text-decoration ובערך none, כך-

p {text-decoration: none;}

הדגשת הטקסט

בכדי להדגיש את הטקסט נשתמש בתכונה font-weight שמגדירה לנו את עובי הטקסט,
ועם הערך bold, שמגדיר את הטקסט כעבה ואז הוא יהיה מודגש

טקסט רגיל 
טקסט מודגש

p {font-weight: bold;}

גופנים

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

טקסט בגופן Heebo

טקסט בגופן Arial

p {font-family: heebo;}

גודל הטקסט

אם נרצה לשנות את גודל הטקסט אנחנו נשתמש בתכונה font-size, הערך שלנו יהיה מספר פיקסלים, או אחוזים

p {font-size: 28px;} p {font-size: 70%;}

כיוון הטקסט

אם נרצה להזיז את הטקסט לכיוון ימין, שמאל או למרכז, אנחנו נשתמש בתכונה, text-align,
ובאחד מהערכים left, center, right

p {text-align: center;}

מרווח בין אותיות

בשביל להגדיר את המרווח בין האותיות בפיסקה אנחנו נשתמש בתכונה letter-spacing והערך יהיה, או כמות פיקסלים (PX) או normal, בשביל שהמרווח בין האותיות יהיה רגיל

p {letter-spacing: 7px;}

וכך יראה הטקסט

אפשר גם להגדיר שהאותיות יהיו מאד צפופות-

p {letter-spacing: -2px;}

וכך יראה הטקסט

מרווח בין שורות

בשביל להגדיר את המרווח בין השורות, אנחנו נשתמש בתכונה line-height, ונכתוב את הערך באחת מהצורת הבאות-
כמות פיקסלים- 5px
מספר- 1.6
אחוזים- 120%

p {line-height: 150%;}

בשביל לסגור את עיצוב התגית נוסיף את הסימן {

בשביל לכלול כמה עיצובים אנחנו נבנה זאת כך

p { font-size: 28px; color: green; font-family: heebo; font-weight: bold; text-decoration: none; }

כך נראה הטקסט המעוצב

כמובן שאפשר להשתמש גם בclass-

<style> .Example_Text { font-size: 28px; color: green; font-family: heebo; font-weight: bold; text-decoration: none; } </style> <p class="Example_Text">שלום עולם</p>

עד כאן להיום,
כתבו לי בתגובות אם אתם צריכים עזרה, אנסה לעזור לכם.
בהצלחה!

→ לפוסט הקודם בנושא HTML לפוסט הבא בנושא HTML ←