Yazı tipimi css kullanarak kalın yapmak nasıl?

249

HTML ve CSS için çok yeniyim ve sadece yazı tipimi nasıl CSS kullanarak kalın yapabileceğimi merak ediyordum.

Bir CSS dosyasını içe aktarılan düz bir HTML sayfam var ve CSS'deki yazı tipini değiştirebilirim. Ama yazı tipini nasıl kalın yapacağımı bilmiyorum, kimse bana yardımcı olabilir mi?

css

— Peter-b
kaynak

6

CSS2 teknik özelliklerini okumanızı öneririm, neler yapabileceğiniz ve nasıl yapacağınız hakkında çok ayrıntılı bir açıklama sağlar. Ve o da çok kuru değil. w3.org/TR/CSS2

— Robert K

html / css içindeki bir paragraf içindeki sözcüklerin kalın harflerle yazılmasının

— Ejaz

295

CSS bildirimini kullanabilirsiniz font-weight: bold;.

Http://htmldog.com/guides/cssbeginner/ adresindeki CSS başlangıç kılavuzunu okumanızı tavsiye ederim .

— Wolfr
kaynak

76

Sen kullanabilirsiniz elemanı semantik harika, (ayrıca ekran okuyucular vb için iyidir) 'dir html içinde, tipik kalın metin olarak vermektedir:strong

See here, some <strong>emphasized text</strong>.

Snippet'i genişlet

Veya herhangi bir öğenin metnini kalın olarak biçimlendirmek için font-weightcss özelliğini kullanabilirsiniz :

span { font-weight: bold; }

<p>This is a paragraph of <span>bold text</span>.</p>

Snippet'i genişlet

— erenon
kaynak

2. paragrafın tamamını kalın yazdım, bu yüzden "kalın metin" kelimelerini vurgulamıyor, sadece stil.

— GKFX

2

Sadece bir şeyi vurgulamaya çalışıyorsanız anlamsal olarak harika; vurgulamaya çalışmayan bir stilse, <strong>öğe anlamsal olarak yanıltıcıdır.

— jtpereyda

34

Kullanırdın font-weight: bold.

Tüm belgeyi kalın yapmak istiyor musunuz? Yoksa sadece bir kısmı mı?

— David Wolever
kaynak

26

Html'de yenisiniz, burada CSS'nin html ile birlikte nasıl kullanılacağına dair üç hazır örnek var. Bunları bir dosyaya koyabilir, kaydedebilir ve istediğiniz tarayıcıyla açabilirsiniz:

Bu, CSS stilinizi doğrudan etiketlerinize / öğelerinize gömer. Genellikle bu çok hoş bir yaklaşım değildir, çünkü içeriği / html'yi her zaman tasarımdan ayırmalısınız.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
    </head>           
    <body>
        <p style="font-weight:bold;">Hi, I'm very bold!</p>
    </body>
</html>

Birincisi daha genel bir yaklaşımdır ve belgenizdeki tüm "p" (paragraf anlamına gelir) etiketlerinde çalışır ve ayrıca onları BÜYÜK yapar. Btw. Google bu yaklaşımı aramalarında kullanır:

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <style type="text/css">
            p {
              font-weight:bold;
              font-size:26px;
            }
        </style>
    </head>   
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Muhtemelen ilk örneklerle oynamak birkaç gün sürecek, ancak burada sonuncusu. Bunda nihayet tasarımı (css) ve içeriği (html) iki farklı dosyada birbirinden tamamen ayırmış olursunuz. stackoverflow bu yaklaşımı benimser.

Bir dosyaya tüm CSS'yi koyarsınız (buna 'hello_world.css' deyin):

  p {
    font-weight:bold;
    font-size:26px;
  }

Başka bir dosyaya html'yi koymalısınız ('hello_world.html' deyin):

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Hi, I'm bold!</title>  
        <link rel="stylesheet" type="text/css" href="hello_world.css" />  
    </head>       
    <body>
        <p>Hi, I'm very bold and HUGE!</p>
    </body>
</html>

Umarım bu biraz yardımcı olur. Tüm etiketleri değil belgenizdeki belirli öğeleri ele almak için class, idve nameniteliklerine aşina olmalısınız . İyi eğlenceler!

— merkuro
kaynak

14

CSS font-weightözelliğini kullanma

— clawr
kaynak

8

Selector name{
font-weight:bold;
}

P öğesi için kalın yapmak istediğinizi varsayalım

p{
font-weight:bold;
}

Kalın gibi yerine başka bir alternatif değer kullanabilirsiniz

p{
 font-weight:bolder;
 font-weight:600;
}

— Santosh Khalse
kaynak

7

font-weight: bold

— Bellek yetersiz
kaynak

7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
   body
   {
      font-weight: bold;
   }
</STYLE>
</HEAD>
<BODY>
Body text is now bold.
</BODY>
</HTML>

— Ian Boyd
kaynak

6

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

— Luixv
kaynak

-1

Birkaç yaklaşım kullanabilirsiniz. İlk olarak güçlü etiketi kullanmak

Here is an <strong>example of that tag</strong>.

Başka bir yaklaşım font-weight özelliğini kullanmak olacaktır. Satır içi veya bir sınıf veya kimlik aracılığıyla başarı elde edebilirsiniz. Diyelim ki bir sınıf kullanıyorsunuz.

.className {
  font-weight: bold;
}

Alternatif olarak, yazı tipi ağırlığı için sabit bir değer de kullanabilirsiniz ve çoğu yazı tipi 100 ile artırılmış 300 ile 700 arasında bir değeri destekler. Örneğin, aşağıdakiler kalın olacaktır:

.className {
  font-weight: 700;
}

— Andrew Tuzson
kaynak

Diğer Yanıtlar bu noktaları zaten kapsıyordu. Bu Yanıt nasıl değer katıyor?

— Basil Bourque