Selector - CSS
color: green;. הסלקטור קובע על אילו אלמנטים הכלל חל..small-text. הכלל חל על כל תגית שמקבלת את האטריביוט class עם אותו שם. אפשר להשתמש באותו class על תגיות מסוגים שונים, כמו p ו-span.#copyright. ID חייב להיות ייחודי בתוך הדף, ולכן הסלקטור משמש לתגית אחת. ID חזק יותר מ-class כשיש התנגשות בין כללים.input[type=text]. בעזרתו אפשר לעצב את תיבות הטקסט בלי לעצב את הלחצנים, שגם הם תגיות input.להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: Selector - CSS
תמלול ההרצאה: Selector - CSS
הטקסט המלא של הדקות הראשונות בהרצאה «Selector - CSS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות בנוגע ל-CSS זה משהו שנקרא CSS סלקטור. בואו נסתכל מה זה אומר CSS סלקטור. ראשית, נגדיר לעצמנו איזשהו קובץ HTML חדש. נשמור אותו, נגדיר כאן איזושהי פסקה ונשכפל אותה.
נשמור את הדף ואני רוצה עכשיו לתת עיצוב לפסקה שלי. אז אנחנו ראינו בווידאו הקודם שהעיצוב הנכון לתת יהיה בקובץ CSS חיצוני.
זה יותר יעיל, יותר מהיר ויותר מקצועי. לכן אני אלך לפייל new file, אבחר style sheet open ונשמור אותו. תחת אותה עתיקייה בדסטופ נקרא לו mystyles.css.save.
עכשיו מבצע הפניה מקובץ ה-HTML אל קובץ על סטייל שיט. ההפניה כמו שראינו מתבצעת על ידי תגית לינק, relationship style sheet, טייפ טקסט css, href mystyles.css וזאת תגית ריקה.
בואו עכשיו ניתן איזשהו עיצוב לתגית p. ומה שראינו זה שפשוט רשמנו את האות p ואז ראינו שהעיצוב ניתן לפסקאות, ירדנו שורה, רשמנו פתיחת בלוק, כלומר פתיחת סוגריים מסולסלות ואז סגירת סוגריים מסולסלות, ובאמצע רשמנו את העיצוב.
לדוגמה color green, לדוגמה text decoration underline, לדוגמה font size extra large. כל העיצוב הזה שנתנו, בעצם זה בלוק עיצוב, ניתן עבור מי שיקבל את העיצוב הזה, כמובן, כל הפסקאות.
בואו נבדוק את הדף שלנו. נחזור לדף, נלחץ על Open Containing Folder בשביל לראות את הדף בתיקייה, אנחנו יכולים לראות שלידו יושב קובץ ה-CSS, דאבל קליק על דף ה-HTML, ואני רואה שהעיצוב ניתן לכל הפסקאות באופן שווה.
כלומר, פעם אחת כתבתי את העיצוב בקובץ CSS חיצוני, והוא ניתן אוטומטית לכל הפסקאות, כל הדפים שמופנים אליו. אבל השאלה היא מה זה בדיוק ה-P הזאת שרשמתי פה.
ובכן, מה שקורה, הדבר הזה, נרשום פה הערה, נקרא סלקטור. למה זה נקרא סלקטור? סלקטור זה מהמילה Select, כלומר בחירה.
הכותרת הזאת בוחרת למי לתת את העיצוב הזה. עכשיו, יש מספר סוגים שונים של סלקטורים, כלומר מספר קטגוריות שונות של סלקטורים. הסלקטור שאנחנו השתמשנו איתו נקרא Element Name Selector.
למה הוא נקרא Element Name Selector? מפני שהכותרת של הסלקטור זהה לשם של האלמנט. אלמנט זה מילה נרדפת לתגית. זאת אומרת שיש לנו פה תגית שנקראת p, ברגע שרשמתי שם של תגית, אוטומטית מי שיקבל את בלוק העיצוב הזה זה כל התגיות שנקראות p.
בואו נראה דוגמה נוספת. בואו נניח שיש לי כאן איזושהי כותרת, ידי תגית h1. אני עכשיו רוצה לתת עיצוב לכל תגיות ה-h1 שנמצאות בפרויקט שלי, או יותר נכון באתר שלי.
אז אני חוזר לדף ה-CSS האחד והיחיד שיש לי, ומגדיר סלקטור h1, פתיחת בלוק, סגירת בלוק, נותן איזשהו עיצוב, לדוגמה color מרון, טקסט דקוריישן underline וניתן לו font-weight bold.
נחזור לדפדפן, רפרש ונראה כרגע ש-H1 אוטומטית קיבלה את העיצוב הזה. סיבה, הסלקטור שרשמתי זה בעצם השם של התגית וזה גם כן Element Name Selector.
כל פעם שאני רושם שם של תגית ואז בלוק עיצוב, השתמשתי בסלקטור שנקרא Element Name Selector. זה הסלקטור הכי פשוט.
אבל השאלה היא כזאת, מי קיבל את העיצוב הזה שאתם רואים פה עבור הפסקה? אז ראינו שמי שקיבל אותה זה כל הפסקאות שנמצאות אצלי.
מה קורה אם אני רוצה לקחת איזושהי פסקה מסוימת ולתת לה עיצוב שהוא שונה מכל הפסקאות האחרות? אז לצורך כך יש לי עוד קטגוריות של סלקטורים.
אז בואו נעבור לקטגוריה הבאה של סוג של סלקטור. הקטגוריה הבאה נקראת קלאס סלקטור. קלאס סלקטור זה סלקטור שאנחנו ממציאים את השם שלו ולאחר מכן אנחנו נותנים אותו ספציפית לתגיות שאנחנו רוצים שיקבלו את העיצוב הזה.
בואו נמציא איזשהו שם של סלקטור. מה שקורה, קלאס סלקטור חייב להתחיל בנקודה. אז אני רושם נקודה, ואז ממציא שם של סלקטור, לדוגמה small text.
small text זה סתם שם שאני המצאתי. בואו ניתן איזשהו פרט עיצובי שמתאים ל-small text, לדוגמה font size extra small, ובואו אפילו ניתן איזשהו font family חייטי.
עכשיו, אם אני מסתכל על הדפדפן שלי ומרפרש אותו, אף אחד לא קיבל את הייצוב הזה מפני שאני עכשיו צריך לקחת את השם שהמצאתי עבור הקלאס להעתיק אותו לחזור ל html שלי ולהחליט איזה תגית הולכת לקבל את הייצוב הזה וכמובן זאת לא חייבת להיות רק תגית p בואו קודם כל נלך לp וניתן את הייצוב אז מה שאני
צריך לעשות זה לפתוח אטריביוט עבור התגית הדרושה שנקרא קלאס ולתת לו את השם שאנחנו העתקנו נשמור, נחזור לדפדפן, נרפרש ועכשיו אני רואה שהתגית הספציפית הזאת קיבלה את העיצוב.
עכשיו כמובן אני יכול לקחת את הסטייל שאני המצאתי, את הקלאס הזאת, ולתת אותה לאיזה תגית שאני רוצה, לאו דווקא תגיות p.
בואו נגדיר כאן תגית span ואחריה איזשהי input type=text. אם אני מסתכל כרגע על הדפדפן שלי, אני יכול לראות אחרי רפרש שיש לי איזושהי ספן שהגדרתי.
ספן כמובן זה מעין לייבל בניגוד לפי שמתארת פרגרף. עכשיו אני יכול לקחת את הקלאס שאני המצאתי, להעתיק אותו ולתת אותו גם לתגית ספן או לכל תגית אחרת.
שוב פעם השיטה היא אותו דבר קלאס שווה שם התגית שם הקלאס. בואו נחזור לדפדפן נרפרש ונראה שעכשיו הטקסט הזה גם הפך להיות טקסט קטן באותו גופן של העיצוב.
זה בעצם סלקטור שנקרא קלאס סלקטור והוא אחד הנפוצים שקיימים. סלקטור נוסף. לפעמים לתגית קיים איזשהו אטריביוט שנקרא ID וזה בעצם איזשהו מזהה ייחודי עבור התגית שלא יכול לחזור על עצמו פעמיים באותו הדף.
בוא נניח שקיימת לי פה איזשהי דיב עבור זכויות יוצרים. יש לנו אפשרות אפילו לתת את הסימן ה-HTMLי קופי.
יש לי כאן איזושהי דיב מסוימת שמחזיקה לי קטע טקסט. בואו נניח שלדיב הזאת יש איזשהו ID שמתאר לי מזהה ייחודי ספציפי עבור התגית שלא יכול לחזור לעצמו כמובן פעמיים באותו הדף.
נניח שה-ID הזה נקרא קופירייט. בואו נעתיק אותו. נחזור ל-CSS ואנחנו יכולים לבנות סלקטור מיוחד שנקרא ID סלקטור.
ID סלקטור נכתב על ידי סולמית ואז שם ה-ID הדרוש. שוב, יש לי פה בלוק פתיחה סגירה ויש לי כמובן את המידע הדרוש.
לדוגמה, טקסט הליין סנטר, נגדיר שהטקסט יהיה במרכז, פונט פמילי, ניתן לו איזשהו גופן, פונט סייז שמאל וניתן לו איזשהו צבע גופן ליין. בואו נבצע שמירה, נחזור בחזרה לדפדפן, נרפרש, ונראה עכשיו שהזכויות יוצרים מופיעות כאן יחסית בקטן באמצע על ידי זה שהגדרתי עיצוב עבור ה-ID
הספציפי. מה היתרון של ID על פני קלאס? יכול להיות שיש לכם מספר רב של דפים שבכל הדפים אתם יודעים שקיימת לכם איזשהו תגית שיש לה ID. ואתם רוצים את העיצוב הזה בכל התגיות הספציפיות האלה.
בנוסף ישנו עוד יתרון שאנחנו נראה אותו בהמשך, ש-ID סלקטור הוא יותר חזק מקלאס סלקטור מבחינת דריסת עיצובים זהים.
בהמשך אנחנו נראה בדיוק איך זה מתבצע, הדריסה עצמה. כעת, מה שעשינו זה ראינו רק שלושה סלקטורים. אלמנט ניים סלקטור, קלאס סלקטור ו-ID סלקטור.
הסלקטור הבא שאנחנו הולכים לראות הוא סלקטור מאוד מעניין, אבל לפני שאני אראה אותו, בואו נסתכל רגע על מקרה מיוחד שיכול להיות לנו באתר.
בואו עוד תארו לעצמכם שיש לי מלא דפים באתר האינטרנט. בכל הדפים יש לי תיבות טקסט, ובכל דף יכול להיות לי תיבה טקסט אחת או יותר.
אז בואו נגיד שיש לי עכשיו את הדבר הזה. נגדיר כאן שהמשתמש אמור להכניס first name, כאן המשתמש אמור להכניס last name, עבור txt last name, ובנוסף, כמובן ברגע שיש לי תיבות קלט, אז ראינו ב-HTML שרצוי מאוד שהם יופיעו בתוך form-action-data.com דף יעד, מתוד, שיטת שליחת הנתונים, קול עטוף ותגיד
פורם. עכשיו אני רוצה שיהיה לי איזשהו לחצן סבמיט. אז מה בעצם יש לנו כאן?
תתארו לעצמכם שיש לי כל מיני דפים שבדפים יש לי תיבות טקסט. אני עכשיו רוצה שכל התיבות טקסט באתר שלי יהיו צבועות בצבע צהוב. כמובן שהשיטה הנכונה זה ללכת לקובץ CSS חיצוני ולהגדיר עיצוב שיתאים לי עבור כל תיבות הטקסט.
אבל אני לא רוצה לעבוד קשה וללכת לכל תיבת טקסט ותיבת טקסט ולהגדיר לה איזשהו קלאס. לכן יש לנו בעצם את התגית, את הסלקטור אלמנט ניים. ואני יכול בבת אחת לתת איזשהו אלמנט ניים עבור כל תיבות הטקסט.