GirişHTML'de güzel bir yazı tipi nasıl yapılır: Boyutlar, renkler, HTML yazı tipi etiketleri. RGBA'nın neden kullanıldığı resimler altında HTML metninde nasıl yazılır?
HTML yazı tipi boyutunda önemli bir rol oynar. Kullanıcının dikkatini çekmenizi sağlar Önemli bilgiSite sayfasında yayınlandı. Her ne kadar sadece harflerin büyüklüğü önemli değil, aynı zamanda renkleri, kalınlığı ve hatta bir aileyi de önemlidir.
HTML Fontları ile Robotlu Etiketler ve Nitelikler
Köprü metninin dili, fontlarla çalışmak için büyük bir fon kümesine sahiptir. Ne de olsa, metnin biçimlendirilmesi, HTML'nin ana görevidir.
HTML dilini oluşturmanın nedeni, metin biçimlendirme kuralları tarayıcıları görüntüleme sorunu haline gelmiştir.
HTML'deki fontlarla ve özniteliklerinde çalışmak için kullanılan etiketleri düşünün. Ana olanı etikettir . Niteliklerinin değerlerini kullanarak, birkaç yazı tipi özelliğini ayarlayabilirsiniz:
- renk - Metnin rengini ayarlar;
- koşullu birimlerde boyut - yazı tipi boyutu.
Pozitif özellik değeri 1 ila 7 arasında desteklenir.
- yüz - Etiketin içinde kullanılacak metin font ailelerini kurmak için kullanılır. . Virgül aracılığıyla listelenen birkaç değer derhal desteklenir.
Yalnızca yazı tipi çifti etiketinin parçası arasında bulunan metin biçimlendirilmiştir. Kalan metin varsayılan olarak yüklenen standart yazı tipi ile görüntülenir.
Ayrıca HTML'de yalnızca bir biçimlendirme kuralı belirten bir dizi çift etiketi vardır. Bunlar şunlardır:
- - HTML'ye cesur yazı tipini belirtir. Etiket öncekine benzer eylemle;
- - Boyut varsayılan ayardan daha büyük;
- - Daha küçük yazı tipi boyutu;
- - Eğimli metin (italik). Benzer bir etiket ;
- - alt çizgi ile metin;
- stresli;- - Metni yalnızca küçük harflerle görüntüleyin;
- - Büyük harfte.
Normal metin
Thumbnail
Thumbnail
Daha sıradan
Her zamanki gibi
İtalik
İtalik
Vurguyla
Ezilmiş
Stil niteliğinin özellikleri
Açıklanan etiketlere ek olarak, HTML'deki yazı tipini değiştirmenin hala birkaç yolu vardır. Bunlardan biri, evrensel özniteliğin kullanımıdır. Özelliklerinin değerlerini kullanarak, yazı tipi ekran stili ayarlayabilirsiniz:
1) Yazı Tipi ailesi - Mülkiyet Yazı Tipi ailesini belirler. Birkaç değeri numaralandırabilirsiniz.
HTML'deki yazı tipini bir sonraki değere değiştirmek, önceki aile kurulmamışsa gerçekleşir. işletim sistemi Kullanıcı.
Yazma Sözdizimi:
yazı Tipi-Ailesi: Yazı Tipi Adı [, Yazı Tipi Adı [, ...]]
2) Yazı tipi boyutu - Boyut 1 ila 7 arasında ayarlanır. Bu, HTML'de fontu nasıl artırabileceğinizi temel yöntemlerden biridir.
Yazma Sözdizimi:
yazı tipi boyutu: mutlak boyut | Göreceli boyut | Değer | ilgi | kalıtım.
Yazı tipi boyutu da ayarlanabilir:
- Piksellerde;
- Mutlak değerde ( xX-Small, X-Small, Küçük, Orta, Büyük);
- Yüzdelerde;
- Puan (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 tarzı - Yazı tipi yazma tarzını ayarlar. Sözdizimi:
yazı tipi tarzı: Normal | İtalik | Eğik | kalıtım.
Değerler:
- normal -Normal yazı;
- İtalik - italik;
- eğik - sağdaki bir eğim ile yazı tipi;
- miras - Ebeveyn elemanının yazısını miras alır.
Bu özelliği kullanarak HTML'deki fontun nasıl değiştirileceğine bir örnek:
yazı Tipi tarzı: Miras
yazı tipi tarzı: italik
yazı Tipi Tarzı: Normal
yazı tipi tarzı: eğik
4) Yazı tipi değişken - tüm büyük harfleri başlığa çevirir. Sözdizimi:
font-Variant: Normal | Küçük kapaklar | kalıtım.
HTML'de Yazı Tipi'ni nasıl değiştireceğine dair bir örnek:
yazı Tipi Variant: Miras
font değişken: normal
yazı tipi değişken: küçük kapaklar
5) Yazı Tipi Ağırlığı - Metnin yazısının kalınlığını ayarlamanızı sağlar (doygunluk). Sözdizimi:
font-Ağırlık: Bold | Bolder | Çakmak | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Değerler:
- bOLD - BOLD HTML yazı tipini yükler;
- daha cesur - normale göre yağlı;
- daha hafif, normale göre doygun olandır;
- normal - normal yazı;
- 100-900 - Yazı tipi kalınlığı, sayısal eşdeğer olarak ayarlanır.
yazı Tipi Ağırlığı: Kalın
yazı Tipi Ağırlığı: Bolder
yazı Tipi Ağırlığı: Çakmak
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 konteyner özelliğidir. İçeride, yazı tiplerini değiştirmek için tasarlanmış çeşitli özelliklerin değerlerini birleştirir. Sözdizimi yazı tipi:
yazı Tipi: Yazı Tipi Yazı Tipi Font-Aile | kalıtım.
Ayrıca, sistem tarafından çeşitli kontrollerde yazılarda kullanılan yazı tipleri bir değer olarak belirtilebilir.
- başlık - Düğmeler için;
- simge - simgeler için;
- menü - Menü;
- mesaj kutusu - iletişim kutuları;
- küçük kontroller - küçük kontroller için;
- durum çubuğu - Durum dizgisi yazı tipi.
yazı Tipi: Simge
yazı Tipi: Başlık
yazı Tipi: Menü.
yazı Tipi: Mesaj kutusu
küçük başlık.
yazı Tipi: Durum-Bar
yazı Tipi: italik 50px kalın "Times New Roman", Times, Serif
Yazı tipinin rengini HTML'de ayarlamak için, renk özelliğini kullanabilirsiniz. Renk ayarlamanızı sağlar anahtar kelimelerve RGB formatı. Ve onaltılık kod biçiminde olduğu gibi.
HTML Etiketleri Metin Hizalamasını Tanımlama, Girinti
Baskı evinde kullanılan genişlik metin
Aşağıdaki örnekte, nasıl hizalanacağını gösterilir. genişlikte metin Sayfalar:
| Align \u003d "sol" | Align \u003d "sağ" |
|---|---|
Her gün hizmet sektöründe çalışan çalışanların sayısı ve bilginin yayılması artmaktadır. Geçtiğimiz yüzyılların sembolleri bir çiftlik ve bir fabrikasıysa, mevcut XXI yüzyılın sembolü, bilgi akışına erişimi olan bilgisayarlarla donatılmış bir ofisdir. |
|
| Align \u003d "justify" | Align \u003d "Center" |
Her gün hizmet sektöründe çalışan çalışanların sayısı ve bilginin yayılması artmaktadır. Geçtiğimiz yüzyılların sembolleri bir çiftlik ve bir fabrikasıysa, mevcut XXI yüzyılın sembolü, bilgi akışına erişimi olan bilgisayarlarla donatılmış bir ofisdir. |
Her gün hizmet sektöründe çalışan çalışanların sayısı ve bilginin yayılması artmaktadır. Geçtiğimiz yüzyılların sembolleri bir çiftlik ve bir fabrikasıysa, mevcut XXI yüzyılın sembolü, bilgi akışına erişimi olan bilgisayarlarla donatılmış bir ofisdir. |
HUPERFE değerini üniforma sağlar sağ ve soldaki tesviye metni, yani genişlikte. Bu yöntem, yazdırmada yaygın olarak kullanılır.
Merkezde ve genişlikte HTML'de tesviye metni
HTML Merkezinde Tesviye Metni, Sağdaki Metin:
Sonuç:
Nitelikler ve Değerler
- align \u003d "sol" - belirler tesviye metni kaldı (varsayılan).
- align \u003d "Center" - merkezdeki metin metinleri.
- align \u003d "sağ" - sağdaki satır metinleri.
Hizalama | HTML Ceza metni
Html metni ve sayfanın solundaki geri çekilmesi
Üretmek girinti metni iki şekilde sola:
Sonuç:
Yeni bir pencerede görüntüleyin.
Resmi çekmeniz ve adı (kısa cümle) atfetmeniz gerekir. Bunun için parametreler var:
Align \u003d "Top" - Metni görüntünün üstündeki satırlar.
Align \u003d "alt" - alttaki satır metni.
Align \u003d "Orta" - Metni merkezdeki hizalar.
Aşağıda, tarif edilen parametrelerin üstünde işlemi gösteren bir kod var.
Güzel arı
Çok güzel arı
Hiçbir şey.
Şimdi çok sayıda metne sahip bir resmi nasıl görüntülemeniz gerektiğini görelim.
İki parametre var:
Align \u003d "sol" - görüntü "metni akar" soldaki.
Align \u003d "Sağ" - "Metni akar" imajı sağa.
Netlik için bu kodu yazın:
<html\u003e <kafa\u003e <başlık\u003eSoldaki HTML görüntüsü - sağdaki metinbaşlık\u003e kafa\u003e <vücut\u003e <img src \u003d "images / htmlsun.jpg" align \u003d. "AYRILDI" genişlik \u003d. "140" Yükseklik \u003d. "124" /> <büyük\u003eGüneşbüyük\u003e <br\u003e <p\u003e \u003e Güneş hakkında bilgi içeren metin olabilir.p\u003e <br\u003e<br\u003e <img src \u003d "images / htmlmoon.jpg" align \u003d. "SAĞ" genişlik \u003d. "140" Yükseklik \u003d. "124" /> <büyük\u003eAybüyük\u003e <br\u003e <p\u003e Burada ay hakkında bilimsel bir makale ekleyebilirsiniz.p\u003e vücut\u003e html\u003e
Güneş Güneşin şekli, 1392000 km çapında mükemmel küreye yakındır. Ayın yörüngesini barındırıyor ve hala çok fazla alan var. Aslında, dünyada bir milyondan fazla gezegenin güneşin içine serbestçe uyması gerektiği gibi. Ek olarak, 88 km / s hızında yüzeyine bir araba kullanabilseydiyseniz, bir kez güneşin etrafında sürmek için 5 buçuk yıl kalacaksınız (durmadan). Ancak güneşin büyüklüğü sabit değildir. Modern çalışmalar, güneşin çapının saatte yaklaşık 1 metre azaldığını göstermektedir. Bu fenomen geçtiğimiz yüzyılda yapıldıysa, o zaman şimdi atalarımızın gördüğünden 800 km daha az gördüğümüz güneş. Belki de bu güneş enerjisi sıkıştırması, büyük bir enerji emisyonunu dengelemeye yardımcı olan uzun süreli bir salınımın bir parçasıdır.
Ay
Bu, dünyanın tek doğal uydusu. Ay kütlesi, yeryüzünün 0.0123 kitlesidir (yaklaşık 1/81) veya 7.6.1022 kg'dır. Ayın çapı, dünyanın dörtte biri (0.273) veya 3 476 km'dir. Ay, güneşten 500.000 kat daha zayıf olan toprakları aydınlatıyor). Ayın bize tanıdık atmosfer yoktur, nehir ve göller, bitki örtüsü ve canlı organizmalar yoktur. Aydaki yerçekimi gücü, Dünya'dan altı kat daha azdır. Sıcaklık ile gündüz ve gece son iki hafta 300 dereceye kadar düşer.
Fakat Gördüğünüz gibi, metin ve resim birbirine çok yakın olacaktır. Düzeltmek için, sadece arka plan gibi, çerçeve kalınlığının ve renginin istenen boyutlarından bazılarını ayarlamanız gerekir.
<html\u003e <kafa\u003e <başlık\u003eGörüntü çıkışı tarafından HTML sayfası başlık\u003e kafa\u003e <vücut\u003e <img src \u003d "images // htmleclipse.jpg" alt \u003d align \u003d "AYRILDI" genişlik \u003d. "160" Yükseklik \u003d. "130" Stil \u003d "sınır: 8px katı #fffffff;"/> <büyük\u003ebüyük\u003e <br\u003e <p\u003e Güneşli Eclipse hakkında bir makale.p\u003e vücut\u003e html\u003e
Ayın tamamen veya kısmen dünyadaki gözlemcinin güneşi kapandığı astronomik fenomen. Güneş Eclipse, yalnızca yeni ayda, ayın yüzüne bakan tarafın kapsanmadığında ve Ayın kendisi görünmüyor. Tutulmalar, yalnızca yeni ay, iki ay düğümünden birinin (ayın görünür yörüngelerinin kavşak noktaları) yakınında meydana gelmesi mümkündür, bunlardan yaklaşık 12 dereceden fazla değil.
Genel olarak, sorunun kendisi kolaydır. Başka bir blok düzenlemek için kurnaz bir şey yoktur. Ama yine de, bu konuda tartışmaya layık birkaç dakika var. Bence ilgilenecek insanlar olacağını düşünüyorum.
Fikir, sadece görüntüye bir metin uygulamaktır. Metin, değişken uzunluktaki bloklar biçiminde sunulur, sol tarafta, metnin etrafını pürüzsüz bir dolgu ile bulunduğu varsayılmaktadır. Örneğin, bu görüntüdeki gibi:
Belge şeması
HTML İşaretleme
Parkta bir film:
Kung Fu Panda.
Tabii ki, görüntüyü arka plan deseni olarak çıkarmak için DIV öğesini kullanmak daha kolay olurdu, ancak bu durumda görüntünün belgenin içeriği olduğunu ve bu nedenle, HTML'ye ait olduğunu varsayalım. DIV öğesi, metnin içindeki mutlak konumlandırma için bir kap olarak kullanılacaktır.
CSS.
.Image (Konum: Bağıl; Genişlik:% 100; / * IE 6 * /) H2 (Konum: Mutlak; Üst: 200px; Sol: 0; Genişlik:% 100;)Böylece, metni doğrudan resmin üzerine yerleştirdik. Sonra görevimiz metin için arka plan yap. Elementten beri
Blok elemanıdır, bu amaçlar için kullanamayız. Satır içi eleman kullanıyoruz . Başlığın içindeki metnin içine sarın.
Parkta bir film:
Kung Fu Panda.
Bu açıklığı metin tasarımı ve arka plan için kullanacağız:
H2 SPAN (Renk: Beyaz; Yazı Tipi: Bold 24px / 45Px Helvetica, Sans-Serif; Mektup-Seksi: -1PX; Arka Plan: RGB (0, 0, 0); / * Bir sonraki satırın çalışmadığı durumunda * / Backgroundground : RGBA (0, 0, 0, 0.7); Dolgu: 10px;)
Sorunlar
Şekilden görülebileceği gibi, çizginin sonunda, metin bloğu, dizedeki son sembolden hemen sonra sona erer ve hemen sol kenarda başlar. sonraki satır. Span-A için mülk dolgusu, bu durumda, bize yardımcı olmaz.
Sorunu çözmek için, etiketin her iki tarafında ek açıklıklar kullanmanız gerekir.
Bu durumda, dolguyu kolayca kullanabiliriz.
Parkta bir film:
Kung Fu Panda.
Bu yeni span-am, doldurma özelliğini görevlendirir:
H2 SPAN.SPACER (Dolgu: 0 5px;)
Anlambilim nedir?
Üzerinde bu aşama Tasarım tamamlandı, ancak bir sorun kaldı. Yani, büyük miktar Sadece tasarım için ek HTML öğeleri eklendi. SPAN-S demek istiyorum. Bu sorunu çözmek için jquery kullanıyoruz. Bunu yapmak için, işaretlemedeki tüm boşlukları silin ve dinamik olarak bunları ekleyin:
Parkta bir film:
Kung Fu Panda.
$ (İşlev () ($ ("h2"). Wrapinner (" "); $ (" H2 br "). Önce (" "). (" ");
});
Kung Fu Panda.
Bu durumda, dolguyu kolayca kullanabiliriz.
Kung Fu Panda.
Kung Fu Panda.