CSS ערשט קאַפּס

לערנען ווי צו שאַפֿן פאַנטאַזיע ערשט קאַפּס ניצן קסס און בילדער

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

גרונט סטיילז פון ערשט קאַפּס

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

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

שאַפֿן אַ פּשוט ערשט קאַפּ

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

p: first-letter {font-size: 3em; }

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

p: first-letter {font-size: 3em; } פּ: first-line {line-height: 1em; }

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

שפּיל מיט דיין ערשט קאַפּ

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

פּ: ערשטער-בריוו {שריפֿט-גרייס: 300%; background-color: # 000; color: #fff; } פּ: first-line {line-height: 100%; }

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

פּ: ערשטער-בריוו {שריפֿט-גרייס: 300%; background-color: # 000; color: #fff; } פּ: first-line {line-height: 100%; } פּ {טעקסט-ינדענט: 45% ; }

אַדזשאַסענט ערשט קאַפּס זענען שווער מיט קסס

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

פּ {טעקסט-ינדענט: -2.5em; גרענעץ-לינק: 3 עם; } פּ: ערשטער-בריוו {שריפֿט-גרייס: 3 עם; } פּ: first-line {line-height: 100%; }

Getting Really Fancy Initial Caps

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

p: first-letter {font-size: 3em; שריפֿט-משפּחה: "עדוואַרדיאַן סקריפּט יטק", "ברוש סקריפּט מט", קורץ; } פּ: first-line {line-height: 100%; }

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

ניצן אַ גראַפיקאַל ערשט קאַפּ

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

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

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

איר דאַרפֿן צו נוצן די בילד ברייט און הייך צו שטעלן די פּאַראַגראַפס טעקסט-ינדענט און וואַטן-שפּיץ. פֿאַר מיין ל בילד, איך דאַרפֿן 95 פּקס ינדענט און 72 פּקס וואַטן.

p.capL {line-height: 1em; הינטערגרונט-בילד: URL (קאַפּל.גיף); הינטערגרונט-איבערחזרן: קיין-איבערחזרן; טעקסט-ינדענט: 95 פּקס; padding-top: 72px; }

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

span.initial {ווייַז: גאָרניט; }

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