[השמעת מוסיקה] 

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

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

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

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

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

ואז אתה יכול להשתמש במילת מפתח, כך יש CSS צבעים מסוימים שבנויים לתוך זה, כחול, ירוק, שחור, צבעים פשוטים מאוד שאנחנו יודעים. אבל אתה יכול גם לציין כל צבע שאתה רוצה hex. נזכיר כי ניתן לזהות צבעים על ידי קבוצה של שלושה מספרי hex 0-255, RG ו- B, רכיב אדום, ירוק וכחול. וכך אנו יכולים לציין כל צבע שאנחנו רוצים על ידי, במקום להשתמש בצבע כחול או ירוק או שחור, באמצעות פאונד ולאחר מכן שש ספרות של משושה, ושייתן לנו צבע שש ספרות. אז זה את צבע הרקע. 

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

אז אתה יכול לשנות את גודל הגופן שלך. אתה יכול להשתמש במילות מפתח, כגון תוספת, נוסף קטן, או xx הקטן, או בינוני, גדול, וכן הלאה. אתה יכול להשתמש בנקודות קבועות, 10 נקודה, 12 נקודות, וכן הלאה. אתה יכול להשתמש באחוזים, 80%, 20%, שבו 100% הוא גופן ברירת המחדל גודל, שהוא בדרך כלל הולך ל משהו כמו 11 או 12 נקודות. או שאתה יכול אפילו לבסס אותו של גודל הגופן האחרון. אם אתה רק כתב משהו ואתה יודע מה שאתה רוצה הוא שזה יהיה קטן יותר, אבל אתה לא יודע בדיוק מה גודל ש רוצה שזה יהיה, ובכן, אתה יכול פשוט לומר, גודל גופן קטן יותר. וזה יבסס את של, רק למעלה, זה גודל גופן. ואתה יכול לקבל קטן יותר או גדול יותר. אז יש הרבה שונה דרכים כדי לציין גודל גופן. 

ניתן גם לציין מה משפחת גופנים שאתה רוצה. אם יש לך במיוחד שם, יש דרך בCSS-- אנחנו לא הולכים לדבר על זה כאן-- להגדיר גופן ספציפי מאוד ולהטביע אותו לדף שלך. ניתן גם להשתמש בשמות גנריים. יש הרבה גופני האינטרנט בטוחים שנקבע מראש, ב- CSS. ואם אתה משתמש ב- Microsoft משרד ב -20 השנים האחרונות, אתה בטח מכיר הרבה גופנים בטוחים אלה האינטרנט כבר, Times New Roman, Arial, שליח החדש, גאורגיה, Tahoma, Verdana, וכולי. כל אלה נחשבים אינטרנט גופנים בטוחים. ובעצם, חלק מ סיבה שהם באו להיות היה לשמש כדי להפוך web-- כל עמוד הייתה גישה לברירת מחדל זו קבוצה של גופנים עם serifs שונים, וכל זה דברים גופן אנחנו לא תקבלו ל, אבל אלה הם בדרך כלל נגיש בCSS שלך, גם אם אין לך אחרת להגדיר את הגופנים. לבסוף, אתה יכול ליישר את הטקסט שלך, במקום שאהיה, כברירת מחדל, מיושר לשמאל, אתה יכול ליישר אותו לימין, או שאתה יכול ליישר אותו במרכז, או מוצדק, כך שזה פגע גם שוליים. אז אלה הן כל האפשרויות שאתה יכול להשתמש לשנות את מה שהטקסט שלך נראה כמו, ואיך שהיא מוצגת בדף שלך. 

הבוררים שלך לא צריך להיות רק תגים. ראינו תג גוף בעבר בורר, ובורר תגים נראה בדיוק כמו זה. אתה שם את תג, ואז אתה להגדיר סגנונות לתג ש. אבל אתה יכול גם לעשות משהו נקרא בורר מזהה. בורר מזהה נראה די דומה. אבל שם לב, שעכשיו אני לא משתמש תג HTML, אני משתמש, במקרה זה, #unique, או חשיש ייחודי. אם אתה זוכר משלנו וידאו ב- HTML, דיברנו איך יכול להיות תגים תכונות. 

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

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

יש שתי אפשרויות ל גיליונות סגנון כתיבה. אתה יכול לכתוב אותם ישירות לתוך ה- HTML שלך על ידי הצבת גיליונות הסגנון בין תגי סגנון. ותגי סגנון אלה להיכנס פנימה של תגי ראש דף האינטרנט שלך. הדרך אולי יותר מועדפת לעשות זה לכתוב קובץ .css נפרד, ולאחר מכן לקשר אותו לשלך מסמך באמצעות קישור תגים. תגי קישור, שוב, הם שונה מקישורים, אם אתה זוכר מהווידאו שלנו HTML. וקישור תגים הם איך אנחנו למשוך בקבצים נפרדים. זה כמו סוג של המקבילה של #include לתכנות אינטרנט. 

