Metnin harflerinin büyük/küçük harf durumunu değiştirmenizi sağlar.

Varsayılan olarak değer, metin üzerinde hiçbir etkisi olmayan yok olarak ayarlanmıştır. Metnin durumu aynı kalır. Büyük harf ve küçük harf değerleri, karakterleri sırasıyla büyük ve küçük harfe dönüştürür. Bir büyük harf değeri belirtirseniz, her kelimenin yalnızca ilk karakterleri büyük harfle yazılır. Devral, değeri üst öğeden devralır.

Örnek

Bu başlık. Büyük harfe ayarlanmış bir metin dönüştürme özelliğine sahiptir. Tüm karakterler büyük harf olacaktır.

Text-transform Özelliği, bu paragrafa Küçük Harf Değeri ile uygulandı; bu, tüm harflerin küçük harf olacağı anlamına gelir.

Ve bu son paragraf, uygulanan bir CAPITALIZE özelliği ile bir text-transform özelliğine sahiptir. Her kelimenin ilk harfleri büyük olacak ve sadece bu olacak.

Sonuç

Ancak, hepsi o kadar basit değil. Bazı nüanslar var. Yukarıdaki örneğin ikinci paragrafına dikkat ederseniz, büyük harfle değeri büyük olan paragrafa uygulanan text-transform özelliğine rağmen, büyük harfle kelimesinin tamamen orijinal metne karşılık gelen büyük harflerle görüntülendiğini fark edeceksiniz. Bu, belirtilen büyük harf değeriyle, kelimelerin yalnızca ilk harflerinin kontrol edilmesi ve başlangıç ​​durumlarından bağımsız olarak geri kalanının değişmeden kalmasıyla açıklanır.
Görünüşteki basitliğine rağmen, text-transform özelliği çok faydalı olabilir. Örneğin, sitenizdeki tüm H1 başlıklarının metnini büyük harf yapmak için tek yapmanız gereken stil sayfanıza bir özellik eklemektir.

H1 (metin dönüştürme: büyük harf;)

ve sorun çözülecektir. Ve çok, çok fazla olabilen tüm başlıkları manuel olarak değiştirmeniz gerekmez.

CSS büyük harfler metinleri baştan sona aynı görünen tek tip bir tasarımın monotonluğunu kırmaya yardımcı olur.

Daha önce ve şimdi büyük harflerle

Kronikçiler, bazıları 5. yüzyıla kadar uzanan el yazması el yazmalarında büyük harfler kullandılar. Büyük harfler, matbaanın baskıyı endüstriyel bir düzeye getirdiği 8. yüzyıldan 15. yüzyıla kadar kullanılmaya devam etti. Hem el yazısı hem de basılı gömme büyük harfler metnin başına yerleştirildi. Genellikle mektubun etrafına yerleştirilmiş dekoratif bir desenle süslenirlerdi.

Yükseltilmiş ve alçaltılmış harfler bugün hala kullanılmaktadır. Gazetelerde, dergilerde ve kitaplarda ve ayrıca dijital tipografide bulunabilirler. Yükseltilmiş harflere bazen genişletilmiş denir. Onları takip eden metnin alt kısmı ile aynı hizada yerleştirilirler. Atlanan harfler, bazen metin içeriğinin ana gövdesinin arkasındaki bir katmanda, metnin üst kısmıyla aynı hizada yerleştirilir veya metnin geri kalanı etraflarından akar.

Yükseltilmiş harfleri tanımlamak çok daha kolaydır, çünkü bunlar metnin geri kalanıyla aynı hizadadır ve genellikle bunu yapmak için dış kenar boşluklarının etrafındaki akışı değiştirmeniz gerekmez. Atlanan harfler daha fazla ince ayar gerektirir. Yükseltilmiş karakterlerin nasıl ele alındığını ilk önce anlarsanız, bunu çözmeniz daha kolay olacaktır.

sınıfları kullanma

CSS'ye zaten aşina olan tasarımcılar, ilk büyük harf için ayrı bir CSS sınıfı oluşturmayı bilirler.

