CSS italikleri: yazı tipi stilini değiştirin. HTML5: Etiketi İtalik Yapan Eski Etiketler Yeni Atama

Bu yazıda nasıl metin seçeceğimizden bahsedeceğiz. italik olarak HTML. Kalın metinde olduğu gibi, italik metin üç şekilde oluşturulabilir:

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

HTML'de nasıl italik yapabileceğinizi, bu konunun inceliklerini ve belirli durumlarda hangi yöntemlerin daha uygun ve daha doğru olduğunu tartışmak için üç seçeneği de ele alalı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

Etiketi olmasına rağmen ben geçerli kalır, site optimizasyonu açısından etiketi kullanmak daha iyidir em mantıksal olarak önemli metin bölümlerini vurgulamak için. Bu, arama robotlarının etiketler arasına yerleştirilen metnin önemini hesaba kattığı anlamına gelir. :

Web Sitesi Oluşturucu "Nubex"

Sonuç:

Web Sitesi Oluşturucu "Nubex"

Ancak etiketlerin içine alınmış metnin ben ve em, neredeyse 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, etiketleri gerektiği gibi 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 seçimi için CSS stilleri kullanmaya bakalım.

CSS tarafından desteklenen italik metin

CSS'de yazı tiplerinin görüntü stillerini 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ırlamaya değer italik yazı tipi ve eğimliözünde aynı değildir. İtalik el yazısı metne benzer özel bir yazı tipidir ve eğimli normal yazı tipini sağa doğru eğerek oluşturulur.

Öznitelik uygulaması yazı stili pratikte:

CSS ile italik - "Nubex"

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

Biz gerçekten yapıyoruz kalite Siteler.

Ancak bazı tarayıcıların özelliği ile metin yazdığı unutulmamalıdır. yazı tipi stili: eğik; italik metin olarak değil italik olarak yorumlanabilir.

Açıklama

Yazı tipinin stilini belirtir - normal, italik veya italik. Metin italik veya italik olarak ayarlandığında, tarayıcı uygun bir yazı tipi bulmak için sisteme danışır. Belirtilen yazı tipi bulunmazsa, tarayıcı istenen metin türünü simüle etmek için özel bir algoritma kullanır. Sonuç ve kalite, özellikle bir belge yazdırırken tatmin edici olmayabilir.

Sözdizimi

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

Değerler

normal Normal metin stili. italik İtalik stil. eğik İtalik stil. İtalik ve italik, benzer olsalar da aynı şey değildir. İtalik, el yazısını taklit eden özel bir yazı biçimidir, eğik ise sıradan karakterlerin sağa eğilmesiyle oluşturulur. miras al Değeri üst öğeden devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

yazı stili

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ve minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis, ex ea commodo results.

Bu örneğin sonucu Şekil 1'de gösterilmektedir. 1.

Şekil: 1. Yazı tipi stili özelliğini uygulama

Nesne Modeli

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

Tarayıcılar

Internet Explorer 7.0 veya üzeri, devralma değerini desteklemez.

Tarayıcılar her zaman eğik değerdeki metni italik olarak işler.

HTML'de yazı tipi boyutu önemli bir rol oynar. Kullanıcının dikkatini web sitesi sayfasında yayınlanan önemli bilgilere çekmenize olanak tanır. Sadece harflerin boyutu değil, aynı zamanda renkleri, kalınlıkları ve hatta aileleri de önemlidir.

HTML yazı tiplerine sahip robot olduğunda etiketler ve öznitelikler

Köprü metni dili, yazı tipleriyle çalışmak için çok sayıda araç içerir. Sonuçta, html'nin ana görevi metin biçimlendirmesidir.

HTML dilinin yaratılmasının nedeni, tarayıcılarda metin biçimlendirme kurallarının görüntülenmesi sorunuydu.


Html'deki fontlarla çalışmak için kullanılan etiketleri ve özniteliklerini göz önünde bulundurun. Ana etiket ... Özniteliklerinin değerlerini kullanarak yazı tipinin birkaç özelliğini ayarlayabilirsiniz:

  • renk - metnin rengini ayarlar;
  • boyut - geleneksel birimlerde yazı tipi boyutu.