אז בואו נסתכל על table.HTML. אם אתה זוכר משלנו וידאו HTML, הראיתי לי דוגמא מאוד כפל פשוט שולחן שנראה די מכוער, ואולי יש דרך לעשות את זה טוב יותר עם CSS, כדי להפוך אותו באמת נראה יותר כמו כפל שולחן, או משהו כי הוא לא רק דבוק זו לזו ללא חלוקה בפועל בין השורות והעמודות. אז בואו מעל הראש CS50 IDE, ותסתכל כיצד CSS יכול, סוג של, לצבוט מה שהתחלנו עם לפני, ולהפוך אותו משהו הרבה יותר טוב. 

אז אנחנו בCS50 IDE עכשיו, ואם לא מוכר, אנו למשוך את זה ב שולחן שדף HTML. Table.HTML בעצם רק מגדיר את התוכן של multiple-- זה היה אמור להיות לוח כפל ארבעה על ארבעה. זה די פשוט. והיינו חושבים שזה היית נראה מאורגן די טוב. אבל למעשה, כאשר אנו תצוגה מקדימה של עמוד זה, אנו רואים שזה סוג של מכוער, נכון? ברור שיש לנו שורות ועמודות כאן. יש סוג מסוים של הפרדה. אבל זה לא הפרדה משמעותית. אנחנו לא ממש מקבלים יותר מדי מידע כאן. ואין שום הפרדה בין השורות ועמודות במונחים כללים אופקיים או אנכיים. אנחנו כנראה יכולים לעשות את זה נראה קצת יותר טוב. אז בואו ננסה. אז אני הולך לסגור כרטיסייה זו עד כאן. ואני הולך לסגור table.HTML, ויש לי גרסה אחרת כאן נקרא table2.HTML. אנחנו תפתחו שעד. הגוף של הדף הוא פחות או יותר אותו הדבר, אבל אני כבר השתנה קצת בראש. ואני לגלול מעלה כאן. שים לב שהפעם, אני באמצעות תגי סגנון משובצים. אני כבר פתחתי תג סגנון, ואני עכשיו הגדרת סגנונות CSS רק בתוך שלו. יש לי סגנון שאומר, שולחן. זה בורר התגים שלי. אני לא משתמש בנקודה או חשיש, שאני היה עושה אם הייתי היה משתמש בזיהוי או בורר מעמד. יש לי שולחן כאן-- בורר תגים. סגנון זה הולך תחול על כל תג שולחן. כנראה אני רוצה לשים אחד פיקסל רחב, גבול כחול מוצק, בתוך השולחן שלי. זה נשמע כמו זה כנראה היית לשפר את המצב, נכון? אנחנו הולכים לי דברים נראים הרבה יותר טובים. אז זה בסדר. מבחינה סגנונית, יש לי רק מוטבע הסגנונות שלי כאן. זה בהחלט דרך מקובלת לעשות את זה. בואו לראות מה זה נראה. אז אני אחזור לכאן, ו אני יהיה לצפות בתצוגה מקדימה table2.HTML. ובכן, זה לא בדיוק מה שרציתי, אבל זה בדיוק מה שבקשנו. אנחנו אמרתי שסגנון זה הוא הולך לפנות לשולחן שלנו. השולחן שלנו עכשיו יש פיקסל אחד גבול רחב, מוצק כחול סביבו. אנחנו לא ממש מקבלים בתאי הטבלה. אנחנו רק מקבלים ליד השולחן. אז CSS עבד. זה יישם סגנונות לשולחן שלנו. אבל לא די לעשות מה שרצינו לעשות את זה. איך אנחנו מגיעים לעשות מה שאנחנו רוצים לעשות את זה? 

