CSS למה ובשביל מה 

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

ומה זה בכלל CSS?
זוהי דרך להגדיר עיצוב לדף. ב CSS יש בוררים אותם מגדירים ולהם נותנים מאפיינים. במילים פשוטות, זו הדרך לאמור לדפדפן להציג את הדף שלנו באופן בו הגדרנו - למשל.. צבעי כל הדפים צהבהב, כל הכותרות באריאל 14 בולט כחול וכל יתר הטקסט יהיה אפור כהה, 12... ועוד.
כך לפי הגדרה זו יהיה כל האתר זהה בעיצובו, ומחר, כשנחליט לשנות את צבע הכותרת מכחול לסגול, נשנה את הצבע פעם אחת בקובץ ה CSS (המקושר לכל העמודים), ומייד הצבע ישתנה בכל דפי האתר.
בשביל מה להפריד בין עיצוב ותוכן?
מכמה סיבות,
1- קל יותר בסופו של דבר, כשלומדים את השיטה. ויש שליטה עיצובית מהירה בכל האתר

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

שלושה סוגים של מתן סטייל בדף-
א- מתן סטייל מקומי - כזה שניכנס לשורה עצמה או פסקה אחת, ומגדיר למשל צבע, רקע או גודל. צורת סטייל זה נקראת INLINE - ופירושה - בתוך השורה והיא נראת כך-
> p se="background: blue; color: white;">A new background and
font color with inline CSS < /p >
היתרון- אפשר לשלוט במילה ואפילו באות.
החסרון- כשנרצה לחזור על הסגנון נאלץ לבצע את הפעולה שוב ושוב , כך גם בעת העדכון כשנצטרך.
ב- מתן סטייל לדף - כזה שמקבל תג של סטייל אך נימצא בחלק ההד של הדף, סגנון כזה נקרא EMBED ונראה כך-

p {color: white; }
body {background-color: black; }

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


שלושה סוגי בוררים נימצא ב CSS
א-הנקרא CLASS והוא מאופיין בנקודה ושם למשל- .upmenu (הנקודה משמאל למילה)
השם הוא שם שאנחנו נבחר- רצוי שיהיה משהוא שיזכיר למה התכוונו- בעל משמעות עבורנו. את ה CLASS נוכל להחיל על כל אובייקט בדף, כמה פעמים שנרצה.
ב- TAG אחד מתגי ה HTML, ללא הנקודה יצוין שם התג ואחריו האפיון- כיצד נרצה שיוצג.
הפקודה תחל על כל אלמנט הנימצא בתוך התג המצויין באופן גורף.
לדוגמה -
body {
background-color: #FFC;
}
ג-ה ID, למשל- #header (הסולמית משמאל למילה) המקבל סולמית לפני השם (במקום נקודה) ויכול להופיע רק פעם אחת בכל דף בשמו הנוכחי.
להבהרה- הID יכול להופיע פעם אחת בכל דף באתר. ואם נרצה נוכל לתת כמה ID בשמות אחרים.. אבל הגדרת ID בשם מסוים אחד - תופיע רק פעם אחת בדף.

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