ezXpert with ezAdmin3-CSS: 2009

יום שני, 13 באפריל 2009

1. מבוא ל- CSS

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

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

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

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

מה צריך לדעת כדי ללמוד CSS?

HTML
הבנה בסיסית של מושגי האינטרנט

באמצעות אילו כלים כותבים CSS?

כל עורך טקסט פשוט, כדוגמת notepad, מספיק כדי למלא את המשימה.

עורכים נוספים, המספקים מעט יותר פונקציונליות הם TextPad ו-EditPlus.

► הקודם הבא ◄

2.1 לשם מה צריכים גליונות סגנון ?

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

שתי השחקניות הגדולות בתחום, נטסקייפ ואקספלורר, המשיכו להוסיף תגיות ותכונות (כגון: והתכונה color=red) למפרט ה-HTML, עד שבבניית אתרי אינטרנט לא ניתן היה למצוא את קו ההפרדה שצריך להיות קיים בין עיצוב המסמך, לבין התכנים, ולבין התכנות. הכל הפך למסה אחת שקשה למצוא בה את הידיים והרגליים.

עיצוב דפי WEB הפך לסיוט של ממש. כדי לפתור בעיה זו, החליטו חברי ועדת W3C (הועדה ללא מטרת רווח המחליטה על תקנים של HTML), ליצור סגנונות. כמו כן, יצרה הועדה את התקן החדש - 4.0 HTML. מאז ועד עצם היום הזה, החל מגרסה 4 של נטסקייפ ואקספלורר יש תמיכה ב-CSS.

► הקודם הבא ◄

2.2 סיגנון: הגדרה

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

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

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

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

► הקודם הבא ◄

2.3 כיצד נאפיין סגנון ?

ניתן לקבוע סגנון בארבעה אופנים:

ברירת מחדל:

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

Inline:

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

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

פנימי:

קביעת סגנונות כלליים לכל הדף. את זה עושים בדרך כלל בתוך תגית HEAD. מכניסים תגית <style>, רושמים סגנונות (כפי שיוסבר בהמשך) וסוגרים את התגית - <style/>.

לדוגמא:

<html>

<head>

<title>title text</title>

<style>

style text...

</style>

</head>

<body>

body text...

</body>

</html>

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

חיצוני:

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

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

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

► הקודם הבא ◄

2.4 סדרי עדיפויות ב- CSS

מה יקרה כאשר יקבע יותר מסגנון אחד לאותו פסוק?

הערך יקבע על פי העדיפות:

1. הגדרת CSS inline. - מכריעה ללא עוררין.

2. CSS פנימי - קובע רק אם אין סתירה ב-inline.

3. CSS חיצוני - קובע רק אם אין סתירה בפנימי או ב-inline.

4. ברירת המחדל.

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

► הקודם הבא ◄

2.5 אז איזה סגנון כדאי לבחור?

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

1. האם ומדוע כדאי להשתמש בסגנון ולא בתגיות רגילות?

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

2. איזה סוג של CSS? חיצוני, פנימי או inline?

חיצוני - בעד ונגד.

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

פנימי- בעד ונגד

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

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

Inline- בעד ונגד

סגנונות inline הם בזבזניים, קשים לניהול ואינם ניתנים לשימוש חוזר ולכן מומלץ להשתמש בהם כמה שפחות. דפי HTML שבהם כתובים סגנונות רבים ב-inline, הופכים להיות בדיוק מה שלא רצינו שיהיו: עיצוב, תוכן ותיכנות בעירבוביה. ולכן בכל פעם שאתה מתפתה לשים סגנון בתוך הBODY, תחשוב שוב אם אינך יכול לעשות זאת באופן שונה, בין אם שימוש בCLASS או בID. הסגנונות יהיו הרבה יותר נגישים לסיגנון ועיצוב.

ועכשיו שאנו יודעים את היסודות בואו נלמד איך עושים את זה...

► הקודם הבא ◄

2.6 מאפייני הסגנון

ישנם חמישה סוגים של ערכים שניתן לתת למאפייני הסגנון:

מילות מפתח (למשל: underline או bold. נדון בהם בהרחבה בהמשך).
אורכים.
אחוזים.
כתובות (URL).
צבעים.

אורכים ואחוזים

אורכים מציגים את אורכם של אלמנטים במספרים (חלקם גם בשברים עשרוניים).

לאורכים ניתן להוסיף גם את סימן ה + או - כדי לסמן הוספה או הפחתה מהערך המיידי של התכונה, וכן יש לצרף, ללא רווחים, שתי אותיות המסמנות את יחידת המידה או את סימן האחוזים.

יחידות מידה יכולות להיות:

