CSS және бейнелерді пайдалану арқылы қиялды бастапқы қалпақтарды қалай жасау керектігін үйреніңіз
Сіздің абзацтарыңыз үшін фантазиялық бастапқы қалпақтарды жасау үшін CSS- ды қалай пайдалану керектігін үйреніңіз. Бастапқы қақпақ үшін графикалық кескінді пайдалану үшін қарапайым суретті ауыстыру әдістемесі бар.
Бастапқы қалпақтардың негізгі стильдері
Құжаттарда бастапқы қалпақтардың үш негізгі стилі бар:
- көтерілді - ең көп таралған, онда бірінші әріп үлкен және сол мәтінді ағымдағы мәтін сияқты.
- төмендеді - ақ өте кең таралған, онда бірінші әріп үлкен және мәтіннің бірінші жолынан төмен түсіп кеткен. Келесі мәтін оны айналады.
- көрші - бірінші әріп әр мәтіннің бір жағында орналасқан. Бұл веб-дизайнға қарағанда басып шығаруда жиі кездеседі.
Бастапқы қалпақшалар немесе тамшылардың қақпақтары өте таныс. Олар әйтпесе ұзын және дәмді тексттерді киюдің тамаша тәсілі. CSS сипаты бар: бірінші әрпімен, сіз бірінші әріптерді сүйгішті қалай жасауға болатынын оңай анықтауға болады.
Қарапайым бастапқы қақпақты жасаңыз
Қарапайым жоғары көтерілген бастапқы қалпақшаны жасау үшін сізге қажет бірінші параграф бірінші әріптен жалған элементпен үлкенірек сіздің параграфыңыздың бірінші әрпін жасайды:
p: бірінші әріп {font-size: 3em; }Бірақ көптеген браузерлер бірінші әріптің жолдағы мәтіннің қалған бөлігінен үлкен екенін көреді, сондықтан олар бірінші сызықтың мағынасына теңестіріледі, ал қалған жолды емес. Бақытымызға орай, бұл бірінші жолдағы жалған элементпен және line-height сипатын түзетуге оңай:
p: бірінші әріп {font-size: 3em; } p: бірінші жол {line-height: 1em; }Мәтініңіздің дұрыс өлшемін таба алмайынша, құжатыңыздағы жолдың биіктігімен ойнаңыз.
Бастапқы қалпақпен ойнаңыз
Бастапқы қақпақты қалай жасау керектігін түсінгеннен кейін, оны ерекше киімге киюге болады. Түстермен, өңдік түстермен, шекарамен немесе кез келген нәрсені өзіңіздің қиялыңызға соқтырады. Қарапайым қарапайым стиль - қаріпіңіздің және өң түсінің түстерін тек бірінші әрпіне қайтару:
p: бірінші әріп {қаріп өлшемі: 300%; background-color: # 000; Түсі: #fff; } p: бірінші жол {line-height: 100%; }Тағы бір трюк - бірінші жолды орталыққа салу. Бұл CSS-пен қиын болуы мүмкін, себебі сіздің сызба икемді болған жағдайда мәтін жолының ортасы әртүрлі болуы мүмкін. Бірақ кейбір құндылықтармен ойнап отырып, бірінші жолдың ортасында болуын көрсету үшін бірінші жолыңызды шегінуге болады. Параграфтың мәтіндік шегінісінде пайызбен ойнаңыз, ол дұрыс көрінгенше:
p: бірінші әріп {қаріп өлшемі: 300%; background-color: # 000; Түсі: #fff; } p: бірінші жол {line-height: 100%; } p {text-indent: 45% ; }Іргелес бастапқы қалпақтар CSS-мен қиын
Іргелес бастапқы қақпақтар CSS-мен қиын болуы мүмкін, себебі әртүрлі қаріптер қаріптерді басқаша көрсетеді. CSS-ге іргелес қақпақты құру идеясы мәтін жолының бірінші жолында оны теріс (сол жаққа) теріс мәнді шығару үшін пайдалануға болады. Сондай-ақ сол параграфтың сол жақ шетіне кейбір соманы өзгерту керек болады. Параграф жақсы көрінгенше осы нөмірлермен ойнаңыз.
p {text-indent: -2.5em; margin-left: 3em; } p: бірінші әріп {font-size: 3em; } p: бірінші жол {line-height: 100%; }Алғашқы қалпақтарды шынымен алу
Сәнді бастапқы қалпақшаны құрудың ең жақсы тәсілі - шрифтті сәндік қаріп отбасына өзгерту. Егер сіз әдеттегі шрифтпен кейінгі қаріптер сериясын пайдалансаңыз, ол сіздің бастапқы қалпыңыз жақсы көрінеді, сондықтан тұтынушылар қол жетімділік пен ыңғайлылыққа қатысты мәселелерді шешпей көре алады.
p: бірінші әріп {font-size: 3em; font-family: «Edwardian Script ITC», «Brush Script MT», cursive; } p: бірінші жол {line-height: 100%; }Және, әдеттегідей, сіз осы ұсыныстардың барлығын сіздің абзацыңыздың жарнамалық стилі болатын бастапқы қақпақ жасау үшін біріктіре аласыз.
Бастапқы қақпақты пайдалану
Егер осыдан кейін, сіз әлі де бастапқы қалпақшаңыздың бетке қалай қарағанын ұнатпасаңыз, сіз іздеген нақты нәтиже алу үшін графикаға жүгінуіңізге болады. Бірақ тікелей графикаға көшуге шешім қабылдамас бұрын, осы әдіс бойынша кемшіліктер туралы білуіңіз керек:
- Кескінсіз тұтынушылар бастапқы қақпақты көрмейді және кескінді ауыстыратын жасырын мәтінді көре алмайды. Бұл абзацты қол жетімсіз немесе оқып-үйрену қиынға соғуы мүмкін.
- Бейнелер әрқашан беттің жүктеу уақытына қосылады. Егер сізде бастапқы қалпақ көп болса, сіз көптеген адамдар сезінетін нәрсе үшін жүктеу уақытын едәуір арттыра аласыз.
- Кейбір браузерлерде параграф мәтінін жасырын етіп жасыратын жасырын әріптер мен суреттер көрсетіледі.
- Бұл опцияны автоматтандыру өте қиын, себебі сіз дұрыс графикті қолданғаныңыз үшін бірінші әріптің дәл екенін білуіңіз керек. Мәселен, әр параграф редакцияланса, сізге жаңа график құру қажет болуы мүмкін.
Біріншіден, сіз бірінші әріптің графигін жасауыңыз керек. Мен «Эдуард Сценарий ITC» қарпімен L әрпін жасау үшін Photoshop-ды қолдандым. Мен оны үлкен мөлшерде жасадым - өлшемі 300п. Содан кейін кескінді айналасында ең төменгі деңгейге дейін түсіріп, кескіннің енін және биіктігін байқадым.
Содан кейін менің параграфым үшін «capL» класын жасадым. Бұл жерде қолданылатын кескінді, жетекші (сызықтық-биіктік) және тағы басқаларды анықтаймын.
Параграфтың мәтіндік-шегінісі және үсті-үстіңгі жолын орнату үшін кескін енін және биіктігін пайдалану керек. Менің L-кескінім үшін 95px шегініс және 72px толтыру қажет болды.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: қайталаусыз; мәтіндік-шегін: 95px; толтыру үсті: 72px; }Бірақ бұл бәрі емес. Егер сіз оны қалдырсаңыз, онда бірінші әріпті параграфта қайталаңыз - алдымен графикалық, содан кейін мәтінде. Осылайша, мен «бастапқы» сыныппен бірінші элементті айналдырдым және браузерге бұл хатты көрсетпеуін айтты:
span.initial {display: none; }Содан кейін графика дұрыс көрсетіледі. Мәтінді әріппен ұстап алу үшін, мәтінді абзацпен ойнатуға болады, бірақ оны көрсету керек.