CSS, HMTL dili kullanılarak sunulan metnin esnek şekilde özelleştirilmesine izin verir. Bugün, yazı tipinin büyük / küçük harf durumunu değiştirmeyi mümkün kılan "text-transform" özelliğinin etkisine bakacağız. Bu seçenek tüm modern tarayıcılar tarafından desteklenir ve tüm CSS sürümlerinin teknik özelliklerine dahildir.

Randevu

"Metin dönüştürme" özelliği, üç birincil değer ve iki ek değer alabilir. Örneğin, tüm seçili metne bir büyük harf atayabilirsiniz. Veya tüm karakterlerin küçük harf olduğu önceki özelliğin tersine bir komut verebilirsiniz. Size uygun olan herhangi bir yöntemi kullanarak randevu alabilirsiniz. Örneğin, satır içi stilleri kullanmak. Ya da yaratabilirsin

Tüm özelliklerin açıklamasını içeren ayrı bir dosya. Hangi atama yöntemini kullanacağınız size kalmış. "Metin dönüştürme" aşağıdaki değerleri alabilir:

• Büyük harf. Tüm seçili karakterleri büyük harf yapar. Büyük harf CSS'de yaygındır, çünkü bu değer metinle ilgili birçok karmaşık sorunu çözmeye yardımcı olur.
• Küçük harf. Bu özellik, büyük harf komutunun tam tersidir.
• Büyük harfle yaz. İlk harfin büyük / küçük harf durumunu büyük harfe dönüştürür. Karakterlerin geri kalanı değiştirilmeyecek.
• Yok. Atanan tüm değerleri iptal etmenize olanak sağlar (bir özelliği önceden tanımlamak için gereklidir). Tipik olarak, bu değer varsayılan olarak ayarlanır.
• Devralın. Tüm özellikleri ana öğeden devralır. IE'nin bu özelliği desteklemediğine dikkat edilmelidir.

Uygulama

CSS ile, büyük harf (veya benzer efektler) tek bir basit komutla ayarlanır. Bu nedenle, metnin tamamını değiştirmeye veya yeniden yazmaya gerek yoktur. Tek sayfalık bir siteden bahsediyorsak, bu özellik yararlı olmayabilir. Ancak kontrolünüz altında, belirli parçalardaki harflerin büyük / küçük harflerini düzeltmeniz gereken devasa bir portalınız olduğunda, "metin dönüştürme" tek etkili araç haline gelir. Örneğin, "h2" başlık etiketlerinde yazı tipini düzeltmeniz gerekir. Bunu yapmak için, "h2 (text-transform: büyük harf;)" girişini ekleyin ve ardından tüm ikinci düzey başlıklar büyük harf olacaktır.

Özellikleri:

Bazıları metni elle değiştirmenin ve "text-transform" özelliğini kullanarak yazı tipini değiştirmenin hiçbir fark yaratmadığını düşünebilir. Ancak durum bu değil. El ile büyük harfe (büyük harf) değiştirirseniz, bu bilgiyi sitenizden kopyalarken karakterler değişmeden kalacaktır. CSS kullanıyorsanız, işler farklıdır. "Metin dönüştürme" özelliği, kullanıcılar için yalnızca görsel olarak yazı tipini değiştirir. Ancak gerçekte semboller değişmeden kalır. Bu, bu özelliğin tüm değerlerinde olur. Kopyalanan bilgiler (metin), sayfanın kaynak kodunda kullanılan orijinal duruma sahip olacaktır. Bu, manuel işleme ile CSS komutlarını kullanmak arasındaki tek farktır.

Hangisini kullanmak istediğiniz önemli değil - küçük veya büyük harf, asıl mesele amacı unutmamak. Örneğin, yalnızca dekoratif amaçlı değişikliklere ihtiyacınız varsa, "metin dönüştürme" özelliğini güvenle kullanabilirsiniz. Kullanıcılarınızın muhtemelen gönderdiğiniz bilgileri kopyalayacağını biliyorsanız, tüm metnin büyük / küçük harf durumunu manuel olarak değiştirmek en iyisidir. Hatta bazen okuyucular böyle bir yazı tipi değişikliğini fark etmezler. Bu, özellikle önemli belgeler ve benzer bilgiler söz konusu olduğunda kritiktir.

