Html yazı tipi. Ek HTML ve CSS içeren kalın metin. CSS'de kalın metin

Merhaba sevgili blog okuyucuları! Bu istatistik yaklaşık etiketler metni biçimlendir. Parlak uçlarla metin kalın veya italik olarak gösterilir. Ayrıca belirli etiketlerin sitenin dahili optimizasyonuna dahil edilmesine ve bunları yazma kurallarına da bakacağız. Bunlar hakkında rehberlik makalesinde okuyabilirsiniz. Konuşmadan önce, birçok metin düzenleyicide, örneğin Word'de, benzer metin tasarımı öğeleri oluşturabilirsiniz.

Etiketler 2 türe ayrılır: blok ve küçük. İlkini seçerseniz, metnin bazı bölümlerinin (satırlar, parçalar veya kelimeler) ve diğerlerinin değiştirilmesini değiştirebilirsiniz. Bu makalede incelediğimiz gibi biçimlendirme etiketleri çok küçüktür.

Etiket yazma kuralları ve sırası

Etiketleri neyin açıp kapattığını zaten biliyorsunuz. Değilse, bu materyalin en başına yönlendirilen makaleyi okuyun. Kısaca iki tür etiket vardır: tekli (örneğin yeni bir satıra taşınmış)
) Şu konteyner (çocuklar). Yani eksen, tüm metin biçimlendirme etiketleri Çocuklar. Bu, herhangi bir öğenin etiketleri açıp kapatabileceği ve parçanın, bunların arasındaki yerleşimden sorumlu olduğu anlamına gelir. Örneğin doğru ifade şu şekilde görünecektir: görüş parçası

Tarayıcı bu parçayı ayrıştırırsa eksende aşağıdaki metni göreceksiniz: Vizyon parçası. Konuşmadan önce tüm etiketler RSS sayfalarında () görüntülenmez.

Etiketleri yazarken önemli - bunları kapatmayı unutmayın. Aksi takdirde, sayfadaki tüm metinler kalın harflerle gösterilecektir (ekte etiketiyle birlikte) ). Ancak şarkı parçasını aynı anda hem kalın hem de italik olarak görmeniz gereken durumlar vardır. Bütün bunları sonlandıran bira etiketinin hiçbir önemi yok. Bu durumdan çıkmanın tek yolu var: Vikorist'in aynı anda iki etiketi olması. Hangi sırayla olursa olsun, vikorystuvati'lerinin hiçbir anlamı yoktur. Tom, metni şu şekilde etiketlerle yazıyor:

görüş parçası

veya eksen şu şekildedir:

görüş parçası

Yine de onu götürüyorsun görüş parçası aynı anda italik ve kalın. Ancak ilk seçeneği seçmek önemlidir çünkü başlangıçta tek ve doğru olacaktır. Tarayıcınızın, ayarlamalara bağlı olarak etiketleri farklı şekillerde () görüntüleyebileceğini unutmamak da önemlidir. Şimdi biçimlendirme etiketlerinin kendilerine geçelim

Metin kalın ve italik olarak gösteriliyor - etiketler , , і

Metni biçimlendirmek için en popüler etiketler - onun vizyonu yağі italik. Herhangi bir parçaya önem kazandırmak için onlara vikorist deyin. İlk seçenek, ilgili bilgileri veya anahtar kelimeleri içeren bir parçayı görüntülemektir. İtalik, kalın metinle aynı amaçlarla kullanılır, ancak ana metindeki italikler daha az belirgin olduğundan ve metin daha az kalın olduğundan bilgiler daha az önemlidir.

Haydi koçana bir göz atalım kalın yazılmış metne bakın. Bu amaçla iki etiket oluşturulur: і . Dış görünümde hiçbir fark yoktur. Herhangi bir tarayıcının dış görünüş öğesini kendine göre yorumlayabildiğini göz önünde bulundurursanız bazı avantajlar elde edebilirsiniz. Yak ekseni etiketlerdeki metne benziyor і tarayıcının zaten edindiği görünümde:

