גליונות עיצוב

C.S.S Cascading Style Sheets

מה זה C.S.S

CSS : C ascading S tyle S heets.

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

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

CSS מספק לנו הפרדה בין קוד לעיצוב

השיטה הישנה

בניה בעזרת טבלאות , קוד ה HTML מכיל גם את האלמנטים העיצוביים – קוד מסורבל , לא קריא ולא ברור

חסרונות

תאימות – צריך לכתוב את כל הקוד מחדש בשביל כל מדיה כגון מחשב כף יד , סלולר , מקרן וכ '.

קוד מבולגן ולא קריא – שימוש במבנה טבלאי , עומס רב של מידע על כל תגית HTML

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

ריבוי דפים = ריבוי כללים – במקום להגדיר כללי עיצוב אחידים לכל העמודים באתר מגדירים לכל עמוד כללים משלו

נפח העמוד – ככל שיש יותר שורות קוד – נפח העמוד גדול יותר

השיטה הטובה יותר

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

היתרונות

תאימות – קוד ה HTML נשאר קבוע ועבור כל מדיה מייצרים רק הוראות עיצוב

קוד קריא – שימוש בתגיות נושאות שמות רלוונטיים , כמעט וללא עומס על האלמנטים .

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

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

הקטנת נפח העמוד – פחות קוד פחות Kb.

כיצד עובד ה CSS

בשיטה הישנה , הגדרה של כללי עיצוב בוצעה ב HTML :

<body bgcolor=" #FF0000 ">

בעבודה עם CSS יכיל קובץ ה Html את תגית ה <body> בלבד ואילו הגדרת העיצוב הבאה תמצא בקובץ ה css .

body {background-color: #FF0000;}

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

כפי שניתן לראות , הגדרת עיצוב ב CSS מורכבת משלושה חלקים – בורר , מאפיין וערך :

selector { property : value ;}

body { background-color : #FF0000 ;}

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

סוגי בוררים

בוררי HTML – אלו רכיבים ראשיים שהם חלק מתגיות ה html כגון :

p, a, h2, code, body, li, ul

בקובץ ה css הם ירשמו כפי שהם רשומים במסמך ה html

p { property: value;}

בורר יחודי – מזהה יחודי יכול להופיע רק פעם אחת בעמוד והוא מסומן בקובץ ה Css בעזרת הסימון # בקוד ה HTML הוא יופיע בצורה הזו :

<div id=“content”>

ובקוד ה css יופיע בצורה הזו ( סימן סולמית בהתחלה ):

#content { property: value;}

מחלקה ( בורר ה class ) דומה בעיקרון לבורר היחודי אך יכולה להופיע מספר פעמים בעמוד . בקוד ה HTML תראה כך :

<div class="post">

ובקובץ ה CSS תופיע בצורה הבאה ( סימן נקודה בהתחלה )

.post {property:value;}

היררכיה ותורשה

כאשר מגדירים מאפיינים של פיסקה ( p ) הם חלים על כל הפסקאות בעמוד

מה אם אנחנו רוצים להחיל לפסקה ספציפית עיצוב ספציפי ?

בקוד ה HTML :

<p> פיסקת טקסט רגילה לחלוטין </p>

<div id=“post”>

<p> פיסקת טקסט פנימית של בורר יחודי </p>

</div>

קוד ה CSS :

P {font-size:12px;}

#post p {font-size:15px;}

על גבי הדפדפן :

פיסקת טקסט רגילה לחלוטין

פיסקת טקסט פנימית של בורר ייחודי

עיצוב ועימוד

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

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

#content p {

width : 225px;

border : 3px solid #000000;

margin: 5px 5px 5px 5px;

padding: 10px 7px;

}

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

כיצד מגדירים CSS ?

הרע - הטמעה בתוך הקוד לכל אובייקט :

<body style =" background - color : #FF0000; " >

המכוער – בלוק עיצוב בראש הקוד

<style type =" text / css " >

body {background-color: #FF0000;}

</style>

הטוב – קריאה לקובץ חיצוני

<link rel =" stylesheet " type =" text / css " href="style.css" />

סוגי מדיה

<link rel =" stylesheet " type =" text / css " href="style.css" media="screen" />

בסוף ההגדרה אפשר לראות את התגית : media="screen"

התגית media מאפשרת לציין עבור איזו פלטפורמה נועד קובץ ה CSS .

אפשר ליצור קבצי עיצוב יעודיים לכל אחת מהמדיות הקימות

דוגמאות :

הגדרות למקרן Projection הגדרות למסך טלוויזיה tv הגדרות למקריא טקסטים speech הגדרות למכונות ברייל braille עיצוב למחשב כף יד Handheld עיצוב למסך מחשב screen עיצוב להדפסה Print