Bu makalenin tüm okuyucularına ve bloguma abone olanlara selamlar! Bugünün yayınını, İnternet kaynaklarınızın okunabilir ve çekici olmayacağı bilgisi olmadan konuya ayırmak istiyorum: “HTML'de bir yazı tipi nasıl ayarlanır”. Konunun kendisi kolay ve eminim ki hızla hızlanacaksın.

Bununla birlikte, web dillerinin, ideal olarak bilmeniz gereken her türlü yazı tipi tasarım aracı açısından zengin olduğunu unutmayın. Makaleyi okuduktan sonra, metnin biçimlendirmesinde güvenle ustalaşacak, farklı stilleri, stil türlerini ve yazı tipi dekorasyonlarını nasıl ayarlayacağınızı ve hem cümlelerin hem de tek tek harflerin boyutunu ve rengini değiştirmeyi öğreneceksiniz. Başlayalım!

Yazı tipleri farklıdır

İşaretler, basın ve literatür, web siteleri ve diğer hizmetlerin çoğu standart yazı tiplerini kullanır. Rahat olmalarına rağmen, uzun zamandır sıkıcıdırlar ve göze çarpmazlar. Bu nedenle birçok tasarımcı tasarımın görünümünü biraz değiştirir ve hatta yeni stiller yaratır. En ünlü ve etkili yazı tipleri şunlardır:

• Helvetik;
• Futura;
• Garamond;
• bodoni;
• bembo;
• Rockwell;
• Times New Roman.

Temel farklılıkları belirli ailelerle ilgilidir. Antik (serif), doğranmış, dekoratif, italik ve monospace aileleri vardır.

Ayrıca 5 adet yazı tipi boyutu olduğunu da vurgulamak istiyorum.

Html ve onun "yaratıcılığı" ile başlayalım

İsim ilk başlık

NS kırmızı harfli başlık!

burada bulunur ilk paragraf mevcutörnek. Açıklık için bu kelimeler italik yazılacaktır.

özelliği olduğunu hatırlatalım. hizala = "merkez " metnin görüntüsünü merkeze ayarlar.

Ve şimdi css'in becerilerinizi sergileme zamanı geldi

Html tarafından sağlanan tüm farklı etiketlere rağmen, css, yazı tiplerinin görünümünü tasarlamak için daha kullanışlı ve esnek bir araçtır.

İçeriği biçimlendirmek için kullanılan ana özellikler şunlardır: yazı tipi ve bileşenleri: metin-dekorasyon.

önce bir bakalım yazı tipi... Bu, aynı anda birden fazla değer ayarlamanıza izin veren çok yönlü bir parametredir. Ayrıca her parametre kendi anahtar kelimeleri ile çalışır.

Mülkiyet adı	anahtar kelimeler
font ailesi	Standart yazı tipi aileleri olarak kurulabilir: Sans Serif; Antik Çağ (serif); Dekoratif (fantezi); · El yazısı; monouzay, Mevcut standart stiller de (Arial, Calibri, vb.)
yazı Boyutu	Karakterlerin mutlak boyutunu ayarlamak için şu gösterim kullanılır: xx-small, x-small, small, orta, büyük, x-large, xx-large. Ayrıca benzersiz bir değer ayarlayabilirsiniz.
yazı tipi ağırlığı	Metin stilinin doygunluğundan sorumludur. Aralıkta değişir veya normal, kalın, daha açık veya daha kalın sözcükleri kullanılarak belirtilir.
yazı tipi değişkeni	Küçük büyük harf, normal veya devralan anahtar sözcüklerini kullanarak harfleri belirtir.
yazı stili	Normal, eğik, italik olarak ayarlayın veya üst öğesinden devralın.
yazı tipi uzatma	Harflerin yoğunluğunu gösterir. Şu değerler belirtilebilir: ultra-yoğunlaştırılmış, ultra-genişletilmiş, ekstra-yoğunlaştırılmış, ekstra-genişletilmiş, yarı-yoğunlaştırılmış, yarı-genişletilmiş, normal, genişletilmiş, yoğunlaştırılmış ve miras.

Mülk metin-dekorasyon altı çizili gibi ek öğelerle metni süslemeye yardımcı olur ( altını çizmek), üstü çizili ( hat boyunca), üst çizgi ( üst çizgi) ve ayrıca ebeveynin parametrelerini ( miras) veya tüm kaydı iptal edin ( Yok).

Şimdi ikinci bir örnek zamanı. Önceki kodu alıp css araçlarını kullanarak biçimlendirdim. Böylece, başlık bir gölge ile süslendi (özelliği kullanarak Metin-gölge) ve çevresinde bir konturla ( sınır-renk). Aynı zamanda, bir kelimeyi büyüttüm. Ben de parametreyi kullanmak istedim opaklık Altyazının şeffaflığını ayarlamak için

İsim ilk başlık

Yarı şeffaf altyazı!

burada bulunur ilk paragraf mevcutörnek. Açıklık için bu kelimeler italik yazılacaktır.

html'de yazı tipi rengi nasıl değiştirilir

