מדריך CSS – תכונות CSS אחרות

רן בר-זיק ‏ • Internet Israel

Visibility

כל אלמנט בBODY יכול להיות גלוי או מוסתר. התכונה visibility מאפשרת למתכנת להעלים מהעין דברים מסוימים שלא רוצים שהמשתמש יראה. ערכים אפשריים הם hidden וכן visible. הדפדפן שומר מקום עבורם אבל לא מציג אותם אם נבקש ממנו יפה, כך:

<style>
    em{visibility:hidden;}
</style>
<em class="rst">Error on page - please correct it!</em>

התכונה שימושית מאוד כאשר עובדים עם DHTML.

Display

תכונה דומה אחרת היא display, היכולה לקבל את הערכים block, inline, list-item וכן none. האקספלורר מכיר רק ב block וב- none, ובעזרת תכונות אלו (וקצת DHTML) ניתן לחולל ניפלאות. התכונה display:none מעלימה את האובייקט, ולא שומרת לו מקום (להבדיל מvisibility). לדוגמה:

<style>
  #con{display:none;}
  #loader{display:block;text-decoration:blink;color:blue;font-size:32pt;}
</style>

<body onload="loader.style.display='none'; con.style.display='block';>
    <p id="loader" dir=rtl lang=he>טוען...</p>
    <div id="con">... Rest of the page...</div>
</body>

דוגמה זו (הכוללת שימוש בDHTML) מציגה שימוש בסגנון כדי ליצור מסמך אשר עד שלא נטען לזיכרון המחשב יציג את השורה "טוען…". כאשר המסמך יהיה מוכן להצגה על המסך, תיעלם השורה "טוען…" ויופיע המסמך.

white-space

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

normal, גם כברירת מחדל (כמובן), מציג כל מספר רווחים כרווח אחד.

pre מציג את הרווחים וירידות השורה כמו בתגית <PRE>.

nowrap אומר לדפדפן לא לרדת שורה אם לא הגיע לתגית <BR>.

position

כאשר רוצים למקם טקסט, משתמשים בתכונה position היכולה לקבל את הערכים absolute או relative. הערך absolute ימקם את הטקסט לפי הפרמטרים המצורפים, והאלמנטים הבאים אחר כך כל לא יתייחסו לאלמנט זה. לעומת זאת relative ימקם את האלמנט בהסטה של top ו-left מהמיקום המתאים של האלמנט.

H5.tp{position:absolute;top:50;left:10;}
H5.ap{position:relative;top:50;left:10;}

במקרה הראשון, ימוקם הטקסט ליד הפינה השמאלית העליונה של הדף, ואלמנטים שנכתבו אחריו ימשיכו להיכתב במקום שבו היו צריכים להיכתב. במקרה השני ימוקם הטקסט מעט למטה ומשמאל נקודה שבה היה צריך להיות ממוקם, ואילו האלמנטים שאחריו ימשיכו לזרום מהנקודה שבה האלמנט הסתיים.
השימוש ב position:absolute מאפשר בעצם כתיבה בשכבות. אפשר לכתוב משהו על גבי משהו אחר.
אם ראיתם תפריט הנפתח כאשר מעבירים את העכבר על אלמנט כלשהו, הר יזה משום שהתפריט היה ממוקם באופן אבסולוטי ותכונת ה-display שלו היתה none. הנה דוגמה לטבלת קישורים כזו:

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1255">
  <style type="text/css" title="">
    a{color:white;background-color: green;}
    ahover{color:green;background-color: white;}
    a table{position:absolute;display:none;
      margin-left:-10px;margin-right: -10px;
      background-color:green;color:white; }
    table{background-color:orange;}
  </style>
</head>

<body dir=rtl lang=he>
<table>
<tr>
  <td>    
    <a href="javascript:void();" id=a1
    onmouseover="emaillinks.style.display='block';"
    onmouseout="emaillinks.style.display='none';">הדואר שלי
    <table id="emaillinks" onmouseover="this.style.display='block';">
    <tr><td><a href="mailto:me@work.com">בעבודה</a>
    <tr><td><a href="me@home.com">בבית</a>
    </table>
  </a>
</table>
</body>

</html>

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

img.x{position:absolute;top:20;left:50;z-index:3;} 
img.y{position:absolute;top:20;left:50;z-index:2;}

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

Cursor

סמן העכבר מקבל מראה שונה כאשר מעבירים אותו מעל אלמנטים שונים (נראה כמו יד במעבר על קישורים, וכמו שערה במעבר על שדות להכנסת טקסט, למשל). ניתן לשנות את מראה העכבר גם בעזרת תכונת cursor, שיכולה לקבל את הערכים הבאים: default, pointer, move, e-resize , ne-resize , nw-resize , n-resize , se-resize , sw-resize , s-resize , w-resize , text , wait , help , hand crosshair, auto,.

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

button{cursor:hand;}

או לדוגמה:

<a href="directions.html" style="cursor:help">Need Help?</a>

Zoom

תכונת ה- zoom יכולה לקבל את הערכים: normal, מספר או אחוזים. היא פעילה רק באקספלורר החל מגירסה 5.5. שימו לב לתמונה הבאה:

 <img src="MyPic.jpg" width="200" height="200"
    onmouseover="this.style.zoom='200%'"
    onmouseout="this.style.zoom='normal'">

ScrollBar

אפשר לשנות את חזות פס הגלילה של מסמכים או אלמנטים באמצעות scrollbar-base-color:. ישנן מספר פריטים בתוך הסקרולר שאפשר לצבוע:

scrollbar-darkshadow-color:green;
scrollbar-3dlight-color:darkgreen;
scrollbar-face-color:yellow;
scrollbar-shadow-color:darkkhaki;
scrollbar-highlight-color:lightgreen;
scrollbar-track-color:orange;
scrollbar-arrow-color:gold;

מרחתי שמות של צבעים מבלי לבדוק ואני לא אחראי לתוצאות.

תגיות: CSS, בניית אתרים, מדריך

מדריך CSS