CSS ve html etiketleri aracılığıyla kalın yazı tipi. Metni seçme. Kalın yazı tipi. HTML Başlangıç ​​Eğitimi İtalik CSS

  • 29.06.2020

Selamlar, yeni bir şeyi parçalarına ayırmayı ve bilgi sandığınızı yeni bilgilerle doldurmayı sevenler! Makaleyi okuduktan sonra, html'de nasıl kalın metin yapılacağını, başka hangi stil türlerinin bulunduğunu ve bundan hangi öğelerin sorumlu olduğunu öğreneceksiniz. Sonuç olarak, siteniz doğru şekilde vurgulanmış önemli noktalara sahip okunabilir metinlerle övünebilecektir.

Önceki makalelerde, web dillerinin nitelikleri ve etiketleri hakkında, görünümü tasarlama yöntemleri hakkında çok konuştum ve ancak hiçbir sitenin onsuz yaşayamayacağı bir nesneye hiç dokunmadım. Bu metin.

Dahası, sadece sürekli bir harf grubu değil, aynı zamanda anahtar kelimelerin, alıntıların, bağlantıların vb. vurgulanmasıyla yetkin bir şekilde paragraflara bölünmüştür. Bunun için css dilleri özel yazı tipi araçları sağlar. Başlayalım!

Html'de stil seçenekleri

Metin içeriğinin yazı tipi her zaman değiştirilebilir. Örneğin, kalın veya italik olarak ayarlayın ve ayrıca süsleyebilirsiniz. Bunu yapmak için, hatırlanması ve ardından uygulanması çok kolay olan basit etiketler vardır. Aşağıda amaçlarını açıklayan bir element tablosu bulunmaktadır.

İlk olarak, kalın metin öğeleriyle ilgilenelim.

Harflerin kalınlığını artırmak için eşleştirilmiş etiketler vardır. ve ... Kullanımda, bu araçlar metni kalın olarak biçimlendirdikleri gibi aynı şekilde görüntülenir. Ancak onların amacı farklıdır. Bu nedenle eşdeğer olarak adlandırılamazlar ve bunlardan sadece biri kullanılabilir.

Yani, etiket standart yazı tipinin zengin ve kalın olarak değiştirilmesi koşuluyla oluşturuldu. Anahattın fiziksel görünümünü ifade eder ve herhangi bir anlam yükü taşımaz. Diyelim ki bu sadece bir tür test ekranı.

A önemli bir noktayı vurgulamak için tasarlanmıştır. Bu, konuşma sırasında tonlamada öne çıkacak mantıklı bir unsurdur.

Şimdi şöyle etiketlere bakalım ve .

Standart yazı tipini italik olarak biçimlendirirler. Bence mantıklı bir soru soracaksınız: “Ve bu unsurlar etiket ilkesine göre de birbirinden farklıdır. ve ? ". Soru doğru. Ve haklısın!

Gerçekten de, biçimlendirme dilinin birimi önemli noktalara ve ayrıntılara vurgu yapmak için tasarlanmıştır. sadece içeriğin görünümü ve verdiği histe bir değişiklik.

CSS yazı tipi değiştirme araçları

Css, geliştiricilere benzer düzenleme araçları sunmaya devam ediyor. Bunlar metin-dekorasyon ve yazı tipi gibi özelliklerdir.

- Bu, yazı tipini bazı ayrıntılarla tamamlayan evrensel bir parametredir. Örneğin, metin “yanıp sönebilir”, altı çizili veya üzeri çizili olabilir, sözcüklerin üzerine çizilebilir (üst çizgi), üst nesneden devralınabilir (devralın) veya yazı tipi biçimi tüm dolgulardan temizlenebilir (yok).

Metin içeriğini düzenlemek için yaygın olarak kullanılan ikinci mekanizma font özelliğidir. Yardımı ile yazı tipi stilini (yazı tipi stili), boyutunu (yazı tipi boyutu), küçük olarak ayarlayabilirsiniz, yani. küçük harflerin türünü (yazı tipi değişkeni) ve yazı tipi ağırlığıyla "oynat"ı belirtin.

İşte bir örnek

Yukarıda verdiğim tüm bilgileri göz önünde bulundurarak edindiğimiz bilgileri maksimum düzeyde kullandığımız böyle bir örnek kod oluşturmaya çalışacağız (kodun yazılabileceğini hatırlatırım).

Metni değiştirme

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

Paragrafın metin içeriğini yazıyoruz, ki bu yanıp sönen .



Örneği bir tarayıcıda çalıştırın ve stile dikkat edin. Bu nedenle, başlık, cümlenin üzerinde bir altı çizili olan hafif italik bir tipte vurgulanır. Paragraf küçük büyük harflerle görüntülenir. Ayrıca metin, kelimelere mantıksal ve fiziksel vurgu içerir.