Web teknolojilerinde en azından biraz bilgiliyseniz, belgenin tüm biçimlendirme ve içeriğinin html dosyasında bulunduğunu, css dosyası ise çeşitli öğelerin görünümünü belirleyen stilleri içerdiğini bilmelisiniz. Yani yazı tipi rengini ve diğer her şeyi değiştirmek için kullanmamız gereken css.

Html'de metne belirli efektler uygulamanıza izin veren etiketler vardır, ancak her renk tonu için yüzlerce etiket bulmanın tamamen makul olmayacağını kabul etmelisiniz. Bunu css ile çok daha rahat kontrol edebilirsiniz. Örneğin, html gövde öğesinin, yani ekranda görüntülenen tüm sayfa içeriğini içeren etiketin yazı tipi rengini bu şekilde ayarlayabilirsiniz.

gövde (renk: kırmızı;)

vücut ( kırmızı renk;

Sayfanın gövdesi için kırmızı rengi yazdık. Paragraflar, listeler, başlıklar ve diğer tüm unsurlar tarafından alınacaktır. Bu, bu öğelerin stilleri geçersiz kılınana kadar kalacaktır.

Renkli kayıt formatları

Belki biraz web tasarımı bilginiz var mı? Eğer öyleyse, farklı renk modları olduğunu bilmelisiniz. Örneğin rgb, rgba, hsl, hex vb. Tabii ki, tonu ayarlamanın en kolay yolu sadece bir anahtar kelime yazmaktır. Bunu yukarıdaki örnekte yaptık, kırmızı değeri harfleri kırmızı, mavi harfleri mavi, kahverengi ise harfleri kahverengi yapıyor. Bunlar sadece İngilizce'deki renklerin isimleridir.

Bu durumda bilmeniz gereken tek şey, istenen rengin adıdır. Bunları internette herhangi bir tabloda görebilirsiniz. Bir renk belirlemenin bir sonraki popüler yolu, onaltılık kodunu yazmaktır. Bu sözde onaltılı biçimdir. Örnekler:

p (renk: # 000;) / * Paragraflardaki metin siyah olacaktır. * / tablo (renk: #fff;) / * Tablolardaki içerik beyaz olacaktır. * /

Gördüğünüz gibi, kafesin ardından renk kodunu yazmanız gerekiyor. Onu nasıl tanırsın? Örneğin, bir renk seçtiğinizde onaltılık kodunu görüntüleyen Photoshop'u veya başka bir grafik düzenleyiciyi açabilirsiniz. Ayrıca çevrimiçi hizmeti de kullanabilirsiniz.

RGB, başka bir popüler kayıt formatıdır. Basitçe - kırmızı, yeşil, mavi anlamına gelir. Bu formattaki renk şu şekilde ayarlanır:

#altbilgi (renk: rgb (234, 22, 56);)

#altbilgi ( renk: rgb (234, 22, 56);

Altbilgi tanımlayıcısına sahip öğe, belirtilen rengi alacaktır. Kırmızı oranı 234, yeşil - 22, mavi - 56 olacaktır. Bu değerler 0 ile 255 arasında yazılabilir. Buna göre gölgemiz kırmızıya daha yakın olacaktır. Paint'te, üç ana rengin doygunluğunu değiştirerek palete renkler ekleyebilirsiniz.

Bu yöntemin avantajı, sadece üç sayıyı değiştirerek milyonlarca renk arasından seçim yapabilmenizdir. Anahtar kelimelerle yazdığınızda, cephaneliğinizde sadece birkaç yüz renk olacaktır.

Rgba - yarı şeffaf metin!

Evet, bu uzun süredir grafik editörlerinde olan yeni bir kayıt modu, ancak web tasarımında nispeten yakın zamanda ortaya çıktı. Şu şekilde yazılmıştır:

a (rgba (255, 12, 22, 0,5);)

rgba (255, 12, 22, 0,5);

Girişteki son sayı şeffaflığı belirtir. 0'dan 1'e kadar yazılabilir; burada 1, varsayılan davranış olan tamamen opak metindir. Bu durumda tüm linkler kırmızıya dönecek ancak şeffaflık nedeniyle renk parlaklığı çok daha düşük olacak ve linkin altında başka bir arka plan veya eleman varsa görünür olacaktır.

Renk ayarlamanın yanlış yolu

Html'de kullanımdan kaldırılmış bir renk özelliği vardır ve bununla metnin rengini bir anahtar kelime kullanarak yazmak mümkün olmuştur. Şimdi bu, modern tarayıcılarda bile çalışmayabilir ve genel olarak, bu yöntem genel olarak kabul edilen web standartlarını ihlal eder. Aynı zamanda sakıncalıdır.

İsteğe bağlı bir parçanın rengi nasıl belirlenir

Tamam, paragraflar, bağlantılar ve tablolar için yazı tipi renginden bahsediyoruz, ancak bunlar katı öğelerdir, peki ya bir cümle, bir kelime, bir harf için bir renk tanımlamanız gerekiyorsa?

Sadece istenen snippet'i span etiketlerine sarıyoruz. Sınıf özniteliğini etiketin içine yazıyoruz ki bu bizim için rastgele ama anlaşılabilir bir değer oluşturuyor. Örneğin, bunun gibi:

İşte bu, şimdi sadece seçiciye css'de atıfta bulunmak kalıyor.