המאפיין float = ציפה, קובע לאן האלמנט יצוף בתוך המיכל (קונטיינר) שלו.
כלומר, float:left – אז האלמנט יצוף שמאלה בתוך המיכל שלו
מה שקורה לשאר האלמנטים במיכל – הוא שהם "מאפשרים לאלמנט" לצוף – כלומר מסתדרים סביבו.
למשל – אם נשים טקסט, יחד עם תמונה, בתוך אותו div
והתמונה תהיה עם float
אז הטקסט יסתדר לצידה מעצמו.
סידור של רשימה תבליטים (li) לרוחב
ברגע שמחילים על רשימה את המאפיין display:inline-block, אז התבליטים (=נקודות) מסתדרות לרוחב ולא לגובה.
אם רוצים לקבוע את הגודל של כל אלמנט ברשימה, אפשר עם box-sizing: 40% לדוגמא.
סידור אלמנטים בתור "טבלה"
כדאי להכיר שקיימת גם אפשרות שנקראת display:table, ואז כל אחד מהאלמנטים בתוך ה"טבלה", צריך להיות עם display:table-cell.
מה שזה גורם הוא – שהאלמנטים מוצגים כמו ב-tr/td/ וכו'
המאפיין position
כאשר מגדירים משהו בתור position:relative, זו הגדרת ברירת המחדל שלו, מה שאומר שאם נוסיף לו למשל left:20px אז הוא יזוז 20 פיקסלים מהמקום שבו הוא היה אמור להיות.
לעומת זאת אם נגדיר position:absolute, זה יגרום למיקום אבסולטי ביחס למיכל ( קונטיינר) שלו.
המאפיין overflow – מאפשר לקבוע מה קורה לאלמנטים בתוך המיכל, שחורגים מגודל המיכל.
למשל אם יש לי div פנימי שמוכל בתוך div חיצוני.
והרוחב של הפנימי חורג מהרוחב של החיצוני.
אז אם נאמר ב-css של ה-div החיצוני, את ההגדרה הבאה :
overflow: hidden;
אז כל התוכן של ה-div הפנימי שחורג מהחיצוני, יוסתר.
inline – תופס רק את הקטע המסויים שבתוך השורה, ולא פותח שורה חדשה.
לדוגמא p הוא block
כל אלמנט בלוק מכיל:
תוכן , שאת הגודל שלו קובעים עם height+width וברירת המחדל – רוחב מלא, גובה מלא
ריפוד padding – זה גבול פנימי בתוך האלמנט שבתוכו אין כלום ( כדי להבדיל את האלמנט, מאלמנטים אחרים בתוך המיכל).
גבול border – מצויר מסביב לאלמנט – כלומר מגדיל אותו
שוליים margin – זה קובע את הרווח בין האלמנט הזה, לאלמנטים אחרים.
כלומר שוליים של 0 גורמות לאלמנטים להיות צמודים אחד לשני.
בנוסף – לאלמנטים יש ברירות מחדל, והן לא תמיד אפס.
כלומר בברירת המחדל – אלמנט לא תופס רק את הגודל של התוכן שלו, אלא יותר מזה, כי יש גם תוספות לריפוד, לגבול, ולשוליים שלו.
כדי להקל על עצמנו, אפשר להגדיר את המאפיין
box-sizing: border-box;
זה גורם לגודל של הריפוד + הגבול – להיחשב בתוך האלמנט. (השוליים עדין נשארים מחוץ לאלמנט).
כל אלמנט , יש לו הגדרה ברירת מחדל לגבי צורת התצוגה שלו, כלומר האם הוא נחשב block או inline
למשל בנוגע לאלמנט פיסקה p, ברירת המחדל היא שהוא block
אם רוצים לשנות זאת, עושים את זה באמצעות המאפיין display
display:inline;
הסבר הערכים השונים :
display: inline – הדפדפן מתעלם מהרוחב מהגובה של האלמנט, ומסדר אותם כאילו הם טקסט בתוך שורה .
display:inline-block – הדפדפן מתייחס לאלמנט כאילו הוא בלוק , אבל בתוך שורה, כלומר הוא כן מתייחס לגובה ולרוחב, אבל בתוך שורה, ואם ישאר מקום לעוד אלמנטים – אז גם הם יכנסו בתוך השורה.
צריך לזכור – שבמצב כזה, הדפדפן מתייחס גם לירידת שורה בתוך קוד ה-html. זאת אומרת שירידת שורה =שווה= רווח בתצוגה על המסך.
display:block – כלומר תתיחס כמו בלוק, שתופס שורה שלמה
לפעמים אני חוזר על חומרים בסיסיים לעצמי. החלטתי לחזור קצת על CSS Selectors, כי ביום-יום אני פחות מתעסק עם זה (כל החיתוכים ל-html נשלחים לחו"ל).
ב-CSS יש מספר אפשרויות לבחור את האלמנטים בדף.
האפשרויות האלו נקראות Selectors.
והן משמשות אותנו גם ב-JS כדי לבחור אלמנטים בדף.
סיכום מקוצר של Css Selectors
id ——– #bubu
class ———.myClass
Descendant ——- p a li
state —— input:foucs
excat hirarcy – li:nth-child(2n
קדימות ב-CSS
לפי הסדר הבא : inline style > id > classes > elements
סוגי Css Selectors
לפי id של האלמנט – מתחיל בסימן סולמית
המחשה :
#myId {
bla...
bla...
}
לפי class – מתחיל בסימן נקודה
המחשה :
.myClass {
bla...
bla...
לפי היררכיה יורדת – מזוהה באמצעות רווח,
כלומר – כל סלקטור שנמצאת אחרי סלקטור אחר עם רווח מפריד – המשמעות היא לחפש בתוך האלמנט של הסלקטור הראשון, את האלמנטים של הסלקטור השני וכן הלאה.
המחשה – רק תגיות a עם הקלאס bubu שנמצאות בתוך פיסקה (p) – רק הן יבחרו.
p a .bubu {
bla
bla...
לפי מצב האלמנט (hover… ) – מסומן בסימן נקודתיים :
המחשה :
input:focus {
dsfsd
sdf
לפי רמת היררכיה מדוייקת בעץ – משתמשים במילים קבועות כמו first-child , או לחלופין בפקודת ה-CSS nth-child עם מספר הרמה בהיררכיה בתוך סוגרים