Etiketlerdeki metin güçlü

B etiketlerindeki metin

Eksen, sayfanın çıktı kodundaki iki veri satırına benziyor:

Etiketlerdeki metin güçlü B etiketlerindeki metin

Aynı durumun yaşanmasını önleyebiliriz italik olarak görüldüğü gibi etiketlendi і . İki izmarit arasındaki farkları bulmaya çalışın:

Em etiketlerindeki metin

Etiketlerdeki metin I

Ve eksen çıkış kodu:

Em etiketlerindeki metin Etiketlerdeki metin I

Kalın ve italik olarak gösterilen incelenen etiketler aslında ayırt edici değildir, ancak bizim için örneğin etiket Demek istediğim ? Ayrıca yalnızca bir karakter yazmak (tutamaçları kırmadan) ve dolayısıyla yazmak daha kolaydır. Ve sağdaki her şey şu etiketlerdir і içine dök . Bu etiketlerde anahtar kelimeler belirlerseniz sitede görünmeniz memnuniyetle karşılanacaktır.Asıl önemli olan aşırıya kaçmamak - başlıkta metinde maksimum %5 oranında kalın metin kullanılmalıdır. , Özette stil ve italik yapıyorum .

Metindeki herhangi bir anı görmek istiyorsanız etiketini kullanın. ya da başka . Vzagali, bence şakacılar da bu etiketlerdeki metne daha önemli bakıyorlar ama öyle değil dahili optimizasyon koku hâlâ daha küçük bir akını yok ediyor, daha alçak і .

Pirinçli metni görmek için etiketler - , і

Şimdi biçimlendirilmiş metni birbirinden ayırmak için kullanılan anahtar sözcük sayısına bir göz atalım. En sevdiğiniz metin düzenleyiciniz - etiket veya bir koltuk. Bu etiketin sıralamasına giderek zahmet etmeyin (bildiğim kadarıyla), ancak bazı metinleri görün ve daha fazla yardım isteyin. Bu etiketin popo vikoristannya'sına biraz daha ekledim.

Benzer anlamlara sahip iki etiket daha - і . Metnin işlevinden rahatsız. Bu etiketi her durumda kullanabilirsiniz: Bir belgeyi (veya daha doğrusu bir kısmını) güncelliyorsanız, eskisini yeniden adlandırabilir ve yenisini ekleyebilirsiniz; materyalle birlikte ne yazacaksınız; Bu ahlaki ve etik standartlara uygun değildir.

Bu iki etiketin anlamları yalnızca onlar için geçerlidir yazılı Bu nedenle ilkini yazmak daha iyidir çünkü yazmak daha kolaydır, aksi takdirde sayfanızda daha az HTML kodu olacak ve jokerler buna bayılacaktır.

etiket nitelikler - yazı tipi ve metin için parametreler

Şimdi nitelikler olmadan görülemeyen bir etikete bakalım. Ek yardım için şarkı parçasına ilişkin parametreleri metne ayarlayabilirsiniz. Artık wiki'leri (basamaklı stil sayfaları) kullanmak daha iyidir, çünkü onların yardımıyla sayfanın tüm HTML kodunu büyük ölçüde kısaltabilirsiniz. Peki, hadi şu etikete bir göz atalım . Herkes için her şey mümkün üç nitelik:

  • yüz- yazı tipinin kendisi. Örneğin Arial, Courier veya Verdana. Tüm tarayıcılarda çok sayıda yazı tipi bulunmadığından adı değiştirebilirsiniz ve yüz özelliğine adı yazarak tarayıcı hangisinin kullanılacağını veya daha doğrusu sistemde hangisinin mevcut olduğunu seçebilir;
  • boyut- metnin boyutunu belirten bir özellik. Hem zihinsel birimler hem de piksel cinsinden ifadeler olabilir;
  • renk- metnin rengi. Bu özellik hem biletlerin HTML kodlarında hem de sözlü kodlarda kullanılabilir. Bunlardan ilki #FFFFFF şeklinde görünür (örneğin F, A'dan F'ye bir sayı veya harftir), diğerleri ise basit kelimelerle yazılır (örneğin kırmızı - kırmızı).

