CSS болон зураг ашиглан сонирхолтой анхны тагийг хэрхэн бүтээх талаар сурах
Таны догол мөрийг сонирхож болох анхны тагийг үүсгэхийн тулд CSS ашиглах талаар сурах. Эхний таг хийх график зургийг ашиглахын тулд энгийн дүрс солих аргыг ашиглаж байна.
Анхны тагны үндсэн загвар
Баримт бичигт эхний тагны гурван үндсэн загвар байдаг:
- Өсөн нэмэгдэж буй - хамгийн нийтлэг нь, эхний үсэг нь илүү их бөгөөд одоогийн тексттэй ижил мөрөнд байна.
- Эхний үсэг нь ихэвчлэн эхний текст шугамнаас доош унагагддаг. Дараах текст нь эргэн тойрондоо хөвж байна.
- зэргэлдээ - эхний үсгийг текстийн бусад хэсгүүдийн дэргэд нэг баганад байгаа тохиолдолд. Энэ нь вэб дизайнаас илүү хэвлэгддэг.
Анхны таг эсвэл дусал таг нь маш танил юм. Тэд бол урт удаан, уйтгартай текстийг хувцаслах сайхан арга юм. Мөн CSS өмчөөр: эхний үсэг, та эхний үсгүүдээ хэрхэн нээхийг хялбархан тодорхойлж болно.
Энгийн эхний таг үүсгэ
Эхний үсгийн энгийн тагийг хийхийн тулд юу хийх хэрэгтэй вэ гэвэл таны догол мөрний эхний үсэг нь эхний үсэг псевдо-элементтэй том хэмжээтэй байна.
p: эхний үсэг {фонт-хэмжээ: 3em; }Гэхдээ олон хөтөч эхний мөрөнд мөр дэх текстийн бусад хэсгээс илүү том болохыг хардаг. Тиймээс тэдгээр мөрөнд үлдсэн эхний үсэг нь юу болохыг ойлгоход хүргэдэг. Аз болоход, энэ нь эхний мөрийн псевдо-элемент болон мөрийн өндрийг тодорхойлоход хялбар байдаг:
p: эхний үсэг {фонт-хэмжээ: 3em; } p: first-line {line-height: 1em; }Бичвэрийнхээ зөв хэмжээг олох хүртлээ баримтын мөрийн өндрөөрөө тоглоорой.
Анхны малгайтай тоглох
Анхны малгайгаа хэрхэн бүтээх талаар ойлгоход үүнийг хувцаслахдаа хувцаслаж болно. Өнгөний өнгө, дэвсгэр өнгө, хил хязгаар, эсвэл сонирхолтой зүйлээ тоглуулаарай. Энгийн энгийн загвар нь зөвхөн үсгийн өнгө, дэвсгэрийн өнгөийг зөвхөн эхний үсгээр солих явдал юм:
p: эхний үсэг {үсгийн хэмжээ: 300%; background-color: # 000; өнгө: #fff; } p: first-line {line-height: 100%; }Өөр нэг арга бол эхний мөрийг төвлөрүүлэх явдал юм. Энэ нь CSS-тай төвөгтэй байж магадгүй тул текстийн дундын төв нь таны байрлал уян хатан байвал өөр байж болно. Гэхдээ зарим нь үнэ цэнэтэй зүйлстэй тоглоход эхний мөрөнд хангалттай эхний мөрөнд хүрэх боломжтой. Зөвхөн догол мөрийн текстэн дээр%% яг зөв харагдана.
p: эхний үсэг {үсгийн хэмжээ: 300%; background-color: # 000; өнгө: #fff; } p: first-line {line-height: 100%; } p {text-indent: 45% ; }Зэргэлдээ эхний таг нь CSS-ээр хатуу байна
Төрөл бүрийн хөтөч нь фонтыг өөр өөрөөр харуулдаг учраас хажуугийн анхны таглалт нь CSS-ээр хэцүү байж болно. CSS доторх тагийг үүсгэх санаа нь эхний мөрөнд текст-indent property-ийг ашиглан түлхэх (зүүн тийш) сөрөг утга юм. Мөн энэ хэсгийн зүүн захыг зарим хэмжээгээр өөрчлөх хэрэгтэй болно. Эдгээр тоонуудтай хамт догол мерийг харах хүртэл тоглоорой.
p {text-indent: -2.5em; margin-left: 3em; } p: эхний үсэг {фонт-хэмжээ: 3em; } p: first-line {line-height: 100%; }Үнэхээр гайхалтай эхний тагнууд
Сонирхолтой эхний хивс бүтээх хамгийн сайн арга бол үсгийн фонтыг илүү гоёл чимэглэлийн фонтын гэр бүлд шилжүүлэх явдал юм. Хэрэв та ерөнхий фонтоор дараалан хэд хэдэн фонтуудыг ашигладаг бол таны анхны таг харагдаж байгаа нь таны хэрэглэгчид үүнийг ойлгоход хялбар, ашиглахад хялбар асуудалгүйгээр харах боломжтой болно.
p: эхний үсэг {фонт-хэмжээ: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: first-line {line-height: 100%; }Мөн та бүхэнд эдгээр бүх саналуудыг нэгтгэн, догол мөрөнд зар сурталчилгаа хийх анхны тагийг хийж болно.
График эхлэлийн цэгийг ашиглах
Хэрвээ, дараа нь та эхний хуудасны таг хэрхэн харагдахыг хүсэхгүй байвал та график дээрээс хайж буй үр дүнг нь олж авах боломжтой. Гэхдээ та график руу шууд шилжихээр шийдсэн бол энэ аргын сул талыг мэдэж байх хэрэгтэй:
- Зураггүй хэрэглэгч нь эхний тагийг олж харахгүй бөгөөд дүрсийг солихоор далдлагдсан текстийг харж чадахгүй. Энэ нь догол мөрийг унших боломжгүй, уншихад хамгийн хэцүү байж болно.
- Зургууд нь хуудсын татаж авах хугацааг үргэлж нэмэгдүүлдэг. Хэрвээ та олон тооны анхны хязгаарлалттай бол татаж авах цагийг ихээхэн хэмжээгээр нэмэгдүүлэх болно.
- Зарим хөтөч нь далд үсгийг харуулах бөгөөд догол мөрийн текстийг сондгой болгох боломжтой.
- Энэ сонголтыг автоматжуулах нь маш хэцүү бөгөөд эхний үсэг нь яг зөв графикийг ашигласнаар юу болохыг яг таг мэдэх хэрэгтэй. Тиймээс догол мөрийг засварлах бүртээ шинэ график үүсгэх хэрэгтэй байж болно.
Эхлээд та эхний үсгийн графикийг үүсгэх хэрэгтэй. Зурган дээр "Edwardian Script ITC" фонтоор L үсэг зурсан. Би үүнийг том хэмжээтэй - 300pt хэмжээтэй болгосон. Дараа нь би зураг дээр зураасыг нүцгэн, зургийн өргөн, өндөрийг тэмдэглэсэн.
Дараа нь би догол мөрөө "capL" анги үүсгэсэн. Энд ямар дүрс ашиглах, тэргүүлэх (мөрийн өндөр), гэх мэтийг тодорхойлох болно.
Зургийн өргөн, өндрийг догол мөрийн текст-индикатор ба дээд хэсэгт байрлуулахын тулд ашиглах хэрэгтэй. Миний L зургийн хувьд 95px indent болон 72px padding хэрэгтэй байлаа.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: no-repeat; текст оруулах: 95px; Бичигт-дээд: 72px; }Гэхдээ энэ бүгд биш. Хэрэв та тэнд орхих юм бол эхний үсгийг догол мөрөөр хувилан хуулна - эхнийх нь графикаар, дараа нь текст дотор байна. Тиймээс би эхний элементийн эргэн тойрон дахь "эхний" ангитай ойролцоох зайг нэмж, тэр браузер тэр үсгийг харуулахгүй байхыг хэлэв:
span.initial {display: none; }Тэгээд график нь зөв харагдаж байна. Та догол мөр дээр текст-индэртэй хамт тоглуулахын тулд үсгээр бичсэн текстийг авах боломжтой боловч, үүнийг харуулахыг хүсч болно.