1'den 7'ye kadar pozitif öznitelik değerleri desteklenir.

  • yüz - etiket içinde kullanılacak metnin yazı tipi ailesini ayarlamak için kullanılır ... Virgülle ayrılmış birkaç değer aynı anda desteklenir.

Yalnızca eşleştirilmiş yazı tipi etiketinin bölümleri arasındaki metin biçimlendirilir. Metnin geri kalanı standart varsayılan yazı tipinde görüntülenir.

Ayrıca html'de yalnızca bir biçimlendirme kuralı belirten bir dizi eşleştirilmiş etiket vardır. Bunlar şunları içerir:

  • - html'de kalın yazı tipini ayarlar. Etiket eylem öncekine benzer;
  • - boyut varsayılandan daha büyüktür;
  • - daha küçük yazı tipi boyutu;
  • - italik metin. Benzer etiket ;
  • - altı çizili metin;
  • - üstü çizildi;
  • - metni yalnızca küçük harf olarak görüntüler;
  • - büyük harfle.

Düz metin

Küçük resim

Küçük resim

Normalden daha fazla

Normalden daha az

İtalik

İtalik

Altı çizili

Üstü çizildi

Stil niteliği yetenekleri

Açıklanan etiketlere ek olarak, yazı tipini html'de değiştirmenin birkaç yolu daha vardır. Bunlardan biri, genel stil özelliğini kullanmaktır. Özelliklerinin değerlerini kullanarak yazı tipi görüntüleme stilini ayarlayabilirsiniz:

1) yazı tipi ailesi - özellik yazı tipi ailesini belirler. Birkaç değerin numaralandırılması mümkündür.
Yazı tipini html olarak bir sonraki değere değiştirmek, önceki aile kullanıcının işletim sisteminde yüklü değilse gerçekleşir..

Sözdizimi yazılıyor:

yazı tipi ailesi: yazı tipi adı [, yazı tipi adı [, ...]]

2) yazı tipi boyutu - boyut 1'den 7'ye ayarlanır. Bu, yazı tipini html olarak artırmanın ana yollarından biridir.
Sözdizimi yazılıyor:

yazı tipi boyutu: mutlak boyut | göreli boyut | değer | ilgi | miras almak

Yazı tipi boyutunu da ayarlayabilirsiniz:

  • Piksel cinsinden;
  • Mutlak değerde ( xx-küçük, x-küçük, küçük, orta, büyük);
  • Yüzde cinsinden;
  • Puan cinsinden (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 stili - yazı tipini yazma stilini ayarlar. Sözdizimi:

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

Değerler:

  • normal - normal yazım;
  • italik - italik;
  • eğik - sağa yaslanmış yazı tipi;
  • miras - ana öğenin yazılışını devralır.

Bu özelliği kullanarak html'deki yazı tipinin nasıl değiştirileceğine bir örnek:

yazı tipi stili: devralma

yazı tipi stili: italik

yazı tipi stili: normal

yazı tipi stili: eğik

4) yazı tipi değişkeni - tüm büyük harfleri büyük harfe dönüştürür. Sözdizimi:

yazı tipi değişkeni: normal | küçük harfli | miras almak

Bu özellik ile html'deki yazı tipinin nasıl değiştirileceğine bir örnek:

yazı tipi değişkeni: devralma

yazı tipi değişkeni: normal

yazı tipi değişkeni: küçük büyük harf

5) yazı tipi ağırlığı - metnin yazı kalınlığını (doygunluk) ayarlamanıza olanak tanır. Sözdizimi:

yazı tipi ağırlığı: kalın | kalın | daha hafif | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Değerler:

  • kalın - html kalın yazı tipini ayarlar;
  • daha cesur - normale göre daha şişman;
  • daha hafif - normale göre daha az doymuş;
  • normal - normal yazım;
  • 100-900 - yazı tipi kalınlığını sayısal eşdeğeri olarak ayarlar.