Artık metin içeriğini tüm kurallara göre düzenleyebilirsiniz. Blog güncellemelerime abone olun ve arkadaşlarınızı davet edin. Güle güle!

Saygılarımla, Roman Chueshov

Bu yazımızda nasıl metin seçileceğinden bahsedeceğiz. italik olarak HTML. Kalın metinde olduğu gibi, italik metin üç şekilde yapılabilir:

  • Etiket ben HTML;
  • Etiket em HTML;
  • CSS özelliği yazı stili.

HTML'de nasıl italik yazabileceğinize ilişkin üç seçeneği de ele alalım, bu sorunun inceliklerini ve belirli durumlarda hangi yöntemlerin daha uygun ve doğru kullanılacağını tartışalım.

İtalik metin: etiket

Etiket ben(italik), etikete benzer B kalın metin için, italik metni fiziksel olarak vurgulamak için kullanılır (bu, yalnızca metnin stilinin değiştiği anlamına gelir). Etiket uygulaması ben:

Web sitesi oluşturucu "Nubex"

Böylece metnin gerekli kısmı etiketlerin arasına yerleştirilir. .

İtalik metin: etiket

etiket olmasına rağmen ben geçerli kalır, site optimizasyonu açısından etiketi kullanmak daha iyidir em Metnin mantıksal olarak önemli bölümlerini vurgulamak için. Bu, arama motoru tarayıcılarının, etiketler arasına yerleştirilen metnin önemini dikkate aldığı anlamına gelir. :

Web Sitesi Oluşturucu "Nubex"

Sonuç:

Web Sitesi Oluşturucu "Nubex"

Ancak etiketlerin içine alınmış metnin ben ve em, hemen hemen aynı şekilde görüntülenmelerine rağmen (tüm modern tarayıcılarda), özünde yukarıda belirtildiği gibi tamamen aynı değildirler. Bu nedenle, gerektiği gibi etiketleri kullanmanız gerekir: etiket em Metnin önemli bölümlerini çerçevelemek ve bir etiket kullanarak görsel italik tasarım uygulamak için HTML ben veya CSS stilleri. Şimdi italik metin vurgulama için CSS stillerini kullanmaya bakalım.

CSS tarafından desteklenen italik metin

CSS'de yazı tiplerini görüntülemek için stilleri ayarlamak için özelliği kullanın. yazı stili, aşağıdaki değerleri alabilir: eğik(italik metin) italik(italik) ve normal(normal yazı tipi).

bunu hatırlamakta fayda var italik yazı tipi ve eğimli, özlerinde aynı değildir. italik el yazısı metne benzeyen özel bir yazı tipidir ve eğimli normal yazı tipini sağa eğerek oluşturulur.

Özellik uygulaması yazı stili pratikte:

CSS ile İtalik - "Nubex"

Sitelerimiz, gerçekten, büyük adım web geliştirmede.

gerçek için yapıyoruz kalite Siteler.



Ancak bazı tarayıcıların bu özelliğe sahip metinler yazdığı unutulmamalıdır. yazı tipi stili: eğik; italik metin yerine italik olarak yorumlanabilir.

Yazı tipleriyle çalışmaya devam ediyoruz ve bu derste yazı tipine kalın veya italik bir görünüm veren özelliklerin nasıl ayarlanacağına bakacağız. Ondan önce, nasıl olduğunu zaten düşündük. kalın veya italik yazı oluşturun kullanarak HTML etiketler. Ama zaten bildiğimiz gibi, HTML belgeyi süslemek için kullanılmamalıdır, yalnızca biçimlendirme, sayfa yapısı oluşturmak için tasarlanmıştır, bu nedenle her şeyi stil sayfası aracılığıyla tasarlamanız gerekir CSS... Şimdi bu tür özelliklerin nasıl ayarlandığına bakalım.

İtalik CSS yazı tipi

Özellik, italik olarak metin oluşturmaya yardımcı olur. yazı stili:; değer atanan italik , "Yazı Tipi Stili - İtalik" anlamına gelir.

Şimdi sayfada çok sayıda paragraf olduğunu ve bazılarının italik yazılması gerektiğini düşünelim. Yaptığımız şey, istenen paragraf için bir sınıf oluşturmak ve ardından böyle bir sınıfa sahip bir öğenin italik olması gerektiğini belirtmek.

HTML

HTML sayfası

Dördüncü paragraf Dördüncü paragraf Dördüncü paragraf



İtalik yazı tipi için özelliği ayarladık.

