>> [השמעת מוסיקה]
אליסון BUCHHOLTZ-AU: אז אנחנו בעצם פשוט הולכים
כדי לתת לך סקירה של CSS, כי אנחנו יודעים ש
שזה לא היה מכוסה בכל הסעיפים.
ואנחנו באמת רוצים לוודא שאתה יש בחורים בכלי זה העומד לרשותך,
כי יש לו את היכולת לעשות אתרים שלך נראים הרבה יותר יפים.
>> ואם אתם בונים אתר אינטרנט, ולאחר מכן אתה כנראה רוצה לעשות את זה יפה.
אני מתכוון, לא שיש לך, אבל אני הייתי מציע את זה. [צוחק]
אם אתה רוצה למשתמשים להשתמש בו, אתה עלול רוצה לעשות את זה [לא ברור] קטן.
אז אנחנו הולכים לנסות ולתת לך רק כמה כלים בסיסיים והבנה,
כך שכאשר אתה יוצא ואתה מחקר דברים על CSS,
זה לא להשלים ג'יבריש, כמו CSS לפעמים להיות.
>> תומס Reimers: כן.
אליסון אמר את זה די טוב.
אז אני מניח שהדבר הראשון שאנחנו צריך להתחיל עם מה זה CSS?
אז CSS הוא מדהים.
CSS--
>> אליסון BUCHHOLTZ-AU: זה שמו של הסמינר שלנו.
>> תומס Reimers: כן.
זה באמת חשוב ש אתה מבין שעד אז.
אם אתה לוקח משם רק אחד דבר, זה CSS שאם מדהים.
שני הוא CSS עומד ל גיליונות סגנון מדורג.
אז בליבה שלה, CSS הוא גיליון סגנון, כלומר
זה מאפשר לך לעצב את דף אינטרנט.
ואז מה זה אומר, זה דרך להוסיף סגנון לאתרים שלך.
אז על ידי סגנון, אנחנו מתכוונים לכל מה ש זה לא structural--
כך דברים כמו צבעים, רקע תמונות, גבולות, כמו, ריפוד,
שוליים.
נדבר על מה ש כל זה אומר בקצת.
>> אז יש לנו רק הלכתי קדימה ו פתח את שני אלה בgedit.
אז זה index.html.
וזה main.css.
אז main.css אין שום קשר.
אליסון BUCHHOLTZ-AU: לא סגנון עד כה.
תומס Reimers: אין.
וכפי שתראה, זה אתר ממש מכוער.
אליסון BUCHHOLTZ-AU: זה פשוט.
תומס Reimers: כן.
כן, זה לא מכוער, זה רק מינימליסטי.
ואז יש לנו כאן index.html.
וכך במשך מהיר סיכום של HTML, אליסון,
אתה רוצה רק לדבר על הדף?
>> אליסון BUCHHOLTZ-AU: כן.
אז ברור, יש לנו HTML שלנו תג, שרק קובץ HTML שמות.
יש לנו הכותרת שלנו כאן, עם CSS Awesomeness, which-- אם תחזור.
איפה זה?
>> תומס Reimers: אה.
כן, אתה יכול לראות.
אליסון BUCHHOLTZ-AU: ושים לב לכותרת
היא כותרת זו הכרטיסייה ממש עד כאן.
ולאחר מכן "שלום, עולם!" הוא הטקסט שיש לנו רק
בו מוצגות באינטרנט דף, שis-- לחזור.
חזרה.
וזה רק בגוף שלנו here-- הטקסט רגיל.
כמו כן, דבר אחד שמתי לב, אם אתה מסתכל כאן,
תומס החליף את אלה שתיים מהשקופית שלנו.
אז כל עוד יש לך את כל שלושה מהם, אתה בסדר.
הם יכולים להיות בכל סדר שהם רוצים.
מה שחשוב ביותר הוא פשוט ש יש לך כל אחד משלושת הדברים האלה.
>> תומס Reimers: מגניב.
להוסיף סוג doc?
אליסון BUCHHOLTZ-AU: כן.
תומס Reimers: כן.
מגניב.
אליסון BUCHHOLTZ-AU: ככל הנראה, המיקרופונים שלי לא אוהבים אותי.
תומס Reimers: הו, תן לנו רק שניות בעוד אליסון עובר את המיקרופון שלה.
אז כן.
אז יש לנו הדף הראשי שלנו.
זה סוג של unstyled.
אין לנו הרבה.
רק שיש לנו בעצם טקסט.
יש לנו את הגיליון הסגנונות.
יש לנו את התואר.
כל כך פשוט-חשוף עצמות רכיבים להפוך את אתר אינטרנט.
>> אז משם, בואו לדבר על מה שהוא CSS
ואיך זה נראה וכל זה.
אז לthat--
אליסון BUCHHOLTZ-AU: חזרה לשקופיות.
תומס Reimers: חזרה על השקופיות.
ואליסון יכול להשתלט.
>> אליסון BUCHHOLTZ-AU: Woo.
OK.
אז בקובץ ה- CSS שלך, אתה הולך לי
הרבה מהדברים האלה נקראים בוררים.
שרק יהיה בסיס של קובץ CSS שלך.
זה פשוט הולך להיות המון המון אלה.
אז בורר.
זה רק את האנטומיה הכללית.
אנחנו הולכים לעבור דוגמאות, כי אם אתם לא
צפה סעיפי, אני מרגיש כמו דברים באופן המופשט
לא ממש הגיוני.
זה תמיד עוזר כדי לראות את דוגמאות.
>> אז יש לנו כמה בורר.
זה הולך להיות קצת מזהה ל מה שאנחנו רוצים את הסגנון לפנות ל.
ואז אנחנו יכולים להיות כל סט של כללים וערכים.
אז בוררים שאתה עשוי לראות יכול להיות משהו כמו גוף,
או פסק עם P, או כותרת, או מה ש,
מה שאתה רוצה תגי HTML שלך להיות.
>> אז במקרה הזה, יש לנו גוף.
ויש לנו כמה שלטון, שזה מתאים
למה הסגנון שלך מתייחס אליהם.
אז במקרה הזה, יש לנו צבע רקע ומשקל גופן.
אז זה הולך להשתנות הרקע של כל דבר
בתוך כל תג גוף של קובץ HTML שלנו.
וזה הולך לתת לי זה ערך תכלת זה.
>> אז זה הולך לעשות אור כחול רקע.
ואז שום דבר בתוך הגוף הוא הולך להיות משקל גופן מודגש.
אז זה רק הולך נועז כל הטקסט שלנו.
וזו רק אחת בורר.
אבל אתה יכול להיות מאוד שרבים מאלה.
וכמו שאנחנו הולכים להראות לי מאוחר יותר, קצת יותר לאיך
שעבודות ודוגמאות נוספות לשם.
כל דבר שאתה רוצה להוסיף?
>> תומס Reimers: מס '
אליסון קיבל אותו.
אנחנו רק הולכים לחתוך את דוגמא כאן בדוגמא באתר שלנו.
אז בואו באמת לקחת את זה.
זה מושלם.
אז אני פשוט הולך להעתיק ולהדביק כי נכון לקובץ main.css שלנו.
ואני הולך לשמור אותו.
ואז תוכל להפעיל אותו.
הערה אז צד, אחד מ רוב הדברים מתסכלים
הוא אם אתה לא לשמור קובץ, ו אז אתה, כמו, טען מחדש את הדף,
וכמו, למה לא השינוי קורה?
זה קורה.
אז הנה אנחנו ראינו שאנחנו עשינו אתר רקע תכלת
וחלק מודגש טקסט.
>> אני צריך גם להזכיר, אם אתה יש בחורים שאלות על כל דבר
אנחנו עושים, אל תהססו חופשי לעצור אותנו ומבקשים מאתנו.
אנחנו מוכנים לגמרי לשדה שאלות.
>> אליסון BUCHHOLTZ-AU: ברור, עם CSS, כל מה שבונה על עצמו.
אז אם דבר אחד לא הגיוני עכשיו, אנחנו
לא רוצה שזה לשקוע אותך מאוחר יותר.
>> תומס Reimers: אז בוא סוג של לנתח את זה.
אז אתה רוצה להתחיל עם הבורר כאן?
>> אליסון BUCHHOLTZ-AU: כן.
כמו שאמרתי לפני, גוף רק הבורר שלנו כאן.
אז אם נחזור אל אה index--.
>> תומס Reimers: איזה אני פשוט נסגר.
תן לי שני.
אז קובץ, להרחיב, index.html.
אליסון BUCHHOLTZ-AU: מגניב.
אז אם אתה שם לב לכאן, אנחנו יש לי תגי גוף אלה, נכון?
אז הבורר רק מתאים ל התגים על זה אנחנו מדברים.
אז גוף ממש כאן.
אז מה שאנחנו אומרים הוא everything-- אנחנו יכולים לחזור?
הלוואי שהייתי יכול פשוט כמו לגעת במסך.
זה יהיה כל כך הרבה יותר מגניב.
>> אז כל דבר בתוך אלה תגי גוף, שראינו
היה פשוט, כמו, הטקסט, והגוף באופן כללי
מתייחס ל, כמו, הרקע.
אם אי פעם אתה רוצה לשנות את הרקע,
זה הולך להיות בתג גוף.
פשוט יש כללים אלה יחולו עליהם.
>> אז אם היינו הולכים ל index.html and-- למעשה,
יכול יש לנו משהו מחוץ לגוף?
אם היו לנו, כמו, כותרת תחתונה או ב משהו, זה לא יחול על זה.
אבל שום דבר בתוך תגי גוף אלה הולכים
להיות מושפע מהגוף הזה בורר שבצענו.
אז אם היו לך להקליד משהו אחר there--
>> תומס Reimers: בואו ניסע הביתה ש.
אז אם היו לנו div-- אז זה רק תג אחר שאתה יכול לקבל.
אני הולך לסגור אותו.
או בואו נעשה את זה בפסקה.
אז p מייצג סעיף.
ובתוך סעיף זה.
ואז אני אומר, "זה טקסט".
מגניב.
ואז עשיתי את הכלל הזה חל על סעיף במקום הגוף.
אתה תראה איך זה חל רק על הסעיף החדש שנוצר, נכון,
לא כל הדבר.
האם זה הגיוני?
>> אליסון BUCHHOLTZ-AU: אז זה כל הגוף,
אבל עכשיו בוררנו רק תואם את הסעיף.
אז רק שיש לנו נועז וכחול לסעיף הספציפי הזה,
כי זה הדבר היחיד ש כי הוא סגור בתוך תג p.
>> תומס Reimers: האם זה הגיוני סוג איך דברים לתמצת דברים אחרים?
אליסון BUCHHOLTZ-AU: כמו כן, רק לומר, כמו, אחת הדרכים הטובות ביותר
באמת להרגיש בנוח עם CSS הוא רק כדי לעשות דברים כאלה,
רק לנסות את זה.
זה פשוט מאוד להקליד משהו החוצה, פגע רענן, ולראות מה קורה.
וכמו עם רוב CS, לעתים קרובות ניסויים יכולים
להוביל להרבה יותר טוב הבנה אינטואיטיבית.
אפילו יותר מאשר לנו רק, כמו, מדבר איתך.
>> תומס Reimers: בהחלט 100% מסכימים על נקודה זו.
אז אם נחזור לזה, בואו נתחיל לנתח בדיוק מה שני אלה עושים.
אז יש לנו שני כללים בזה.
אז הראשון הוא צבע רקע.
ואתה רואה שאנחנו קבענו אותו שווה ערך, בצבע תכלת.
>> אז בCSS, CSS הוא סוג של רופף מאוד על אופן שבי
מותר לך להגדיר צבע.
אז אתה יכול להגדיר אותם בשמם.
גם אתה יכול לעשות משהו כמו "אדום".
ואז אם נחזור לזה, תראה שהרקע הוא אדום.
גם אתה יכול לקבל אמת-- אני חושב שאתה יכול לקבל די יצירתי עם זה,
אתה לא יכול?
>> אליסון BUCHHOLTZ-AU: אני חושב שאתה יכול להשתמש hex.
אתה לא יכול?
>> תומס Reimers: כן.
אז אתה יכול להשתמש hex.
אבל אני חושב שם-חכם.
הם לא שם?
אליסון BUCHHOLTZ-AU: אתה יכול לעשות לא מעט.
פחות או יותר כמו רוב הצבעים שאתה יכול name-- כמו, אני חושב שסלמון הוא אחד.
>> תומס Reimers: אנחנו סלמון הולך לנסות.
אליסון BUCHHOLTZ-AU: אני חושב ירוק-צהוב הוא שם.
תומס Reimers: כן.
רואה?
אז אתה יכול לקבל די יצירתי.
>> אליסון BUCHHOLTZ-AU: אתה אפשר להיות מאוד יצירתיים.
בדומה, אם אתה יכול לחשוב על שם של צבע, זה כנראה שם.
אם אתה באמת רוצה קנס פירוט, אתה יכול ללכת hex.
>> תומס Reimers: כן.
אז הקסדצימלי.
אם אתם זוכרים את זה בחזרה מPSET הישן שלך, תמונת שחזור,
אתם נאלצו להתמודד עם ערכי hex אלה.
וסוג של כדי לסכם מה זה, יש hex שלושה ערכים מאוחסנים בו.
אז זה בקבוצות של שניים במרווחים.
שני הראשונים מייצגים את הערך האדום.
השנייה אחת מייצג הערך הירוק.
והאחרון הוא כחול?
>> אז FF קורה לייצג הקסדצימלי 255.
אז יש לך 255 אדומים, 255 ירוק, ו0 לכחולים.
וערכים נעים בין 0 ל- 255.
>> קהל: ימין.
אז למעשה, אנחנו יכולים לחפש האינטרנט לכל צבע שאנחנו רוצים,
ולזהות את-ידוע למעשה משולב ספקטרום צבעים,
ואז נוכל לשים אותו ב?
אליסון BUCHHOLTZ-AU: בדיוק.
אז יש לך די הרבה שליטה מלאה על הצבעים שאתה רוצה בתוך CSS.
אנחנו הולכים לדבר על תמונות רקע מאוחר יותר?
או שאנחנו רוצים לעשות את זה?
>> תומס Reimers: כן.
בהחלט.
אז קודם כל, רק כדי להראות ש אדום וירוק הוא צהוב.
ואם אתה צריך קצת עזרה במציאה זו, אתה
יכול Google משהו כמו "בורר צבע."
אליסון BUCHHOLTZ-AU: הו, זה כל כך טוב.
אני אוהב את דוגם צבע.
>> תומס Reimers: colorpicker.com הוא דוגמא טובה.
והנה, תראה שיש לך בורר צבעים כמו-Photoshop מלא.
>> אליסון BUCHHOLTZ-AU: ממ-הממ.
כמו כן, הדברים מגניבים אתה יכול ליצור ערכות צבעים
כך שאין לך, כמו, מתנגש צבעים.
תומס Reimers: ואז הנה הערך עד hex כאן.
אז אתה תמיד יכול למצוא באינטרנט בעצם מקומות כדי לקבל את ערך hex מ.
זה לא למיין של שרק, כמו, אנחנו לראות את הצבעים של העולם במספרים.
זה יותר שאנחנו גולשים באינטרנט ולמצוא את מה שאנחנו רוצים צבע,
ואז לקחת את המספר למטה.
כי זה פשוט ממש קל דרך להתייחסות דברים בCS.
>> אליסון BUCHHOLTZ-AU: ואז יש also--
אני שוכח את שמו של האתר המדויק.
אבל יש בהחלט, אני חושב, משהו מבית Adobe
שיוצר צבעים בשבילך, שזה ממש מגניב, כי אתה
definitely-- זה לפעמים קשה להבין,
או, אם אני רוצה להשתמש בצבע זה, מה יכול להיות אחר שימושי אחד
להשתמש במקום אחר באתר שלי ל, כמו, לעשות את זה נחמד ומלוכד.
>> תומס Reimers: Allison של מדברים על אחד על ידי Adobe בשם Kuler, אני חושב.
זה K-U-L-E-R.
אליסון BUCHHOLTZ-AU: אני חושב שכן.
אני די בטוח שזה אחד.
>> תומס Reimers: האהוב עליי יש תמיד היה מעצב ערכת צבעים.
>> אליסון BUCHHOLTZ-AU: או.
>> תומס Reimers: איזו הוא now--
>> אליסון BUCHHOLTZ-AU: אה, זה יפה.
>> תומס Reimers: ואתה בעצם אפשר לומר, כמו,
אני רוצה שלושה צבעים לצד זה.
ואז בואו נעשה משהו נחמד.
ואז אתה יכול לקבל דוגמא של מה שעשוי להיראות.
ולאחר מכן, אם תרחף מעל כל שלהם, זה נותן לך את ערך hex.
>> אז בדיוק כפי שדרך טובה להתחיל חושב על צבעים
או מה צבעים באתר אולי הולכים טוב ביחד.
משום שיכול להיות מפתיע לא קל כמו לבחור כמו שאתה חושב.
ואז דבר מגניב האחר תמיד מצאתי על האתר הזה
הוא אם אתה מכה דוגמאות, זה יהיה להראות מה אתר דוגמא
עשוי להיראות כמו שימוש שערכת צבעים.
בכל אופן.
>> חזרה לCSS בפועל.
אליסון BUCHHOLTZ-AU: אבל כמובן, אנחנו יודע אזכור אלה עשויים להיות שימושי.
תומס Reimers: לא, הם בהחלט יכול להיות מועיל.
אז הכלל השני, אליסון?
>> אליסון BUCHHOLTZ-AU: כן.
הכלל השני הוא פשוט מתאים לגופן שלנו.
אז משקל גופן הוא פשוט סוג ל-- אז המשקל היה
להיות אם אתה רוצה רק, כמו, נורמלי או, כמו, גופנים דקים יותר,
או במקרה הזה, כמו, נועז.
אני שוכח.
מה אם אתה רוצה it-- יש אחד דק יותר מאשר רק, כמו, נורמלי?
תומס Reimers: אני לא ממש יודע אם יש אחד דק יותר.
אליסון BUCHHOLTZ-AU: אני שוכח.
משקל כל כך גופן אנחנו בדרך כלל פשוט להשתמש לנועז.
אם אתה רוצה לקבל באמת ל זה, אנחנו הולכים להראות לכם.
יש W3Schools כל שונה דברים שאתה יכול לעשות עבור גופנים.
אבל בעיקרון, אם אתה רוצה אי פעם לשנות שום דבר על גופן,
זה תמיד הולך להיות, כמו, גופן ומשהו.
אז זה יהיה כמו, font-family אם אתה מנסה לשנות את הסוג בפועל.
זה יהיה font-סגנון אם אתה רוצה לעשות את זה כמו רהוט,
או נטוי, או מה שלא.
או אפילו font-צבע, אם אנחנו רוצים לשנות את זה.
>> תומס Reimers: כן.
אז אתה יכול לשנות את זה.
וסוג של רק ל סיכום עכשיו, כך שאתה יכול
רואה שיש לנו את הבורר עד כאן.
יש לנו סוגריים מסולסלים אלה.
ולאחר מכן יש לנו כללים תחום בנקודה-פסיק.
האם זה הגיוני?
כן?
מגניב.
אז אם זה good--
>> אליסון BUCHHOLTZ-AU: חזרה.
תומס Reimers: בואו נדבר באופן ספציפי על איזה סוג של בוררים שיש לנו.
"לגרום לעכשיו יש לנו סוג של רק לראות תגים.
אבל אתם יכולים לראות את זה מתקבל על הדעת.
תגיד יש לך שתי פסקאות בדף ואתה
רוצה להיות מסוגל לסגנון אחת, אך לא אחר,
אתה פשוט לא רוצה להגביל את עצמך יש להשתמש ב- HTML בפועל שונה
תגים לתת להם סגנונות שונים.
>> אז יש לנו שלוש בסיסיים סוגים של בוררים.
אליסון BUCHHOLTZ-AU: כן.
אז יש לנו תג, וזה מה ש אנחנו כבר מדברים על עכשיו.
אז זה כמו סוג של הגוף או p שלך.
ולאחר מכן יש לנו בכיתה, שהוא כאשר אנחנו מגדירים אותו בקובץ CSS שלנו,
זה תמיד הולך להיות נקודה, מה ש אתה רוצה את השם של הכיתה שלך להיות.
וזה יכול לחול על דברים רבים.
>> אומר שיש לך חמש פסקאות ושתיים מהשלושה מהם
צריך להיות מנוסח באותה, היית להחיל מעמד אליו.
וזו רק הדרך שאנחנו עושים את זה.
אנחנו ניתן לכם דוגמא ל איפה זה בעצם מופיע.
אבל אם היה לך אולי קצת תג p, לאחר ש, היית לכתוב,
מעמד שווה כל כיתות אתה רוצה להחיל עליו.
אז בוררי מעמד כל מה שאנחנו רוצים לפנות לסעיף הספציפי הזה,
אנחנו רק יכולים לכתוב ככה.
כמובן, אני חושב שדוגמה יעשה את זה הרבה יותר מוחשי.
>> האחר שיש לנו הוא id, שנסמן
עם חשיש, או קילו, או hashtag.
תומס Reimers: Octothorpe.
אליסון BUCHHOLTZ-AU: Octothorpe.
שעובד, גם.
וזה אחד באמת צריך להיות ייחודי.
הם צריכים לחול רק על דבר אחד בדף שלך.
אז אם זה סעיף ספציפי, או פריט ברשימה, או כל דבר אחר,
זה צריך להיות ייחודי.
ובאותה הדרך שאנחנו פשוט אומר, כמו, class = "Class2 Class 1,"
זה רק יכול להיות id של כל מה שיש לנו.
תומס Reimers: כן.
אז בואו בהחלט לדבר על דוגמאות כאן.
ואני רק הולך לצלול ישר בחזרה לקוד.
אז בואו נסתכל על HTML שלנו.
וכך עכשיו יש לנו פסקה אחת.
זה טקסט.
אני רק הולך לשנות זה. "זה טקסט .1"
ואז אנחנו הולכים ל יש לי "הנה טקסט 2."
>> אליסון BUCHHOLTZ-AU: שנייה אחת.
תומס Reimers: כן.
אז עכשיו יש לנו "זה טקסט 2", נכון?
ואנחנו הולכים לראות את זה אם אנחנו טען מחדש הדף, מה אנחנו הולכים למצוא
הוא שאנחנו הולכים find--
אליסון BUCHHOLTZ-AU: או.
תומס Reimers: כן.
אנחנו הולכים למצוא "זה על מודעה 1 "ו-" הנה טקסט 2. "
>> אליסון BUCHHOLTZ-AU: ו צבע צהוב יצאתי יפה.
>> תומס Reimers: ואתה תראה שהבורר שלנו עכשיו,
אשר חל על p של, או סעיפים, משפיע שניהם,
כי שניהם עומדים ב מצב ששניהם תג p.
זה הגיוני כולל.
אז השאלה היא, ובכן, מה אם אנחנו רוצים רק להשיג אחד?
אז בדיוק כמו אליסון אמר, יש לנו שתי דרכים אחרות לעשות את זה.
אני הולך להתחיל עם id.
>> אליסון BUCHHOLTZ-AU: בואו נתחיל עם id.
>> תומס Reimers: ושני אלה הן תכונות.
אז תכונות קיימות ב- HTML.
ומה שהם הוא משהו שאתה מוסיף
בתוך התג שהוא נפרד משם התג.
אז אתה יכול לקבל תכונות מרובות.
כן?
>> אליסון BUCHHOLTZ-AU: אני רק הולך לומר, מהדוגמא שלך מPSET 7,
אם מישהו מכם לנסות ליישר דברים למרכז,
ייתכן שהשתמשת ב "טקסט align = מרכז."
ושמת לב שזה כנראה נסובים
הטקסט שלך או סרגל הניווט שלך.
אז זה פשוט גם תכונה שאולי אתה מכיר.
תומס Reimers: יש חבורה של תכונות שתראו.
כן.
כמו התייחסות טובה לPSET 7.
יש לנו id.
גם אתה יכול לקבל כיתה, דברים כאלה.
תג יחיד יכול להיות תכונות רבות.
אז החל בid, בואו נעמיד פנים ש רוצה שיהיה לי id ל-- אני לא יודע.
אנחנו קוראים לזה מיוחד, כי זה אחד, אנחנו
הולך לעשות נועז, ו קו תחתון, וכל מה ש.
אליסון BUCHHOLTZ-AU: זה הולכים להיות סופר מיוחד.
תומס Reimers: אז זה אחד, יש לנו מיוחד id.
אז הדרך כדי לבחור את זה, אז, הוא בmain.css, ולא שיש לי תג p,
אתה עושה #special, בסדר?
ושבוחר דבר עם id מיוחד.
האם זה הגיוני לכולם?
קהל: כן.
תומס Reimers: מגניב.
אז עכשיו אם נחזור, אנחנו see-- אופס.
כן.
אנחנו תראו שזה רק בוחר אחד עם id מיוחד.
כן?
נשמע מגניב.
כן.
>> קהל: האם משהו שיש לי לייחס של שתי הכיתה וid?
>> תומס Reimers: כן.
קהל: OK.
ואז מה קורה אם לאחר מכן לתת לי זה כמה כללים בCSS סכסוך זה?
תומס Reimers: בהחלט.
אנחנו בהחלט הולכים לדבר על זה.
אז בדיוק מה שאתה מקבל ב, אתה יכול להיות גם שיעורים.
אז בואו נעמיד פנים שלא היה לי שלושה סעיפים ואני
רציתי לעצב הראשון שתיים, אבל לא שלישי.
ובכן, הרעיון הראשון שלך עשוי להיות, ובכן, אני רק יכול לתת את השני id.
אבל אתה לא יכול, כי id, בדיוק כמו אליסון אמר,
צריך להיות ייחודי.
>> אז במקום id, מה שאתה ניתן להשתמש הוא שאתה יכול להשתמש בכיתה.
וclass-- מה שהוא מאפשר לך לעשות הוא בעצם אומרים,
זה שייך כחלק מקבוצה.
במקרה זה, הקבוצה שלנו נקרא מיוחד.
ומה אנחנו הולכים לעשות לאחר מכן הוא אנחנו הולכים say-- במקום קילו,
אנחנו הולכים להשתמש בנקודה.
בסדר?
ושים לב שהק"ג ונקודה קיימים רק בתוך קובץ CSS,
לא בתוך ה- HTML.
אליסון BUCHHOLTZ-AU: כן.
הבחנה חשובה.
>> תומס Reimers: יש לי היה כל כך הרבה מאבק,
כי שמתי את החשיש בHTML ו רק אז הרגיש מטופש במשך זמן רב.
ראה כיצד הוא בוחר את שניהם אלה עם כיתה זה?
מגניב.
>> עכשיו, דברים יכולים להיות כיתות מרובות.
בואו נגיד שאני רציתי לעשות ראשון שני יש להם רקע של צהוב
ושתיים יש לי צבע גופן של כחול.
OK.
אני לא ממש יודע למה אני הייתי רוצה לעשות את זה, אבל אני יכול.
>> אליסון BUCHHOLTZ-AU: אולי לא המלצתי עליו לאתר האינטרנט שלך.
אבל למטרות שלנו, זה יעשה.
>> תומס Reimers: זה לא ערכת צבעים טובה.
אליסון BUCHHOLTZ-AU: ובכן, צהוב וכחול הם צבעי התיכון שלי.
אני לא יודע, אם כי.
תומס Reimers: אליסון גבוה של היה בבית הספר ערכת צבעים נהדר.
[שחוק]
אז מה שאנחנו יכולים לקרוא לזה הוא בואו לקרוא זה-- אז יש לנו מיוחד
ויש לנו די.
אני מציע, לזה, אתה משתמש ב שמות הרבה יותר תיאורים.
אליסון BUCHHOLTZ-AU: כן, הייתי קורא לזה, כמו, צהוב או כחול.
>> תומס Reimers: אנחנו לא באמת עושה אתר אמיתי,
וזו הסיבה שאנחנו לא עושים את זה.
אבל אם אתה באמת היה באתר אמיתי, אתה
אולי יש לי, כמו, כותרת מאמר, תוכן מאמר, מילה ראשונה,
דברים כאלה, המאפשרים לך יהיה הרבה יותר תיאורים.
אלה הם באמת בדיוק כמו משתנים.
הם צריכים להיות שם באופן שבו אתה יכול, like-- כן, ככזה.
מושלם.
>> אז צבע רקע.
ואז אנחנו הולכים לsay-- כך דרך לשנות את הצבע היא רק "צבע".
ואנחנו הולכים לעשות את זה כחול.
זה מגניב.
אז עכשיו יש לנו את שני ראשונים יש לי מיוחדים.
הבא הולך יש לי "class = למדי."
ואז מה יעשה: אליסון BUCHHOLTZ-AU רוצה להוסיף "די" לאמצע אחד.
תומס Reimers: כן.
ולאחר מכן לאמצע אחד, להוסיף "די," מה שקורה
רק יש לך חלל.
אז תכונת המעמד רשימה המופרדת בחלל
של כל הכיתות החלים על תג ש.
בסדר?
זה לא כמו זה שייך ל איזה מעמד מיוחד הנקרא
"מיוחד, חלל, די."
היא שייכת לשתי classes-- מיוחד ויפה.
כן?
מגניב.
>> ואז אם אנחנו מסתכלים על מה שקורה, אנחנו
הולך לראות כי ראשון יש רקע צהוב, טקסט שחור.
one-- השני
>> אליסון BUCHHOLTZ-AU: --has נועז רקע צהוב עם טקסט כחול.
והאחרון שלנו פשוט יש טקסט כחול שהוקצינו לה.
>> תומס Reimers: מגניב?
איך בוררים עובדים?
מדהים.
>> אליסון BUCHHOLTZ-AU: האם אנחנו רוצים לדבר על הקונפליקט עכשיו אז?
>> תומס Reimers: אז כן.
בהחלט.
אז מה קורה אם אתה יש סכסוך, נכון?
בואו נעמיד פנים ראשון מגדיר משהו like--
אליסון BUCHHOLTZ-AU: אולי זה אחד משנה את הרקע?
תומס Reimers: כן.
אז אנחנו הולכים לעשות "די" לשנות את הרקע לסלמון.
אליסון BUCHHOLTZ-AU: אתה רק עם כל הצבעים נהדרים היום, תומס.
תומס Reimers: כן.
בגלל גיליתי שאני יכול להשתמש סלמון כצבע אמיתי.
אז אנחנו הולכים רק כדי לעשות את זה.
אני גם חושב ששקיעה היא צבע אמיתי.
קהל: שקיעה זה צבע אמיתי?
אליסון BUCHHOLTZ-AU: בוא ננסה את זה.
תומס Reimers: לאחר הדגמה זו רק משום שבמקרה זה יקלקל את,
אני לא רוצה להיות באגים.
אז אנחנו יודעים סלמון זה צבע אמיתי.
אז כל ניחושים ב מה הולך לקרות?
>> אליסון BUCHHOLTZ-AU: יש לך מושג?
>> קהל: [לא ברור].
>> תומס Reimers: כן.
אז יש לך את זה בדיוק נכון.
בעיקרון, זה לוקח הכלל האחרון שהיא ניתנה.
>> אליסון BUCHHOLTZ-AU: אז זה שבו מדורג לתוקף.
>> תומס Reimers: אז זוכר איך היה שגיליונות סגנון מדורגים?
אז על ידי זה, אנחנו מתכוונים לסוג של שיש לנו חבורה של כללים
אשר חלים על גב אחד את השני, ו הם יכולים גם לעקוף אחד את השני.
>> אליסון BUCHHOLTZ-AU: אז מה של בתחתית
יעקוף מה זה בחלק העליון.
אתה יכול להיות כללים שלחלוטין לשלול משהו לפני כן.
זו גם הסיבה שאתה רוצה להיות היזהר כאשר אתה סטיילינג,
כך שאתה לא יוצר כללים ש אתה רק דריסה לחלוטין.
>> תומס Reimers: או אולי אתה רוצה לדרוס כללים.
>> אליסון BUCHHOLTZ-AU: או אולי אתה עושה.
כן.
>> תומס Reimers: העמד פנים שיש לך כיתה שחלה על רוב הדברים,
אבל נניח שאתה רוצה לשנות את צבע רקע לאדום והגופן
משקל לנועז לביותר דברים, אבל לאחד,
אתה רק רוצה את צבע הרקע להיות אדום, אבל אתה רוצה שכל אחר
תכונות, אתה יכול לעשות משהו כמו "font-משקל = נורמלי,"
אשר לאחר מכן היה לבטל כי שינוי נועז.
כן?
שוב, הדרך הטובה ביותר, אני חושב ש אליסון אמר את זה, הוא פשוט לתרגל.
>> אליסון BUCHHOLTZ-AU: ניסויים.
>> תומס Reimers: עיסוק, בפועל, בפועל, וניסוי.
אני מכיר הרבה אנשים שחושבים CSS הוא רק הרבה ניחוש-ו- סימון
בסופו של היום, שבו אם אתה רוצה לעשות something-- כמו,
יש לך מושג כללי, אבל אתה עדיין כנראה צריך
לנסות אותו כדי לוודא ש אתה יודע איך זה נראה.
>> קהל: כאשר אתה החלים כיתות, יותר מפעם אחת
לאותו סעיף או סעיף, עושה את זה
משנה מה מטרה שאתה יכול הקלד אותם בציטוטים?
>> תומס Reimers: לא, בכלל לא.
>> אליסון BUCHHOLTZ-AU: מה שחשוב הוא הסדר בתוך גיליון סגנון CSS שלך.
קהל: האם אתה יכול לחזור על השאלה?
תומס Reimers: אה.
אליסון BUCHHOLTZ-AU: בתוך כיתה, כיתות, כאשר אתה נותן
למשהו בHTML, עושה זה משנה איזה סדר הם ב?
זה לא משנה את הסדר.
מה שחשוב הוא סדר בוררי מעמד בתוך CSS שלך,
בתוך גיליון הסגנון שלך.
>> תומס Reimers: נשמע טוב?
>> אליסון BUCHHOLTZ-AU: יפה.
>> תומס Reimers: ואז אנחנו הולכים להמשיך to--
אליסון BUCHHOLTZ-AU: מה יש לנו הבא?
אני שוכח.
אה, רק שיש לנו דוגמאות.
אבל אנחנו כבר סוג של עשו אלה.
אנחנו עשינו דוגמאות על לטוס.
>> תומס Reimers: אנחנו מקבלים ל לשלב הבוררים בקרוב.
>> אליסון BUCHHOLTZ-AU: אה, אנחנו מקבלים לשלב בוררים.
תומס Reimers: אז כמה דוגמאות היא שיש לנו
# קילו dog--, או hashtag, או octothorpe, או מה ש
אתה רוצה לקרוא לthat-- חד.
>> אליסון BUCHHOLTZ-AU: כלב שארפ.
>> תומס Reimers: אז יש לך .pets.
יש משהו id של כלב, יש רק אחד כלב בדף.
יש משהו id של חתול, יש רק חתול אחד.
ייתכן שיש חיות מחמד רבות בדף.
זו הסיבה שאנו נתנו שכיתות.
יש לך דוגמא של p.
ואז כל כך אחד מ הדוגמא האחרונה, ש
הוא משהו שלא דיבר עליו, זה מה שקורה כשאתה לשלב אותם.
אז p.pets.
>> אז בשביל זה, בואו נחזור ל קוד ולהציג את another-- כן.
אז אחזור לכאן.
>> אליסון BUCHHOLTZ-AU: אני מרגיש שזה אמת--
סתם מחפש דרך דוגמאות הוא באמת הדרך ללמוד את זה.
אז זה מה שאנחנו עושים.
>> תומס Reimers: אז בוא נעמיד פנים ש רק רוצה לבחור טקסט 2, נכון?
אז אנחנו בהחלט לא יכולים לעשות את זה עם id.
ובכן, אנחנו יכולים לעשות את זה עם id, אבל זה לא חייב id.
אני יכול להוסיף אחד, אבל בוא נעמיד פנים כי אני לא רוצה להוסיף אחד
או שכבר יש לו משהו אחר.
אני לא יכול לעשות את זה עם זה.
התג הוא בהחלט לא ייחודי, נכון?
וגם היא בכיתה.
אבל אתה יכול לשלב את הדברים האלה.
נניח שאנחנו רוצים לעשות משהו אשר חל רק על דברים ש
יש לי מיוחד בכיתה ו שיש לי המעמד יפה.
>> אז מה שאתה יכול לעשות הוא בmain.css, אתה יכול להגיד, בוא למחוק ראשון זה.
ניתן לשלב הבאים.
אז אתה יכול לעשות .special.
אין מקום.
רק .special.pretty.
מה זה אומר משהו שהוא גם מיוחד ויפה.
האם זה הגיוני?
ואם אנחנו הולכים כאן, מה אתה הולך לראות
הוא כלל זה חל רק על שנייה אחת, שבה יש את שני דברים האלה.
ואתה יכול לעשות את זה להרבה דברים.
אתה יכול say-- בואו להעמיד פנים שאני רוצה רק
לעשות דברים שיש להם המעמד יפה ושהם גם תג סעיף.
אז p.pretty.
בואו נעמיד פנים שיש לי משהו יפה על גוף התג.
בסדר?
אני יכול להפעיל את זה ואני יכול לראות שזה רק
הולך תחול על דברים שהם סעיפים עם המעמד יפה.
ואתה יכול לשלב את אלה, בעצם, רב ככל שאתה רוצה.
אז אתה יכול פשוט לשים אותם יחד.
האם זה הגיוני?
אליסון BUCHHOLTZ-AU: אז זה סוג של יותר שימושי
כאשר, תומס אמר קודם לכן, אולי יש לך אתר מאוד מסובך,
וכבר יש לך הרבה של כללים אלה בכתב,
ואתה רק צריך לשלב בין שני מקודם.
כמו במקום לכתוב כל בורר חדש ולשנות אותה לשם,
רק אתה יכול לשלב שלהם איפה שהוא חופף.
>> תומס Reimers: או שאתה עלול למצוא out-- לפעמים
יש אחד בכיתה ש עושה צבע של הגופן כמו כחול,
ויש סוג אחר ש הופך את הרקע הכחול.
וזה פשוט לא יעבוד.
אז אתה כותב מקרה מיוחד, שבו, like-- אבל אם יש לו את שניהם, את מה שאתה
הולך לעשות הוא שאתה הולך לעשות את זה הצל הזה של כחול
וזה אחד גוון של כחול אחר זה.
נכון?
>> אליסון BUCHHOLTZ-AU: טוב עבור אלה סוגים של חריגים.
תומס Reimers: אז ל לחשוב על בעיות
שעלול להתעורר כאשר אתה לשלב אותם.
מגניב.
אז בחזרה למצגת שלנו.
אליסון BUCHHOLTZ-AU: אנחנו כמעט שם.
תומס Reimers: וזה הפסיק חיבור.
אליסון BUCHHOLTZ-AU: הו, לא.
אליסון BUCHHOLTZ-AU: CS ב המשרד, אינטרנט הולך ויורד.
הו, האירוניה.
>> תומס Reimers: אז למרבה המזל, אנחנו יכולים להציג בלי האינטרנט, אני מניח,
כי יש לנו את כל השקופיות כאן.
אז בואו נדבר על מערכת יחסים של תגים.
אליסון BUCHHOLTZ-AU: נכון.
אז פשוט סוג של הולך את מה שאמר תומס,
זה רק עוד דרך לעשות את זה.
אז יש לנו כמה הורים בורר עם בורר ילד.
אז בדוגמא זו כאן, יש לנו כמה גוף עם סרגל ניווט כיתה, כפתור כיתה.
אה.
>> תומס Reimers: אה, סליחה.
>> אליסון BUCHHOLTZ-AU: ו בעצם, מה זה אומר
הוא לבחור את כל הילדים, כמו כל מיני בוררים אלה,
בתוך בורר הורה זה.
ואלה הם היחידים זה אי פעם הולך לפנות ל.
אני לא יודע אם אתה יש דרך טובה יותר ל--
תומס Reimers: אז אני מניח בדרך לחושב
על זה הוא זוכר איך לפני אנחנו קצת כמו לשים אותם יחד.
ואז זה אומר שאלמנט אחד התואם את כל אלה.
מה שזה אומר זה, אני רוצה שתתאים לכל דבר
בתוך some-- אני רוצה לך למצוא בורר.
ואז בתוך זה, אני רוצה לך להתאים דברים חדשים.
נכון?
אז בCSS, זה הכול עניין של סוג של להיות מסוגל להתאים את הפריטים הללו.
ואתה יכול לנסות להתאים פריטים בתוך פריטים אחרים.
>> אז בואו באמת עושים דוגמא, ואנחנו חושבים שיהיה להבהיר.
אז בואו נעמיד פנים שיש לנו מיוחד, מיוחד למדי, לא משנה מה.
ולאחר מכן יש לנו קישור, בסדר?
אז לזכור, הוא קישור.
זה לא הולך לשום מקום.
ואנחנו הולכים לתת לו קישור הכיתה, אני מניח.
בואו לתת את זה class-- לתת לי רעיון.
אליסון BUCHHOLTZ-AU: מגניב.
תומס Reimers: Coo-- בואו לעבור את זה בכיתה די.
למה לא?
>> אליסון BUCHHOLTZ-AU: OK.
תומס Reimers: אז דברים הנכונים עכשיו די
הולכים לעשות רקע צבע כחול, רקע של סלמון.
זה הגיוני.
ואם אנחנו עושים זה--
>> אליסון BUCHHOLTZ-AU: האם אתה רוצה להוסיף טקסט
כך למעשה קישור מופיע?
תומס Reimers: זה יהיה שיחה טובה.
אליסון BUCHHOLTZ-AU: "נכון סיבה עכשיו אנחנו רק הולכים לקבל שום דבר.
תומס Reimers: אז זה קישור.
"זה קישור."
אה, וזה הולך להיות חוליה נוספת.
בואו לתת לו את המעמד "מגניב".
אתה צודק.
מגניב.
אז עכשיו אנחנו הולכים לתפוס את זה.
אנחנו הולכים לזרוק אחד.
יש לנו אחד ב תג מיוחד, ואנחנו גם
הולכים להיות אחד בתג די.
ועכשיו מה שאנחנו הולכים ל לעשות הוא שאנחנו הולכים לעשות cool--
מה אנחנו רוצים לעשות את זה?
אליסון BUCHHOLTZ-AU: האם אנחנו יכולים לעשות את זה גדול יותר?
תומס Reimers: בוא נותנים לו גבול.
אליסון BUCHHOLTZ-AU: אנחנו יכולים גבול.
תומס Reimers: כן.
אז אנחנו הולכים לעשות משהו כמו, is-- גבול ואנחנו
הולך להסביר את כל זה בשנייה.
לnow--
>> אליסון BUCHHOLTZ-AU: למודל התיבה.
תומס Reimers: אבל לעת עתה, אנחנו רק הולך לתת לו גבול.
אז מה שזה אומר הוא שאתה הולך לראות את הקישורים הללו.
ואתה הולך לראות שיש להם , כמו, הגבולות השחורים המכוערים הללו, ש
זה מגניב.
>> אליסון BUCHHOLTZ-AU: אתר האינטרנט שלנו כל כך יפה.
>> תומס Reimers: כן.
האתר שלנו הוא מדהים.
אז שני אלה הם קישורים, והם מופיעים.
עכשיו בואו נעמיד פנים שאני רק רציתי לעשות את זה
אם זה לא היה בתוך משהו שהיה רקע של סלמון.
אז לזכור שזה אחד יש רקע של סלמון,
כי זה של מעמד יפה.
>> אבל אנחנו רוצים לומר שמתקררים רק שנמצאים במעמד מיוחד, לא בכיתה
די, צריך גבול ש.
ובכן, מה שאתה יכול לעשות הוא ניתן לומר, .special, חלל, .cool.
ומה שעושה, כשאתה חושב על זה, הוא שזה בעצם אומר,
OK, למצוא לי הכל התואם מיוחד.
ואז בתוך תגים אלה, מוצאים הכל שזה מגניב.
אליסון BUCHHOLTZ-AU: אז עוד דרך שעשוי להיות טוב לחשוב על זה,
מחזיר אותו ל- C, הוא בדיוק כמו הרעיון של היקף.
לכן, כאשר יש לך כמה בורר, כמו אלה ש
כי אנחנו כבר עובדים על זה לפני, הדף שלך כל האינטרנט, כל HTML שלך
הוא בתוך הטווח שלך, נכון?
אבל כאשר יש לנו אלה יחסי הורים וילדים,
זה כאילו שאתה צמצום למטה בי אתם מחפשים מקום ספציפי,
כאילו, כמו, אנחנו מחפשים בתוך תפקיד ספציפי במקום
של כל הקובץ שלנו.
קהל: אז עם זה בחשבון, היית זה היה משנה אם היו לנו changed--
אליסון BUCHHOLTZ-AU: הסדר?
קהל: --the כיתה בCSS ל.cool, חלל, .special?
אליסון BUCHHOLTZ-AU: כן, כי אז ש
הייתי אומר, היקף אליו כל מה שיש מגניב,
ולאחר מכן להסתכל על מה has-- אני מתכוון, כמו, במקרה זה,
אני לא חושב שזה היה משנה את זה.
>> תומס Reimers: אם היינו אומר מה?
מצטער.
>> אליסון BUCHHOLTZ-AU: אם אנחנו היקפו להתקרר ולאחר מכן
לחפש דברים מתוך מיוחד, זה יהיה אותו הדבר, בעצם.
>> תומס Reimers: אז זה לא יהיה.
>> אליסון BUCHHOLTZ-AU: זה לא היית?
אה, נו, טוב.
אני טועה.
>> תומס Reimers: כך הסיבה זה different-- mistake-- הנפוץ
הוא שעכשיו רק הקישור יש מגניב, נכון?
אני מניח שהשאלה שלי אליכם היא, מה בדף זה מותאם על ידי .cool?
ישנם שני תגים כאן, נכון?
וזה את זה ואת זה.
שתיהן להתאים מגניבים.
שום דבר אחר לא עושה.
אז אם אתה אמר, .cool, חלל, .special, מה שאתה הולך להגיד הוא,
בתוך תגים אלה, מה הוא מיוחד?
אליסון BUCHHOLTZ-AU: Hm.
זה מה שit-- תקין.
כי זה סתם משהו כאן.
>> תומס Reimers: אז הוא בוחר שום דבר.
>> אליסון BUCHHOLTZ-AU: בעוד ב מיוחד, אנחנו בתוך התגים אלה כאן.
>> תומס Reimers: אלה ואלה.
קהל: OK.
אז אלה תגים מהקו נטויים?
>> תומס Reimers: כן.
האם זה הגיוני?
איך זה בעצם מנסה לצמצם היקף.
אליסון BUCHHOLTZ-AU: כן.
אני חושב שזה כנראה הדרך הקלה ביותר לחשוב על זה.
>> תומס Reimers: אז מצאנו את זה, ו מצאנו זה תאם מיוחד שניהם.
ואז אנחנו מבקשים, בתוך החבר'ה האלה, מה זה מגניב?
ובתוך זה, מגניב של זה.
בתוך זה, שום דבר מגניב.
אז זה התג היחיד שנותר.
>> אליסון BUCHHOLTZ-AU: בעוד מגניב רק בתוך תגים אלה יש.
תומס Reimers: בדיוק.
ומה מיוחד באלה?
שום דבר.
עכשיו, מה שאני אומר הוא אם לא היה מרחב,
אתה שואל מה זה מגניב וspecial-- או מה יפה ומיוחד, נכון?
אם אתה אומר .special.pretty, זה אותו הדבר כמו .pretty.special.
>> כי מה היא הסרת החלל שואל הוא, כשאתה אומר .special,
אתה שואל, אישור, אילו הם מיוחדים?
ולאחר מכן של אלה, ש אלה הם גם די,
המהווה את אותו הדבר, מבחינה דקדוקית, כמבוקש, מה שדי,
ולאחר מכן של אלה, מה גם מיוחדים?
נכון?
זה ההבדל של מה בתוך מה הוא.
קהל: OK.
תומס Reimers: כן.
מדהים.
אז עם זה בחשבון then--
>> אליסון BUCHHOLTZ-AU: אני חושב שאחרון שלנו עניין הוא (בדמיון BRITISH ACCENT)
מודל התיבה.
>> תומס Reimers: [מגחך] box-- אני אוהב את הדרך אליסון אומר ש.
אז דבר מודל התיבה.
>> אליסון BUCHHOLTZ-AU: רק יש לי תיבה, אני אהיה מודל התיבה שלך.
תומס Reimers: אז בואו נדבר על זה.
אז עכשיו אנחנו כבר בילינו הרבה זמן מדבר על בוררים.
עד עכשיו, אתם כנראה, כמו, מאסטרים של selectors-- אתה יודע,
כיצד לבחור את התוכן בדיוק את זה אתה רוצה לתפעל על המסך.
>> אז עכשיו השאלה היא, איך בדיוק אתה יכול לתפעל אותו?
אז אני מניח הבסיסי ביותר דרך לחשוב על זה
הוא, ובכן, מה בדיוק הוא אלמנט בCSS?
בילינו הרבה זמן מדבר, מה הוא תג,
או מה הוא הבסיסי ביותר ייצוג של תג?
>> דרך טובה לחשוב על כלומר, מה הוא צורת סלמון?
איזו צורה הוא, כמו, סלמון בצבע רקע?
>> קהל: זה מלבן.
>> תומס Reimers: זה מלבן, נכון?
>> אליסון BUCHHOLTZ-AU: לא היה שאלה מכשילה.
[שחוק]
>> תומס Reimers: לא מנסה ולגרום לך חבר 'זה מאוחר.
אז יש לנו מלבן זה.
והתג הוא p, נכון?
אז זה נותן לנו טוב אמונה שהסעיף
מיוצג כמלבן, ב לפחות במוחו של הדפדפן, ש
זה.
>> אליסון BUCHHOLTZ-AU: אני מתכוון, דפדפנים הם בדרך כלל מלבניים,
כך שזה הגיוני.
>> תומס Reimers: הרעיון כאן הוא שכל התגים בתוך CSS
מיוצגים כמלבן.
ויש לו כל מלבן ארבעה חלקים לפי CSS, בסדר?
יש לך את התוכן הממשי.
זה שבו הטקסט נמצא.
>> אליסון BUCHHOLTZ-AU: אולי התמונה שלך.
>> תומס Reimers: כן.
יש לך ריפוד, שהוא רק סוג מסוים של שטח לבן.
אז יש לך גבול.
ואז יש לך מרווח, ש הוא החלל לבן מחוץ לזה.
אז זה לא הגיוני לאף אחד, אז אנחנו
הולך לדבר על זה לרגע.
אז כאן, מה אנחנו הולכים לעשות הוא שאנחנו הולכים ליצור כמה divs, בסדר?
תסלח לי בזמן שאני-
>> אליסון BUCHHOLTZ-AU: אני מרגיש כמו אנחנו צריכים לשים תמונה חמודה ב.
>> תומס Reimers: אנחנו בהחלט צריכים.
>> אליסון BUCHHOLTZ-AU: אני מרגיש כמו כולם
יכול להפיק תועלת מ תמונה חמודה, היא כל.
>> תומס Reimers: האם אנחנו יכולים כל התועלת מa--
>> קהל: כן, בטח.
תומס Reimers: OK, מגניב.
אז אנחנו צריכים לשים חמודים תמונה במקום כלשהו.
אליסון BUCHHOLTZ-AU: אני מרגיש כמו ארנב חמוד עשוי להיות שימושי עכשיו.
תומס Reimers: בטח.
אליסון BUCHHOLTZ-AU: סוף השבוע.
יש משהו adorab--
>> תומס Reimers: איך התקף חתלתול?
>> אליסון BUCHHOLTZ-AU: חתלתול עובד, מדי.
>> תומס Reimers: מגניב, כי יש אתר בשביל זה.
זה נקרא PlaceKitten.
אליסון BUCHHOLTZ-AU: זה נהדר.
תומס Reimers: כן.
אליסון BUCHHOLTZ-AU: רק ל, כמו, תמונות מציין מיקום באתר האינטרנט שלך.
תומס Reimers: ממ-הממ.
יש גם PlacePuppy.
ויש PlaceBacon.
>> אליסון BUCHHOLTZ-AU: PlaceBacon?
באמת?
>> תומס Reimers: אה, אנחנו לא יש גישה לאינטרנט כאן.
>> אליסון BUCHHOLTZ-AU: [גניחות]
טרגי.
תומס Reimers: אחרת, הייתי מראה לכם
איך לשים את התמונות באתר האינטרנט שלך.
אנחנו הולכים לנסות לקבל את זה עובד לפני שאנחנו צריכים ללכת.
אבל לעת עתה, אנחנו רק הולך לדבר בצבעים אז.
אנחנו רוצים לשים תמונות של kittens--
>> אליסון BUCHHOLTZ-AU: עשינו.
>> תומס Reimers: --the של אינטרנט למטה לרגע להיות.
אז יש לנו שני divs, ואנחנו הולך לתת להם שני מזהי.
אנחנו הולכים לקרוא לזה "ראשון" ו- "שני."
אז id = "ראשון".
ואנחנו הולכים לתת להם שני צבעים.
אז איך אנחנו בוחרים משהו עם id של "ראשון"?
אליסון BUCHHOLTZ-AU: Dot או חשיש?
קהל: שארפ.
תומס Reimers: שארפ, מושלם.
חשיש, מה we-- החד,
>> אליסון BUCHHOLTZ-AU: הרבה דברים לקרוא לזה.
>> תומס Reimers: OK.
אנחנו הולכים להתיישב על hashtag, ו זה מה שאנחנו הולכים ללכת עם.
בסדר?
>> אליסון BUCHHOLTZ-AU: סולמית.
>> תומס Reimers: אז hashtag של ראשון.
>> אליסון BUCHHOLTZ-AU: אז אתה יכול ציוץ seminar--
CSS hashtag, hashtag מגניב.
תומס Reimers: הסולמית Awesomeness.
אליסון BUCHHOLTZ-AU: Hashtag Awesomeness, כן.
תומס Reimers: OK.
אז יש לנו "ראשון" ו- "שני."
אז קודם כל, אנחנו הולכים לי צבע רקע של אדום.
אליסון BUCHHOLTZ-AU: אה, מעי גס.
תומס Reimers: כן.
אליסון BUCHHOLTZ-AU: אני אהיה המקום בודק.
תומס Reimers: Allison של לי.
צבע רקע של blue--
>> תומס Reimers: סגול!
>> תומס Reimers: סגול.
אליסון BUCHHOLTZ-AU: כן.
הצבע האהוב עליי של סגול, ואנחנו לא השתמשנו בו עדיין.
>> תומס Reimers: ויולט.
אליסון BUCHHOLTZ-AU: ויולט.
זה עובד.
>> תומס Reimers: אז אנחנו אצטרך שני divs.
הם הולכים להיות ריקים לחלוטין.
כנראה צריכה להיות לנו חלק מטקסט.
אז "ראשון" הולך להיות "HELLO".
ו" שני "יהיה say--
>> אליסון BUCHHOLTZ-AU: להתראות.
>> קהל: - "עולם".
שלום, שלום.
אליסון BUCHHOLTZ-AU: ראיתי שלהם בקונצרט השבוע האחר.
תומס Reimers: הביטלס?
אליסון BUCHHOLTZ-AU: לריאל.
הם לא כל כך גדולים.
אני לא אוהב את זה.
>> תומס Reimers: יש לנו "HELLO" ו- "שלום."
ושוב, CSS הוא פשוט מדהים, משום שהוא מכיר בצבעים שלנו.
לא צריך אפילו תדאג שהם קיימים.
הם עושים.
>> אליסון BUCHHOLTZ-AU: הם קיימים.
>> תומס Reimers: אז CSS אני חושב שיש לי 255 מילות לדבר על צבע.
אם אתה יכול לחשוב על צבע מחוץ 255 אלה, כמו, אני אתרשם.
אליסון BUCHHOLTZ-AU: כן.
אני חושב שיש לך חבר ' פשוט לבוא מייד אחרי.
>> תומס Reimers: אז הנה, תראה יש לנו שתי קופסות
ממש על גבי זה, נכון?
שלום ולהתראות.
>> אליסון BUCHHOLTZ-AU: אין חלל שביניהם.
הם פשוט ששודכו ממש על גב אחד את השני.
>> תומס Reimers: אז הדבר הראשון ש אני מניח שאנחנו צריכים לדבר על
הוא בואו גם say-- כן.
אז CSS מייצג אותם כסוג של תיבות.
וכמו קופסות, יש להם תוכן.
והתוכן כרגע הוא סוג של השלום או השלום וזהו.
בסדר?
>> אז אחד הדברים הראשונים שאתה יכול לעשות הוא שאתה יכול להוסיף ריפוד.
ריפוד אומר כמה מקום זה צריך להשאיר בכל צד.
אז בואו נגיד שאני רוצה לומר 10 פיקסלים בכל צד.
ואני לנתח כי בשני.
אליסון BUCHHOLTZ-AU: את כל הדברים האלה כאן
הולכים להיות בעיקר בפיקסלים לשאר הסמינר.
אתה הולך לראות שיש לו קצת מרחב סביבו, נכון?
אז מה שאתה לא רואה כאן הוא שיש סוג זה של ריפוד בלתי נראה
בכל צד, שאומר, כמו, OK, יש לך התיבה של content-- שלך
>> אליסון BUCHHOLTZ-AU: האם אתה רוצה רק כדי למשוך את האלמנט לבדוק?
>> תומס Reimers: כן, זה רעיון טוב.
אליסון BUCHHOLTZ-AU: כמו כן, אני מוצא שהאלמנט לבדוק היא דרך טובה
להבין אם משהו לא הולך לא נכון, משהו בלתי צפוי קורה,
בדיקת התגים ולראות מה זה כמו מוחלפים הוא מועיל.
>> תומס Reimers: אז אני לא בטוח אם אתם יכולים לראות את הצבע הזה.
אתה יכול?
תראה ריפוד זה בסוג של קצה.
ואז אתה רואה בפועל תוכן בכחול, נכון?
אז זה מאוד יסודות של מודל התיבה.
יש לך תוכן.
אז יש לך ריפוד.
>> קהל: למה אתה לא פשוט השתמש בתיבה בתוך the--
>> אליסון BUCHHOLTZ-AU: נכון.
כי זה פשוט בחירה האלמנט עכשיו.
>> תומס Reimers: כן.
דברים אחרים.
אז בואו נדבר על זה פקודת הריפוד לשנייה.
אז בCSS, מדידות צריך יחידה.
אז קודם כל יש לך את הסכום.
אז במקרה הזה, שאמרנו 10.
ולאחר מכן הבא שאמרנו הוא פיקסלים, px.
אחרים אלה שיש לך הם דברים כמו סנטימטרים, אינץ '.
אתה יכול לעשות דברים כמו, מה הוא 10 אינץ '?
וזה הולך להיות מגוחך.
>> אליסון BUCHHOLTZ-AU: הו, ילד.
>> קהל: וואו.
>> תומס ואליסון: כן.
תומס Reimers: אז זה כל הריפוד.
אני הולך לחזור לפיקסלים.
>> אליסון BUCHHOLTZ-AU: פיקסלים נוטה להיות, כמו, הסטנדרטי.
כשאתה מסתכל על הרבה אתרים, הם בעיקר עובדים בפיקסלים.
תומס Reimers: אז אתה הולך לראות גם pixels-- האחרים אלה שאתה רואה
הוא אותם, שהוא אחד הוא שווה לגובה הגופן
שאתה משתמש כעת.
>> אליסון BUCHHOLTZ-AU: מ"מ.
תומס Reimers: זוהי דרך טובה להגיד, כמו, אני רוצה כמה שיותר מרחב כגופן שלי
הוא לוקח.
אליסון BUCHHOLTZ-AU: לא יודע את זה.
אתה לומד משהו חדש כל יום.
תומס Reimers: יש הרבה מדידות בCS.
אני מציע לך לחפש אותם.
בכל המקרים שלך, אני חושב ש פיקסלים צריכים להיות מספיק.
והם גם מה ש אתה הולך לראות
ברוב המכריע של דוגמאות נעשים באינטרנט.
כך תהיה לנו להשאיר אותו בפיקסלים.
>> אתה יכול גם, אני צריך say-- כך סטי ריפוד כל האטמים.
גם אתה יכול לעשות משהו כזה "Padding-top" רק set--
אליסון BUCHHOLTZ-AU: אולי אנחנו נגיע "HELLO" הגב שלנו.
תומס Reimers: --to פשוט להגדיר את ריפוד בחלק העליון ולא שום דבר אחר.
אז ארבע פקודות הן ריפוד העליון, padding-למטה, משמאל-ריפוד,
וpadding-תקין.
>> אליסון BUCHHOLTZ-AU: בדיוק כמו היית מצפה לתיבה.
>> תומס Reimers: כן.
שום דבר לא מטורף מדי שם.
האם זה הגיוני?
אז זה ריפוד.
אני הולך להגדיר את כל האטמים בחזרה ל -10.
ואז אני הולך לעבור לגבול.
>> אז מה גבול הוא הוא גבול זה הפקודה מוזרה.
זה לוקח סוג של שלושה דברים בבת אחת.
אז הראשון הוא עד כמה גדול אתה רוצה שזה יהיה כמו מדידה.
שוב, אני רק משתמש בפיקסלים.
והדבר האחרון שאני יש להוסיף למדידות
זה הדבר אחד ש לא צריך יחידה הוא 0.
זה לא נכון למעשה לתת 0 יחידה,
כי 0 הוא 0 פני אינץ ', פיקסלים, סנטימטרים, מה ש.
כל זה רק אומר 0, נכון?
אז קודם כל אתה נותן לו את המדידה.
>> אז אתה נותן לו את הסגנון.
אז אני הולך להגיד "מוצק".
ונדבר על מה שזה אומר.
ואז לבסוף, אתה נותן לו צבע.
אז אני הולך לומר "שחור".
וכל אלה הם הדברים שיש לנו עכשיו ראה בעבר, פרט לסגנון,
אבל נדבר על זה.
אז אתם ראיתם מדידות, ואתה ראית צבעים.
ומה שקורה הוא שאנחנו מקבלים זה גבול שחור נחמד סביבו, נכון?
אתם רואים איך עשו את זה?
>> קהל: כן.
>> תומס Reimers: מגניב.
אז מה זה?
אז קודם כל, זה פיקסל אחד.
זה מובן מאליו מספיק, נכון?
כמו, זה פיקסל אחד עבה.
או שזה יהיה פיקסל אחד, אבל אני גדלה, כך שזה קצת יותר
יותר מזה.
>> אליסון BUCHHOLTZ-AU: ויש לנו הטלוויזיה ברזולוציה המגוחכת הזה.
>> תומס Reimers: כן.
אתה יכול לעשות את זה גדול יותר, קטן יותר, מה ש.
אז הנה גבול שני-פיקסל.
אתה רואה שזה בעובי כפול.
הדבר הבא שיש לך הוא צבע.
זה לא מעניין.
אני לא הולך לדבר על זה, באמת.
>> אליסון BUCHHOLTZ-AU: אבל הסגנון יכול להיות רק קצת מעניין.
>> תומס Reimers: כן.
אז סגנון, יש מעט אלה שאני רואה בשימוש נפוץ.
, הבא של של הראשון המוצק מנוקד, ומקווקו האחרון של אחד.
וכאן מנוקד.
אתה רואה שהם חבורה של נקודות, נכון?
דרך טובה לקבל גבול נחמד סוג של הולכים, מקפים הם גם די פופולריים.
>> אליסון BUCHHOLTZ-AU: ואז כמובן, אני
בטוח שיש הרבה אחרים סגנונות שאתה יכול לקבל.
ויש לנו קבוצה של גדולה קישורים בסוף בשבילכם
לעיין סוג של ו מסתכל CSS מגניב יותר.
>> תומס Reimers: ואז הדבר האחרון, אנחנו
הולך לדבר על דגמי תיבה ממש מהר.
אה, ולאחר מכן גבול, בדיוק כמו ריפוד,
יש לך גם דברים כמו שמאל גבול, גבול ימני, גבול העליון,
גבול התחתון, אשר מאפשר לך כדי להגיע אל גבול מסוים.
אז הנה רק הגבול עזב מוגדר.
האם זה הגיוני?
>> אליסון BUCHHOLTZ-AU: זה מגניב דרך להדגיש דברים או להוסיף
קווים בין אלמנטים שונים.
תומס Reimers: בהחלט.
אז זה הגבול שלנו.
ורווחיותו האחרונה של אחד.
הריפוד כמו של השוליים מלבד זה לא within--
אליסון BUCHHOLTZ-AU: זה לא בסביבת האלמנט שלך
אבל בעצם מסביב לכל תיבה שאנחנו כבר רואים.
>> תומס Reimers: כן.
אליסון אמר זה בצורה מושלמת.
זה לא, כמו, בתוכך אלמנט, זה סביב כל התיבה.
זה אומר דברים כמו רקע אינו חלים עליו.
וזה בעצם אומר, כמו, אני לא רוצה שום דבר
בהרבה מקום הזה בשבילי.
אז כמו שיש לנו כאן מרווח של 10 פיקסלים.
כך ששום דבר בתוך 10 פיקסלים צריך להיות לידי.
זה סוג שלה חלל אבל סוג של לא.
אז זה מאוד יסודות של מודל התיבה.
האם זה הגיוני?
מגניב, מגניב.
אליסון BUCHHOLTZ-AU: מדהים.
אז עכשיו אני חושב שאנחנו פשוט יש לנו משאבים מגניבים
שניקח אתכם באמצעות מהר מאוד.
ואנחנו גם actually--, יש לנו אינטרנט עדיין?
>> תומס Reimers: בוא לראות אם אני יכול לפתוח up--
תנו לי רק לראות אם אני יכול לקבל אינטרנט במהירות
בעוד אליסון מדבר על שום דבר אליסון רוצה לדבר עליו.
אליסון BUCHHOLTZ-AU: אז basically-- אני לא
יודע מה עוד אני יכול לומר בשלב זה.
אבל אלה הם חלק משאבים ממש טובים.
אלה הם אלה ש תומס ואני השתמשתי
ושאנחנו באמת משמש להכנה לזה.
W3Schools הוא אחד שאתה בחורים הייתם צריכים לראות לפני.
אנו ממליצים עליו ל הרבה דברים עם CSS.
אני יודע שאני ממליץ עליו ל הסעיף שלי כל הזמן.
>> אחד הדברים הגדולים הוא שזה מאפשר לך סוג של בלגן עם CSS
ולראות את השינויים באופן מיידי בזה,
כמו, כפול-חלון להציג שיש לו.
אז אתה לא צריך לדאוג הקמת דף האינטרנט שלך,
או הקמת vhost בך מכשיר מקומי ומארח מקומי,
ומקבל את כל שעבודת הדברים.
זה מוטבע תקין בתוך הדף.
>> ויש לו קטן האלה שיעורים שאתה יכול
לעבור ללמוד נוסף על בוררים,
או ללמוד על המניפולציה שלך גופן, או רקע, או תמונה.
ויש לך אלה תוצאות המיידיות שאתה
לא צריך לעשות שום עבודת הכנה אחרת ל.
אז אני אוהב את W3Schools.
זה נהדר.
האם זה עובד?
>> תומס Reimers: כן.
לא, זה לא.
האם אתה רוצה שאני אנסה והפעל מחדש את המחשב שלי?
או שאנו רוצים to--
>> אליסון BUCHHOLTZ-AU: אני מתכוון, טוב, זה יהיה גם באינטרנט.
כל השקופיות תהיה מקוונות.
אז אני פשוט מאוד ממליץ לעשות אלה.
>> זה נהדר כפשוט כמו גיליון לרמות.
זה פשוט כל היסוד פקודות שיש לך.
זה נהדר כשאתה ראשון בתחילת דרך אתר האינטרנט שלך.
כי אולי אתה לא רוצה להיכנס לכל
עפרורי האמיתי גרגירי עיצוב-כבד דברים.
אתה רק צריך לעצב אותו בצורה כי סוג של הגיוני ורצון
לעשות לעת עתה.
ואם אתה באמת רוצה להיכנס לזה, אני יודע
זה, כמו, אחד מ אזכור האהוב של תומס.
אנחנו משתמשים בו כדי הכנה, וזה נהדר.
זה מפתח מ- Mozilla.
>> תומס Reimers: אז Mozilla הם האנשים שעושים Firefox.
וזה רק מפתח משלהם התייחסות, שאני חושב שהוא מדהים.
ויש לה נפלא רשימה של משאבים.
אז אנחנו have--
>> אליסון BUCHHOLTZ-AU: ולאחר מכן הפתק האחרון הוא
כאשר אתה מנסה עיצוב אתר האינטרנט שלך,
לשאוב השראה מדברים כי אתה חושב שהם די.
בדיקת האלמנט, בדיקת קוד המקור
יכול להיות סופר מועיל למנסה להבין
כיצד לעצב את אתר האינטרנט שלך.
>> לעתים קרובות, אני מרגיש כאילו הטוב ביותר אגב, מלבד ניסויים,
רק להסתכל על דברים שהם יפים.
אני מוצא את זה ממש קשה רק סוג של עיצוב דברים בעצמך,
במיוחד בהתחלה.
אז בבקשה להסתכל על אתרים שאתה נהנה מסתכל.
להבין מה עושה שלהם פונים אליכם.
ואז תרגיש חופשי לנסות ולשכפל את זה.
>> תומס Reimers: נכון.
אפילו כמו אתרים ככה, אתה יכול לראות
בהחלט יש div בחלק העליון.
ואז יש לך div אחר בתוך כאן, שהוא Awesomeness CSS.
ואז יש לך חבורה של קישורים כאן.
אם אתה באמת רק לבדוק אלמנטים, אתה יכול למיין של
תתחיל לראות מה לעשות אתרים נראה כמו, ואיך אני יכול
לשחזר שאם אני רוצה.
האם זה הגיוני?
אז יש לנו רק שלוש דקות לסיום.
אז שאלות?
כל אחד מהם?
כן.
>> קהל: לצבע מלבן, איך היית
have-- אם לא רוצה את זה הולך על פני העמוד השלם, יכול
אתה עשית את זה לחצות רק מחצית הדף או רק את הטקסט?
>> תומס Reimers: כן, בהחלט.
אז תן לי ממש לראות.
יש לי שני רעיונות.
אז קודם כל, אתה ניתן גם להשתמש באחוזים.
>> קהל: באמת?
>> אליסון BUCHHOLTZ-AU: אז משהו להסתכל למעלה הוא מיקום יחסי.
זה משהו שאנחנו אין לי זמן להיכנס ל,
אבל זה משהו שאני בהחלט ממליץ לכם לבדוק.
>> תומס Reimers: אחוזים אז.
ולראות איך עשינו את זה רק 50% מהרוחב?
אליסון BUCHHOLTZ-AU: אם באמת יודע את מספר הפיקסלים,
אתה יכול להיות מדויק יותר ככה.
אתה יכול להתעסק עם זה.
אבל 50%.
אם היינו לשנות את גודל הדפדפן שלנו, זה יקטין אותה.
>> תומס Reimers: ובכן, זה 50% בעצם עכשיו, אני חושב.
זה 50%, ולאחר מכן את השוליים כבר הוסיף לזה.
יש CSS הרבה מוזרויות.
אז עכשיו זה 50% מרוחב העמוד.
אבל זכור שיש לך 10 פיקסלים המריאו מכל צד.
אז אם היו לך להזיז את זה נגד הקצה השמאלי של הדפדפן,
אז זה היה נראה כמו 50%.
שוב, כמו שאמרתי, יכול CSS להיות הרבה ניחוש-ו- סימון.
כאילו, אתה חושב שמשהו לא הולך להתנהג בדרך זו,
אבל הוא מתנהג בדרך שונה לחלוטין.
>> אליסון BUCHHOLTZ-AU: ואתה פשוט מקבל יותר חכם,
ואתה פשוט מקבל יותר טוב אינטואיציה לזה כמו שאתה להתקדם.
>> תומס Reimers: וזה מקבל יותר ויותר גרוע.
אז זה באמת רק מירוץ.
>> אליסון BUCHHOLTZ-AU: זה סופר מעודד.
אנחנו רוצים שהם אוהבים CSS.
>> תומס Reimers: CSS הוא מדהים.
זוכר את זה.
שאלות אחרות?
>> אליסון BUCHHOLTZ-AU: דבר אחד.
כל דבר אחר?
מגניב.
>> תומס Reimers: מדהים.
>> אליסון BUCHHOLTZ-AU: ובכן, אם אתה יש בחורים כל שאלות בשלב מאוחר יותר,
אנחנו תמיד זמינים כרגיל.
אתה בטח רואה כמה שלנו לפרויקטי גמר
ובהחלט בהאקאתון.
>> תומס Reimers: בהחלט.
וביריד.
>> אליסון BUCHHOLTZ-AU: וביריד.
אה.
>> תומס Reimers: מצפה ל לראות את כל awesome-- שלך
>> אליסון BUCHHOLTZ-AU: נצטרך לראות כל אתרים מדהים שלך
שיהיה יפה.
תומס Reimers: אתה תמיד יכול לראות, כמו, אתרים
שהיה להם, כמו, CSS טוב ולאחר מכן כמו מי שלא מנסה לעשות CSS.
אליסון BUCHHOLTZ-AU: כמו כן, אחר דבר, דבר אחד יותר להסתכל לתוך
היא bioinformatics ב.
אז Bootstrap הוא גדול.
>> תומס Reimers: Google שאם you--
>> אליסון BUCHHOLTZ-AU: Google זה.
זה נהדר.
אתה תאהב את זה.
ועכשיו שיש לך הבנה בסיסית של CSS,
זה יעשה הרבה יותר הגיוני.
מדהים.
תודה, חבר 'ה.
>> תומס Reimers: תודה רבה לך.