מדריך לעיצוב טקסט בעזרת קוד CSS

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

שליטה בצבע הטקסט

כדי לשלוט בצבע הטקסט בדף HTML בעזרת קוד CSS נשתמש בתכונה color. הערך של התכונה יכול להיות מסוגים שונים: שם שמור (כמו red או blue) שהדפדפן יודע לזהות ולתרגם לצבע הדרוש, ערך הקסהדצימלי המייצג צבע כגון FF0000# וכן ערך RGB המייצג צבע.

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

#p1 {color:blue;}
#p2 {color:#FF0000;}
#p2 {color:rgb(255,140,15);}

דקורציה של טקסט (Decoration)

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

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

דוגמה לטקסט עם קו עילי
#p1 {text-decoration:overline;}
דוגמה לטקסט עם קו חוצה
#p2 {text-decoration:line-through;}
דוגמה לטקסט עם קו תחתי
#p3 {text-decoration:underline;}
דוגמה לטקסט מהבהב
#p4 {text-decoration:blink;}

יישור טקסט (Alignment)

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

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

דוגמה ליישור הטקסט לימין
#p1 {text-align:right;}
דוגמה ליישור הטקסט לשמאל
#p2 {text-align:left;}
דוגמה למרכוז הטקסט
#p3 {text-align:center;}
דוגמה ליישור הטקסט גם מימין וגם משמאל
#p4 {text-align:justify;}

כניסת פסקאות ושורות טקסט (Indentation)

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

p{text-indent:30px;}

שינויים בטקסט לועזי (Text Transformation)

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

דוגמה לאותיות לועזיות גדולות
#p1{text-tranform:uppercase;}
דוגמה לאותיות לועזיות קטנות
#p2{text-tranform:lowercase;}
דוגמה למצב שבו כל מילה מתחילה באות גדולה
#p3{text-tranform:capitalized;}

ריווח אותיות

כדי לרווח אותיות נשתמש בתכונה המובנית: letter-spacing. באמצעות תכונה זו נוכל לקבוע מה יהיה המרחק בין האותיות השונות בתוך קטע הטקסט שלנו.

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

דוגמה לריווח אותיות
#p1{letter-spacing:4px;}

ריווח מילים

כדי לרווח מילים נשתמש בתכונה המובנית: word-spacing. באמצעות תכונה זו נוכל לקבוע מה יהיה המרחק בין המילים השונות בקטע הטקסט שלנו.

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

דוגמה לריווח מילים
#p1{word-spacing:1px;}

ריווח שורות

כדי לקבוע מה יהיה הרווח בין השורות בתוך בלוק הטקסט שלנו נשתמש בתכונה המובנית: line-height.

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


דוגמה לריווח שורות
#p1{line-height:150%;}




 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש