01 פון 10
שאַפֿן דעם קסס סטייל שיט
דער זעלביקער וועג מיר באשאפן אַ באַזונדער טעקסט טעקע פֿאַר די HTML, איר וועט שאַפֿן אַ טעקסט טעקע פֿאַר די קסס. אויב איר דאַרפֿן וויזשאַוואַלז פֿאַר דעם פּראָצעס ביטע זען די ערשטער טוטאָריאַל. דאָ זענען די טריט צו שאַפֿן דיין CSS נוסח בלאַט אין נאָטעפּאַד:
- קלייַבן טעקע> New אין נאָטעפּאַד צו באַקומען אַ ליידיק פֿענצטער
- היט דעם פייל ווי CSS דורך געבן אַ קליק בילד
- אַרייַן די my_website folder אויף דיין שווער פאָר
- טוישן די "היט ווי טיפּ:" צו "כל פילעס"
- נאָמען דיין טעקע "סטיילז.css" (לאָזן אַוועק די קוואָטעס) און גיט היט
02 פון 10
לינק די קסס סטייל שיט צו דיין HTML
אַמאָל איר האָבן אַ נוסח בויגן פֿאַר דיין וועבזייטל, איר וועט דאַרפֿן צו אַסאָוסיייץ עס צו די וועב בלאַט זיך. צו טאָן דעם איר נוצן די לינק קוויטל. שטעלן די ווייַטערדיק לינק קוויטל אין דער <קאָפּ> טאַגס פון דיין פּעץ.הטם דאָקומענט:
<לינק הרעף = "styles.css" רעל = "סטילעשעעט" טיפּ = "טעקסט / קסס">
03 פון 10
פאַרריכטן די זייַט מאַרגינס
ווען איר שרייַבן קסהטמל פֿאַר פאַרשידענע בראַוזערז, איין זאַך איר וועט לערנען איז אַז זיי אַלע ויסקומען צו האָבן פאַרשידענע מאַרדזשאַנז און כּללים פֿאַר ווי זיי ווייַזן זאכן. דער בעסטער וועג צו זיין זיכער אַז דיין פּלאַץ קוקט די זעלבע אין רובֿ בראַוזערז איז נישט צו לאָזן זאכן ווי מאַרדזשאַנז צו פעליקייַט בראַוזערז.
איך בעסער צו אָנהייבן מיין בלעטער אין דער אויבערשטער לינקס ווינקל, מיט קיין עקסטרע וואַטן אָדער גרענעץ אַרום די טעקסט. אפילו אויב איך בין צו בלאָק די אינהאַלט, איך שטעלן די מאַרדזשאַנז צו נול אַזוי אַז איך בין סטאַרטינג מיט די זעלבע ליידיק שיווערשטיין. צו טאָן דעם, לייגן די ווייַטערדיקע צו דיין סטיילז.css דאָקומענט:
html, body {
גרענעץ: 0 פּקס;
padding: 0px;
border: 0px;
לינקס: 0 פּקס;
שפּיץ: 0 פּקס;
}
04 פון 10
טשאַנגינג די פאָנט אויף די זייַט
די שריפֿט איז אָפט דער ערשטער זאַך וואָס איר ווילן צו טוישן אויף אַ וועב בלאַט. די פעליקייַט שריפֿט אויף אַ וועב בלאַט קענען זיין מיעס, און איז פאקטיש אַרויף די וועב בלעטערער זיך, אַזוי אויב איר טאָן ניט דעפינירן די שריפֿט, איר טאַקע וועט נישט וויסן וואָס דיין בלאַט וועט קוקן ווי.
טיפּיקאַללי, איר וואָלט טוישן די שריפֿט אויף פּאַראַגראַפס, אָדער מאל אויף די גאנצע דאָקומענט זיך. פֿאַר דעם פּלאַץ מיר וועט דעפינירן דעם שריפֿט בייַ די כעדער און פּאַראַגראַף גלייַך. לייג די ווייַטערדיקע צו דיין סטיילז.css דאָקומענט:
p, li {
שריפֿט: 1 אַריאַל, Helvetica, sans-serif;
}
h1 {
שריפֿט: 2 אַריאַל, Helvetica, sans-serif;
}
h2 {
שריפֿט: 1.5 אַריאַל, Helvetica, sans-serif;
}
h3 {
שריפֿט: 1.25עם אַריאַל, העלוויטי, סענס-סעריף;
}
איך אנגעהויבן מיט 1 עם ווי מיין באַזע גרייס פֿאַר פּאַראַגראַפס און רשימה זאכן, און דעמאָלט געוויינט אַז צו שטעלן די גרייס פֿאַר מיין כעדליינז. איך טאָן ניט דערוואַרטן צו נוצן אַ כעזשבן דיפּער ווי ה 4, אָבער אויב איר פּלאַן איר וועט וועלן צו סטיל עס אויך.
05 פון 10
מאַכן דיין לינקס מער אינטערעסאנט
די פעליקייַט פארבן פֿאַר לינקס זענען בלוי און לילאַ פֿאַר אַנוויסיטיד און באזוכט לינקס ריספּעקטיוולי. בשעת דעם איז נאָרמאַל, עס קען נישט פּאַסיק די פֿאַרב סכעמע פון דיין בלעטער, אַזוי לאָזן אונדז טוישן. אין דיין styles.css טעקע, לייג די פאלגענדע:
אַ: לינק {
שריפֿט-משפּחה: אַריאַל, העלוועטיקאַ, סענס-סעריף;
קאָליר: # פפ 9900;
טעקסט-באַפּוצונג: אַנדערליין;
}
אַ: באזוכט {
קאָליר: # פפקק 66;
}
a: hover {
הינטערגרונט: # פפפקקק;
שריפֿט-ווייט: דרייסט;
}
איך שטעלן זיך דרייַ לינקס סטיילז, די אַ: לינק ווי די פעליקייַט, אַ: באזוכט פֿאַר ווען עס איז געווען באזוכט, איך טוישן די קאָליר, און אַ: האָווער. מיט אַ: האָווער איך האָבן די לינק באַקומען אַ הינטערגרונט פֿאַרב און גיין דרייסט צו ונטערשטרייַכן עס איז אַ לינק צו זיין קליקט.
06 פון 10
סטילינג די נאַוויגאַציע אָפּטיילונג
זינט מיר שטעלן די נאַוויגאַציע (שייַן = "נאַוו") אָפּטיילונג ערשטער אין די HTML, לאָזן 'ס סטיל עס ערשטער. מיר דאַרפֿן צו אָנווייַזן ווי ברייט עס זאָל זיין און לייגן אַ מער גרענעץ אויף די רעכט זייַט אַזוי אַז דער הויפּט טעקסט וועט נישט באַמפּ זיך קעגן אים. איך אויך לייגן אַ גרענעץ אַרום אים.
לייג די ווייַטערדיק CSS צו דיין סטיילז.css דאָקומענט:
#nav {
ברייט: 225 פּקס;
גרענעץ-רעכט: 15 פּקס;
border: medium solid # 000000;
}
#nav li {
רשימה-סטיל: קיין;
}
.footer {
שריפֿט-גרייס: .75em;
קלאָר: ביידע;
ברייט: 100%;
טעקסט-אַריין: צענטער;
}
דער רשימה-נוסח פאַרמאָג שטעלט אַרויף די רשימה ין דער נאַוויגאַציע אָפּטיילונג צו האָבן קיין בולאַץ אָדער נומערן, און די. פאָוטאָוער סטיילז די דרוקרעכט אָפּטיילונג צו זיין קלענערער און סענטערד ין דער אָפּטיילונג.
07 פון 10
פּונקט די הויפּט אָפּטיילונג
דורך פּאַזישאַנינג דיין הויפּט אָפּטיילונג מיט אַבסאָלוט פּאַזישאַנינג איר קענען זיין זיכער אַז עס וועט בלייַבן פּונקט ווו איר ווילט צו בלייַבן אויף דיין וועב בלאַט. איך געמאכט מייַן 800 פּקס ברייט צו אַקאַמאַדייט גרעסערע מאָניטאָרס, אָבער אויב איר האָבן אַ קלענערער מאָניטאָר, איר זאל וועלן צו מאַכן אַז נעענטער.
אָרט די פאלגענדע אין דיין styles.css דאָקומענט:
#main {
ברייט: 800 פּקס;
שפּיץ: 0 פּקס;
שטעלע: אַבסאָלוט;
לינקס: 250 פּקס;
}
08 פון 10
סטילינג דיין פּאַראַגראַפס
זינט איך'ווע שוין שטעלן די פּאַראַגראַף שריפֿט אויבן, איך געוואלט צו געבן יעדער פּאַראַגראַף אַ ביסל עקסטרע "קאָפּע" צו מאַכן עס שטיין אויס בעסער. איך טאָן דאָס דורך פּאַטינג אַ גרענעץ אויף די שפּיץ אַז כיילייטיד די פּאַראַגראַף מער ווי בלויז די בילד אַליין.
אָרט די פאלגענדע אין דיין styles.css דאָקומענט:
.topline {
ברעג-שפּיץ: דיק האַרט # פפקק 00;
}
איך באַשלאָסן צו טאָן עס ווי אַ קלאַס גערופן "טאָפּלינע" אלא ווי נאָר דיפיינינג אַלע פּאַראַגראַפס אין אַז וועג. דעם וועג, אויב איך באַשליסן איך ווילן אַ פּאַראַגראַף אָן אַ שפּיץ געל שורה, איך קענען פשוט לאָזן אַוועק די קלאַס = "טאָפּלינע" אין די פּאַראַגראַף עטיקעט און עס וועט נישט האָבן די שפּיץ גרענעץ.
09 פון 10
סטילינג די בילדער
בילדער טיפּיקלי האָבן אַ גרענעץ אַרום זיי, דאָס איז ניט שטענדיק קענטיק סייַדן די בילד איז אַ לינק, אָבער איך ווי צו האָבן אַ קלאַס אין מיין קסס סטילעשעעט וואָס טורנס אַוועק די גרענעץ אויטאָמאַטיש. פֿאַר דעם סטיילז, איך באשאפן די "נאָודערדער" קלאַס, און רובֿ פון די בילדער אין דעם דאָקומענט זענען טייל פון דעם קלאַס.
די אנדערע ספּעציעל טייל פון די בילדער איז זייער אָרט אויף דעם בלאַט. איך געוואלט זיי צו זיין אַ טייל פון די פּאַראַגראַף זיי זענען אין אָן ניצן טישן צו ייַנרייען זיי. די סימפּלאַסט וועג צו טאָן דאָס איז צו נוצן די פלאָוט קסס פאַרמאָג.
אָרט די פאלגענדע אין דיין styles.css דאָקומענט:
img img {
פלאָוט: לינקס;
גרענעץ-רעכט: 5 פּקס;
גרענעץ-דנאָ: 15 פּקס;
}
.נאָבאָרדער {
border: 0px none;
}
ווי איר קענען זען, עס זענען אויך גרענעץ פּראַפּערטיז שטעלן אויף די בילדער, צו מאַכן זיכער אַז זיי זענען נישט סמאַשעד קעגן די פלאָוטאַד טעקסט וואָס איז בייַ זיי אין די פּאַראַגראַפס.
10 of 10
איצט אָנקוקן דיין קאָמפּלעטיד Page
אַמאָל איר האָבן געראטעוועט דיין קסס איר קענען רילאָוד די פּעץ.הטם בלאַט אין דיין וועב בלעטערער. דיין בלאַט זאָל קוקן ענלעך צו די איינער געוויזן אין דעם בילד, מיט בילדער אויסגעמעקט און די נאַוויגאַציע איז ריכטיק אויף די לינקס זייַט פון די בלאַט.
גיי די זעלבע טריט פֿאַר אַלע פון דיין ינערלעך בלעטער פֿאַר דעם פּלאַץ. איר ווילן צו האָבן איין בלאַט פֿאַר יעדער בלאַט אין דיין נאַוויגאַציע.