Combinations - CSS
input[type=text] מעצב רק תיבות טקסט ולא כפתורים או שדות אחרים מסוג input. בדוגמה נתנו לתיבה רוחב של 250 פיקסלים וצבע רקע צהוב.input[type=password]) את אותו רוחב וצבע, בלי לשכפל את הכללים.#large-paragraph.redtext מעצב רק פסקה שיש לה גם ה-ID וגם הקלאס.p span מעצב כל span שנמצא איפשהו בתוך פסקה.p > span מעצב רק span שנמצא ישירות בתוך הפסקה ולא מקונן עמוק יותר.p + span מעצב את ה-span שמופיע מיד אחרי פסקה.להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: Combinations - CSS
תמלול ההרצאה: Combinations - CSS
הטקסט המלא של הדקות הראשונות בהרצאה «Combinations - CSS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
היום אנחנו הולכים לראות איך לבצע בעצם סלקטורים שמשולבים אחד עם השני. כלומר, קומבינציות בין סלקטורים. אנחנו ראינו כבר איך לבצע סלקטור שבוחר את הבלוק עבורו לתת את העיצוב.
את התגית או את ה-ID או את הקלף עבורה לתת את העיצוב. עכשיו אנחנו הולכים לראות איך לבצע קומבינציות שונות בין הסלקטורים השונים.
בואו קודם כל נפתח דף ה-HTML חדש. אני הולך לפייל ניו פייל, בוחר html page, open. בואו נשמור אותו, נלך לדסטופ, נקרא לו Selectors Combinations.
והדבר הראשון שאנחנו נבנה זה איזושהי לייבל עבור username, תיבת טקסט, עוד אחת עבור סיסמה. יש לי פה את txt-password כאשר סיסמה הטייפ שלה זה פסוורד.
עכשיו אנחנו רוצים לתת עיצוב עבור תיבת הטקסט והסיסמה, לכן נוסיף קובץ css חיצוני, פייל ניו פייל נבחר סטייל שיט אופן וחשוב מאוד לשמור אותו באותו מקום של קובץ ה-HTML בכדי שהוא יהיה תקף לגבי ה-HTML הזה.
נקרא לו מיי סטיילס, נשמור אותו בדסטופ ביחד עם קובץ ה-HTML ונגדיר לינק לקובץ. עכשיו מה שאנחנו רוצים לעשות זה לתת איזשהו עיצוב לשתי תיבות הטקסט שהן מופיעות.
העיצוב שאני רוצה לתת להם זה רוחב וצבע רקע. אז בואו נסתכל איך אנחנו נתנו עיצוב לגבי תיבות טקסט. אם היינו נותנים עיצוב על ידי אינפוט, כל תגיות האינפוט היו מקבלות את העיצוב הזה.
זה אומר לחצנים, זה אומר submit, זה אומר לחצני reset, זה אומר תיבות טקסט, סיסמה וכו'. לכן מה שהשתמשנו איתו זה עם Attribute Selector, רשמנו input ואז type=text.
בואו ניתן את העיצוב. יש לנו width, נניח 250 פיקסלים, ויש לנו background color, בואו נניח yellow.
למי נתתי עכשיו את העיצוב הזה? נתתי אותו אך ורק לתיבת הטקסט, מפני שרק תיבת הטקסט מוגדרת כ input type שווה טקסט.
תיבת הסיסמה לא מוגדרת בצורה כזאת. בואו נסתכל איך דף ה-HTML נראה בדפדפן. נריץ אותו, ונראה שיש לי פה עיצוב רק לגבי תיבת הטקסט. אני רוצה את העיצוב הזה לתת גם לסיסמאות, לתיבות של סיסמה.
בואו נחזור בחזרה, הדרך נראית בשורה ובמקום לשכפל את כל העיצוב הזה ולתת אותו גם לסיסמה אנחנו יכולים לעשות משהו שנקרא גרופינג גרופינג זה בעצם קבוצה שמכילה עיצוב אחד וזה מתבצע על ידי פסיק כאשר כאן אני שוב פעם נותן את הסלקטור הרצוי וזה יכול להיות כל אחד מהסלקטורים האחרים שקיימים כרגע זה גם כן אטריביוט סלקטור כלומר אינפוט
טייפ שווה פסוורד בואו נבצע שמירה זורר דפדפן נרפרש ושתיהם קיבלו את אותו רוחב ואת אותו צבע. אז בעצם מה שעשינו עכשיו זה קטע שנקרא Grouping.
הדבר הבא שאנחנו הולכים לראות זה קומבינציות שונות בין סלקטורים שקיימים ב-HTML. אוקיי, בוא נניח שיש לי ב-HTML איזושהי פסקה. הפסקה הזאתי, נניח שאני נותן לה איזשהו קלאס.
אני עכשיו רוצה להגדיר שהטקסט הזה יהיה בצבע כחול אבל רק עבור קלאסים שנקראים בלו טקסט ששייכים לפסקאות לא קלאסים של בלו טקסט ששייכים לרכיבים אחרים. איך אני עושה את זה? אז אני עובר לקובץ ה-CSS ומה שאני מגדיר זה שזה הפסקה נקודה בלו טקסט ובואו ניתן לו עיצוב קולור בלו.
עכשיו יש לזכור שנקודה בסלקטור מייצגת קלאס ולכן נקודה בלו טקסט זה שם הקלאס בגלל שזה נמצא מיד אחרי p ויהיה תקף רק לקלאסים שנקראים בלו טקסט שנמצאות או ששייכות לפסקאות.
בואו ניקח כאן עוד איזושהי פסקה, ניתן לה איזשהו טקסט אחר ללא קלאס, נחזור לדפדפן, נרפרש וכרגע אני רואה שיש לי בלו טקסט רק עבור הסלקטור המתאים.
איזה עוד קומבינציות כאלה אפשר לבצע? בוא נניח שהייתי רוצה את אותו הדבר אבל עבור פסקה בעלת איי-די מסוים, לא בעלת קלאס מסוים. בואו נניח שיש לי כאן ID שנקרא Small Paragraph.
ב-CSS אני יכול לבצע בדיוק את אותו הדבר, אבל יש לי כאן P, ו-ID מתבצע על ידי סולמית. בואו נניח שהשם של ה-ID הזה נמצא כאן. יש לי פה ID שנקרא Small Paragraph, ואני שם אותו מיד אחרי הסולמית.
ניתן לו עיצוב, נשמור ונסתכל על זה מבחינת הדפדפן. מה שעשיתי כרגע זה הגדרתי פסקה עם ID מסוים, ורק ID ששייך לפסקה בלבד, לפרק רף, קיבל את העיצוב הזה.
בואו נסתכל עוד פעם איך נראה ה-CSS. יש לי כאן עיצוב עבור פסקאות בעלות ID כזה. אם ה-ID הזה מופיע באיזשהו דף ולא שייך לפסקה, העיצוב הזה לא יינתן לו.
אוקיי, עכשיו רק בואו נזכיר את ההבדל בין קלאס ובין ID. אם אני מסתכל על הקובץ HTML שלי, אני רואה שאני יכול לתת ID לאיזושהי תגית. זה בעצם מזהה ייחודי עבור התגית הזאת והוא לא יכול לחזור על עצמו פעמיים באותו הדף.
מבחינת החוקיות אסור לתת באותו הדף פעמיים ID לתגית מסוימת, מפני שזה מזהה ייחודי חד ערכי עבור התגית בכל הדף. אז אם יש לי כבר איזושהי תגית שמכילה איזשהו ID אני יכול ללכת ב-CSS ולתת עיצוב ספציפי עבור ה-ID הספציפי הזה.
קלאס לעומת זאת יכול לחזור על עצמו כמה הפעמים שאתם רוצים בכל מיני תגיות אחרות. ולכן קלאס זה בעצם קטע עיצובי שאני יכול ללכת ולתת אותו לכל מיני תגיות.
זה ההבדל בין ID לבין קלאס. דרך אגב, ID משמש לדברים אחרים שהם לא רק שייכים לעולם ה-CSS.
גם ב-HTML יש אפשרות להשתמש ב-ID בשביל שתגית מסוימת תתייחס לתגית אחרת, וגם ב-FAT JavaScript שאנחנו נראה בהמשך יש אפשרות להתייחס ל-ID מסוים בשביל לתת לה איזשהו קטע קוד.
בואו נראה מה יקרה אם אני אקח שתי תגיות ואני אתן להם את אותו ID. קודם כל אם אני עושה copy-paste, אתם רואים שוויז'ל סטודיו אוטומטית לא הרשתה לי להשאיר את ה-ID הזה ונתנה לי פה ID אחר.
מה יקרה אם אני אקח את ה-ID הראשון ואני אשים אותו גם כאן? בואו נשמור. אם אני אמתין כמה שניות אז אני אראה שוויז'ל סטודיו פתאום תקלוט שיש לי פה פעמיים ID לאותה תגית והיא תעיר לי על זה.
אם אנחנו נמתין טיפה אנחנו נראה שזה מה שוויז'ל סטודיו קולטת. אם אני אסתכל בדפדפן על הדבר הזה, בואו נשמור ונלך לדפדפן, אז אני רואה שיש לי פעמיים פסקה ששתיהן קיבלו את אותו עיצוב.
זאת אומרת שמבחינת הדפדפן, הדפדפן כן הסכים להציג את זה אפילו שאני עברתי פה על איזושהי חוקיות מסוימת. הנה כבר אנחנו רואים שיש לי פה פס ירוק מתחת לשני ה-ID והוא כותב לי פה הערה another object on this page already uses ID small paragraph.
למה הוויז'ל סטודיו הציגה לי שגיאה והדפדפן התעלם לי מזה? הסיבה היא כזאת וויז'ל סטודיו עובדת כמה שיותר צמוד לתקנים ולפי התקן הבינלאומי ID קיים פעם אחת אסור לשכפל אותו.
דפדפן נבנה על ידי חברה פרטית והיא מנסה לקלוע כמה שיותר ולהציג כמה שיותר תוכן. אז דפדפן במקרה הזה הוא סלחן וינסה להציג לי את זה.
לפעמים יכול להיות שיהיה איזשהו דפדפן שבאמת לא יצליח להציג לי ותתבצע פה שגיאה. אוקיי, בואו נחזיר את זה ונעבור לקומבינציה הבאה. מה קורה אם יש לי איזושהי פסקה שיש לה גם ID וגם קלאס ואני רוצה לתת עיצוב רק לפסקאות כאלה בעלות ה-ID הזה והקלאס הזה?
אז גם כאן אני יכול לעשות את זה, זה יהיה די נדיר אבל זה ניתן לביצוע. בואו נניח שיש לי איזושהי פסקה שמכילה sometimes it is very useful. לפסקה הזאתי יש ID שנקרא large paragraph ובנוסף יש לה קלאס שנקראת redtext.
בקובץ ה-CSS אני יכול להגדיר עיצוב עבור פסקאות בעלות ID שנקרא large paragraph ובעלות קלאס שנקרא redtext. בואו ניתן לו עיצוב, נשמור, נחזור לדפדפן, נרפרש ונראה שהפסקה הזאתי קיבלה את העיצוב.
גם טקסט טיפה גדול וגם בצבע אדום. דבר הבא, האם אני יכול לתת איזשהו פרט עיצובי עבור פסקה שיש לה שני קלאסים?
מה זה אומר? בוא נניח שקיימת לי איזשהי קלאס שמכילה צבע ואיזשהי קלאס שמכילה כיוון, ואני רוצה לתת את התשלובת הזאת לפסקה מסוימת.
איך אני עושה את זה? נניח שיש לי פה פסקה שמגדירה עיצובים משפיעים גם על עברית. קודם כל יש לי אפשרות