CSS üretmenizi sağlar esnek özelleştirme HMTL dili kullanılarak temsil edilen metin. Bugün bir 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 belirtiminde bulunur.
Randevu
"text-transform" özelliği üç ana değer ve iki ek değer alabilir. Örneğin, seçilen tüm metne büyük harf atayabilirsiniz. Veya tüm karakterlerin küçük harfe dönüştüğü önceki özelliğin tam tersi bir komut verebilirsiniz. Size uygun olan herhangi bir yöntemle randevu alabilirsiniz. Örneğin, satır içi stilleri kullanma. Veya oluşturabilirsiniz
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. Seçilen tüm karakterleri büyük harf yapar. Bu değer, metinle ilgili birçok karmaşık sorunun çözülmesine yardımcı olabileceğinden, CSS'de büyük harf yaygındır.
- Küçük harf. Bu özellik, büyük harf komutunun tam tersidir.
- Büyük harf kullan. İlk harfi büyük harfe çevirir. Diğer karakterler değişmeyecek.
- Hiçbiri. Atanan tüm değerleri atmanıza izin verir (bir özelliği önceden tanımlamak için gereklidir). Genellikle, verilen değer varsayılan olarak yüklenir.
- Miras. Tüm özellikleri şuradan devralır: ana öğe... IE'nin bu özelliği desteklemediğine dikkat edilmelidir.
Başvuru
İLE BİRLİKTE CSS kullanarak 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 kullanışlı olmayabilir. Ancak kontrolünüz altında, belirli parçalardaki harflerin durumunu düzeltmeniz gereken büyük 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, ardından tüm ikinci düzey başlıklar büyük harf olacaktır.
özellikler
Bazıları, "text-transform" özelliğini kullanarak manuel metin işlemenin ve yazı tipi değişikliğinin hiçbir fark yaratmadığını düşünebilir. Ama durum böyle değil. Manuel olarak büyük harfe (büyük harf) değiştirirseniz, bu bilgiyi sitenizden kopyaladığınızda karakterler değişmeden kalır. CSS kullanıyorsanız, işler farklıdır. "text-transform" özelliği, kullanıcılar için yazı tipini yalnızca görsel olarak değiştirir. Ama gerçekte, semboller değişmeden kalır. Bu, bu özellik için tüm değerlerle olur. Kopyalanan bilgi (metin), içinde kullanılan orijinal kayıt defterine sahip olacaktır. kaynak kodu sayfalar. Bu, elle işleme ile CSS komutlarını kullanma arasındaki tek farktır.
Hangisini kullanmak istediğiniz önemli değil - küçük veya büyük harf, asıl şey amacı unutmamaktır. Örneğin, yalnızca dekoratif amaçlı değişikliklere ihtiyacınız varsa, "text-transform" özelliğini güvenle kullanabilirsiniz. Kullanıcılarınızın muhtemelen gönderdiğiniz bilgileri kopyalayacağını biliyorsanız, tüm metinlerin durumunu manuel olarak değiştirmek en iyisidir. Gerçekten de, 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 çok önemlidir.
Son video eğitiminde, nasıl silineceğini ve yeni bilgilerin nasıl ekleneceğini öğrendik. Yeni sürüm HTML belgesi, raporlarken arama motorları ve ziyaretçilerin de değişiklikleri görebilmesi için görsel olarak vurgulama. Bunun için del ve ins etiketlerini kullandık.
Bu video eğitiminde, bir HTML belgesindeki metni biçimlendirme konusuna devam ediyoruz. Metnin üst simge ve alt simgelerini belirten iki HTML etiketine göz atacağız.
HTML destek etiketi, HTML'deki metnin üst simgesidir.
HTML etiketi HTML'deki metnin üst simgesini belirtmek içindir. Bazı site konularında bu etiket basitçe yeri doldurulamaz olacaktır. Örneğin, matematiksel veya kimyasal herhangi bir formülle ilişkili bir siteniz varsa veya planlıyorsanız. Veya bir şantiye varsa, etiket çok faydalı olacak ve makalelerin tasarımında, formüller veya herhangi bir miktar yazarken, örneğin inşaat konusundaki metrekarelerde yardımcı olacaktır.
Ancak siteniz listelenen konulara ait değilse, bu etiketin olduğu anlamına gelmez. kullanışlı olmayacak. Hayal gücü ve ustalık göstermek ve bu öğe için bir uygulama bulmak yeterlidir.
HTML alt etiketi - HTML'deki metnin alt simgesi.
HTML etiketine gelince o zaman etiketin tersi , ve metnin alt indisini belirtmekten sorumludur. Metnin alt simgesi, formüller veya matematiksel denklemler yazarken kullanılabilir. Ancak bunun yanı sıra, etiket için başka kullanımlar da bulabilirsiniz. .
Bir sonraki Video Dersi, bazı durumlarda basitçe yeri doldurulamaz olabilen iki etikete daha ayrılmıştır. Ayrıca, örneğin bir makaledeki metni yalnızca biçimlendirmekle kalmaz, aynı zamanda sayfa düzeni sırasında sitede çeşitli bilgileri belirtirken de yapabilirler. Etiketlerden biri HTML'ye sarılır ve diğeri yatay bir çizgi çizer.
HTML Etiketleri ve - Alt Simge ve Üst Simge Metni
Tanım ve Kullanım
Etiket alt simge metnini tanımlar. Alt simge yüksekliğin yarısıdır ve taban çizgisinin altında görünür. Alt simge, H 2 O gibi kimyasal formüller yazılırken kullanılabilir.
Etiket üst simge metnini tanımlar. Üst simge metni yüksekliğin yarısıdır ve satır taban çizgisinin üzerinde görünür. Üst simge, WWW gibi dipnotlar yazarken 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 Nitelikler
Kolon DTDözniteliğe hangi belge türünde HTML 4.01 / XHTML 1.0 DTD izin verildiğini belirtir. S = Katı, T = Geçiş ve F = Çerçeve Kümesi.
Etiketler: ve aşağıdaki standart özellikleri destekler:
| Bağlanmak | Anlam | Açıklama | DTD |
|---|---|---|---|
| sınıf | sınıf adı | Bir öğe için sınıf adını belirtir | STF |
| yön | rtl litre |
Bir öğedeki içerik için metin yönünü belirtir | STF |
| İD | tanımlayıcı | Bir öğe için benzersiz bir tanımlayıcı belirtir | STF |
| dil | dil kodu | Bir öğenin içeriği için dil kodunu belirtir | STF |
| stil | stil_tanımı | Bir öğe için satır içi stili belirtir | STF |
| Başlık | Metin | gösterir Ek bilgiöğe hakkında | STF |
| xml: dil | dil kodu | XHTML belgelerindeki öğe içeriği için dil kodunu tanımlar | STF |
Standart Nitelikler hakkında daha fazla bilgi edinin.
Etkinlik Özellikleri
Etiketler: ve aşağıdaki olay özniteliklerini destekleyin:
| Bağlanmak | Anlam | Açıklama | DTD |
|---|---|---|---|
| tıklamada | senaryo | Fareyle tıklanan komut dosyası | STF |
| ondblclick | senaryo | Çift tıklanan komut dosyası | STF |
| onmousedown | senaryo | Fare tıklamasıyla çalıştırılacak komut dosyası | STF |
| onmousemove | senaryo | Fare işaretçisi hareket ettirildiğinde çalıştırılacak komut dosyası | STF |
| fare çıkışı | senaryo | Fare öğenin dışına çıktığında çalıştırılacak komut dosyası | STF |
| fare üzerinde | senaryo | Fare bir öğenin üzerine geldiğinde çalıştırılacak komut dosyası | STF |
| onmouseup | senaryo | Fare düğmesi bırakıldığında çalıştırılacak komut dosyası | STF |
| onkeydown | senaryo | Bir tuşa basıldığında çalıştırılacak komut dosyası | STF |
| tuşa basmak | senaryo | Bir tuşa basıldığında ve ardından serbest bırakıldığında çalıştırılacak komut dosyası | STF |
| onkeyup | senaryo | Bir anahtar bırakıldığında çalıştırılacak komut dosyası | STF |
hakkında ek bilgiler
Metne göre dizin, satır taban çizgisinden yukarı veya aşağı karakterlerin kaymasıdır. Pozitif veya negatif ofset değerine bağlı olarak, indeks sırasıyla üst veya alt olarak adlandırılır. Matematik, fizik, kimyada ve ölçü birimlerini belirlemek için aktif olarak kullanılırlar. HTML, bir dizin oluşturmak için iki öğe sunar: (İngilizce üst simgeden) - üst simge ve (İngilizce alt simgeden) - alt simge. Bu kaplardan birine yerleştirilen metin, temel metinden daha küçük olarak belirlenir ve ona göre yukarı veya aşağı kaydırılır. Örnek 1 gösterileri paylaşmak metnin görünümünü değiştirmek için belirtilen öğeler ve stiller.
Örnek 1. Üst simge ve alt simge oluşturun
İkinci dereceden bir yüzeyin karakteristik denklemi
λ 3- BEN 1λ 2+ ben 2λ - ben 3 = 0
Örnek, aynı anda hem alt simge hem de üst simge içerir. Dizinin yazı tipi stilini değiştirmek için, tek tip bir görünüm ayarlayan stiller uygulanır (Şekil 1).
Pirinç. 1. Stilleri uyguladıktan sonra dizinlerin görünümü
kullanmayı tamamen reddedebilirsiniz. ve tarzlar lehine. Bu öğelerin analogu, metni dikey olarak belirli bir mesafe kadar kaydırmaya zorlayan dikey hizalama özelliğidir. Spesifik olarak, Örnek 2, değer olarak üst simge için 0.8em ve alt simge için -0.5em kullanır. Em, geçerli yazı tipinin boyutuna eşit göreli bir birimdir. Örneğin 0,5em, metnin yazı tipi boyutunun yarısı kadar kaydırılması gerektiği anlamına gelir.
Örnek 2. Dizinleri Yönetmek için Stilleri Kullanma
derece polinomu n
f(x) = bir 0+ bir 1 x + ... + bir n-1 x n-1+ bir n x n
Örnekte, formülün kendisi büyütülmüş bir boyutta görüntülenir, üst simge karakterler kırmızı ve alt karakterler - mavi olarak ayarlanır (Şekil 2).
Birkaç ders için, CSS kullanarak metin biçimlendirme konusunda çok çalıştık ve bu sefer metnin büyük/küçük harf durumunu nasıl değiştireceğimizi öğreniyoruz. Bu bağlamda, basamaklı stil sayfaları bizim için çok geniş olanaklar açar 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 harfini büyük harfle başlatın.
"Elbette bunların hepsi iyi, ama ne zaman ihtiyacın olabilir?" - sen sor. Tüm menü öğelerini büyük harflerle görüntülemek istediğiniz bir durum hayal edin. Bunu yapmak için CapsLock tuşu da dahil olmak üzere veya Shift tuşunu basılı tutarken bunları yazmanıza gerek yoktur. 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 birçok olası durumdan sadece biridir.
metin dönüştürme özelliği
text-transform özelliğini kullanarak metnin durumunu kontrol edeceğiz. 4 ana değeri vardır - 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, geri kalan değerler değişmez), hiçbiri (biçimlendirme uygulanmaz) . İlk bakışta, tüm bunlar size çok karmaşık görünebilir.
Ana şey panik yapmamak ... Ancak pratikte, şimdi göreceğiniz gibi her şey oldukça basit. Ana şey doğru seçiciyi seçmektir, çünkü text-transform özelliğinin değerleri miras alınır.
Büyük harflerle seçin
Önerdiğim ilk şey, aşağıdaki CSS kuralını oluşturduğumuz metnin tamamını büyük harf yapmaktır:
Gövde (metin dönüştürme: büyük harf;)
Prensip olarak, karmaşık bir şey yok, sadece büyük harf değerini kullandık. Dedikleri gibi, her şey sezgiseldir. Gerçek hayatta böyle görünüyor:
Büyük harfli her şey... Küçük harf - hepsine uygula
Bir sonraki adımda, aşağıdakileri yazdığımız her yere küçük harfler uygulayalım:
Gövde (metin dönüştürme: küçük harf;)
Tahmin edebileceğiniz gibi, az önce tanıştığımız iki anlam bir şekilde zıt anlamlıdır. Ve aşağıdaki resimde yeni oluşturulan özelliğin sonucunu görebilirsiniz.
Küçük harf etkinleştirilmiş web sayfası Her kelimenin ilk harfini büyük harf
Bunu yapmak için, karşılık gelen değeri kullanmamız yeterlidir:
Gövde (metin dönüştürme: büyük harf;)
Böyle bir CSS kuralını ne sıklıkta kullanacağınızı bilmiyorum ama böyle bir olasılığı bilmek, özellikle önemsiz olmayan problemleri çözerken size zarar vermez. Sonuç aşağıdaki resimde görülebilir.
Büyük harf kullanımı uygulandıktan sonra metin Son olarak, son değere hızlıca bir göz atalım, yok. Dediğim gibi, bir ebeveynden kalıtımı tersine çevirmek için kullanılabilir. Örneğin, önceki tüm kuralların yürürlükte olduğunu ve paragraflar için onları iptal etmemiz gerektiğini düşünelim, bunun için aşağıdakileri yazıyoruz:
P (metin dönüştürme: yok;)
Her şeyi anladığınızı varsaymaya cüret ediyorum, aksi takdirde sorularınızı yorumlarda sorun. Ve hepsi benim için. Umarım bu CSS eğitimini faydalı bulmuşsunuzdur. Eğer doğruysa:
- Bu makaleyi yeniden yayınla sosyal ağlar daha çok insan faydalansın diye;
- Yararlı ve ilginç blog yazılarını kaçırmamak için e-posta listeme abone olun.
Bu konuda sana veda etmiyorum. İlginiz için teşekkür ederiz ve sonraki yayınlarda görüşmek üzere!