yazı tipi ağırlığı: kalın

yazı tipi ağırlığı: daha kalın

yazı tipi ağırlığı: daha açık

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 kap özelliğidir. Dahili olarak, yazı tiplerini değiştirmek için tasarlanmış birkaç özelliğin değerlerini birleştirdi. Yazı tipi sözdizimi şöyledir:

yazı tipi: yazı tipi boyutu yazı tipi ailesi | miras almak

Ayrıca, sistem tarafından çeşitli kontroller üzerindeki yazılarda kullanılan yazı tipleri bir değer olarak ayarlanabilir:

  • başlık - düğmeler için;
  • simge - simgeler için;
  • menü - menü;
  • mesaj kutusu - iletişim kutuları için;
  • small-caption - küçük kontroller için
  • durum çubuğu - durum çubuğu yazı tipi.

yazı tipi: simge

yazı tipi: başlık

yazı tipi: menü

yazı tipi: ileti kutusu

küçük başlık

yazı tipi: durum çubuğu

yazı tipi: italik 50px kalın "Times New Roman", Times, serif

Yazı tipi rengini html olarak ayarlamak için color özelliğini kullanabilirsiniz. Hem bir anahtar kelime hem de rgb formatını kullanarak rengi ayarlamanıza olanak tanır. Ve ayrıca onaltılık bir kod biçiminde.

Şimdi ana etiketleri inceleyeceğiz. Yapısını oluşturan sayfada hangi etiketlerin gerekli olduğu ile başlayalım.

Blok. En basit sayfanın yapısı

Site sayfası, uzantısına sahip bir düz metin dosyasıdır .html... Bu dosya HTML sayfasının metnini etiketlerle birlikte içerir. Bu dosya aşağıdaki etiketlere sahip olmalıdır: etiket , tüm sitenin metnini içermelidir (bu etiketin dışında yazılan her şey tarayıcı tarafından göz ardı edilecektir) ve içinde iki etiket daha bulunmalıdır: etiket sayfanın hizmet içeriği ve etiketi için - tarayıcı ekranında görünen ana metin için.

Etiketin içinde bulunan içeriğe hizmet vermek için , birçok farklı şey gelir, ancak şimdilik sadece ikisine ihtiyacımız var. Bu bir etiket , tarayıcı sekmesinde görünecek olan sayfanın adını ve etiketini ayarlayan <meta> , sayfa kodlamasını ayarlar (bu, öznitelikte ayarlanır <b>karakter kümesi</b> ve genellikle önemlidir <b>utf-8</b>, videoda bununla ilgili daha fazla bilgi, aşağıda birkaç paragraf olacak).</p> <p>Ayrıca etiketinden önce <html> inşaat genellikle yazılır <b>belge türü</b>, sitenin yapıldığı HTML dilinin sürümünü gösterir. Dilin şu anki sürümü beş numara ve bunun belge türü şöyle görünmeli -<!DOCTYPE html> .</p> <p>Öyleyse sayfanın temel yapısına bir göz atalım (bu örneği bir tarayıcıda çalıştırmak için, uzantısıyla bir metin dosyasına kopyalayın. <b>.html</b> ve bununla ilgili sorun yaşıyorsanız bir tarayıcıda açın - örneğin aşağıdaki videoyu izleyin):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bu başlık başlığı Bu, sayfanın ana içeriğidir.

Bu örneğin bir tarayıcıda nasıl göründüğünü öğrenmek için bu bağlantıya bakın.

Sanırım sayfanın temel yapısını okuduktan sonra, pratikte nasıl göründüğü konusunda hala kafa karışıklığı yaşıyorsunuz. Bu nedenle, size ilk HTML sayfanızı nasıl yapacağınızı ve bir tarayıcıda nasıl çalıştıracağınızı göstereceğim özel bir video yaptım (içinde size sayfa başlığı, kodlamalar, kod tasarımı hakkında da bilgi vereceğim). Bir göz atın ve ancak o zaman daha fazla okumaya geçin:

