Büyük harf, tanımı gereği, nispeten büyütülmüş bir metin öğesidir.Neredeyse tüm diller bir cümleye büyük harfle başlar. Ve paragrafın başlangıcının belirgin bir büyük harfle tasarımı, metni yapılandırmanıza ve algılanmasını kolaylaştırmanıza olanak tanır. Bir web sayfası tasarlanırken, yazarın tercihlerine ve Rus dilinin kurallarına uygun olarak metin yazılabilir. Ayrıca tasarımı, css uzantılı bir dosyaya - bir stil sayfası - belirli "komutlar" girilerek "otomatikleştirilebilir" veya html dosyası stil bölümü. Tüm metinde bazı tasarım öğelerini bir kerede hızlı bir şekilde değiştirmek için CSS genellikle html ile ek olarak incelenir.

Bu, özellikle sitede yüzlerce sayfa varsa ve bunların her birinde değişiklik yapmak çok zaman alan bir süreçse geçerlidir.

Css kullanırsanız, her paragrafın başındaki büyük harfler özel görünebilir. Örneğin, parantez olmadan html'ye girildiğinde, aşağıdaki kod "p" etiketi ile biçimlendirilmiş metnin büyük harf - ilk harf - daha büyük - standart boyutun % 220'si, sarı renk - renk değerinin sarı olmasını sağlar, ve metnin geri kalanından farklı bir yazı tipiyle yazın - Georgia batangche'ye karşı.

(<) style(>)

p: ilk harf (yazı tipi ailesi: Georgia; yazı tipi boyutu: %220; renk: sarı;)

(<)/style(>)

Resim biçiminde kendi yazı tipinizi oluşturursanız güzel büyük harfler elde edebilirsiniz - her harf için, örneğin Eski Rus veya Gotik tarzında ayrı bir resim vardır. Ardından, gerekli yerlere büyük harf yerine parantezsiz kod ekleyebilirsiniz (<) img src=”ссылка на место, где лежит картинка”(>). Ek özellikler yükseklik ve genişlik olacaktır - metnin geri kalanıyla uyum sağlamak için piksel olarak ayarlanabilen görüntünün genişliği ve yüksekliği. Örnek: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Etrafında parantezler< и >kaldırmak.

Alfabeyi kendiniz çizme imkanınız yoksa, büyük harf, Google'da (Fonts bölümü) veya diğer arama motorlarında ve kaynaklarda ücretsiz olarak bulunan fontlar kullanılarak tasarlanabilir. Bunu yapmak için yukarıdaki kod aşağıdaki gibi biçimlendirilmelidir:

(<) style(>)

p (yazı tipi ailesi: batangche; yazı tipi boyutu: %93;)

