[Powered by Google Translate] [CSS] [יוסף אונג - אוניברסיטת הרווארד] [זה CS50. - CS50.TV] 

היום אנחנו נדבר על CSS או גיליונות סגנון מדורגים. 

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

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

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

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

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

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

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

עכשיו, מה אם אנחנו רוצים לבחור בתוך h1 של ההקדמה של רוב? אתם אולי חושבים, "בואו תשימו מזהים עליו ולאחר מכן להעביר את הסגנונות הקודמים שלנו". זה עובד, אבל CSS יש דרכים אחרות ומאפשרים לך לבחור אלמנטים באמצעות מה שאנו מכנים combinators לערבב בוררים פשוטים. לדוגמה, דמות רווחים יכול לשמש כCombinator כדי לציין את כל המופעים של 1 בורר שחי בתוך בורר אחר. זה נשמע הרבה יותר מסובך ממה שזה באמת. הנה דוגמה. אנו מקלידים # לשדוד, להוסיף רווח, ואחריו H1, עוד בורר פשוט שנקרא בורר תגים שבוחר סוגים של אלמנטים כמו divs או פסקאות. המקום משלב 2 בוררים הפשוטים שלנו, החלה כל הצהרות CSS והסוגריים המסולסלים לתגי h1 שחיים בתוך האלמנט עם id = "לשדוד". רק כדי לשכנע אותך שזה עובד, אני אשנה את צבע הגופן לבן, רענן, ותראה, הכותרת של רוב היא כעת לבנה. 

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

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

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

את combinators הנפוץ כולל רווחים לכל הילדים ופסיקים להבחין בוררים. אחרים שאתה עלול להיתקל כוללים חץ לילדים ישירים בלבד, טילדה לכל האחים המתרחשים לאחר האלמנט, וסימן חיבור לאח 1 שמגיע מייד לאחר האלמנט. 

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

אני יוסף, וזה CS50. 

[CS50.TV] 

אה, מאיפה להתחיל? תן לי לעשות את זה בלי - [צוחק] אוקיי. הוסף - תן לי לשנות את הנוסח ש. אווה. סליחה.