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

אַ איבערבליק פון קאַסקאַדינג סטייל שיץ מיט סאַמפּלע סטייל שיט

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

CSS און די טשאַראַקטער באַשטעטיקט

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

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

@charset "UTF-8";

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

סטילינג די Page גוף

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

html, body {margin: 0px; padding: 0px; border: 0px; }

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

HTML, גוף {color: # 000; background: #fff; }

Default Font Styles

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

html, body, p, th, td, li, dd, dt {שריפֿט: 1em Arial, Helvetica, sans-serif; }

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

Headlines

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

h1, h2, h3, h4, h5, h6 {שריפֿט-משפּחה: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {שריפֿט-גרייס: 0.8em; }

טאָן ניט פאַרגעסן די לינקס

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

צו שטעלן די לינקס אין שיידז פון בלוי, שטעלן:

• לינקס ווי בלוי
• באזוכט לינקס ווי טונקל בלוי
• האָווער לינקס ווי ליכט בלוי
• אַקטיוו לינקס ווי אַפֿילו פּאַלער בלוי

ווי געוויזן אין דעם בייַשפּיל:

אַ: לינק {קאָליר: # 00ף; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } דורך סטילינג די לינקס מיט אַ פערלי ינאַקיואַס קאָליר סכעמע עס ינשורז אַז איך וועל נישט פאַרגעסן קיין פון די קלאסן, און אויך מאכט זיי אַ ביסל ווייניקער הויך ווי די פעליקייַט בלוי, רויט, און לילאַ.

גאַנץ סטייל בלאַט

דאָ איז די פול נוסח בויגן:

@charset "UTF-8"; html, body {margin: 0px; padding: 0px; border: 0px; קאָליר: # 000; background: #fff; } html, body, p, th, td, li, dd, dt {שריפֿט: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {שריפֿט-משפּחה: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {שריפֿט-גרייס: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; }