ניצן סטייל קלאַססעס און ידס

קלאַססעס און ידס הילף עקסטענדעד דיין קסס

בנין וועבסיטעס אויף הייַנט ס וועב ריקווייערז אַ טיף פארשטאנד פון קסס (קאַסקאַדינג סטייל שיץ). דאס זענען די ינסטראַקשאַנז אַז איר געבן אַ וועבזייַטל צו באַשליסן ווי עס וועט אויסלייג אין די בלעטערער פֿענצטער. איר שטעלן אַ סעריע פון ​​"סטיילז" צו דיין HTML דאָקומענט וואָס וועט מאַכן די קוק און פילן פון דיין וועבפּאַגע.

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

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

קלאַס סעלעקטאָרס

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

p {קאָליר: # 0000ff; }
p.alert {color: # ff0000; }

די סטיילז וואָלט באַשטימען די קאָליר פון אַלע פּאַראַגראַפס צו בלוי (# 0000ff), אָבער קיין פּאַראַגראַף מיט אַ קלאַס אַטריביוט פון "פלינק" וואָלט אַנשטאָט דורך סטילעד אין רויט (# פפ0000). דאָס איז ווייַל דער קלאַס אַטריביוט האט אַ העכער ספּעסאַפיסאַטי ווי דער ערשטער קסס הערשן, וואָס בלויז ניצט אַ קוויטל סעלעקטאָר.

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

דאָ איז ווי דאָס קען זיין געוויינט אין עטלעכע HTML מאַרקאַפּ:

דעם פּאַראַגראַף וועט זיין געוויזן אין בלוי, וואָס איז די פעליקייַט פֿאַר די בלאַט.

דעם פּאַראַגראַף וואָלט אויך זייַן אין בלוי.

<פּ קלאַס = "פלינק">
און דעם פּאַראַגראַף וואָלט זיין געוויזן אין רויט זינט די קלאַס אַטריביוט וואָלט יבערשיקן די נאָרמאַל בלוי קאָליר פון די עלעמענט סעלעקטאָר סטילינג.

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

.אַלערט {background-color: # ff0000;}

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

<פּ קלאַס = "פלינק">
דעם פּאַראַגראַף וואָלט זיין געשריבן אין רויט.

און דעם ה 2 וואָלט אויך זייַן רויט

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

ID סעלעקטאָרס

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

איר קען געבן דעם אָפּטייל אַ שייַן אַטריביוט פון "געשעעניש", און דעמאָלט אויב איר געוואלט צו אַוטליין אַז די טייל מיט אַ 1-פּיקסעל ברייט שוואַרץ ברעג איר שרייַבן אַ שייַן קאָד ווי:

#event {border: 1px solid # 000; }

די אַרויסרופן מיט ID סעלעקטאָרס איז אַז זיי קענען נישט זיין ריפּיטיד אין אַ HTML דאָקומענט. זיי מוזן זיין יינציק (איר קענען נוצן די זעלבע שייַן אויף קייפל בלעטער פון דיין פּלאַץ, אָבער נאָר אַמאָל אין יעדער יחיד HTML דאָקומענט). אַזוי אויב איר האָט 3 געשעענישן אַז אַלע דאַרפֿן דעם גרענעץ, איר דאַרפֿן צו געבן זיי אַטריביוץ פון "געשעעניש 1", "געשעעניש 2" און "געשעעניש 3" און סטיל יעדער פון זיי. עס וואָלט, דעריבער, זיין פיל גרינגער צו נוצן די אַפאָרמענשאַנד קלאַס אַטריביוט פון "געשעעניש" און סטיל זיי אַלע אין אַמאָל.

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

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

איר וואָלט פשוט לייגן דעם ווערט פון דעם אַטריביוט, פּריזאַדיד דורך די # סימבאָל, צו די הרעף אַטריביוט פון דעם לינק, ווי דאָס:

דאָס איז דער לינק

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