CSS жана Images колдонуу Fancy Баштапкы капкактары кантип түзүү тууралуу билүү
Кантип колдонуу керектигин билүү CSS түзүү үчүн кооз сиздин пункттарында үчүн баштапкы жана капкактарды. биринчи капкак үчүн жуурулушуу сүрөттү колдонуу үчүн жөнөкөй сүрөт алмаштыруу ыкмасы да бар.
Баштапкы капкактары негизги стилдери
документтердеги баштапкы чечпей үч негизги стилдери бар:
- көтөрүлгөн - биринчи катында учурдагы текст катары ири жана ошол эле сапта жерде таралган.
- таштап - биринчи катын көп жерде, ошондой эле таралган жана тексттин биринчи чегинен төмөн түшүп кетти. төмөнкү текст анда айланасында сүзүп.
- чектеш - биринчи каты тексттин калган жанында бир катарга жерде. Бул сайт дизайны караганда басма көп таралган.
Баштапкы баш же тамчы баш абдан жакшы билишет. Алар текстти, эгерде узун жана кызыксыз өгүзгө кооздоо бир жолу болуп саналат. Ал эми CSS мүлк менен: биринчи катында, сиз оной эле биринчи кат Fancier үчүн кантип аныктоого болот.
бир Simple Баштапкы капкак түзүү
Эгер жөнөкөй көтөргөн алгачкы шапкесин түзүү үчүн эмне кылуу керек баары биринчи каты жасалма-элементи менен өлчөмү ири сиздин пунктунун биринчи катын болуп саналат:
б: биринчи каты {арип өлчөмү: 3em; }Бирок, көптөгөн серепчилер биринчи каты саптагы текстти башка көп экенин көрүп, алар алып келген бул биринчи катында эмес, сызыктын калганы үчүн мааниси кандай барабар болот. Бактыга жараша, бул биринчи катардагы жасалма элементи жана сызык бийиктиги мүлк менен чечүү мүмкүн эмес:
б: биринчи каты {арип өлчөмү: 3em; } Б: биринчи катардагы {сызык бийиктиги: 1em; }Сиз тексттин өлчөмү таба чейин документтин ичинде сызык бийиктиги менен ойнойт.
Сиздин баштапкы капкак менен ойнойт
Сиз баштапкы шапкесин түзүү кантип түшүнүп, аны өзгөчө кылууну Кымбат баалуу кийим аны кийинип алышат. түс, негизги түс, чек менен ойноп, же эмне үчүн оюнан этет. Бир кыйла жөнөкөй стили биринчи катында үчүн арип жана негизги түс түстөрүн өзгөртүүгө болот:
б: биринчи каты {арип өлчөмү: 300%; маалымат-түсү: # 000; түс: #fff; } Б: биринчи катардагы {сызык бийиктиги: 100%; }Дагы бир ыкма биринчи сызыгын бурабыз болуп саналат. Бул сиздин жайгашуу ийкемдүү болсо, анда тексттик сызыктын орто ар түрдүү болушу мүмкүн, CSS менен татаал болушу мүмкүн. Бирок, кээ бир баалуулуктарга менен ойноп менен, сиз биринчи сызыгын биринчи каты ортосунда болуп көрүнгөн үчүн жетиштүү аралыгы болот. Эле туура окшойт чейин пункттун тексти-калтыруу боюнча пайыз менен ойнойт:
б: биринчи каты {арип өлчөмү: 300%; маалымат-түсү: # 000; түс: #fff; } Б: биринчи катардагы {сызык бийиктиги: 100%; } Б {текст кемтиги: 45%; }Чектеш Баштапкы капкактары CSS менен Hard бар
ар түрдүү серепчилер ариптерин өзгөрүүлөр, анткени чектеш баштапкы тамгалар CSS менен кыйын болушу мүмкүн. CSS менен чектеш шапкесин түзүү артында идеясы, аны түртүп биринчи саптагы текст-калтыруу мүлктү пайдалануу үчүн алып (солдо) терс мааниси. Ошондой эле кээ бир тарабынан ушул пункттун сол чектен өзгөртүү керек. абзац жакшы көрүнөт чейин бул сандар менен ойнойт.
б {текст кемтиги: -2.5em; маржа-сол: 3em; } Б: биринчи каты {арип өлчөмү: 3em; } Б: биринчи катардагы {сызык бийиктиги: 100%; }Алуу чынында Fancy Баштапкы капкактары
кооз алгачкы шапкесин түзүү үчүн мыкты жолу дагы кооздук арип үй-арип өзгөртүү болуп саналат. Эгер сиз колдонгон болсо, тамгалар бир катар бир кийин жалпы ариптер , ал кардарлар жеткиликтүүлүк жана түшүнүктүүлүктү маселелерди эске алып туруп, аны көрө аласыз биринчи капкак, ошондой эле көрсөтүлгөн кепилдик жардам берет.
б: биринчи каты {арип өлчөмү: 3em; арип-үй-бүлө: "Edwardian Script ITC", "Brush Script MT", жазуу; } Б: биринчи катардагы {сызык бийиктиги: 100%; }Ошондой эле, адаттагыдай эле, силер-пунктуна жарнамалар стили баштапкы шапкесин түзүү үчүн бүт бул сунуштарын бере алат.
метка Баштапкы капкак колдонуу
кийин баары, эгер сиз, дагы эле алгачкы баш-беттеги карап кантип жаккан жок, сиз издеген так натыйжа алуу үчүн сүрөттөрдү кайрыла алат. Бирок, сиз сүрөттөрдү түз көчүп барууда алдында, бул ыкма менен кемчиликтер тууралуу кабардар болушу керек:
- Сүрөттөрдү жок кардарлар алгачкы шапкесин көрбөйт, сүрөт ордун жашыруун текст жок. Бул пункт жетүүгө болот, же мыкты кыйын окуу.
- Сүрөттөр ар дайым бетине жүктөө жолу менен толукталсын. Сиз баштапкы капкактарын, көп болсо, бир кыйла көп адамдар аз сезип турган нерсени, жүктөө убактысын көбөйтүү мүмкүн.
- Кээ бир серепчилер жашыруун биринчи катын жана сүрөттү да көрсөтүшөт - абзац текстти так кылып турган.
- Сиз биринчи каты туура диаграммасын пайдалануу ушунчалык так экенин билип алышыбыз керек эле, бул параметрди автоматташтыруу үчүн өтө кыйын. Ошентип, абзац түзөтүлдү, ар бир жолу бир жаңы диаграммасын түзүү керек болот.
Биринчиден, жазган биринчи катында кездешет диаграммасын түзүү керек. Мен ариптер "Edwardian Script ITC" менен кат L түзүү Саналуу убакытта колдонулат. Менимче, бул абдан чоң кылып - өлчөмдө 300pt. Мен анда кат жүзүндөгү жылаңач минимумга чейин бурканга иштетишкен жана сүрөт туурасы, бийиктиги белгиледи.
Ошондо мен пунктунда үчүн класс "capL" жараткан. Бул сүрөттү колдонуу үчүн кандай аныктама, алдынкы (сызык бийиктиги), жана башка зарыл.
Сиз абзац менен текст кемтиги жана толтургучтар-топ үчүн сүрөттүн туурасы, бийиктиги колдонушубуз керек. Менин L бейнеси, Мен 95px кемтиги жана 72px толтургуч керек.
p.capL {сызык бийиктиги: 1em; маалымат-сүрөт: нускага (capL.gif); маалымат-кайра: жок-кайталоо; текст кемтиги: 95px; толтуруу топ: 72px; }Бирок, баары эмес. анда текст биринчи сүрөттөр менен, - ошол жерде калса, анда биринчи каты пунктунда экиден болушу мүмкүн. Ошондуктан, мен класстын "баштапкы" менен биринчи элементтин тегерегиндеги бир карыш кошо, - деп катты көрсөтүү эмес, серепчи айтып берди:
span.initial {дисплей: эч бири; }Ал эми көркөм анда туура көрсөткөн. Сиз туура кат чейин snugged текстти алуу пункту боюнча текст кемтиги менен ойной алат, бирок сиз аны көрсөтө кетким келет.