קסס סעלעקטאָרס. טייפּס פון סעלעקטאָרס

, יעדער פון וואָס איר ווילן צו שטעלן אַ ספּעציפיש קאָליר. ווי צו טאָן עס? נאָרמאַל קסס סעלעקטאָרס זענען ניט פּאַסיק פֿאַר טאַגס, זיי אָנווייַזן די פּאַראַמעטערס פֿאַר אַלע בלאַקס אין אַמאָל. די לייזונג איז פּשוט. באַשטימען קלאַס מיטגלידער. למשל, דער ערשטער באקומען div class = 'רויט', צווייט - קלאַס = 'בלוי', דריט - סאָרט = 'גרין'. איצט זיי קענען ווערן אויסגעקליבן ניצן קסס טישן.

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

וויכטיק! עס איז רעקאַמענדאַד צו נוצן מעאַנינגפול וואַלועס פון די סאָרט אַטריביוט. עס איז געהאלטן שלעכט פאָרעם צו נוצן טראַנסליטעראַטיאָן (למשל, קראַסיוויי-בלאָק) אָדער ראַנדאָם קאַמבאַניישאַנז פון אותיות / נומערן (אָדזשפה834871). אין דעם קאָד, איר זענען געבונדן צו באַקומען צעמישט, ניט צו דערמאָנען די שוועריקייטן וואָס וועט פּנים יענע וואס וועט זיין פאַרקנאַסט אין די פּרויעקט נאָך איר. דער בעסטער אָפּציע - צו נוצן קיין מעטאַדאַלאַדזשי, אַזאַ ווי Bem.

אַדוואַנטאַגעס - לעפיערעך הויך בייגיקייַט.

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

שייַן סעלעקטאָר

וועגן דעם ווערסיע מיינונג קאָדערס און פּראָוגראַמערז זענען אַמביגיואַס. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. עטלעכע קסס טוטאָריאַלז טאָן נישט רעקאָמענדירן די נוצן פון שייַן, ווייַל אין ומפּינקטלעך אַפּלאַקיישאַן זיי קענען אָנמאַכן פּראָבלעמס מיט ירושה. אָבער, פילע עקספּערץ זענען אַקטיוולי צולייגן זיי איבער די אויסלייג. איר באַשליסן. # »), затем имя блока. די סינטאַקס איז ווי גייט: די פונט צייכן ( "#"), דעמאָלט דער נאָמען פון די בלאָק. #red. לעמאָשל, #רעד.

отличается от класса по нескольким параметрам. שייַן איז אַנדערש פון די סאָרט אין עטלעכע וועגן. ID. ערשטער, דער חשבון קענען ניט זיין צוויי יידעניקאַל שייַן. זיי זענען אַסיינד אַ יינציק נאָמען. צווייטנס, אַזאַ אַ סעלעקטאָר האט אַ העכער בילכערקייַט. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. דעם מיטל אַז אויב איר ספּעציפיצירן אַ אַפּאַראַט קלאַס רויט און ספּעציפיצירן אין קסס טישן רויט הינטערגרונט פֿאַרב, און דעמאָלט באַשטימען צו עס די זעלבע שייַן בלוי און ספּעציפיצירן די קאָליר בלוי, די אַפּאַראַט וועט קער בלוי.

אַדוואַנטאַגעס - איר קענען קאָנטראָלירן די ספּעציפיש עלעמענט, יגנאָרינג סטיילז פון טאַגס און קלאסן.

ID и class. דיסאַדוואַנטידזשיז - גרינג צו באַקומען פאַרפאַלן אין אַ גרויס נומער פון שייַן און קלאַס.

וויכטיק! ID вам, в общем-то, не нужны. אויב איר זענען ניצן Bem מעטאַדאַלאַדזשי (אָדער זייַן אַנאַלאָגועס), שייַן צו איר, אין אַלגעמיין, זענען נישט דארף. דעם טעכניק ינוואַלווז די נוצן פון אויסלייג יינציק קלאסן אַז פיל מער באַקוועם.

