נכתב במקור על ידי somebody

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

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

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

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

עכשיו אני אדבר על עיצוב טקסט ע"י CSS.
התווים העיקריים בעיצוב טקסט הינם:
font-size-גודל הטקסט ב פיקסלים זה לא רק פיקסלים, המתכנת קובע את יחידת המידה, יש PX (פיקסלים) CM (סנטימטרים) IN (אינצ'ים) ויש עוד כמה שאני לא יודע מה הפירוש שלהם EX, EM, ואולי עוד
וכמובן יש %
color-צבע הטקסט
font-family-פונט הטקסט, לדוגמא אריאל, דויד וכו..
מה שטוב בזה, זה שאפשר לשלב מספר פונטים ביחד, מה שאומר שאם נגיד נעשה:
אז נקבל מעין פונט ביניים כזה מעורב בדויד ואריאל.
זה לא משלב שום דבר, זה נותן לך את הפונט הראשון, ואם אין לך אותו אז אתה מקבל את השני ואם אין אותו את אתה מקבל את השלישי.

font-weight-רוחב הטקסט כאשר bold(מודגש) הוא הרחב ביותר, ואפשר לעשות אץ רוחה ה טקסט כ 100 שזה הכי צר ולעשות כ 200, 300 וככה אלה כאשר כל פעם זה נעשה רחב ורחב יותר.
text-align-קובע את מיקום הטקסט, שלושה אפשריות : center,left,right.
חשוב לזכור! text-align קובע אך ורק את מיקום הטקסט בעמוד! לא מקום של אוביקטים אחרים לדוגמא טבלה.
רק אקספלורר שכמו שאמרתי לא ממש מציג בתורה תקינה יישר איתו למרכז גם טבלה.
למרכוז טבלה יש "אוביקט" אחר.

כדי למרכז טבלה בדפדפנים שעובדים לפי תקן, margin:auto לטבלה
באקספלורר text-align:center לתגית שמכילה את הטבלה.
וזה לא רק לטבלאות זה גם לטפסים ודברים כאלה.. כל מה שהוא block ולא inline

text-decoration-עיצוב הטקסט, זאת אורמת קו תחתון, קו חוצה וכו..
ישנם מספר אפשרויות:
underline-קו תחתון
line-through-קו למעל לטקס ומתחתיו
none-ללא קו, משמש מתי שרותים לעשות קישור ללא קו מתחתיו.
אלו השימושיים ביותר כמובן שיש יותר אפשרויות.
text-shadow-צל לטקסט, מקבל את צבע הצל אחריו. אני לא יודע אם יש דפדפן שתומך בזה, אבל מה שבטוח, לא IE.
direction- "אוביקט" זה לא משמש רק לטקסט אלה לא כל מה שקשור לעמוד.
מה שהוא עושה זה להגיד לדפדפן אם העמוד כתוב מימין לשמאל או משלמאל לימין וככה הדפדפן יסדר את העמוד לפי מה שהוגדר לו.
מה שהוא מקבל זה : rtl משמאל לימין (לדוגמא טקסט עברי מוגדר כrtl) או ltr מימין לשמאל (טקסט אנגלי וכו.. מוגדר כ ltr).


כיצד לכתוב זאת בעמוד?.
אז ככה "אוביקטים" אלו מוצבים בתוך "אוביקט" אחר בשם style אשר אותו ניתן להציב כמעת בכל תג אבל הכי שימושי והכי ממומץ זה להציב אותו בתוך div או span.

dבתוך div ניתן להציג כמעת כל אוביקט אפשרי ךדוגמא text-align שאותו לא ניתן להציב ב style שנימצא ב span.
)
חשוב לזכור!
כאשר עושים div בטקסט, הטקסט ירד שורה!(ישנה דרך לבטל את זה אבל לא נדבר עליה במאמר זה.).
וspan לא מוריד שורה.

עכשיו כיצד כותבים זאת בעמוד?
ככה כותבים:
פירוט קצר.
div או span בוחרים לפי המצג הקיים באותו רגע לפי מה שהסברתי למעלה.
את האוביקטים מציבים בתוך style="
ולאחר סיום כתיבת כל האוביקטים סוגרים את ה -"(מרכאות).

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

מומלץ לא לשים את הCSS ישר על התגית (INLINE) זה פחות יעיל ומסודר
והורס את כל העיקרון של הCSS, לא לבלגן את הדף עם מליון טגיות של עיצוב

עושים בקובץ חיצוני
או בHEAD.

ומי שרוצה ללמוד עוד ואיך עושים קובץ חיצוני וכל מה שאמרתי:
http://webmaster.org.il/guide.asp?subject=css

זהו לבנתיים(:

נכתב במקור על ידי liorwohl

טוב עכשיו אני יתקן אותך :p