CSS Почетна капа

Научете како да креирате фенси почетни капи со користење на CSS и слики

Научете како да користите CSS за да креирате фенси почетна капи за вашите ставови. Постои дури и едноставна техника за замена на сликата за да се користи графичка слика за вашата почетна капа.

Основни стилови на почетните капи

Постојат три основни стилови на почетни букви во документи:

Почетните капачиња или капките за капка се многу познати. Тие се одличен начин да се облекуваат инаку долги и здодевни распосланија на текстот. И со сопственост на CSS: прво писмо, можете лесно да дефинирате како да ги направите вашите први букви познавачите.

Направете едноставен почетен капак

Сè што треба да направите за да креирате едноставно подигната почетна капа е да ја направите првата буква од вашиот став поголема по големина со псевдо-елемент од прва буква:

p: прво писмо {font-size: 3em; }

Но, многу прелистувачи гледаат дека првата буква е поголема од остатокот од текстот на линијата, така што тие го прават водечкиот еднаков на она што ќе има смисла за тоа прво писмо, а не за остатокот од линијата. За среќа, ова е лесно да се поправи со прва линија псевдо-елемент и својство на линија-висина:

p: прво писмо {font-size: 3em; } p: first-line {line-height: 1em; }

Репродуцирајте со висината на линијата во документот додека не ја пронајдете вистинската големина за вашиот текст.

Играј со почетната капа

Откако ќе се разбере како да се создаде почетна капа, можете да го облекуваат во фенси облека за да се издвоите. Играјте со бои, бои во заднина, граници или што и да ги удри вашите фенси. Прилично едноставен стил е да се смени бојата на вашиот фонт и боја на позадина само за првата буква:

p: прво писмо {font-size: 300%; боја на позадина: # 000; боја: #fff; } p: прва линија {line-height: 100%; }

Друг трик е да ја центрираме првата линија. Ова може да биде незгодно со CSS, бидејќи средината на текстуалната линија може да биде различна ако вашиот распоред е флексибилен. Но, со некои играјќи со вредности, можете да ја одвлечете првата линија за да се направи првото писмо да биде во средината. Само да играте со процентот на текстот-алинеја на пасусот додека не изгледа добро:

p: прво писмо {font-size: 300%; боја на позадина: # 000; боја: #fff; } p: прва линија {line-height: 100%; } p {текст-алинеја: 45% ; }

Соседни почетни капачиња се тешки со CSS

Соседните почетни капаци може да бидат тешки со CSS, бидејќи различните пребарувачи различно ги прикажуваат фонтовите. Идејата за креирање на соседната капа во CSS е да се користи сопственоста на текстот-отпечаток на првата линија за да се истегне (лево) негативна вредност. Исто така ќе треба да ја промените левата маргина на тој став за одредена сума. Играјте со овие броеви додека пасусот не изгледа добро.

p {текст-алинеја: -2.5em; маргина-лево: 3em; } p: прво писмо {font-size: 3em; } p: прва линија {line-height: 100%; }

Добивање на вистински фенси почетнички капи

Најдобар начин да се создаде фенси почетна капа е да го смените фонтот во повеќе декоративно семејство на фонтови. Ако користите серија на фонтови проследени со генерички фонт , тоа ќе помогне да гарантирате дека вашата почетна капа покажува добро, за да можат вашите клиенти да го видат, без да стапат во проблеми со пристапноста и употребливоста.

p: прво писмо {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", курзив; } p: прва линија {line-height: 100%; }

И, како и обично, можете да ги ставите сите овие предлози заедно за да создадете почетно ограничување на рекламниот стил на вашиот став.

Користење на графички почетен капак

Ако, сето ова, сеуште не ви се допаѓа како првичните капи изгледаат на страната, можете да прибегнете кон графика за да го добиете точниот ефект што го барате. Но, пред да одлучите да се движите директно на графика, треба да бидете свесни за недостатоците на овој метод:

Прво, треба да ја креирате графиката на првата буква. Јас користев Фотошоп за да го креирам писмото L со фонтот "Edwardian Script ITC". Го направив огромен - 300 пати во големина. Потоа ја исекоа сликата до најмалата минимум околу буквата и забележав ширина и висина на сликата.

Потоа создадов класа "capL" за мојот став. Ова е местото каде што дефинирам каква слика да ја користите, водечката (линија-висина) и така натаму.

Треба да ја користите ширината и висината на сликата за да го наместите текстот-алинеја и горниот дел на пасусот. За мојата слика L, ми требаше 95px алинеја и 72px дополнување.

p.capL {line-height: 1em; позадина-слика: url (capL.gif); позадина-повторување: нема повторување; текст-алинеја: 95px; додаток-врв: 72px; }

Но, тоа не е сè. Ако го оставите таму, тогаш првото писмо ќе биде удвоено во параграф - прво со графиката, потоа во текстот. Значи, додадов опсег околу тој прв елемент со класата "почетна" - и му рече на прелистувачот дека нема да ја прикаже таа буква:

span.initial {display: none; }

И графиката потоа се покажува правилно. Можете да репродуцирате со текст-алинеја на пасусот за да го добиете текстот до писмото, но сепак сакате да го прикажете.