Özette metin böyle görünüyor cilt özelliği için:

Bu metin 6 piksel boyutundadır


Bu kırmızı renkli metindir

Bu metin Arial yazı tipindedir.

Bu metin kırmızı renkte ve 5px boyutundadır.

Yazılı kodu inceledikten sonra ne öğreneceksiniz:

Blok metin tasarım öğeleri - başlıklar

-

, paragraf

Son olarak skinde pratik olarak kullanılan blok elemanlarına bakacağız. Bunlar başlık ve paragraf etiketleridir. Önce bir göz atalım. Başlıklar 6 türde gelir ve her birinin kendi etiketi vardır. Cilt tipinin kendi seri numarası yoktur ve ek etiketler altında kaydedilir.

,

,...,

. Basitleştirilmiş görünümde tüm başlıklar şu şekilde görünür:

Kelime başlığından sonraki sayı, başlıktaki sayıları doğrular . Başlıkların dahili optimizasyon üzerinde büyük etkisi vardır, bu nedenle bunları etiketlere koyun anahtar kelimeler. Bununla ilgili birçok tuhaflık var, bunları gelecek makalelerde tartışacağım.

Şimdi paragraf görünümü etiketi hakkında konuşalım

Bu etiketin işlevi, boş bir satırdaki diğer benzer metinlerin arasında seçilen metne uygulanır. Herhangi bir belgenin çıktı koduna bakarsanız, daha sonra şunları öğrenebilirsiniz:

Yeşil olanlarda bir paragraf, kırmızı olanlarda ise başka bir paragraf var. Eksen ise bu kodun tarayıcı tarafından işlendikten sonra nasıl göründüğüdür (ok boş bir satırı gösterir):

Ek olarak, bir paragrafı diğerinden ayırmaya ekstra dikkat gösterebiliriz ki bu da okumaya değer bir durumdur; okuma daha kolay hale gelir.

Eksen hakkındaki makalenin sonuna ulaştık belge biçimi etiketleri. Aşağıda bu materyalde anlattığım çok daha fazlası var. Sadece eylemler hakkında çok şey öğrenmeye ihtiyaç var ve daha yakından bakıldığında istatistiklerin yanı sıra bunlara ne ayrılacak!

betimlemek

Görüntünün anlamı yazı tipindedir - birincil, italik veya alt. Metin italik olarak ayarlanmışsa veya yanlış düzenlenmişse tarayıcı uygun bir yazı tipi aramaya başlayacaktır. Yazı tipi bulunamazsa, tarayıcı gerekli metin türünü taklit etmek için özel bir algoritma kullanır. Sonuç ve sonuç, özellikle belgenin değiştirilmesi durumunda tatmin edici olmayabilir.

sözdizimi

yazı tipi stili: normal | italik | eğik | miras almak

önem

normal Zvichaine görüntüsünü metne dönüştürme. italik İtalik. eğik Pohile uzanmış. İtalik ve kötü yazı tipi, tüm benzerliklerine rağmen aynı değildir. İtalik, el yazısıyla yazılan özel bir yazı tipidir ancak ilk karakterlerin sağa doğru kaydırılmasıyla oluşturulur. Uspadkov'un önemli babasını miras aldı.

HTML5 CSS2.1 IE Cr Op Sa Fx

yazı stili

Duis te feugifacilisi

Lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam Erat volutpat. Enim ve minimum düzeyde olmak üzere, her türlü sonuçtan elde edilebilecek en iyi egzersizi yapmaktır.

Şekil 2'de popoya verilen okumaların sonucu. 1.

Küçük 1. Zastosuvannya vlastivosti yazı tipi stili

