Büyük html etiketi. Sözde öğeleri kullanarak css stillerini büyük harfle değiştirme. Orta Çağ kültür anıtı
İyi günler, site kurma meraklıları. Bugünkü yayında, metin içeriğinin tasarımıyla ilgili bir konuyu ele alacağız. Bu nedenle css'de büyük harflerin nasıl ayarlanacağını öğreneceksiniz - bu sayede, bir gömme oluşturmak için çeşitli seçeneklerle tanışın ve tabii ki her şeyi pratikte deneyebilirsiniz. Şimdi eğlenceli kısma geçelim!
Hadi metni değiştirelim
Basamaklı stil sayfaları ile hem bloğun ilk karakterini hem de tüm metni değiştirebilirsiniz. Her ikisini de nasıl yapabileceğinizi size göstereceğim. Ayrıca, bu makalede adı geçen tüm araçlar, dilin üç düzeyinde 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üşümü.
Adlandırılmış öğe, karakterleri büyük ve küçük harfe dönüştürebilir ve ayrıca sözcüğün her ilk karakterini büyük harf yapabilir. Tablodaki değerler hakkında daha çok yazdım.
Şimdi teorik materyali pekiştirmek için bir örnek alalım.
Dikkat!
Yarın tüm güzellik ürünlerinde indirim!
Promosyon, şehrinizde bulunan tüm şubelerde geçerlidir.
Gömme kapak oluşturma
"Üst sınır" teriminin ne anlama geldiğini bilmiyorsanız, o zaman doğrudan güncel konuyla ilgili olduğundan öğrenmenin zamanı gelmiştir.
Gömme (veya bazen ilk harf bazen söylenir), 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 baş harf oluşturmanın birkaç yolu vardır. Genellikle bir karakter, biçimlendirme dili etiketiyle ayırt edilir ve bundan sonra, onu değiştiren stillerde belirli özellikler belirlenir. Bu iyi bir yoldur, 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 elemanlar gibi, seçiciye iki nokta üst üste ile ayrılmış olarak atanır. Ardından 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 örneği düşünmeyi öneriyorum. Sunulan küçük programı uygularken, sadece renkli bir kapak yapmaya değil, çiçeklerle doldurmaya karar verdim. Bunu yapmak için, yazı tipi rengini şeffaf olarak ayarlamak ve harfi seçilen görüntü ile doldurmak için birkaç hileli 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 benim verdiğim kodu, stilinizi değiştirerek ve ayarlayarak kolayca kullanabilirsiniz.
Yukarıdaki materyal sizin için yararlıysa, blogumdaki güncellemelere abone olun ve edindiğiniz bilgileri (ve tabii ki bloguma bir bağlantı) arkadaşlarınızla paylaşmayı unutmayın. İyi şanslar!
Güle güle!
Saygılarımızla, Roman Chueshov
HTML'de yazı tipi boyutu önemli bir rol oynar. Kullanıcının dikkatini web sitesi sayfasında yayınlanan önemli bilgilere çekmenize olanak tanır. Sadece harflerin boyutu değil, aynı zamanda renkleri, kalınlıkları ve hatta aileleri de önemlidir.
HTML yazı tiplerine sahip robot olduğunda etiketler ve öznitelikler
Köprü metni dili, yazı tipleriyle çalışmak için geniş bir araç setine sahiptir. Sonuçta, html'nin ana görevi metin biçimlendirmesidir.
HTML dilinin yaratılmasının nedeni, tarayıcılarda metin biçimlendirme kurallarının görüntülenmesi sorunuydu.
Html'deki fontlarla çalışmak için kullanılan etiketleri ve özniteliklerini göz önünde bulundurun. Ana etiket ... Özniteliklerinin değerlerini kullanarak yazı tipinin birkaç özelliğini ayarlayabilirsiniz:
- renk - metnin rengini ayarlar;
- boyut - geleneksel birimlerde yazı tipi boyutu.
1'den 7'ye kadar pozitif öznitelik değerleri desteklenir.
- yüz - etiket içinde kullanılacak metnin yazı tipi ailesini ayarlamak için kullanılır ... Virgülle ayrılmış birkaç değer aynı anda desteklenir.
Yalnızca eşleştirilmiş yazı tipi etiketinin bölümleri arasındaki metin biçimlendirilir. Metnin geri kalanı standart varsayılan yazı tipinde görüntülenir.
Ayrıca html'de yalnızca bir biçimlendirme kuralı belirten bir dizi eşleştirilmiş etiket vardır. Bunlar şunları içerir:
- - html'de kalın yazı tipini ayarlar. Etiket eylem öncekine benzer;
- - boyut varsayılandan daha büyüktür;
- - daha küçük yazı tipi boyutu;
- - italik metin. Benzer etiket ;
- - altı çizili metin;
- üstü çizildi;- - metni yalnızca küçük harf olarak görüntüler;
- - büyük harfle.
Düz metin
Küçük resim
Küçük resim
Normalden daha fazla
Normalden daha az
İtalik
İtalik
Altı çizili
Üstü çizildi
Stil niteliği yetenekleri
Açıklanan etiketlere ek olarak, yazı tipini html'de değiştirmenin birkaç yolu daha vardır. Bunlardan biri, genel stil niteliğinin kullanılmasıdır. Özelliklerinin değerlerini kullanarak yazı tipi görüntüleme stilini ayarlayabilirsiniz:
1) yazı tipi ailesi - özellik yazı tipi ailesini belirler. Birkaç değerin numaralandırılması mümkündür.
Yazı tipini html olarak bir sonraki değere değiştirmek, önceki aile kullanıcının işletim sisteminde yüklü değilse gerçekleşir..
Sözdizimi yazılıyor:
yazı tipi ailesi: yazı tipi adı [, yazı tipi adı [, ...]]
2) yazı tipi boyutu - boyut 1'den 7'ye ayarlanır. Bu, yazı tipini html olarak artırmanın ana yollarından biridir.
Sözdizimi yazılıyor:
yazı tipi boyutu: mutlak boyut | göreli boyut | değer | ilgi | miras almak
Yazı tipi boyutunu da ayarlayabilirsiniz:
- Piksel cinsinden;
- Mutlak değerde ( xx-küçük, x-küçük, küçük, orta, büyük);
- Yüzde cinsinden;
- Puan cinsinden (pt).
Yazı tipi boyutu: 7
Yazı tipi boyutu: 24px
Yazı tipi boyutu: x-büyük
Yazı tipi boyutu:% 200
Yazı tipi boyutu: 24pt
3) yazı tipi stili - yazı tipini yazma stilini ayarlar. Sözdizimi:
yazı tipi stili: normal | italik | eğik | miras almak
Değerler:
- normal - normal yazım;
- italik - italik;
- eğik - sağa yaslanmış yazı tipi;
- miras - ana öğenin yazılışını devralır.
Bu özelliği kullanarak html'deki yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi stili: devralma
yazı tipi stili: italik
yazı tipi stili: normal
yazı tipi stili: eğik
4) yazı tipi değişkeni - tüm büyük harfleri büyük harfe dönüştürür. Sözdizimi:
yazı tipi değişkeni: normal | küçük harfli | miras almak
Bu özellik ile html'deki yazı tipinin nasıl değiştirileceğine bir örnek:
yazı tipi değişkeni: devralma
yazı tipi değişkeni: normal
yazı tipi değişkeni: küçük büyük harf
5) yazı tipi ağırlığı - metnin yazı kalınlığını (doygunluk) ayarlamanıza olanak tanır. Sözdizimi:
yazı tipi ağırlığı: kalın | kalın | daha hafif | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Değerler:
- kalın - html kalın yazı tipini ayarlar;
- daha cesur - normale göre daha şişman;
- daha hafif - normale göre daha az doymuş;
- normal - normal yazım;
- 100-900 - yazı tipi kalınlığını sayısal eşdeğeri olarak ayarlar.
yazı tipi ağırlığı: kalın
yazı tipi ağırlığı: daha kalın
yazı tipi ağırlığı: daha açık
yazı tipi ağırlığı: normal
yazı tipi ağırlığı: 900
yazı tipi ağırlığı: 100
Yazı tipi özelliği ve html yazı tipi rengi
Yazı tipi başka bir kap özelliğidir. Dahili olarak, yazı tiplerini değiştirmek için tasarlanmış birkaç özelliğin değerlerini birleştirdi. Yazı tipi sözdizimi şöyledir:
yazı tipi: yazı tipi boyutu yazı tipi ailesi | miras almak
Ayrıca, sistem tarafından çeşitli kontroller üzerindeki yazılarda kullanılan yazı tipleri bir değer olarak ayarlanabilir:
- başlık - düğmeler için;
- simge - simgeler için;
- menü - menü;
- mesaj kutusu - iletişim kutuları için;
- small-caption - küçük kontroller için
- durum çubuğu - durum çubuğu yazı tipi.
yazı tipi: simge
yazı tipi: başlık
yazı tipi: menü
yazı tipi: ileti kutusu
küçük başlık
yazı tipi: durum çubuğu
yazı tipi: italik 50px kalın "Times New Roman", Times, serif
Yazı tipi rengini html olarak ayarlamak için color özelliğini kullanabilirsiniz. Bir anahtar kelime veya rgb biçimi kullanarak rengi ayarlamanıza olanak tanır. Ve ayrıca onaltılık bir kod biçiminde.
Öğe metninin büyük veya küçük harf karakterlerine dönüştürülmesini kontrol eder. Değer hiçbiri dışında olduğunda, kaynak metnin büyük / küçük harf durumu değişecektir.
kısa bilgi
Tanımlamalar
| Açıklama | Misal | |
|---|---|---|
| <тип> | Değerin türünü gösterir. | <размер> |
| A && B | Değerler gösterilen sırayla görüntülenmelidir. | <размер> && <цвет> |
| A | B | Önerilen değerlerden yalnızca birinin (A veya B) seçilmesi gerektiğini belirtir. | normal | küçük şapkalar |
| A || B | Her bir değer tek başına veya herhangi bir sırayla diğerleriyle birlikte kullanılabilir. | genişlik || Miktar |
| Grup değerleri. | [kırpma || çapraz] | |
| * | Sıfır veya daha fazla kez tekrarlayın. | [,<время>]* |
| + | Bir veya birkaç kez tekrarlayın. | <число>+ |
| ? | Belirtilen tür, kelime veya grup isteğe bağlıdır. | inset? |
| (A, B) | En az A'yı, ancak B defadan fazla tekrarlamayın. | <радиус>{1,4} |
| # | Virgülle ayırarak bir veya daha fazla kez tekrarlayın. | <время># |
Değerler
büyük harf Cümledeki her kelimenin ilk karakteri büyük yazılır. Sembollerin geri kalanı görünüşlerini değiştirmez. küçük harf Tüm metin karakterleri küçük harf olur (küçük harf). büyük harf Tüm metin karakterleri büyük harftir (büyük harf). hiçbiri Büyük / küçük harf değişmez.
Kum havuzu
Winnie the Pooh, özellikle sabah saat on birde, biraz serinletmeye her zaman karşı değildi, çünkü bu sırada kahvaltı çoktan bitmişti ve akşam yemeğinin başlaması bile aklına gelmemişti. Ve tabii ki, Tavşan'ın bardak ve tabak çıkardığını görünce çok mutlu oldu.
div (metin dönüşümü: büyük harfle yaz;)
Misal
Orta Çağ kültür anıtı
Amazon ovaları küçük bir kedi ve köpek taşımacılığını üstlenir ve Hayosh Körfezi kırmızı şaraplarıyla ünlüdür.
Bu örneğin sonucu Şekil 1'de gösterilmektedir. 1.
Şekil: 1. Metin dönüştürme özelliğini uygulama
Nesne Modeli
Bir obje.style.textTransform
Şartname
Her şartname birkaç onay aşamasından geçer.
- Öneri - Bu özellik W3C tarafından onaylanmıştır ve standart olarak önerilir.
- Aday Tavsiyesi ( Olası öneri) - standarttan sorumlu grup, hedefleriyle uyumlu olduğundan memnun, ancak standardı uygulamak için geliştirici topluluğunun yardımı gerekiyor.
- Önerilen Öneri ( Önerilen öneri) - Bu noktada, belge nihai onay için W3C Danışma Konseyi'ne sunulur.
- Çalışma Taslağı - Tartışma ve topluluk incelemesi için revizyondan sonra taslağın daha olgun bir versiyonu.
- Editörün taslağı ( Editoryal taslak) - proje editörleri tarafından düzenlendikten sonra standardın taslak versiyonu.
- Taslak ( Taslak şartname) standardın ilk taslağıdır.
Genellikle siteye materyal eklerken veya örneğin forumda yeni bir konu oluştururken aceleyle, kullanıcı küçük (küçük harfli) bir harfle bir cümle (başlık) yazmaya başlayabilir. Bu bir dereceye kadar bir hatadır.
Bu sorunu çözmek için size birkaç seçenek göstereceğim: PHP ve CSS, jQuery'nin durumu yayınlanmadan önce bile düzeltebildiği haldeyken zaten yayınlanmış materyaller için daha uygundur.
PHP'de bir dizenin ilk harfi büyüktür
PHP'de " 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.
Bunun 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 harfi büyük
Bu yöntem görsel olarak (yani sitenin kaynak kodunda teklifler olduğu gibi görünecektir) ilk karakteri de büyük harfe çevirir.
Kullanım şekli 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üşümü»Paragrafın her ilk harfinin görünümünü ayarladık.
JQuery dizenin büyük harfli ilk harfi
Daha önce de söylediğim gibi, bu dönüştürme yöntemi, henüz yayınlanmamış materyaller için en uygun yöntemdir.
Örneğin, bir metin alanı alacağız (bizim için bir başlık girmek için bir alan görevi görecek) ve onun için küçük harfli bir cümle girerken onu büyük harfle yapan küçük bir komut dosyası yazacağız:
Komut dosyası hem metin yazarken hem de yapıştırırken çalışır. Sitenizde betiklerin çalışması için jQuery kitaplığının bağlı olması gerektiğini unutmayın.
Gömme, bir paragrafın diğerlerinden daha büyük olan ilk harfidir ve üst kısmı paragrafın ilk satırı seviyesinde olacak şekilde yerleştirilir. Görselde, metne gömülü gömme bir örnek görebilirsiniz.
Bu arada, WordPress'in metne otomatik olarak gömülü oluşturmanıza (ve ofset azaltmanıza) izin veren özel bir eklentisi (wordpress.org/extend/plugins/drop-caps) vardır. büyük harfler... Olağanüstü! Ancak, ya bir eklenti kullanmak istemiyorsanız (eminim kullanmıyorsunuzdur) ve sadece birkaç gönderi için ve belki de belirli bir konum için bir gömme oluşturmanız gerekiyorsa?
İyi haber: Büyük harfler oluşturmak için bir eklenti kullanmanıza gerek yok, tek ihtiyacınız olan küçük bir css ve bir span etiketi. Css dosyanızı açın ve aşağıdaki kodu ekleyin:
Span.dropcaps (font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; satır yüksekliği: 1em; kenar boşluğu: -0.4em; kenar boşluğu-sağ : 0.09em; konum: göreceli;)
Bunun gibi bir şey. Tabii ki, tasarımınıza ve metninize uygun bir stile ihtiyacınız olacak. Örneğin, özellik değerleri: yazı tipi boyutu, kenar boşlukları ve satır yüksekliği tasarımınıza ve metninize bağlı olarak seçilmelidir.
Aralık etiketi
Metnin büyük harfine stilin uygulanabilmesi için, span etiketindeki büyük harfi "kaydırmanız" ve uygun sınıfı yazmanız gerekir.
Bir
Sözde eleman: ilk harf
İlk harf sözde öğesini kullanarak metindeki ilk karakterin stilini de belirleyebilirsiniz. Ancak, ilk harf sözde elemanına sınırlı sayıda özellik uygulanabilir: bunlar yazı tipi, renk, arka plan, kenarlıklar, kenar boşlukları ve dolgu ile ilgili özelliklerdir. İlk harf sözde öğesinin eski tarayıcılarda çalışmayacağına da dikkat edilmelidir.
P: ilk harf (yazı tipi ailesi: Georgia, serif; renk: #ccc; yazı tipi boyutu: 46px; kayan: sol; yazı tipi ağırlığı: 400; satır yüksekliği: 1em; kenar boşluğu: -0.4em; kenar boşluğu sağ: 0.09em; konum: göreceli;)
İşte birkaç düzenleme yöntemi. büyük harfler CSS kullanarak.