ווי צו באַזייַטיקן Default Browser Styling מיט אַ האר סטילעסשעעט

באַקומען די פאקטן מיט די עצות

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

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

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

גלאבאלע דיפאָלץ

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

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

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

body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

קאָפּע פאָרמאַטטינג

כעדליינז אָדער קאָפּטער טאַגס (ה 1, ה 2, ה 3, אאז"ו ו) טיפּיקלי פעליק צו דרייסט טעקסט מיט גרויס מאַרדזשאַנז אָדער וואַטן אַרום זיי. דורך די ווייינג פון די וואָג, מאַרדזשאַנז און וואַטן, איר ענשור אַז די טאַגס נאָך בלייַבן גרעסערער (אָדער קלענערער) ווי די טעקסט אַרום זיי אָן בעת ​​עקסטרע סטיילז:

h1, h2, h3, h4, h5, h6 {margin: 0; וואַטן: 0; שריפֿט-וואָג: נאָרמאַל; שריפֿט-משפּחה: אַריאַל, העלוועטיקאַ, סענס-סעריף; }

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

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

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

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; וואַטן: 0; שריפֿט: נאָרמאַל נאָרמאַל נאָרמאַל 1עם / 1.25 אַריאַל, העלוועטיקאַ, סענס-סעריף; }

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

blockquote {margin: 1.25em; וואַטן: 1.25 עם} ק {שריפֿט-נוסח: ייטאַלטער; } אַקראָנים, אַבבר {לויפֿער: הילף; border-bottom: 1px dashed; }

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

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

אַ, אַ: לינק, אַ: וויזיטיד, אַ: אַקטיוו, אַ: האָווער {טעקסט-באַפּוצונג: אַנדערליין; }

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

img {border: none; }

טישן

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

טיש {גראַד: 0; וואַטן: 0; גרענעץ: קיין; }

Forms

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

פאָרעם {גרענעץ: 0; וואַטן: 0; ווייַז: ינלינע; }

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

פירמע {לויפֿער: טייַטל; }

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

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

.קלעאַר {קלאָר: ביידע; }. פלאָאַטלופט {פלאָוט: לינקס; }. פלאָאַטריגהט {פלאָוט: רעכט; }. טעקסטלייַט {טעקסט-ייַנרייען: לינקס; }. טעקסטוויקק {טעקסט-ייַנרייען: רעכט; } .textCenter {text-align: center; }. טעקסטדזשוסטיפי {טעקסט-ייַנרייען: גערעכטפארטיקט; } .blockCenter {display: block; גרענעץ-לינקס: אַוטאָ; גרענעץ-רעכט: אַוטאָ; } / * געדענקט צו שטעלן ברייט * / .באָלד {שריפֿט-ווייט: דרייסט; } .יטאַליק {שריפֿט-סטיל: italic; } .underline {text-decoration: underline; } .ניטאַנט {margin-left: 0; padding-left: 0; }. נאָמאַרגין {ריזיקירן: 0; } .נאָפּאַדדינג {padding: 0; } .nobullet {list-style: none; רשימה-נוסח-בילד: קיין; }

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

די גאַנץ האר סטילעסשעאַט

/ * גלאבאלע דעפאַולץ * / HTML, גוף {גראַד: 0 פּקס; padding: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * כעדליינז * / ה 1, ה 2, ה 3, ה 4, ה 5, ה 6 {גרענעץ: 0; וואַטן: 0; שריפֿט-וואָג: נאָרמאַל; שריפֿט-משפּחה: אַריאַל, העלוועטיקאַ, סענס-סעריף; } / * טעקסט סטיילז * / פּ, טה, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; וואַטן: 0; שריפֿט: נאָרמאַל נאָרמאַל נאָרמאַל 1עם / 1.25 אַריאַל, העלוועטיקאַ, סענס-סעריף; } blockquote {margin: 1.25em; וואַטן: 1.25 עם} ק {שריפֿט-נוסח: ייטאַלטער; } אַקראָנים, אַבבר {לויפֿער: הילף; border-bottom: 1px dashed; } קליין {font-size: .85em; } big {font-size: 1.2em; } / * לינקס און בילדער * / אַ, אַ: לינק, אַ: באזוכט, אַ: אַקטיוו, אַ: האָווער {טעקסט-באַפּוצונג: אַנדערליין; } img {border: none; } / * טאַבלעס * / טיש {גרענעץ: 0; וואַטן: 0; גרענעץ: קיין; } / * פאָרמס * / פאָרעם (גרענעץ: 0; וואַטן: 0; ווייַז: ינלינע; } label {לויפֿער: טייַטל; } / * פּראָסט קלאַססעס * / .קלעאַר {קלאָר: ביידע; }. פלאָאַטלופט {פלאָוט: לינקס; }. פלאָאַטריגהט {פלאָוט: רעכט; }. טעקסטלייַט {טעקסט-ייַנרייען: לינקס; }. טעקסטוויקק {טעקסט-ייַנרייען: רעכט; } .textCenter {text-align: center; }. טעקסטדזשוסטיפי {טעקסט-ייַנרייען: גערעכטפארטיקט; } .blockCenter {display: block; גרענעץ-לינקס: אַוטאָ; גרענעץ-רעכט: אַוטאָ; } / * געדענקט צו שטעלן ברייט * / .באָלד {שריפֿט-ווייט: דרייסט; } .יטאַליק {שריפֿט-סטיל: italic; } .underline {text-decoration: underline; } .ניטאַנט {margin-left: 0; padding-left: 0; }. נאָמאַרגין {ריזיקירן: 0; } .נאָפּאַדדינג {padding: 0; } .nobullet {list-style: none; רשימה-נוסח-בילד: קיין; }

אָריגינעל אַרטיקל דורך דזשענניפער קרינן. Edited by Jeremy Girard on 10/6/17