Bu tür paragraflar oluşturduysanız ve onlar için bir özellik belirlediyseniz, ikinci paragrafın metni italik hale geldi. Bu özelliği tüm paragraf için ayarladığımız şey, ama şimdi dördüncü paragrafta sadece iki kelime için karmaşıklaştıralım ve italik ayarlayalım. Bu nasıl yapılır? V HTML derste, mantık seviyesi etiketini ayrıştırdık ... Bu etiket yalnızca, bir öğenin bir kısmı için bir sınıfın ayarlanması gerektiğinde bu tür durumlar için kullanılır. Ve böylece dördüncü paragrafta bir etiket yerleştirdik ve bunun için bir sınıf yazdık. sınıf ="italik"> ... Sonuç olarak, aşağıdaki kaydı alıyoruz:

HTML

Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf

İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf

Üçüncü fıkra Üçüncü fıkra Üçüncü fıkra Üçüncü fıkra

Dördüncü paragraf Dördüncü paragraf Dördüncü paragraf

Beşinci paragraf Beşinci paragraf Beşinci paragraf Beşinci paragraf


İtalik (yazı tipi stili: italik;)

İkinci paragraf ve dördüncü paragrafın bir kısmı artık italik olarak görüntüleniyor. V demo bu açıkça gösterilmektedir.

Kalın CSS

Kalın yazı tipini ayarlamak için, adında başka bir özellik kullanılır. yazı tipi ağırlığı:; başka bir deyişle, yazı tipi ağırlığı olarak da adlandırılır. Doygunluk başlangıçta normal yani, yazı tipinin ağırlığı normaldir ve değeri ayarlayarak gözü pek cesur hale gelecektir.

Kalın (yazı tipi ağırlığı: kalın;)

Ayrıca doygunluk değerini şuradan sayılarla da ayarlayabilirsiniz: 100 önce 900 adım ile 100 ... Anlam normal bir rakama eşittir 400 ve değer gözü pek figür 700 ... Anlam 900 tüm yazı tipleri tarafından desteklenmez, bu nedenle bu değeri ayarlayarak değerden farkı fark etmeyebilirsiniz. 700 ... Bu durum aşağıdaki gibi görünüyor.

Kalın (yazı tipi ağırlığı: 700;)

V html kodu, tam olarak aynı şeyi yaparlar: tüm paragrafı seçmeniz gerekiyorsa, yeni bir sınıf ayarlayın, metnin bir parçasıysa etiketi kullanın sınıf ="italik"> ... Küçük bir örneğe bakalım:

HTML

HTML sayfası

Birinci paragraf Birinci paragraf Birinci paragraf Birinci paragraf

İkinci paragraf İkinci paragraf İkinci paragraf İkinci paragraf

Üçüncü fıkra Üçüncü fıkra Üçüncü fıkra Üçüncü fıkra

Dördüncü paragraf Dört paragraf Dört paragraf

Beşinci paragraf Beşinci paragraf Beşinci paragraf Beşinci paragraf



Kalın (yazı tipi ağırlığı: kalın;)

Sonuç olarak, dördüncü paragrafın aynı zamanda italik olduğu kısmı ve beşinci paragrafın tamamını kalın metin olarak vurguladık. Bunlar incelediğimiz iki özellik daha. Oldukça sık kullanılırlar, bu yüzden şunu hatırlamaya değer:

  • İtalik yazı tipi şu şekilde belirtilir: yazı stili: italik; .
  • Kalın tarafından belirlenir: yazı tipi ağırlığı: gözü pek; .
  • Yazı tipini normal ağırlığa döndürmek için değer ayarlanır: yazı tipi ağırlığı: normal; veya değer yazı tipi ağırlığı: 400 ; , bu durumda aynı anlama gelir.

Burada yazı tiplerinin iki özelliğini daha inceledik. İçine bakmak Demo sonunda sizin için ne olmalıydı ve aşağıdaki özellikleri incelemeye devam ediyoruz.

Bugün size HTML ve CSS kullanarak bir web sitesinde kalın harflerle kelimelerin nasıl yazılacağını anlatacağım. Bu tasarım, bir sayfada belirli bilgileri vurgulamanız gerektiğinde kullanılır. Üstelik sadece başlıklardan değil, metindeki basit kelimelerden, deyimlerden de bahsediyoruz. Bu oldukça basit bir şekilde uygulanmaktadır.

Belirli bir metni kalın olarak vurgulamak için özel HTML etiketleri kullanılır - ve ... Örneğin aşağıdaki kod:

Düz metin.

küçük resim.

Güçlü kalın metin.

Düz metin.

küçük resim.

Güçlü kalın metin.

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

Son iki seçenek görsel olarak aynı görünüyor, ancak birbirlerinden biraz farklılar. Etiket bir kelimenin basit üslupsal cesurluğunu belirtirken belirli bir anlamsal "gelişmiş" (önemli) anlam ekler. Yani, son satır sadece kalın metin değil, bazı önemli bilgilerdir. Prensip olarak, arama motorları için tam olarak kullanılması önerilir. .

Ayrıca, stilleri olan kalın metinlerle HTML'de karşılaşabilirsiniz:

Kalın metin örneği.

ile örnek metin gözü pek kelime.

Site bunu şöyle gösteriyor:

Kalın HTML kodu düzgün çalışsa da çalışmamalıdır. Tüm tasarım stilleri bir CSS dosyasında oluşturulmalıdır. Bu nedenle, yukarıdaki örnekte, etiketler için yapmanız gerekiyordu

VE uygun sınıfı belirleyin ve ardından görünümünü stil sayfasına yazın. Bunlar kodlama kurallarıdır. Bu nedenle, HTML'de kalın için etiketi kullanın .

Kalın CSS metni

CSS'yi kalın yapmak için font-weight özelliği kullanılır. Yardımı ile metin parçasının "doygunluğu" belirtilir. Değerler 100 ile 900 arasında değişebilir, ancak en sık kullanılanları şunlardır:

  • kalın (kalın) - varsayılan olarak 700;
  • normal - varsayılan olarak 400.

Ayrıca, üst öğeye bağlı olarak yazı tipini sırasıyla az ya da çok kalın olarak değiştiren daha kalın ve daha açık değerler için seçenekler de vardır.

CSS'de kalın metin ayarlamak için, şu veya bu öğe için bir stil ayarlamanız gerekir, örneğin:

ile düz metin yağlı akıntı merkezinde.

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

Burada bana söylenen küçük bir nüansı not etmek istiyorum - eğer bir element için yeni bir sınıf yaratırsanız, o zaman az çok "anlaşılabilir bir isim" kullanmanız tavsiye edilir. Örneğin, yukarıdaki örnekte, class = "my-bold-font" stili, class = "new-font" stilinden daha mantıklı görünüyor, çünkü amacını kısmen anlayabilirsiniz. Bu, gelecekte düzeninize bakacak ve kullanacak olanlar için bir artı.

Bir sonraki yazıda, bulmayı başardığım bazı ilginç cesur yazı tiplerinden bahsedeceğim.

Html, metin biçimlendirme açısından bize bazı olanaklar sağlar. Bugün size hem standart bir yazı tipi hem de standart olmayan bir yazı tipi için html'de nasıl italik yazı tipi yapacağınızı anlatacağım. İkinci durumda, her şeyin çalışması için bir şeyler düşünmeniz gerekecek.

Html'de italik nasıl yazılır?

Başlangıç ​​olarak, html'nin kendisinde metne italik bir stil veren iki etiket vardır. Bunlar em ve ben. Bu arada, ikincisi, şu anda bu makaleyi yazdığım wordpress motorunun html editörüne yerleştirildi. Bu etiketler nasıl farklı? Aslında bugün onların bir şekilde farklı olduklarını yüksek sesle ilan etmek istemem.

Genel olarak em, özel tonlama ile telaffuz edilmesi gereken kelimeleri vurgulamak için kullanılırken, i sadece metni görsel olarak vurguluyorum. Ama bununla hiç uğraşmayalım çünkü gerçekten de öyle olup olmadığı bilinmiyor.

İtalik metin için css özellikleri nelerdir?

Bu, yazı tipi stili özelliği ve italik değeridir. Eğik değer de vardır ve metni italik yapar. Bu değerler arasında bir fark var mı? Neredeyse hiçbiri. Bu arada, her şeyin raflarda düzenlendiği ilgili makaledeki metin için bu ve diğer css özellikleri hakkında ayrıntılı bilgi edinin.

Özel yazı tipi italik olarak nasıl görüntülenir?

Gerçek şu ki, Google Fonts aracılığıyla standart olmayan bir yazı tipi bağlarsanız, bu durumda en az 1 italik yazı tipi stilini bağlarken kutuyu işaretlemeniz gerekir. Bu yapılmazsa, böyle bir yazı tipini italik yapmaya çalıştığınızda, standart yazı tiplerinden biri italik olacaktır. Bu arada, bu makalede standart olmayan yazı tiplerini bağlama hakkında bilgi edinebilirsiniz.

Bu ekran görüntüsünde, Google Yazı Tipleri hizmeti aracılığıyla yazı tipi bağlantısının bir parçasını görebilirsiniz.

Gördüğünüz gibi, en az bir italik stilin yanında bir onay işareti var. Şimdi, gerekli etiketleri veya stil özelliğini kullanırken, bu yazı tipinin başka bir yazı tipi değil, italik olacağı doğrudur.

Böylece, italik ile çalışan tüm noktaları sıraladık. Seni daha fazla alıkoymaya cesaret edemem.




Bilgisayar yardım sitesi

© Telif hakkı 2021,
rzdoro.ru - Bilgisayar yardım sitesi

  • Kategoriler
  • Demir
  • Windows 10
  • Tarama
  • Windows 7
  • Demir
  • Windows 10
  • Tarama
  • Windows 7