פּרעפּראָסעססאָר קסס: איבערבליק, סעלעקציע, אַפּלאַקיישאַן

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

ווי האט קסס פּרעפּראָסעססאָר

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

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

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

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

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

קסס פֿאַר בעגיננערס: פּרעפּראָסעססאָר פֿעיִקייטן

זיי האָבן עטלעכע פֿעיִקייטן:

• פאַרייניקן בלעטערער פּרעפיקסעס און קאַקי;

• פאַרפּאָשעטערן סינטאַקס;

• געבן די געלעגנהייט צו אַרבעטן מיט נעסטעד סעלעקטאָרס אָן ערראָרס;

• פֿאַרבעסערן לאָגיק סטילינג.

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

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

פאָלקס פּרעפּראָסעססאָרס קסס. סאַס

דיזיינד אין 2007. אָריגינאַללי אַ קאָמפּאָנענט האַמל - אַ טעמפּלאַטע HTML. New פֿעיִקייטן פֿאַר קסס יסודות קאָנטראָל רעלישט דעוועלאָפּערס אויף די רובי אויף ראַילס, וואָס אנגעהויבן צו פאַרשפּרייטן עס אומעטום. די סאַס אַ ריזיק נומער פון פֿעיִקייטן וואס זענען איצט ינקלודעד אין קיין פּרעפּראָסעססאָר: וועריאַבאַלז, עמבעדדינג פון סעלעקטאָרס, האַגפיש (דעמאָלט, אָבער, די טענות קענען ניט זיין מוסיף).

דיקלערינג וועריאַבאַלז אין סאַס

וואַריאַבלעס דערקלערט מיט די $ צייכן. זיי קענען טייַנען זייער פּראָפּערטיעס און שטעלט, למשל: "$ באָרדערסאָליד: 1פּקס האַרט רויט;". אין דעם בייַשפּיל, מיר דערקלערט אַ בייַטעוודיק גערופֿן באָרדערסאָליד און געראטעוועט עס ווערט 1פּקס האַרט רויט. איצט, אויב אין די קסס מיר דאַרפֿן צו שאַפֿן אַ רויט גרענעץ ברייט פון 1פּקס, נאָר ינדיקייץ אַז בייַטעוודיק נאָך די פאַרמאָג נאָמען. נאָך די מעלדן פון די וועריאַבאַלז קענען ניט זיין געביטן. עס זענען עטלעכע געבויט-אין פֿעיִקייטן. לעמאָשל, דערקלערן אַ בייַטעוודיק מיט אַ ווערט פון $ רעדקאָלאָר # פפ5050. איצט, אין דער קסס קאָד אין די פּראָפּערטיעס פון קיין עלעמענט, נוצן עס צו שטעלן די שריפֿט קאָליר: פּ {קאָליר: $ רעדקאָלאָר; }. צי איר ווילן צו עקספּערימענט מיט די קאָליר? נוצן פֿונקציע דאַרקאַן אָדער לייטאַן. דעם איז געשען אַזוי: פּ {קאָליר: דאַרקאַן ($ רעדקאָלאָר, 20%); }. ווי אַ רעזולטאַט, די קאָליר רעדקאָלאָר וועט זיין 20% לייטער.

די סאַס פילע געבויט-אין פֿעיִקייטן. ווערט לפּחות לייענען זיי, אָבער בעסער - צו לערנען.

נעסטינג

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

div {

קאָליר: רויט;

}

div פּ {

קאָליר: געל;

}

div פּ שפּאַן {

קאָליר: ראָזעווע;

}

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

div {

קאָליר: רויט;

פּ {

קאָליר: געל;

.ספּאַן {

קאָליר: ראָזעווע;

}

}

}

עלעמענץ ממש "ינוועסטאַד" איינער דעם אנדערן.

פּרעפּראָסעססאָר דיירעקטיווז

ניצן @ימפּאָרט דיירעקטיווז קענען אַרייַנפיר טעקעס. לעמאָשל, מיר האָבן פאָנצ.סאַסס טעקע אַז דערקלערט די סטיילז פֿאַר Fonts. פאַרבינדן עס צו די הויפּט טעקע סטילע.סאַסס: @ימפּאָרט 'סמלים'. געטאן! אַנשטאָט פון אַ איין גרויס טעקע מיט די סטיילז מיר האָבן אַ ביסל אַז קענען ווערן געניצט פֿאַר שנעל און גרינג צוטריט צו די required פּראַפּערטיז.

האַגפיש

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

@מיקסין לאַרגעפאָנט {

שריפֿט-משפּחה: 'Times ניו רוימער';

שריפֿט-גרייס: 64פּקס;

שורה-הייך: 80פּקס;

שריפֿט-וואָג: דרייסט;

}

האַגפיש צו צולייגן צו די עלעמענט אויף דעם בלאַט, נוצן די דירעקטיוו @ינקלודע. לעמאָשל, מיר ווילן צו צולייגן עס צו די ה 1 כעדער. מיר האָבן די ווייַטערדיק סטרוקטור: ה 1 {@ינקלודע: לאַרגעפאָנט; }

אַלע די פּראָפּערטיעס פון האַגפיש זענען אַסיינד אַ ה 1 עלעמענט.

פּרעפּראָסעססאָר ווייניקער

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

די וועריאַבאַלז זענען דערקלערט ניצן די @ סימבאָל. למשל: @פאָנציזע: 14פּקס;. נעסטינג אַרבעט אויף דער זעלביקער פּרינסאַפּאַלז ווי אין סאַס. האַגפיש זענען מודיע ווי גייט: .לאַרגעפאָנט () {שריפֿט-משפּחה: 'Times ניו רוימער'; שריפֿט-גרייס: 64פּקס; שורה-הייך: 80פּקס; שריפֿט-וואָג: דרייסט; }. צו פאַרבינדן עס איז ניט נייטיק צו נוצן פּרעפּראָסעססאָר דיירעקטיווז - נאָר לייגן די ניי Created האַגפיש אין די פּראָפּערטיעס פון די אויסגעקליבן עלעמענט. למשל: ה 1 {.לאַרגעפאָנט; }.

סטילוס

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

וואַריאַבלעס קענען זיין דערקלערט אין צוויי וועגן - אָדער בפֿירוש אָדער ימפּליסאַטלי. למשל: שריפֿט = 'Times ניו רוימער'; - אַ ימפּליסאַט אָפּציע. אָבער $ שריפֿט = 'Times ניו רוימער' - קלאָר. האַגפיש זענען דערקלערט און ימפּליסאַטלי קאָננעקטעד. די סינטאַקס איז ווי גייט: רעדקאָלאָר () קאָליר רויט. איצט מיר קענען לייגן די נומער, למשל: ה 1 רעדקאָלאָר ();.

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

וואָס פּרעפּראָסעססאָר קלייַבן?

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

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

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