[Powered by Google Translate] [קסס] [יוסף אָנג - האַרוואַרד אוניווערסיטעט] [דאס איז קס50. - CS50.TV] 

הייַנט מיר וועט זייַן גערעדט וועגן קסס אָדער קאַסקאַדינג סטייל שיץ. 

אַזוי וואָס פּונקט איז קסס? נו, לאָזן ס ברעכן די טערמין קסס אַראָפּ אין 2 טיילן: קאַסקיידינג און סטייל שיץ. קאַסקיידינג איז אַ קליין ביסל מער קאָמפּליצירט, און עס ס 'עפּעס מיר וועט דעקן אין אן אנדער ווידעא. אבער פֿאַר סטאַרטערס, סטייל שיץ זייער פיל הינץ אין וואָס קסס טוט. עס מוסיף סטיילז צו די HTML פון אַ וועב בלאַט, טשאַנגינג ווי דער וועב בלאַט עסטעטיקלי קוקט. דאס מיטל אַלץ פון די שריפֿט פון די טעקסט צו די פּאַזישאַנינג פון די צופרידן אויף דעם בלאַט צו אנדערע קיל זאכן ווי מאכן די עקן פון אַ קעסטל ראַונדיד אָדער אַדינג שאָטנס צו טעקסט. איר קענען אַפֿילו טאָן משוגע זאכן ווי מאַכן זאכן ופלעבן אויף דעם עקראַן. 

אַזוי ווי טאָן מיר נוצן קסס מיט HTML? נעמען דעם נעבעך-קוקן פּלאַץ איך נאָר געשריבן. אויב ראָב געווען צו קוקן אין דעם פּלאַץ רעכט איצט, ער 'ד מיסטאָמע זאָגן עפּעס ווי, "וואַו! מייַן הקדמה קוקט שרעקלעך. יוסף, איר ניטאָ אַן שרעקלעך דיזיינער." "ניצן די פעליקייַט Times שריפֿט? העלוועטיקאַ איז אַזוי פיל בעסער." 

אַזוי וואָס זאל זייַן די סימפּלאַסט וועג צו צולייגן די סטילינג ראָב וויל? די מערסט קלאָר ווי דער טאָג וועג גורל פון מענטשן טכילעס געשריבן קסס איז געווען צו לייגן וואָס מיר רופן נוסח דעקלעריישאַנז רעכט אין דעם עלעמענט זיך ניצן די HTML נוסח אַטראַביוט. א נוסח דערקלערונג פשוט באשטייט פון דעם HTML עלעמענט ס קסס פאַרמאָג מיר ווילן צו טוישן נאכגעגאנגען דורך אַ צווייפּינטל נאכגעגאנגען דורך די נייַ ווערט פון די פאַרמאָג און אַ פּינטל - קאָמע אין די סוף. פֿאַר בייַשפּיל, לאָזן ס זאָגן ראָב וויל אַ שוואַרץ גרענעץ אַרום זייַן הקדמה. מיר ערשטער שטעלן די נוסח אַטראַביוט אויף ראָב ס דיוו דאָ דעמאָלט ין טאָפּל קוואָטעס שטעלן אַ קסס דערקלערונג: "גרענעץ: 1פּקס האַרט שוואַרץ;" די 1 פּיקסעל רעפערס צו די ברייט פון דער גרענעץ, די האַרט רעפערס צו דער נוסח פון דער גרענעץ, און די קאָלירן אין די סוף דאַטערמאַנז וואָס די גרענעץ ס קאָליר איז. 

אויב מיר וועלן קייפל סטיילז אויף אַן עלעמענט, שרייַבן די דעקלעריישאַנז אין סיקוואַנס. פֿאַר בייַשפּיל, אויב ראָב וויל זייַן כעדער טעקסט אין העלוועטיקאַ מיט אַ בלוי הינטערגרונט און מער פּלאַץ אַרום דעם טעקסט, מיר קענען טאָן דעם: נוסח = "שריפֿט-משפּחה: העלוועטיקאַ; הינטערגרונט-קאָליר: בלוי; וואַטן: 5פּקס;" די לעצטע פּינטל - קאָמע איז פאקטיש אַפּשאַנאַל, אָבער מען יוזשאַוואַלי האַלטן עס אין פֿאַר קאָנסיסטענסי ס צוליב. 

מיר וועט ראַטעווען יקספּליינינג עטלעכע פון ​​די קולער און מער קאָמפּליצירט קסס פּראָפּערטיעס פֿאַר אן אנדער ווידעא. אויב איר האָט עפּעס אין גייַסט, נאָר גאָאָגלינג די ווירקונג איר ווילן נאכגעגאנגען דורך קסס וועט מיסטאָמע געבן איר שיין גוט רעזולטאַטן. די קיל זאַך איז אַז קסס איז שיין ברייט, אַזוי שאַנסן זענען אויב עס איז עפּעס איר ווילן צו טאָן - ין סיבה - קסס קענען מיסטאָמע טאָן עס. מיר רופן דעם מין פון סטילינג ינלינע סטילינג. די עלעמענט נוסח איז, גוט, אין שורה מיט די אָנהייב קוויטל. 

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