ובכן, בואו נסתכל על עוד אחד גרסה של זה בtable3.HTML. אז רק אני הולך לסגור כרטיסיות אלה. אני הולך לחזור לכאן כדי קובץ עץ, ולפתוח table3.HTML. שוב, זה הולך להיראות יפה דומה כאן בתחילת. אבל הודעה, הפעם, במקום להשתמש סגנונות מוטבעים ממש שם, אני הולך לקשר ב סגנונות באמצעות קישור התג. אז כנראה שאני מקשר ב סגנונות נקראים tables.CSS, וגם זה שווה סגנונות רק means-- גם, מה זה קובץ ביחס למה ש אני עשות-- הוא סגנון שאני באמצעות לדף שלי. אז אם אני באמת רוצה לראות את מה ש אני עושה עם CSS כאן, אני צריך ללכת פתוח ש table.CSS להגיש גם כן. אז אנחנו נחזור לכאן שוב לעץ הקובץ שלנו. יש table.CSS. אנחנו נקפוץ פתוחים זה. עכשיו אנחנו רואים קצת של CSS. ככל הנראה, יש לי כמה דברים קורה כאן. אני כנראה רוצה לשים חמש פיקסל רחב, גבול אדום מוצק, סביב השולחן שלי. אנחנו כבר יודעים שזה הולך פשוט ללכת על המערכת. ראיתי שבtable2.HTML. עם כל שורה, אני כנראה רוצה לציין כי גובה השורה הוא 50 פיקסלים לגובה. אז לכל שורה, זוכר זה מה שעושה תג TR, אני עושה אותו 50 פיקסלים לגובה. 

לבסוף, יש לי הערה זו. וכך אנחנו עושים דברים בCSS. זה דומה מאוד לתפיסת בלוק הערות כוכב נטוי תחביר. כל הטקסט שאתה רוצה. אין קו נטוי נטוי אם כי בCSS. להערות מוטבעות קצרות, יש לנו להשתמש בפורמט המסוים הזה כאן. זה נראה כמו שאני עושה הרבה דברים בתגי TD שלי. זכור תגי TD, או שולחן הנתונים, שבאמת הם רק העמודים פנימיים של השורות שלנו, וככל הנראה לכל פיסת המידע בשולחן שלי, אני רוצה כדי להגדיר את צבע הרקע ל להיות שחור, הצבע להיות לבן, צבע הוא צבע חזית. אז זה הולך להיות הטקסט בדף שלי. אני רוצה גופן גדול, 22 להצביע גופן, ואני רוצה שזה יהיה של משפחת הגופנים, ג'ורג'יה. אז אני לא הולך ל יש לי גופן ברירת המחדל. אני הולך לציין גאורגיה, ש הוא אחד מגופני האינטרנט בטוחים אלה שלא ראו קודם. אני רוצה הטקסט שלי להיות מתואם מרכזי, באמצע התיבה, אני לא רוצה שזה יישאר מיושר או ימינה מיושר. ואני רוצה רוחב העמודה שלי להיות 50 פיקסלים לרוחב, כמו גם. בואו נסתכל מה שנראה כמו זה, ולראות אם זה אולי שיפור. אז אני הולך לtable3.HTML, ש כזכור, כולל table.CSS כקישור, ואנחנו בתצוגה מקדימה זה. זה הרבה יותר טוב, נכון? זה בעצם מתחיל להיראות הרבה יותר כמו לוח כפל. יש לי שגבול אדום סביב השולחן שלי, אבל עכשיו יש לי גם צוין ש כל שורה היא ברוחב 50 פיקסלים, או שזה 50 פיקסלים tall-- תירוץ me-- כל עמודה היא ברוחב 50 פיקסלים. הנתונים בכל עמודה, ורק הנתונים, יש רקע שחור. אז בגלל זה אלה קווים לבנים נמצאים שם. משום המקום ב בין כל תאים אלה, זה לא גבול ב ושל עצמו, זה רק אני ממלא רק ב תאים, אשר למעשה הופך את הגבולות של השולחן, ש ככל הנראה היה קיימים לאורך כל הדרך, זה היה קווים לבנים רק דקים. עכשיו הם נראים לעין. עכשיו הם קופצים מעל על המסך. ואז זה פשוט מאוד סגנון שאני כבר מיושם, ועכשיו השולחן שלי נראה הרבה יותר כמו שולחן ארבעה על ארבעה כפל, במקום להתעסק רק מבולבל, שבו הכל ברור שורות ועמודות, אבל מאורגן לא סופר גם. אנחנו באמת רק מגרדים את פני השטח של מה שאתה יכול לעשות עם CSS כאן. למרבה המזל תיעוד CSS הוא די פשוט. אתה משתמש במספר שלה תכונות, לעתים קרובות למדי. אלה שדברנו על מוקדם יותר בסרט הזה. יש כמה ש כנראה שלא ישתמש בכל. וזה בסדר, גם. אבל פשוט יודע, שיש הרבה תיעוד בחוץ. אז גם אם אנחנו לא לכסות את הכל, אתה בהחלט לא נשאר בעצמך. אבל CSS הוא ממש כיף להתנסות ב. ואני מאוד הייתי ממליץ לך לשחק עם דפי האינטרנט שלך, ולראות איך אתה יכול לגרום להם להיראות ולהרגיש לשפר המשתמש ניסיון של ביקור בדף שלך. אני דאג לויד. זה CS50.