nesne modeli

document.getElementById("elementID").style.fontStyle

tarayıcılar

Internet Explorer 7.0 sürümüne kadar devralınan değeri desteklemez.

Tarayıcılar artık eğik değerlere sahip metni italik olarak görüntüleyecek.

Bugün size HTML ve CSS kullanarak bir web sitesinde nasıl kalın kelimeler oluşturulacağını göstereceğiz. Sayfada şarkı bilgilerini görmeniz gerektiğinde bu tasarım kullanılır. Üstelik dil sadece başlıklardan değil, metindeki basit kelime ve ifadelerden de ibarettir. Uygulaması kolaydır.

Metnin kalın harflerle görünmesini sağlamak için özel HTML etiketleri kullanılır - і . Örneğin, saldırgan kod:

Zvichayny metni.

kalın yazı.

Kalın metin güçlü.

Zvichayny metni.

kalın yazı.

Kalın metin güçlü.

Çıktı aşağıdaki resmi verir:

Kalan iki seçenek görsel olarak aynı görünüyor ancak birbirlerinden biraz farklılar. etiket kalın yazı tipindeki kelimelerin basit bir stilistik görünümünü ayarlar, örneğin Aynı zamanda anlamsal anlamı da arttırır. Geriye kalan satır yalnızca kalın metin değil, aynı zamanda önemli bilgilerdir. Prensip olarak ses sistemleri için Vikoristovat'ı kendiniz kullanmanız önerilir. .

Ek stilleri kullanarak HTML'deki kalın yazı tipini de özelleştirebilirsiniz:

Kalın metinlerden oluşan bir popo.

Popo metni yağ Bir kelimeyle.

Web sitesinde şu şekilde görünüyor:

HTML'nin kalın metin kodu düzgün çalışıyorsa şaşırmayın, çalışmayacaktır. Tüm tasarım stilleri CSS dosyasına dahil edilmelidir. Bu yüzden etiket kullanmak önemlidir

І bir alt sınıf girin ve ardından tasarımını stil sayfasına kaydedin. Bunlar kodu tasarlamanın temel kurallarıdır. HTML'de kalın yazı tipi için etiketi vikorize edin .

CSS'de kalın metin

CSS'de kalın yazı tipleri oluşturmak için yazı tipi ağırlığının gücünü keşfetmeniz gerekir. Bu, bir parçanın "yoğunluğunu" metne göstermeye yardımcı olur. Değerler 100 ila 900 arasında değişebilir ancak en sık kullanılanlar şunlardır:

  • kalın (kalın) - temizlik için 700;
  • normal (birincil) - temizlik için 400.

Ayrıca yazı tipi ağırlığını babadan daha büyük veya daha küçük kalına değiştirecek daha kalın ve daha hafif seçenekler de vardır.

CSS'de kalın metni ayarlamak için diğer öğeye stil uygulamanız gerekir, örneğin:

Zvichayny metni şişman vizyonlar merkezinde.

güçlü (yazı tipi ağırlığı: kalın;)

Burada daha az takdir edilen küçük bir nüansa dikkat çekmek istiyorum - bir öğe için yeni bir sınıf oluşturduğunuzda, "adın anlaşılması" konusunda daha spesifik olmanız gerekir. Örneğin, pratikte class = "my-bold-font" stili class = "new-font" stilinden daha mantıklı görünür, dolayısıyla amacını sıklıkla anlayabilirsiniz. Bu da uzaktan şaşırıp düzeninizi eleştirenler için bir artı.

Bu makale size bulabildiğim kalın kalın yazı tiplerini anlatacak.

Daha detaylı bilgi için metnin nasıl görüleceğinden bahsedeceğiz. italik HTML. Kalın metinde olduğu gibi italik metin de üç şekilde oluşturulabilir:

  • etiket Ben HTML;
  • etiket onları HTML;
  • CSS gücü yazı stili.