Paragraf öğesinin CSS'si ve harfi oluşturan sınıf şöyle görünür:

p (yazı tipi boyutu: 20 piksel; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (yazı tipi boyutu: 48 piksel; yazı tipi ailesi: Didot;)

Ve HTML kodu şöyle görünecek:

Hangi bize verir:

Çok kolay mı görünüyor? Aslında, her büyük harf özel karakter aralığı gerektirdiğinden, belirli yükseltilmiş harflere göre ayarlamalar yapmanız gerekecektir. Kabartma harfler ve gövde metni için bir yazı tipi seçtikten sonra, her bir kabartma harf için ayrı sınıflar oluşturmanız gerekir. aşağıda CSS sınıfı.myinitialcapsi I ve n arasındaki mesafeyi azaltmak için sağdaki kutu negatiftir.

Myinitialcapsi (yazı tipi boyutu: 48 piksel; yazı tipi ailesi: Didot; sağ kenar boşluğu: -1 piksel;)

ben n bu durumda, "I" ve "n" arasında fazladan bir boşluk var.

ben Negatif marjlı yeni bir sınıf eklemek onu daha da yakınlaştırır.

Ekran çözünürlüğüne bağlı olarak yukarıdaki örnekte I ve n birleşmiş gibi görünebilir. Bunun nedeni harflerin sonundaki seriflerdir. Bu nedenle, son CSS stillerine karar vermeden önce, siteyi çeşitli cihazlarda test edin ve tümü büyük harfli CSS'deki metnin bu stillerde nasıl göründüğünü görün.

Fiyat teklifleri ve diğer özel durumlar

Sadece metnin başındaki harfleri büyütemezsiniz. Harfin yanında görünen alıntıların büyük boyutlu bir versiyonunu oluşturmak için başka bir sınıf uygulayabilirsiniz. Bizim durumumuzda, ne 48 piksel sınıfı ne de 20 piksel metin sınıfı tırnak işaretleri için uygun değildir. Aksine, - 30 piksel arasında bir şey olacaktır. Alıntıları optik olarak I ile hizalamak için 4 piksel aşağı taşıyacağız:

Myinitialcapsq (yazı tipi boyutu: 30 piksel; yazı tipi ailesi: Didot; kayan nokta: sol; kenar boşluğu: 4 piksel;)

“ben Negatif marjlı yeni bir sınıfın dahil edilmesi onu daha da yakınlaştırır.

Karakter aralığı ve hizalamalarının çevreleyen işaretlemeyle eşleşmesi için CSS başlıklarının her birini tırnak işaretleri ile birlikte belirtirken çok dikkatli olmanız gerekir. Örneğin, T harfinin, enine çizgisinin görsel olarak mizanpaja sığması için paragrafın kenarının biraz ötesinde sola kaydırılması gerekecektir. Aynı işlemi C, G, O ve Q gibi yuvarlak harflerle yapmanız gerekecektir. Bu örnekte kullanılan yazı tipi boyutları 20, 30 ve 48'dir. Ancak boyutları, seçtiğiniz yazı tiplerinin özelliklerine göre seçmeniz gerekecektir. Sitenin görüntüleneceği ekranların boyutları ve çözünürlüklerinin yanı sıra.

Sözde öğeler ve sözde sınıflar

Bir CSS sözde öğesiyle, paragraf öğesine :: ilk harfi ekleyerek kolayca yükseltilmiş bir harf oluşturabilirsiniz. Kullanım: ilk harf ( bir kolon ile) eski tarayıcılar için:

p (yazı tipi boyutu: 1.2em; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif; satır yüksekliği: 2em; alt dolgu: 1.2em;) p :: ilk harf (yazı tipi boyutu: 3.6em; metin dönüşümü: büyük harf; yazı tipi ailesi: "Tek tip Bernard Yoğun", serif; sağ kenar boşluğu: 0.03em;) .initialb (sağ kenar boşluğu: -0.1em;) .initialn (sağ kenar boşluğu: -0.15 ben;)

N ve B harflerinin karakter aralığını dikkate alan CSS sınıflarını içeren HTML kodu şöyle görünecek...

İlk harfi büyük olan ilk harf.
Satır sonu ile sonraki satırın başlangıç ​​sınırı yoktur.

n HTML kaynağında, HTML'deki büyük harf değil, ilk harfin, 3,6em'lik ilk büyük harf boyutuna nasıl boyutlandırıldığına dikkat edin. Temiz, ha?

B kesin bir dönüşle ve yeni bir paragraf başlatıldığında, her zaman başka bir ilk başlık oluşturulur. Kendine soruyor olabilirsin, Bunun hesabını nasıl vereceğim? Çok yeni bir paragrafın başında bir başlangıç ​​​​büyüklüğüne sahip olmam mı gerekiyor? Yapabilirsin. Ama öyle görünmesini istiyor musunuz ve kesinlikle öyle mi görünmek zorunda?

Paragrafın ilk büyük harfi harfe dönüştürülür.
Satır sonundan sonraki ilk harf büyük harfle yazılmaz.

Ö HTML kaynağında ilk harfin büyük harfle yazılmadığını, ancak 3,6em karakterine dönüştürüldüğünü unutmayın.

Ö Ancak, zorunlu bir satır sonundan sonra ve her yeni paragrafın başında bile her zaman bir harf oluşturulur. Kendinize soruyor olabilirsiniz: Bunu nasıl dikkate alabilirim? Tüm bu durumlar için harf eklemem gerekiyor mu? Yapabilirsin. Ama gerekli mi?

Sözde öğelerin sağladığı avantajlarla bile, karakter aralığı ve girinti sorunlarını ele almak için ayrı sınıflar tanımlamak için çok sayıda kod eklemek zorunda kaldık. Ancak bu yöntem, her yeni paragrafın ilk harfini büyük harf CSS'ye dönüştürür. Bazıları için çalışmayabilir, çünkü her paragrafın ilk harfini dönüştürmeniz gerekmez.

Akıllı bir düzen oluşturmak için sözde sınıfları ve sözde öğeleri birleştirmek

First-child sözde sınıfının eklenmesi, ilk harflerin gereksiz yere dönüştürülmesi sorununu çözmeye yardımcı olur:

p (yazı tipi boyutu: 1.2em; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif; satır yüksekliği: 2em; alt dolgu: 0,5em;) p: birinci çocuk :: ilk harf ( yazı tipi boyutu: 3,6em; metin dönüştürme: büyük harf; yazı tipi ailesi: "Tek tip Bernard Yoğun", serif; kenar boşluğu: 0,03em;)

Bu kodu HTML ile birleştirmek:

First-child olarak tanımlanan ilk harf, bu yöntemde yükseltilmiş bir büyük harfe dönüştürülen tek harftir.

Yalnızca birinci çocuk olarak tanımlanan harf dönüştürüldüğünden, bu örneğin birinci çocuk olmadan öncekinden farklı olduğuna dikkat edin. Ayrıca, paragraf başlangıcından sonra ve zorunlu satır sonundan sonra ilk harfleri dönüştürmüyoruz. Bu, paragrafların tüm ilk harflerini dönüştürdüğümüzde mizanpajın nasıl göründüğüne kıyasla daha zarif görünüyor.

Sahte sınıfları kullanmanın avantajı, çeşitli özel durumları ele alma yeteneğidir. Peki ya olumsuzluklar? Pek çok farklı sözde sınıf vardır ve bunlar o kadar çok şekilde birleştirilebilir ki başınızı döndürebilir. Örneğin, sözde sınıflar: first-child ve: first-of-type aynı sonuçları verebilir. Sözde sınıfı yalnızca paragrafa değil, aynı zamanda öğelere de uygulayabilirsiniz.

veya

... Örneğin, Didot yazı tipinde yükseltilmiş harflerle aşağıdaki örnekte gösterildiği gibi. A öğesinin sağına kenar boşluğu özniteliğinin nasıl eklendiğine dikkat edin. Aksi takdirde, bölümün başındaki s harfine "yapıştırılır":

bölüm (yazı tipi boyutu: 1.2em; yazı tipi ailesi: Georgia, "Times New Roman", Times, serif; satır yüksekliği: 3em;) bölüm> p: birinci çocuk: ilk harf (yazı tipi boyutu: 4em; metin dönüşümü: büyük harf; yazı tipi ailesi: Didot, serif; sağ kenar boşluğu: 5 piksel;)

Ve HTML ile birlikte:

Bir bölümün başında, ilk harf yükseltilmiş büyük başlığa ayarlanır.

Ve yeni bir paragraf...

Denemek isterseniz, ilk çocuk ve türün ilk örneği olmak üzere çeşitli yöntemleri keşfedebilirsiniz. Örneğin, büyük harfli CSS'deki metin için belirli sözde sınıf türlerinin nasıl kullanılabileceğini görmek için nth-of-type veya: nth-of-child gibi. İster bu makalede özetlenen ilkeleri izleyin ister daha derine inmeye başlayın, CSS sözde sınıfları first-child,: first-of-type ve: first-letter ile çalışmayı öğrendikten sonra, bunları HTML öğelerine doğru şekilde uygulayabilirsiniz. .

çizgiyi çizmek

Farklı harfleri işlemek için sözde sınıflarla birlikte ayrı sınıfları kullanmak, pozitif ve negatif marjları hesaplayan bir deneme yanılma sürecidir. Ve çok sabır gerektirir. F, G, O, P, Q, T, W, V ve Y gibi harfler de ayrı karakter aralığı sınıfları gerektirir.

Genellikle siteye malzeme eklerken veya örneğin forumda yeni bir konu oluştururken aceleyle, kullanıcı küçük (küçük harf) bir harfle bir cümle (başlık) yazmaya başlayabilir. Bir dereceye kadar, bu bir hatadır.

Size bu sorunu çözmek için birkaç seçenek göstereceğim: PHP ve CSS, daha önce yayınlanmış materyaller için, jQuery'nin durumu daha yayınlanmadan önce nasıl düzeltebileceği konusunda daha uygundur.

PHP'de bir dizgenin ilk harfi büyük harftir

PHP'de “adlı bir fonksiyon var. ucfirst", Bu sadece dizenin ilk karakterini büyük harfe dönüştürür, ancak eksi Kiril alfabesiyle tam olarak doğru çalışmamasıdır.

Bunu yapmak için kendi küçük fonksiyonumuzu yazacağız. Uygulama şöyle görünecek:

Bu versiyonda, aslında ihtiyacımız olan büyük harfle başlayan bir cümle alacağız.

CSS'de dizenin ilk harfini büyük harf

Bu yöntem görsel olarak (yani sitenin kaynak kodunda teklifler olduğu gibi görünecek) ilk karakteri de büyük harfe çevirir.

Kullanım aşağıdaki gibidir:

ilk cümle

ikinci cümle

üçüncü cümle

dördüncü cümle

Sözde öğeyi kullanma " ilk harf"Ve özellikler" metin dönüştürme»Paragrafın her ilk harfi için görünümü belirledik.

jQuery'de bir dizgenin ilk harfi büyük harftir

Daha önce de söylediğim gibi, bu dönüştürme yöntemi en çok henüz yayımlanmamış materyaller için uygundur.

Örneğin, bir metin alanı alacağız (bizim için bir başlık girmek için bir alan görevi görecektir) ve bunun için küçük harfli bir cümle girerken büyük harfle yazacak küçük bir komut dosyası yazacağız:

Komut dosyası hem metin yazarken hem de basitçe yapıştırırken tetiklenir. Scriptlerin sitenizde çalışabilmesi için jQuery kütüphanesinin bağlı olması gerektiğini unutmayınız.

İyi günler, site kurma meraklıları. Bugünkü yayında, metin içeriğinin tasarımı ile ilgili bir konuyu ele alacağız. Bu nedenle, css'de büyük harflerin nasıl ayarlanacağını öğreneceksiniz - bu arada, bir büyük harf oluşturmak için çeşitli seçenekler hakkında bilgi sahibi olacaksınız ve elbette her şeyi pratikte deneyebilirsiniz. Şimdi eğlenceli kısma geçelim!

Metni dönüştürelim

Basamaklı stil sayfaları ile hem bir bloğun ilk karakterini hem de metnin tamamını değiştirebilirsiniz. Size ikisini de nasıl yapabileceğinizi göstereceğim. Ayrıca, bu makalede adı geçen tüm araçlar dilin üç seviyesinde desteklenmektedir: css1, css2, css2.1 ve css3.

Seçimdeki tüm metin içeriğini değiştiren ilginç bir özellikle başlayacağım. o metin dönüştürme.

Adlandırılmış öğe, karakterleri büyük harfe, küçük harfe dönüştürebilir ve ayrıca bir kelimenin her ilk karakterini büyük harf yapabilir. Tablodaki değerler hakkında daha fazla yazdım.

Şimdi, teorik materyali pekiştirmek için bir örnek alın.

Dikkat!

Yarın tüm güzellik ürünlerinde indirim var!

Kampanya şehrinizde bulunan tüm şubelerde geçerlidir.

Gömme başlık oluşturma

"Kapak" teriminin ne anlama geldiğini bilmiyorsanız, o zaman doğrudan güncel konuyla ilgili olduğu için bunu öğrenmenin zamanı geldi.

Gömme (veya bazen baş harfini söylerler), büyük boyutu, rengi ve hatta bazı durumlarda yazı tipi tasarımıyla diğerlerinden farklı olan bölümün ilk harfidir. Gerçek hayatta, böyle bir mektubun bir örneği eski el yazmalarında ve kitaplarda bulunabilir.

Bir ilk oluşturmanın birkaç yolu vardır. Genellikle bir karakter, bir biçimlendirme dili etiketi ile vurgulanır ve bundan sonra, onu değiştiren stillerde belirli özellikler belirtilir. Bu iyi bir yol, ancak bu yayın css mekanizmalarından bahsediyor (bence bu durumda çok daha mantıklı ve kullanımı daha uygun).

Sorunu çözmek için gibi bir araç kullanabilirsiniz.

Yani, bu durumda: ilk harf kullanılır. Tüm sözde öğeler gibi, seçiciye iki nokta üst üste ile ayrılmış olarak atanır. Daha sonra stil sayfalarının tüm kurallarına göre özellikler belirlenir. Ancak, yalnızca yazı tiplerini, dolguyu, rengi, arka planı, kenar boşluklarını ve kenarlıkları düzenlemeyle ilgili özellikleri uygulayabilirsiniz.

Belirli bir örnek düşünmeyi öneriyorum. Sunulan küçük programı uygularken, sadece renkli bir kapak yapmaya değil, çiçeklerle doldurmaya karar verdim. Bunu yapmak için, şeffaf bir yazı tipi rengi ayarlayarak ve harfi seçilen görüntü ile doldurarak birkaç zor numara kullanmanız gerekir.

Bu paragraf çok ilginç içeriğe sahip bir cümle içeriyor.

Bir sonraki paragrafta ilginç bir hikayeye devam edelim.

Sonuç çok çekici ve sıradışı görünüyor, bu da mükemmel bir çözüm.

Gördüğünüz gibi, bu konu çok basit. Web kaynaklarınız için verdiğim program kodunu, tarzınıza göre modifiye ve ayar yaparak rahatlıkla kullanabilirsiniz.

Yukarıdaki materyal sizin için yararlıysa, blogumdaki güncellemelere abone olun ve edindiğiniz bilgileri (ve elbette bloguma bir bağlantı) arkadaşlarınızla paylaşmayı unutmayın. İyi şanlar!

Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 236 kez

İlgili Makaleler

Android akıllı telefon nasıl güvenlik kamerasına dönüştürülür

Çince klavye neye benziyor (geçmiş ve fotoğraflar)

Avatarların psikolojideki değeri

Avatarların psikolojideki değeri

MS Word'de bir harf nasıl vurgulanır

Bir kişinin avatarı ne anlama gelir?