Şu anda birkaç ders için CSS kullanarak metin biçimlendirme konusunda çok çalışıyoruz ve bu sefer metnin durumunu nasıl değiştireceğimizi öğreniyoruz. Bu bağlamda, basamaklı stil sayfaları bizim için çok geniş olanaklar sunar veya daha doğrusu şunları yapabiliriz:

• Tüm metni büyük harflerle görüntüleyin;
• Tüm metni küçük harflerle seçin;
• Her kelimenin ilk harfinin büyük harfle başlamasını sağlayın.

"Bunların hepsi elbette iyi, ama ne zaman ihtiyacınız olabilir?" - sen sor. Tüm menü öğelerini büyük harflerle görüntülemek istediğiniz bir durum düşünün. Bunu yapmak için, bunları CapsLock tuşu dahil veya Shift tuşunu basılı tutarken yazmanız gerekmez. CSS dosyasında karşılık gelen bir kural oluşturarak tüm liste öğelerini büyük harfle görüntülenecek şekilde ayarlamak yeterli olacaktır. Ve bu pek çok olası durumdan sadece biridir.

Metin dönüştürme özelliği

Metin dönüştürme özelliğini kullanarak metnin durumunu kontrol edeceğiz. 4 ana değere sahiptir - büyük harf (büyük harf), küçük harf (küçük harf), büyük harf (kelimenin her ilk harfi için büyük harf, değerlerin geri kalanı değişmez), hiçbiri (biçimlendirme uygulanmaz). İlk bakışta bütün bunlar size çok karmaşık görünebilir.

Ama pratikte, şimdi göreceğiniz gibi, her şey oldukça basit. Anahtar, doğru seçiciyi seçmektir, çünkü metin dönüştürme özelliğinin değerleri miras alınır.

Büyük harflerle vurgulama

Önerdiğim ilk şey, aşağıdaki CSS kuralını oluşturduğumuz tüm metni büyük harfle yazmaktır:

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

Prensip olarak, hiçbir şey karmaşık değil, sadece büyük harf değerini kullandık. Dedikleri gibi, her şey sezgiseldir. Gerçek hayatta böyle görünüyor:

Küçük harf - tümü için geçerli

Bir sonraki adımda, aşağıdakileri yazdığımız her yere küçük harf uygulayalım:

Gövde (metin dönüştürme: küçük harf;)

Tahmin etmiş olabileceğiniz gibi, az önce karşılaştığımız iki anlam biraz zıttır. Aşağıdaki çizimde, yeni oluşturulan mülkün sonucunu görebilirsiniz.

Her kelimenin ilk harfini büyük yazın

Bunu yapmak için, karşılık gelen değeri kullanmamız yeterlidir:

Gövde (metin dönüşümü: büyük harfle yaz;)

Böyle bir CSS kuralını ne sıklıkla kullanacağınızı bilmiyorum, ancak özellikle önemsiz problemleri çözerken böyle bir olasılık hakkında bilgi sahibi olmak size zarar vermez. Sonuç aşağıdaki resimde görülebilir.

Son olarak, son değere hızlıca bakalım, hiçbiri. Dediğim gibi, bir ebeveynden mirası tersine çevirmek için kullanılabilir. Örneğin, önceki tüm kurallara sahip olduğumuzu ve paragraflar için onları iptal etmemiz gerektiğini düşünelim, bunun için şunu yazıyoruz:

P (metin dönüşümü: yok;)

Her şeyi anladığınızı varsaymaya cesaret ediyorum, eğer değilse - sorularınızı yorumlarda sorun. Ve hepsi benim için. Umarım bu CSS eğitimini faydalı bulmuşsunuzdur. Öyleyse:

• Daha fazla kişinin yararlanabilmesi için bu makaleyi sosyal ağlarda tekrar yayınlayın;
• Yararlı ve ilginç blog gönderilerini kaçırmamak için posta listeme abone olun.

