4.4 סגנון לפי ההקשר

ניתן להגדיר סגנון לתגיות לפי מיקומן בתוך תגיות אחרות, למשל. אם לטבלה שלנו יש רקע כחול ואנו רוצים שלינקים (<a>) בתוך הטבלה יהיו בעלי צבע שונה, נוכל להגדיר את צבעם כך:

---

Body{background-color:white;}  

a{ color:blue;}  

table,h1{background-color:blue;}  

table a{color:white;}  

h1 i{text-transform:capitalize;}

---

בנוסף, בדוגמה זו שמנו אות גדולה בראש כל המילים הנמצאות בתוך תגית <i> הנמצאת בתוך תגית <h1>. צורת כתיבה זאת שימושית במיוחד כאשר כותבים רשימות ורוצים מבנה דומה לתתי רשימות:

---

ol li{list-style:upper-roman;}  

ol ol li{list-style:upper-alpha;}  

ol ol ol li{list-style:decimal;}  

ol ol ol ol li{list-style:lower-alpha;}

---

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

---

A table{display:none;}

---

הגדרה זו אינה מעלימה את כל הטבלאות שבדף אלא רק את אלו הנמצאות בתוך תגי <A>. עוד הגדרה קונטקסטואלית קשורה למיקום התגית מייד אחרי אחרת:

---

H1 + table{margin-top:-3px;}

---

הגדרת סגנון זו תתייחס אך ורק לטבלה הנמצאת ישר אחרי תגית כותרת1.

הגדרת סגנון של הסימן * תתייחס לכל האלמנטים בדף הHTML.

---

*{font-family:times new roman;}

---

► הקודם  הבא  ◄

7.1 רקע וקידמה - כללי

לכל אלמנט בדף HTML יש רקע (background) וקידמה (foregound), ולכל אחד מהם יש צבע. 

color

התכונה color צובעת את הקידמה (foreground). את האותיות. כפי שצויין לעיל ניתן להשתמש בהגדרות הצבעים בשיטת המילים (green), ערך הקסדצימלי (#00ff00) או שלשות של ערכי RGB. 

---

body {color: rgb(255,255,0)}

---

Background

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

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

---

table{background: url(lines.gif) fixed middle center darkgreen no-repeat;}

---

Property	Description	Values
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent
background-image	Sets an image as the background	url(URL) none
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat

► הקודם  הבא  ◄

7.2 Background-color

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

מעניין לראות שכותרת <h1> המקבלת צבע רקע נצבעת לרוחב הדף כולו (אלא אם כן היא מוגבלת בטבלה, למשל).

---

p {background-color: #00FF00}

---

► הקודם  הבא  ◄

7.3 Background-image

מקבלת ערך URL של תמונת רקע כלשהי, או את המילה none. תמונת רקע יכולה לבוא על כל הדף או מאחורי אלמנט מסויים.

---

<p style="background-image:url(images/myFace.jpg)"> 

table table{background-image:url(http://www.bgc.com/bg/crisscross.gif)}

---

התמונה הראשונה נקראת inline מתוך תגית

והיא תיושם כרקע לתוכן התגית. 

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

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

► הקודם  הבא  ◄

 

7.4 background-repeat

background-repeat מגדירה לדפדפן האם ואיך להכפיל את תמונת הרקע באלמנט, כאשר זה האחרון גדול מהתמונה. 

התכונה מקבלת אחד מהערכים:

• repeat-x - תכפיל את התמונה לאורך ציר הX של האלמנט (לרוחב הדף). 
  
• repeat-y - תכפיל את התמונה לאורך ציר הY של האלמנט (לאורך הדף). 
  
• no-repeat - לא תכפיל את התמונה. 
  

השורה הבאה תיצור טור אדום לצידו הימני של המסך:

---

body{background-image: url(images/red.gif);  

background-position:rightright top;  

background-repeat:repeat-y;}

---

Value	Description
repeat	Default. The background image will be repeated vertically and horizontally
repeat-x	The background image will be repeated horizontally
repeat-y	The background image will be repeated vertically
no-repeat	The background-image will be displayed only once

► הקודם  הבא  ◄

7.5 background-position

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

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

---

Table{background-position: 20px 50px;}

---

במקרה זה ימקם הדפדפן את התמונה עשרים פיקסלים משמאל וחמישים מלמעלה. אפשר גם באחוזים:

---

Table{background-position: 33% 20%;}

---

אבל אפשר גם במילים. לאופקי משתמשים ב:left, right, center ולאנכי ב: top, center, bottom.

---

td{background-position: center middle;}

---

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If you only specify one keyword, the second value will be "center". Default value: 0% 0%
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

► הקודם  הבא  ◄

7.6 Background-attachment

Background-attachment היא תכונה הפועלת רק עם אקספלורר ומאפשרת למקם את תמונת הרקע כקבועה (fixed) או נעה (scroll) בגלילה.

---

body {background-image: url(stars.gif); background-attachment: fixed}

---

Value	Description
scroll	Default. The background image moves when the rest of the page scrolls
fixed	The background image does not move when the rest of the page scrolls

► הקודם  הבא  ◄

8.1 סגנונות לטקסט - מבוא

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

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

הטבלה הבאה תציג את המאפיינים העיקריים ואת תמיכת הדפדפנים בכל מאפיין (IE=אקספלורר, F=פיירפוקס, N=נטסקייפ). המספרים בעמודות הדפדפן, מציינים את הגירסה הראשונה התומכת של הדפדפן.

Property	Description	Values	דפדפן
			IE	F	N
color	Sets the color of a text	color	3	1	4
direction	Sets the text direction	ltr rtl	6	1	6
line-height	Sets the distance between lines	normal number length %	4	1	4
letter-spacing	Increase or decrease the space between characters	normal length	4	1	6
text-align	Aligns the text in an element	left right center justify	4	1	4
text-decoration	Adds decoration to text	none underline overline line-through blink	4	1	4
text-indent	Indents the first line of text in an element	length %	4	1	4
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	4	1	4
white-space	Sets how white space inside an element is handled	normal pre nowrap	5	1	4
word-spacing	Increase or decrease the space between words	normal length	6	1	6
text-shadow		none color length
unicode-bidi		normal embed bidi-override	5

► הקודם  הבא  ◄

8.2 Letter-spacing

תכונות טקסט מגדירות כיצד טקסט ממוקם בדף וכיצד הוא מוגש למשתמש.

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

---

p {letter-spacing: 12px}

p {letter-spacing: -0.5px}  

---

Value	Description
normal	Default. Defines normal space between characters
length	Defines a fixed space between characters

► הקודם  הבא  ◄