עס ס פיל גרינגער צו זען מיט אַ בייַשפּיל, אַזוי לאָזן ס אָנהייבן דורך שאפן אַ פּשוט קסס הערשן. ערשטער, לאָזן ס שטעלן נוסח טאַגס אין די קאָפּ אָפּטיילונג פון אונדזער HTML. ווייַטער, די סעלעקטאָר. מיר וועט אָנהייבן אַוועק דורך ניצן איינער פון די סימפּלאַסט סעלעקטאָרס, די האַש סימבאָל, וואָס סאַלעקץ אַ HTML עלעמענט דורך זייַן שייַן אַטראַביוט. אין דעם פאַל מיר וועט אויסקלייַבן די דיוו אַז רעפּראַזענץ ראָב ס הקדמה דורך טייפּינג די האַש סימבאָל נאכגעגאנגען דורך די דיוו ס 'שייַן, באַגאַזלענען. איצט דער דעקלעריישאַנז. מיר לייגן עפענען און נאָענט ברייסאַז און יבעררוק אונדזער פריער ינלינע דעקלעריישאַנז אויף ראָב ס דיוו ין פון די ברייסאַז, דערפרישן, און, קיל, ראָב ס ינטראָו נאָך האט אַ שוואַרץ גרענעץ אַרום עס מינוס די מעסי ינלינע מיעסקייַט. 

איצט, וואָס אויב מיר געוואלט צו אויסקלייַבן דעם h1 ין פון ראָב ס ינטראָו? איר זאל טראַכטן, "זאל ס שטעלן אַ שייַן אויף אים און דעריבער מאַך אונדזער פריער סטיילז." וואָס אַרבעט, אָבער קסס האט אנדערע וועגן פון לעטינג איר אויסקלייַבן עלעמענטן דורך ניצן וואָס מיר רופן קאָמבינאַטאָרס צו מישן פּשוט סעלעקטאָרס. פֿאַר בייַשפּיל, אַ ווהיטעספּאַסע כאַראַקטער קענען זייַן געניצט ווי אַ קאָמבינאַטאָר צו ספּעציפיצירן אַלע ינסטאַנסיז פון 1 סעלעקטאָר וואָס לעבן ין פון אנדערן סעלעקטאָר. אַז סאָונדס אַ פּלאַץ מער קאָמפּליצירט ווי עס פאקטיש איז. דאָ ס אַ בייַשפּיל. מיר וועלן טיפּ # באַגאַזלענען, שטעלן אַ פּלאַץ, און נאָכפאָלגן עס מיט אַ h1, אן אנדער פּשוט סעלעקטאָר גערופן אַ קוויטל סעלעקטאָר אַז סאַלעקץ טייפּס פון עלעמענטן ווי דיווס אָדער פּאַראַגראַפס. דער אָרט קאַמביינז אונדזער 2 פּשוט סעלעקטאָרס, אַפּלייינג אַלע קסס דעקלעריישאַנז און די געגרייַזלט ברייסאַז צו h1 טאַגס אַז לעבן ין פון די עלעמענט מיט שייַן = "באַגאַזלענען". נאָר צו איבערצייגן איר אַז עס אַרבעט, איך וועט טוישן די שריפֿט פֿאַרב צו ווייַס, דערפרישן, און, קוק, ראָב ס 'כעדער איז איצט ווייַס. 

אַלע פון ​​דעם ווערק גייט צו ווייַזן אַז דורך ניצן כּללים אַנשטאָט פון ינלינע סטיילז מיר קענען באַקומען פיל קלינער קאָד. אין פאַקט, אויב דעם נוסח בלאָק סטאַרץ געטינג אַ קליין ביסל גרויס, איך קענען אַפֿילו ציען די סטיילז אויס אין אַ אַנדערש טעקע בעסאַכאַקל. 

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

אין פאַל איר ניטאָ וואַנדערינג, די פּשוט סעלעקטאָרס אַרייַננעמען שייַן סעלעקטאָרס און קוויטל סעלעקטאָרס ווי די אָנעס מיר נאָר געזען ווי ווויל ווי סאָרט סעלעקטאָרס פֿאַר סאַלעקטינג יסודות מיט אַ געוויסע סאָרט, אַטראַביוט סעלעקטאָרס פֿאַר סאַלעקטינג יסודות דורך אנדערע אַטראַביוץ ווי טיפּ = "ראַדיאָ" פֿאַר ראַדיאָ קנעפּל ינפּוץ, און פּסעודאָסעלעקטאָרס ווי האָווער און פאָקוס פֿאַר ספּעסאַפייינג סטילינג ווען ינעראַקשאַנז ווי מאָוסינג איבער אַן עלעמענט פאַלן. 

דער פּראָסט קאָמבינאַטאָרס אַרייַננעמען ווהיטעספּאַסע פֿאַר אַלע קינדער און קאָמעס צו ויסטיילן סעלעקטאָרס. אנדערע איר קען טרעפן אַרייַננעמען די פייַל פֿאַר דירעקט קינדער נאָר, די טילדע פֿאַר אַלע סיבלינגז וואָס פאַלן נאָך דעם עלעמענט, און די פּלוס צייכן פֿאַר דעם 1 סיבלינג וואָס קומט תיכף נאָך די עלעמענט. 

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

איך בין יוסף, און דאָס איז קס50. 

[CS50.TV] 

אַ, ווו טאָן איך אָנהייבן? לאָזן מיר טאָן אַז אָן - [לאַפס] אָוקיי. לייג אַ - זאל מיר טוישן וואָס ווערדינג. ו. אנטשולדיגט.