[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 עם רקע כחול ויותר מקום סביב הטקסט, אנחנו יכולים לעשות את זה: style = "font-משפחה: Helvetica; צבע רקע: כחולה; ריפוד: 5px;" פסיק האחרון הוא אופציונלי באמת, אבל אנשים בדרך כלל לשמור עליו למען העקביות. 

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

עבור אנשים שבאמת אוהבים להיות מאורגנים, אולי אתה מתחיל לקבל קצת נרגז באופן מבולגן כל זה נראה. תאר לעצמך אם היית צריך לעשות את זה לכל אלמנט בעמוד, בתוספת כעת HTML ו-CSS שלך כל intermixed ומבולגן. גרוס, נכון? כדי לתקן זאת, אנשים החלו סופו של דבר על מנת לתפוס הפרדת סימוני ה-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. עכשיו הסימון ו-CSS-HTML שלי מאורגנים יפה בקבצים נפרדים לגמרי, שזה כמעט תמיד דרך מעצבים מעדיפים לעבוד עם HTML ו-CSS. 

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

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

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

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

[CS50.TV] 

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