İ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. 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. 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 ö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ç 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 tarafımdan verilen 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
Büyük harf, tanımına göre, görece olarak boyutu artan bir metin öğesidir.Hemen hemen tüm dillerde, bir cümle büyük harfle başlar. Ve paragrafın başlangıcının belirgin bir büyük harfle tasarlanması, metni yapılandırmanıza izin verir ve okumayı kolaylaştırır. Bir web sayfası hazırlanırken, metin yazarın tercihlerine ve Rus dilinin kurallarına uygun olarak yazılabilir. Ayrıca, css uzantılı dosyaya - bir stil sayfası - belirli "komutlar" girilerek tasarımı "otomatik" hale getirilebilir veya html dosyanıza bir stil bölümü eklenebilir. Tüm metindeki 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 uygularsanız her paragrafın başındaki büyük harfler özel görünebilir. Örneğin, parantez olmadan html'ye girilen aşağıdaki kod, "p" etiketiyle süslenmiş metnin büyük harfi - ilk harfi - daha büyük - standart boyutun % 220'sini, sarı - renk değerini yapmasını sağlar. sarı 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 ayrı bir resim, örneğin Eski Rus veya Gotik tarzında. Sonra, büyük harf yerine gerekli yerlere, kodu parantezsiz olarak ekleyebilirsiniz (<) img src=”ссылка на место, где лежит картинка”(>). Ek özellikler yükseklik ve genişlik olacaktır - metnin geri kalanıyla uyumlu bir şekilde karışması 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ırırız.
Alfabeyi kendiniz çizme imkanınız yoksa, büyük harf Google'da (Fontlar bölümü) veya diğer arama motorlarında ve kaynaklarda ücretsiz olarak bulunan yazı tiplerini kullanarak dekore edilebilir. 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 - Latince veya Kiril, çünkü neredeyse tüm Latin yazı tipleri Rusça metin için çalışmaz. Şu anda, arama motoru ücretsiz olarak yaklaşık 40 tür sunmaktadır.
Bir büyük harf veya büyük harf karşılığı, CSS metin dönüştürme özelliği kullanılarak biçimlendirilebilir. Stil sayfasında text transform: none değerini ayarlarsanız, metin siz yazarken görünecektir. Tüm harfleri küçük harfe dönüştürmek için, metin dönüşümü: iki nokta üst üste ile ayrılmış küçük harf değerini ve büyük harf için büyük harf değerini ayarlayın. Özelliği text transform: büyük harf olarak ayarlamak, onu her kelimenin başında büyük harf olacak şekilde yapacaktır.
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
h3 (metin-dönüşümü: büyük harf;) .küçük harf (metin-dönüşümü: küçük harf;) .kapitalize et (metin-dönüşümü: büyük harf;)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.