HTML'de italik yazının nasıl oluşturulacağına ilişkin üç seçeneğe de bakalım, bunun inceliklerini ve bu ve diğer durumlarda bunu halletmenin en kolay ve en doğru yollarının neler olduğunu tartışalım.

İtalik metin: etiket

etiket Ben(İtalik), etikete benzer B Kalın metin için, italik metne fiziksel bir görünüm kazandırmaya yarar (bu, yalnızca metnin değiştirildiği anlamına gelir). etiket sıkışmış Ben:

Web sitesi oluşturucu "Nubex"

Bu nedenle metnin bir kısmının etiketler arasında yer alması gerekir. .

İtalik metin: etiket

etiket istiyorum Ben eylemden yoksunsa, sitenin optimizasyonu açısından etiketini kullanmak daha iyidir onları Metnin mantıksal olarak önemli kısımlarını görmek için. Bu, arama robotlarının etiketlerin arasına yerleştirilen metnin önemini güvence altına aldığı anlamına gelir :

Web Sitesi Oluşturucu "Nubex"

sonuç:

Web Sitesi Oluşturucu "Nubex"

Ale metni unutmayı, etiketlere koymayı unutmayın Benі onları Pratik olarak aynı şekilde gösterilmelerine rağmen (tüm modern tarayıcılarda), daha önce de söylendiği gibi özünde tamamen aynı değildirler. Bu nedenle zorunluluk dünyasında etiket kullanmak gerekir: tag onları HTML çerçevesi metnin önemli kısımları ve italik görsel tasarımın arkasına ek bir etiket yerleştirilir Ben veya CSS stilleri. Şimdi italik metin için CSS stillerine bir göz atalım.

CSS kullanarak italik metin

Yazı tipi görüntüleme stillerini CSS'ye yüklemek için güç gerekir yazı stili, Yake şu anlamı alabilir: eğik(İtalik), italik(italik) ben normal(Zvichainy yazı tipi).

Varto olanları hatırlıyor italik yazı tipi ben kaçırmak Dürüst olmak gerekirse aynı şey değil. italik- bu, el yazısı metne benzeyen özel bir yazı tipidir ve kaçırmak Sağa benzer bir yazı tipinin yardımıyla oluşturulmuştur.

zastosuvannya özelliği yazı stili uygulamada:

Ek CSS ile italik - "Nubex"

Sitelerimiz etkilidir, görkemli timsah web geliştirmede.

Mi robimo doğru şekilde Açıkçaİnternet sitesi.

Bazı tarayıcıların metin üzerinde yetkiye sahip olduğunu da unutmamak gerekir. yazı tipi stili:eğik; italik olarak değil, el yazısı olarak yorumlanabilir.

Yenilikleri öğrenmeyi ve ekranınızı yeni bilgilerle güncellemeyi seven siz sevgililere hoş geldiniz! Makaleyi okuduktan sonra HTML'de nasıl kalın metin oluşturulacağını, ne tür sandalyelerin bulunduğunu ve bunun arkasında hangi öğelerin bulunduğunu öğreneceksiniz. Sonuç olarak, siteniz açıkça görülebilen önemli noktalara sahip okunabilir metinlerle övünebilir.

Önceki yazılarımda web sitelerinin özelliklerinden ve etiketlerinden, yeni bir görünüm oluşturma yöntemlerinden ve her zaman hiçbir nesneye dokunmadan, onsuz bir web sitesinde yaşamanın imkansız olduğundan çok bahsetmiştim. Bu metindir.

Neden sadece harflerin basit bir şekilde yazılması değil, aynı zamanda anahtar kelimeleri, alıntıları, mesajları vb. gösteren paragraflara yetkin bir şekilde bölünmesi de gerekiyor. Css dilinde hangi amaçla ve özel araçların sandalyeye aktarılması. Başlayalım!

Html'de koltuk olanakları