Artık en basit sayfaların nasıl oluşturulacağını öğrendiğimize göre, bir etiket içinde kullanılması gereken yararlı etiketleri keşfetmeye geçeceğiz. ... Bunlar paragraflar, başlıklar, listeler, bağlantılar ve diğer yararlı şeyler için etiketler olacaktır. Öyleyse başlayalım.

Blok. Paragraflar

Sayfanın ana unsurlarından biri paragraflar... Bir kitaptaki paragraflarla karşılaştırılabilirler - her paragraf yeni bir satırda başlar ve sözde kırmızı bir çizgiye sahiptir (bu, paragraf metninin ilk satırının hafifçe sağa doğru girintili olduğu zamandır). Varsayılan olarak kırmızı çizgi yoktur, ancak yapılması kolaydır (bundan sonra daha fazlası).

Etiketi kullanılarak bir paragraf oluşturulur

Böylece:

Bu başlık başlığı

Bu bir paragraf.

Bu başka bir paragraf.

Ve bir paragraf daha.

Bu bir paragraf.

Bu başka bir paragraf.

Ve bir paragraf daha.

Blok. Başlıklar h1, h2, h3, h4, h5, h6

Sayfada paragraflara ek olarak önemlidir manşetler... Bir kitabın başlıklarıyla da karşılaştırılabilirler - her bölümün kendi başlığı (bu bölümün başlığı) vardır ve kendi başlıkları da olan paragraflara bölünmüştür. Eh, sayfanın ana metni paragraflar halinde.

Üstbilgiler oluşturuldu etiketleri kullanmak

,

,

,

,

,
... Farklı derecelerde önemleri vardır. Başlıkta h1 sahip olmalı tüm HTML sayfasının başlığı, içinde h2 - isim bloklar içindeki sayfalar h3 - alt blokların adı vb.

Tüm başlıklar varsayılan olarak kalındır ve farklı boyutlara sahiptir (bu, CSS aracılığıyla değiştirilebilir, ancak daha sonra bununla ilgili daha fazlası). Örneğe bakın:

Bu başlık başlığı

H1 başlığı

H2 başlığı

H3 başlığı

H4 başlığı

H5 başlığı
H6 başlığı

Bu ilk paragraf.

Bu ikinci paragraf.

Bu üçüncü paragraf.

Kod tarayıcıda şu şekilde görünecektir:

H1 başlığı

H2 başlığı

H3 başlığı

H4 başlığı

H5 başlığı
H6 başlığı

Bu ilk paragraf.

Bu ikinci paragraf.

Bu üçüncü paragraf.

Blok. Yağlı

Varsayılan başlıkların olduğunu zaten biliyorsunuz yağlı... Bununla birlikte, düz metni kalın da yapabilirsiniz - sadece etikete alın ... Örneğe bakın:

Bu başlık başlığı

Bu normal bir metindir ve bu yağlı Metin.

Kod tarayıcıda şu şekilde görünecektir:

Bu normal bir metindir ve bu yağlı Metin.

paragraf gibi başka bir etiketin içinde kullanılmalıdır. Bu durumda paragraflar, sayfanın genel yapısını (paragraflar ve başlıklar) ve etiketini oluşturur. b tek tek metin parçalarını kalın yapar.

Blok. İtalik

Yağlı ek olarak, ayrıca yapabilirsiniz italik etiketi kullanarak :

Bu başlık başlığı

Bu normal bir metindir ve bu italik Metin.

Kod tarayıcıda şu şekilde görünecektir:

Blok. Listeler

Paragraflar ve başlıkların yanı sıra, sayfanın başka bir önemli unsuru daha vardır - bu listeler... Bu tür öğeler muhtemelen tüm İnternet kullanıcılarına aşinadır. Nokta nokta bir şeyin listesi (bir liste). Listedeki her öğenin yanında genellikle içi dolu bir daire bulunur (buna işaretleyici liste).

Listeler etiketi kullanılarak oluşturulur

© 2020 Mobil ve Bilgisayar Cihazları