וניווערסאַל סעלעקטאָר

{}. סינטאַקס: סטאַרלעץ צייכן ( "*") און ברייסאַז, דאס הייסט, {*} ...

געניצט צו באַשטימען זיכער אַטראַביוץ אַמאָל אַלע יסודות פון די בלאַט. ווען דעם קענען זיין נוצלעך? box-sizing: border-box. למשל, אויב איר ווילן צו שטעלן די בלאַט פאַרמאָג קעסטל-סייזינג: גרענעץ-קעסטל. div *{}. קענען ניט נאָר זיין געניצט צו פירן אַלע די קאַמפּאָונאַנץ פון דעם דאָקומענט, אָבער אויך צו קאָנטראָלירן אַלע די קינדער פון די ספּעסיפיעד בלאָק, למשל, div * {}.

אַדוואַנטאַגעס - איר קענען קאָנטראָלירן אַ גרויס נומער פון זאכן אין אַ צייַט.

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

דורך אַטראַביוץ

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

ינפּוט [טיפּ = 'טעקסט'] {}

דעם סעלעקטאָר וועט סעלעקטירן אַלע אַטראַביוץ מיט דעם טיפּ פון ינפּוט טעקסט.

די געצייַג איז גאַנץ Flexible און קענען זיין געוויינט מיט קיין פון די טאַגס, אין וואָס עס זאל זיין אַטראַביוץ. אבער אַז ס 'ניט אַלע! די קסס באַשרייַבונג האט די פיייקייַט צו קאָנטראָלירן די יסודות מיט אַפֿילו מער קאַנוויניאַנס!

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

ינפּוט [פּלאַסעהאָלדער = "קום דער נאָמען"] {} אָדער ינפּוט [פּלאַסעהאָלדער = "קום די פּאַראָל"]

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

[טיטל * = "קאַספּייסק"]

קסס וועט קלייַבן אַלע די זאכן אין דעם טיטל פון וואָס עס זענען סימבאָלס פון "קאַספּיאַן", דאס הייסט. י, און "קאַספּיאַן" און "קאַספּיאַן".

איר קענען אויך קלייַבן טאַגס אַז אָנהייבן מיט אַ זיכער כאַראַקטער אַטריביוץ:

[טיטל ^ = "כאַראַקטער איר ווילן"] {}

אָדער פאַרענדיקן זיי געזאגט:

[טיטל $ = "רעכט כאַראַקטער"] {}.

אַדוואַנטאַגעס - מאַקסימום בייגיקייַט. איר קענען קלייַבן קיין יגזיסטינג חשבון יסודות אָן מעסינג מיט די קלאסן.

דיסאַדוואַנטידזשיז - געניצט לעפיערעך ראַרעלי, נאָר אין ספּעציפיש קאַסעס. פילע וועב דיזיינערז בעסער צו מעטאַדאַלאַדזשי, זינט די פונט קלאַס איז גרינגער ווי צו צולייגן סך קוואַדראַט בראַקאַץ און וואונדער "גלייַך". אין דערצו, די סעלעקטאָרס טאָן ניט אַרבעט אין Internet Explorer ווערסיעס 7 און ווייטער. אָבער, וואס זענען איצט דאַרפֿן די אַלט Internet Explorer?

פּסעוודאָ-קלאַס סעלעקטאָרס

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

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

.בטן: האָווער {

הינטערגרונט-קאָליר: רויט;

}

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

מעלות - זענען וויידלי געניצט פֿאַר די "ופלעב" פון בלעטער. גרינג צו נוצן.

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

פּסעוודאָ-סעלעקטאָרס

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

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

אַדוואַנטאַגעס - צושטעלן די בייגיקייַט צו קאַסטאַמייז די קוק פון די בלאַט.

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

צו סאַמערייז

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