היחידה	תיאור
%	אחוזים
in	אינץ'
cm	סנטימטר
mm	מילימטר
em	Em אחד זהה לגודלו הנוכחי של הפונט. 2em משמעו פעמיים גודלו הנוכחי של הפונט. לדוגמא: אם גודלו של הפונט הנוכחי הוא 12pt אזי 2em משמעותם 24pt. יחידה זו הינה שימושית מאד ב-CSS שכן היא מאפשרת התאמת הגודל הרצוי למתכנן, לפונט המצוי בשימוש אצל הגולש.
ex	משמעו גובה-X של הפונט (בדרך כלל כמחצית מגודל הפונט).
pt	נקודות (1pt שווה כ- 1/72 אינץ').
pc	Pica (1pc שווה ל- 12pt).
px	פיקסל (נקודה על מסך המחשב).

כתובות

ערכי URL חייבים לרשום בתוך סוגריים רגילים מייד אחרי המילה url כך:

url(images/smile.gif)

url(http://www.w3c.com/images/fits.jpg)

שימו לב שאסור להשאיר רווח בין המילה url לבין הסוגריים וכן כי הכתובת המצוינת היא יחסית לכתובת של דף ה-CSS שבו כתוב הסגנון.

צבעים

תכונות של צבעים יכולות להיכתב לפי: שם הצבע RED, שלישיית RGB הקסדצימלית: #ff0000, או שלישית RGB דצימלית(עשרונית): rgb(255,0,0), כלומר ערך בין 0 ל255 לכל אחד מהצבעים. (rgb = red, green, blue) הערך 0,0,0 מייצג את הצבע שחור ואילו 255,255,255 הוא לבן. ניתן לייצג זאת גם באחוזים.

Color:green;

Color:#00ff00;

Color:rgb(0,255,0);

Color:rgb(0%,100%,0%);

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

Unit	תאור
color_name	A color name (e.g. red)
rgb(x,x,x)	An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)	An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb	A HEX number (e.g. #ff0000)

► הקודם הבא ◄

3.1 שמירת קובץ CSS חיצוני

קובץ CSS כותבים כקובץ טקסט רגיל (כמו דפי HTML) ב-Notepad. כל הטקסט בנוי במתכונת הבאה:

a{text-decoration:none; color:darkgreen;}

a.but{text-decoration:underline; color:navy; font-weight:bolder;}

a.email{color:red; font-size:12px;}

h5 a,h4 a{text-decoration:underline; color:blue; font-weight:bold;}

h5,h4{margin-bottom:0; margin-top:0;}

p{margin-top:0; margin-bottom:0; font-family:verdana,arial,"sans serif";}

a:hover{text-decoration:underline; color:beige;}

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

1. קישור באמצעות תגית <link>.

2. יבוא באמצעות הפקודה @import בתוך תגית <style>.

► הקודם הבא ◄

3.2.1 מה ההבדל בין קישור לייבוא?

אם מדובר בקובץ CSS חיצוני אחד בלבד, אין כל הבדל. אם מדובר ביותר מקובץ אחד, והכללתם נעשתה בשיטת <link>, הדפדפן ישאל את המשתמש באיזה קובץ הוא רוצה להשתמש ומהשני הוא יתעלם לחלוטין.

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

בשל השוני בין דפדפנים, נטסקייפ עד גרסה 6 התעלם לגמרי מהגדרות CSS שיובאו באמצעות import@ וכן מהגדרות media@. ישנם דפדפנים שכלל אינם תומכים בסגנון, ממש כשם שיש שאינם תומכים ב-JavaScript. את כל הטקסט הכלול בתוך תגית ה-<style>, (הגדרות ה-CSS) הם מציגים ללא בושה.

לכן נהוג, בהגדרת סגנון בתוך תגית <style> להתחיל ולסיים בסימן הערה:

<style>

<!--

הגדרת הסגנונות

-->

</style>

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

► הקודם הבא ◄

3.2.2 קישור קובץ CSS חיצוני

קישור, מיושם תמיד בתוך מתחם שבין פתיחת תגית <head> לסגירתה, כך:

href="http://ezadmin3-html.blogspot.com/styles/MyStyle.css">

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

► הקודם הבא ◄

3.2.3 יבוא קובץ CSS חיצוני

יבוא באמצעות import@, מיושם (בדרך כלל) גם הוא בתוך חלק ב-<head> אבל תמיד בתוך תגית <style>:

@import url(MyStyle.css);

@import "http://ezadmin3-html.blogspot.com/styles/MyStyle.css";

h1{color:red;}

</style>

גם במקרה זה יובאו שני דפי סגנון.

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

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

הפקודה import@ חייבת להיכלל לפני כל הגדרת סגנון פנימית.

אם תנסה להכניס את הפקודה אחרי הגדרות סגנון אחרות, תתעלם HTML מקובץ הCSS המוכלל.

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

@import "http://www.tapuz.co.il/general/tapuz.css" print,braille;

► הקודם הבא ◄

4.1 CSS - תחביר

לגיליונות סגנון, בין אם מדובר בחיצוניים או פנימיים, (לא inline) יש תחביר מאוד פשוט:

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

הקוד נראה כך:

SELECTOR{PROPERTY:VALUE}

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

table {background-color:blue}

הגדרות ה-CSS יהיו בעלי עדיפות גבוהה יותר מפקודות HTML רגילות. כלומר, אם הגדרנו בתגית ה-body את התכונות הבאות:

וכן נכתוב את השורות האלה (לפני או אחרי, אם כי נהוג לכתוב CSS בחלק ה-HEAD):

<style>

body{color:forestgreen; background-color:beige}

</style>

דף ה-HTML מקבל את התכונות שהוגדרו ב-CSS ומוותר על תכונות ה-BODY כפי שהוגדרו. כלומר הדף שלנו יהיה ירוק על רקע בז'.

► הקודם הבא ◄

4.2 צורת כתיבה

כפי ששמתם לב, ניתן לכתוב מספר תכונות שונות לאותו סלקטור. בין התכונות יש להפריד באמצעות semicolon (הידוע בכינויו נקודה-פסיק).

אם התכונה היא מרובת מלים יש לשים סביב הערך מרכאות. במקרה זה קבעתי שיש לכתוב את טקסט הפסקאות בפונט שנקרא sans serif. אם פונט זה אינו קיים במחשב המשתמש הוא ישתמש ב-arial ואם גם זה לא קיים אז verdana.

p {font-family:"sans serif",arial,verdana }

כדי שהמסמך יהיה קריא יותר, אפשר לכתוב כל תכונה בשורה נפרדת:

p {

text-align:center;

color:black;

font-family:arial }

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

a, h1 {color:red}

► הקודם הבא ◄

4.3 כתיבת הערות

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

<style>

/* anything written here will not make any difference

אפשר לכתוב כאן סיפור שלם. להסביר ולפרט כל פרט בסגנון

למשל בהגדרת הסגנון הכתובה כאן*/

table {border-style:double;border-width:2px;border-color:gray}

/*בחרתי לתת לטבלה גבול כפול בצבע אפור בעובי 2 פיקסלים*/

</style>

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

► הקודם הבא ◄

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;}

► הקודם הבא ◄

4.5 תת אלמנטים

קיימים בדף HTML מספר אלמנטים שאי-אפשר להגדיר בתוך תגית מסוימת, כגון: אות ראשונה בפסקה או שורה ראשונה. השורה הבאה מגדירה לדפדפן להציג את האות הראשונה בפסקה בגודל כפול, ולהטותה הצידה:

p:first-letter{font-style:italic;font-size:200%;}

אותו דבר אפשרי גם לגבי שורה ראשונה:

p:first-line{font-weight:bold;font-size:120%;}

תת אלמנט של A אפשרי גם כן:

A:link{color:gold;}

A:hover{color:white;background-color:gold;}

A:active{color:orange;}

A:visited{color:red;}

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

תת-אלמנטים נוספים:

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

h1:before {content: url(beep.wav)}

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

h1:after {content: url(beep.wav)}

ישנם תת-אלמנטים נוספים (אשר בזמן כתיבת שורות אלו עדיין אינם פעילים בדפדפנים):

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

a:link {color: #FF0000} /* unvisited link */

a:focus {color: #00FF00} /* focused link */

first-child - מצרף סגנון לאלמנט אשר הינו "אלמנט בן" של אלמנט אחר:

p:first-child{color:blue

}</style>

<p>I am a strong man.</p>

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

<html>

<head>

q:lang(no) {quotes: "~" "~"}

</style>

</head>

<body>

<p>Some text <q lang="no">A quote in a paragraph</q>

Some text.</p>

</body>

</html>

► הקודם הבא ◄

יום שני, 13 באפריל 2009

1. מבוא ל- CSS

מה צריך לדעת כדי ללמוד CSS?

באמצעות אילו כלים כותבים CSS?

► הקודם הבא ◄

2.1 לשם מה צריכים גליונות סגנון ?

2.2 סיגנון: הגדרה

2.3 כיצד נאפיין סגנון ?

ניתן לקבוע סגנון בארבעה אופנים:

2.4 סדרי עדיפויות ב- CSS

► הקודם הבא ◄

2.5 אז איזה סגנון כדאי לבחור?

חיצוני - בעד ונגד.

פנימי- בעד ונגד

Inline- בעד ונגד

2.6 מאפייני הסגנון

אורכים ואחוזים

כתובות

צבעים

3.1 שמירת קובץ CSS חיצוני

3.2.1 מה ההבדל בין קישור לייבוא?

3.2.2 קישור קובץ CSS חיצוני

3.2.3 יבוא קובץ CSS חיצוני

4.1 CSS - תחביר

4.2 צורת כתיבה

4.3 כתיבת הערות

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

4.5 תת אלמנטים

נושאי הלימוד

למה ezAdmin3

פשטות ההקמה

הזנת תכנים וגרפיקה

פשטות אחזקה

השיעורים בנושא לימוד זה

tags

יום שני, 13 באפריל 2009

מה צריך לדעת כדי ללמוד CSS?

באמצעות אילו כלים כותבים CSS?

► הקודם הבא ◄

ניתן לקבוע סגנון בארבעה אופנים:

► הקודם הבא ◄

חיצוני - בעד ונגד.

פנימי- בעד ונגד

Inline- בעד ונגד

אורכים ואחוזים

כתובות

צבעים

נושאי הלימוד

למה ezAdmin3

פשטות ההקמה

הזנת תכנים וגרפיקה

פשטות אחזקה

הירשם ל-

השיעורים בנושא לימוד זה

tags