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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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