Metin içeriğinin yazı tipi artık değiştirilebilir. Örneğin kalın veya italik yazabilir, ayrıca dekore edebilirsiniz. Bu amaçla hatırlanması ve daha sonra yoğunlaşması çok kolay olan basit etiketler vardır. Aşağıda anlamlarını açıklayan bir öğe tablosu bulunmaktadır.

Öncelikle metin öğelerinin kalın yazı tipine bir göz atalım.

Harf sayısını artırmak için aşağıdaki gibi eşleştirilmiş etiketler vardır: і . Ancak bazı araçlarda, metni kalın olarak biçimlendirmedikleri için farklı şekilde görüntülenir. Ancak anlamları farklılık göstermektedir. Bu nedenle bunlara eşdeğer denemez ve yalnızca bir tanesi galip gelemez.

Evet, etiketle yazıtlar ve yazıtlardaki standart yazı tipini zihinsel olarak değiştirerek. Sandalyenin fiziksel görünümü açısından herhangi bir anlamsal önem taşımamaktadır. Diyelim ki bu sadece farklı türde bir hamur.

A Kilit noktada saygının vurgulanmasının nedenleri. Konuşma sırasında tonlamayla görülen bütün bir mantıksal unsur.

Şimdi aşağıdaki etiketlere bakalım: і .

Lütfen standart yazı tipini italik olarak biçimlendirin. Sanırım mantıksal olarak şunu soracaksınız: "Ve bu öğeler aynı zamanda etiket ilkesine göre kendi aralarında da bölünmüş durumda. і ? " Yemek doğru. Ve sen radyodasın!

Etkili, işaretlerinizden biri önemli anlara ve ayrıntılara vurgu yapmak üzere tasarlanmıştır. Her şeyden farklı bir görünüme sahibim.

CSS'de yazı tiplerini değiştirmeye yönelik araçlar

CSS görünmüyor ve geliştiricilere metni düzenlemek için benzer araçlar sunuyor. Bunlar metin dekorasyonu ve yazı tipi ile aynı güçlerdir.

- bu, yazı tipini çeşitli ayrıntılarla tamamlayan evrensel bir parametredir. Böylece, metin "yanıp sönebilir", altı çizili veya üzeri çizili olabilir, kelimelerin üzerine bir çizgi çizilebilir (üst çizili), Babanın nesnesinin özelliklerini azaltabilir (devralabilir) veya tüm ekstralar olmadan yazı tipinin formatını temizleyebilir (yok ).

Metin içeriğini düzenlemek için yaygın olarak kullanılan bir diğer mekanizma da yazı tipi gücüdür. Bu yardımla, yazı tipinin stilini (yazı tipi stili), boyutunu (yazı tipi boyutu) değiştirebilir, küçük harflerin türünü (yazı tipi değişkeni) gösterecek şekilde büyük harf ayarlayabilir ve ayrıca yazı tipini "değiştirebilirsiniz" ( yazı tipi ağırlığı).

Bir aks ve popo

Şu ana kadar bulduğum tüm bilgilere bakarak mümkün olduğu kadar bilgiyi ortadan kaldıracak bir uygulamada böyle bir kod oluşturmaya çalışalım (kodun yazılabileceğini tahmin ediyorum).

metne değiştir

için bir başlık oluşturma yeni paragraf!

Metin içeriğini paragrafın kendisine yazıyoruz; parlıyor .

Uygulamayı tarayıcıda başlatın ve stilleri kullanmaya başlayın. Bu nedenle, vizyonların başlığı, teklifin üzerinde alt çizgi bulunan hafif, ince bir yazı tipiyle yazılmıştır. Paragraf küçük büyük harflerle gösterilmiştir. Ayrıca metinde kelimelerin mantıksal ve fiziksel temsilleri de bulunmaktadır.

Artık metin içeriğini tüm kurallara göre düzenleyebilirsiniz. Yeni bloga abone olun ve arkadaş isteyin. Boo!

Saygılarımla, Roman Chueshov