Bu konuda size veda etmiyorum. İlginiz için teşekkür eder, aşağıdaki yayınlarda görüşmek üzere!

Merhaba. Bazen, web sayfaları oluştururken css kullanarak bazı kelimeleri büyük harf veya üst simge konumuna ayarlamanız gerekir. Bunun nasıl yapıldığını görelim.

Css ile büyük ve küçük harf

Genel olarak, bugün istediğiniz metni etiketlerin arasına alabilirsiniz _{^{ve istediğiniz görüntüyü elde edin, ancak bunun css ile nasıl yapılabileceğini de görelim, çünkü teknik biraz farklı.}}

Örneğin, H 2 O formülünü bir html belgesine yazmanız gerekir. Bu şu şekilde yapılır:

• Formülün kendisi yazılmıştır
• Üst simge veya alt simgede görüntülenmesi gereken bu sözcükler ve sayılar, bir sınıfa atanması gereken bir span etiketi içine alınır. Örneğin: çıktısı alınacak karakterler
• CSS'de bu öğeyi ayarlamanız gerekir:

  Üst dizin (
  Dikey hizalama: süper;
  }

Bu özellik, metnin dikey hizalanmasından sorumludur. Süper değeri, metnin üst simge olarak görüntülendiğini belirtir. Ancak yazı tipi boyutu normal metinle aynı kaldı. Her şeyin daha güzel görünmesi için font-size özelliğini kullanarak yazı tipi boyutunu biraz daha küçük ayarlamanız gerekir.

Mülk basitçe böyle çalışır. Buna göre, alt simgede görüntülemek için şu şekilde yazmanız gerekir:

Üst dizin (
Dikey hizalama: alt;
}

Benzer html etiketlerinden farkı, bu kuralların yazı tipi boyutunu değiştirmemesidir, bu nedenle bunu yapmanız gerekirse, yeni boyutu stil sayfasına kaydetmeniz gerekecektir.

CSS'deki üst simge ve alt simge hakkında bilmeniz gereken tek şey bu. Mülk herhangi bir ek fırsat sağlamaz ve bunlara da ihtiyaç duyulmaz. İsterseniz, bu metni bir şekilde özelleştirebilirsiniz, ancak bu nadiren gereklidir.

Nerede işe yarayabilir

Üst simge ve alt simge metin, formüller yazarken, makalelere notlar ve işaretler eklerken kullanılabilir. Örneğin Wikipedia, her makale için kaynaklar ve notlar sağlar. Makale ilerledikçe küçük üst simge şeklinde yerleştirilirler. Bu okuyucuları rahatsız etmez ve aynı zamanda makalelere istenen görünümü vermenizi sağlar.

Özellik, CSS'nin tüm sürümlerinde tam olarak tarayıcılar arası desteklenir.

HTML Etiketleri _{ve ^{- Alt Simge ve Üst Simge Metni}}

Tanım ve Kullanım

Etiket _{alt simge metni tanımlar. Alt simge yarı yüksekliğindedir ve taban çizgisinin altında görünür. Alt simge, H 2 O gibi kimyasal formüller yazarken kullanılabilir.}

Etiket ^{üst simge metni tanımlar. Üst simge metni yarı yüksekliğindedir ve taban çizgisinin üzerinde görünür. WWW gibi dipnotlar yazılırken üst simge metni kullanılabilir.}

Tarayıcı Desteği

Etiketler _{ve ^{tüm büyük tarayıcılar tarafından desteklenir.}}

HTML ve XHTML Arasındaki Farklar

Standart Özellikler

Sütun DTD HTML 4.01 / XHTML 1.0 DTD hangi belge türünde niteliğe izin verildiğini belirtir. S \u003d Katı, T \u003d Geçişli ve F \u003d Çerçeve Kümesi.

Etiketler _{ve ^{aşağıdaki standart özellikleri destekleyin:}}

Standart Özellikler hakkında daha fazla bilgi.

Etkinlik Özellikleri

Etiketler _{ve ^{aşağıdaki olay özniteliklerini destekleyin:}}

Hakkında ek bilgiler