התחבר | הרשמה | שאלות נפוצות
Anonymous

שיעור 5: טקסט

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

הזחת טקסט [Text-Indent]

התכונה text-indent מאפשרת לך להוסיף מגע אלגנטי לפסקת טקסט על ידי הזחת שורת הטקסט הראשונה של הפסקה. בדוגמה למטה החלנו הזחה של 30 פיקסל לכל הפסקאות המסומנות בתג <p>:

	
	p {
		text-indent: 30px;
	}
	
	

יישור טקסט [Text-Align]

תכונת ה-text-align CSS מתייחסת למאפיין align ששימש בגרסאות HTML ישנות. טקסט ניתן ליישור לשמאל (left), לימין (right) או למרכז (centered). בנוסף, הערך יישר לשני הצדדים (justify) ימתח כל שורה כך שהשוליים הימנים והשמאליים יהיו ישרים. אתה מכיר תבנית עיצוב זאת מעיתונים ושבועונים.

בדוגמה שלמטה הטקסט שבראש הטבלה <th> מיושר לימין בעוד שהנתונים שבטבלה <td> מיושרים למרכז. בנוסף, פסקאות טקסט רגילות מיושרות לשני הצדדים.

	
	th {
		text-align: right;
	}
 
	td {
		text-align: center;
	}
 
	p {
		text-align: justify;
	}
	
	

קישוט טקסט [Text-Decoration]

התכונה text-decoration מאפשרת להוסיף "קישוטים" או "אפקטים" לטקסט. למשל, אתה יכול למתוח קו מתחת לטקסט, להוסיף קו חוצה לטקסט או למתוח קו מעל הטקסט. בדוגמה הבאה, <h1> הן כותרות עם קו תחתי, <h2> הן כותרות עם קו מעל הטקסט ו-<h3> הן כותרות עם קו חוצה.

	
	h1 {
		text-decoration: underline;
	}
 
	h2 {
		text-decoration: overline;
	}
 
	h3 {
		text-decoration: line-through;
	}
	
	

ריווח אות [Letter-Space]

הרווח בין תוויות טקסט ניתן להגדרה באמצעות התכונה letter-spacing. ערך התכונה הוא פשוט הרוחב המבוקש. למשל, אם אנחנו רוצים רוחב של 3px  בין אותיות הטקסט בפסקה <p> ו-6px בין האותיות בכותרת <h1> ניתן להשתמש בקוד שלמטה:

	
	h1 {
		letter-spacing: 6px;
	}
 
	p {
		letter-spacing: 3px;
	}
	
	

שינוי טקסט [Text-Transform]

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

המילה "headline" יכולה להיות דוגמה שתוצג למשתמש כ-"HEADLINE" או "Headline". ישנם ארבע ערכים אפשריים לשינוי טקסט.

capitalize
הצגת האות הראשונה בכל מילה באות גדולה. למשל: "john doe" יהפוך ל-"John Doe".
uppercase
תשנה את כל האותיות לאותיות גדולות. למשל: "john doe" יהפוך ל-"JOHN DOE".
lowercase
תשנה את כל האותיות לאותיות קטנות. למשל: "JOHN DOE" יהפוך ל-"john doe".
none
אין שינוי - הטקסט מוצג כפי שהוא מופיע בקוד ה-HTML.

כדוגמה, נשתמש ברשימת שמות. השמות מסומנים כולם ב-<li> (רשימת פריטים - list-item). נניח שאנחנו רוצים שהשמות יתחילו באותיות גדולות והכותרות יוצגו באותיות גדולות במלואן.

הסתכל בקוד ה-HTML של דוגמה זו ותבחין שהטקסט למעשה כתוב באותיות קטנות.

	
	h1 {
		text-transform: uppercase;
	}
 
	li {
		text-transform: capitalize;
	}
	
	

סיכום

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



<< שיעור 4 - גופנים

שיעור 6 - קישורים >>