p: ilk harf (yazı tipi ailesi: Kelly+Slab; yazı tipi boyutu: %220; renk: mavi;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

Google hizmeti, birini veya diğerini seçmenize izin verir ve html veya css'ye eklemek için hazır bağlantılar sağlar. Bir grup yazı tipi seçmenin gerekli olduğuna dikkatinizi çekiyoruz - Latin veya Kiril, çünkü. Rusça metin biçimlendirilirken neredeyse tüm latin yazı tipleri çalışmaz. Üzerinde şu an Arama motoru ücretsiz olarak yaklaşık 40 tür sağlar.

Bir büyük harf veya onun küçük harf karşılığı ile biçimlendirilebilir css özellikleri metin dönüşümü. Stil sayfasında text transform: none değerini ayarlarsanız, metin yazdığınız şekilde görünecektir. Tüm harfleri küçük harfe dönüştürmek için, text transform: iki nokta üst üste küçük harf ve büyük harf için büyük harf değerini ayarlamanız gerekir. Mülk için aynı ayar metin değerleri transform: büyük harf kullan, her kelimenin büyük harfle başlamasını sağlar.

Harfler ve HTML CSS biçimlendirme hakkında veya daha fazlası

Bölüm örnekler içerir harf biçimlendirme Köprü Metni İşaretleme alanından.

Soldaki menüde modern ve çok detaylı HTML eğitimleri bulacaksınız.

ile web sitenizi oluşturmanıza izin vereceklerdir. temiz sayfa biraz daha aşağı bakarken.

İlginç olabilir.

çağ bilgi toplumu

İnsanlık, bilgi ve ağ teknolojilerinin son derece önemli bir rol oynadığı gelişiminin yeni bir dönemine girmiştir. Bilgi ve telekomünikasyon teknolojilerinin hızlı gelişimi ile karakterize edilen bilgi toplumu çağında yaşıyoruz. Bilgisayar ve internetin ortaya çıkmasıyla birlikte muazzam değişiklikler başladı. Bilgisayar ve internet, toplumu yeni davranış normları, kurallar ve idealler formüle etmeye zorluyor. Bir önceki nesil için televizyon neyse, yeni nesil için internet odur. Ancak Küresel Ağ, televizyondan çok daha işlevseldir, çünkü satın alma, satış yapma, iletişim kurma ve sunma fırsatı sunar. çeşitli yollar yaratma gibi kendini ifade etme kişisel web sayfaları ve siteleri.

HTML harfleri: büyük ve küçük harf

Harf biçimlendirme örneği:

Biçim sonucu:

Büyük harflerle yazılmış serbest metin örneği

Büyük harflerle yazılmış serbest metin örneği

etiketler - belirlemek büyük harfler(Bu etiketler HTML 5'te desteklenmez).

css kod stili="metin-dönüşümü:büyük harf" - tanımlar büyük harfler.

Diğer bir deyişle, büyük harfler CSS ile tanımlanırÖznitellikler.

HTML harfleri ve aralarındaki CSS boşlukları

Harf biçimlendirme örneği:

Biçim sonucu:

Keyfi HTML metni ve CSS aralığı 2 piksel harfler arasında

Niteliklerin ve değerlerin açıklaması:

css kod stili="harf aralığı:2px" - tanımlar CSS harf aralığı.

Soldaki menüde benzer biçimlendirme örnekleri arayın. İlginiz için teşekkür ederiz.

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

O zaman ve şimdi mektuplar

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, matbaaların baskıyı endüstriyel bir düzeye getirmeyi mümkün kıldığı 8. yüzyıldan 15. yüzyıla kadar kullanılmaya devam etti. Hem el yazısı hem de basılı büyük harfler metnin başına yerleştirildi. Genellikle mektubun etrafına yerleştirilmiş dekoratif bir desenle süslenmişlerdi.

Yükseltilmiş ve alçaltılmış harfler bugün hala kullanılmaktadır. Gazetelerde, dergilerde ve kitaplarda ve dijital baskıda bulunabilirler. Yükseltilmiş harflere bazen uzatılmış denir. Onları takip eden metnin alt kısmı ile aynı hizada yerleştirilirler. Bırakılan harfler metnin üst kısmıyla aynı hizada, bazen metin içeriğinin ana gövdesinin arkasındaki bir katmana yerleştirilir veya metnin geri kalanı bunların etrafına sarılır.

Yükseltilmiş harfler, metnin geri kalanıyla aynı hizada olduklarından ve genellikle dış kenar boşluklarının sarılmasını değiştirmeye gerek duymadıklarından tanımlanması çok daha kolaydır. Atlanan harfler daha fazlasını gerektirir ince ayar. Yükseltilmiş karakterlerin nasıl ele alındığını ilk önce anlarsanız, bununla başa çıkmanız daha kolay olacaktır.

sınıfları kullanma

Halihazırda CSS bilgisi olan tasarımcılar, ilk büyük harf için ayrı bir CSS sınıfı oluşturmayı bilirler.

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

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

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

Bize ne verir:

Çok kolay mı görünüyor? Aslında, her büyük harf özel karakter aralığı gerektirdiğinden, belirli yükseltilmiş harflere bağlı olarak 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 kenar boşluğu negatiftir.

Myinitialcapsi(font-size:48px; font-family: Didot; sağ kenar boşluğu:-1px;)

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.

Yukarıdaki örnekteki ekran çözünürlüğüne bağlı olarak, I ve n birleşmiş gibi görünebilir. Bunun nedeni harflerin sonundaki seriflerdir. Bu nedenle, son CSS stillerini seçmeden önce siteyi şurada test edin: çeşitli cihazlar CSS metninin üzerlerinde nasıl göründüğünü görmek için.

Fiyat teklifleri ve diğer özel durumlar

Sadece metnin başındaki harfleri artıramazsınız. Harfin yanında görünecek tırnak işaretlerinin daha büyük bir versiyonunu oluşturmak için başka bir sınıf uygulayabilirsiniz. Bizim durumumuzda, ne 48 boyutundaki harf sınıfı ne de 20 piksellik metin sınıfı tırnak işaretleri için uygun değildir. Aksine, - 30 piksel arasında bir şey olacaktır. Tırnak işaretlerini I ile optik olarak hizalamak için 4 piksel aşağı taşırız:

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

“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 büyük harflerini 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 ötesine, sola taşınması gerekecektir. Aynı işlemi C, G, O ve Q gibi yuvarlak harflerle de yapmanız gerekecektir. Bu örnekte 20, 30 ve 48 yazı tipi boyutları kullanılmaktadır. Ancak boyutları, seçtiğiniz belirli yazı tiplerine göre ayarlamanız 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

CSS sözde öğesini kullanarak, paragraf öğesine ::first-letter ekleyerek kolayca yükseltilmiş bir harf oluşturabilirsiniz. Kullanın :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; dolgu altı: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 bir HTML kodu şöyle görünecektir…

İ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ünmesi gerekiyor?

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.

hakkında Lütfen unutmayın kaynak kodu HTML'de ilk harf büyük yazılmaz, ancak 3.6em karakterine dönüştürülür.

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

Sözde öğelerin sağladığı avantajlara rağmen, karakter aralığı ve dolgu 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 CSS büyük harfe çevirecektir. Bazıları için uygun olmayabilir çünkü her paragrafın ilk harfini çevirmeniz gerekmez.

Akıllı Bir Düzen Oluşturmak için Sözde Sınıfları ve Sözde Öğeleri Birleştirme

: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 ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( 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ştirerek:

First-child olarak tanımlanan ilk harf, bu yöntemde yükseltilmiş bir büyük harfe dönüşen 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 bir paragrafın başlangıcından sonra ve zorunlu satır sonundan sonra ilk harfleri dönüştürmeyiz. Bu, paragrafların tüm ilk harflerini dönüştürdüğümüzde mizanpajın nasıl göründüğünden daha zarif görünüyor.

Sahte sınıfları kullanmanın avantajı, çeşitli özel durumları ele alma yeteneğidir. Peki dezavantajlar? 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, öğelere de uygulayabilirsiniz.