Come rendere grassetto il mio carattere usando CSS?

249

Sono molto nuovo di HTML e CSS e mi stavo solo chiedendo come avrei potuto rendere audace il mio carattere usando CSS.

Ho una semplice pagina HTML che importa un file CSS e posso cambiare il carattere nel CSS. Ma non so come rendere grassetto il carattere, qualcuno può aiutarmi?

css 
— peter-b
fonte
6
Ti suggerisco di leggere la specifica CSS2, che fornisce una spiegazione molto approfondita di cosa puoi fare e come farlo. E non è nemmeno troppo secco. w3.org/TR/CSS2
— Robert K,
— Ejaz,

Risposte:

76

Puoi usare l' strongelemento in html, che è ottimo semanticamente (buono anche per gli screen reader, ecc.), Che di solito viene visualizzato in grassetto:

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

Oppure puoi usare la font-weightproprietà css per dare stile al testo di qualsiasi elemento in grassetto:

span { font-weight: bold; }
<p>This is a paragraph of <span>bold text</span>.</p>
Espandi frammento

— erenon
fonte
Ho messo l'intero 2 ° paragrafo in grassetto, quindi non si enfatizzano le parole "grassetto", è solo stile.
— GKFX,
2
È fantastico solo semanticamente se stai cercando di enfatizzare qualcosa; se è uno stile senza cercare di enfatizzare, l' <strong>elemento è semanticamente fuorviante.
— jtpereyda,
34

Useresti font-weight: bold.

Vuoi rendere l'intero documento in grassetto? O solo parti di esso?

— David Wolever
fonte
26

Sine sei nuovo di HTML qui ci sono tre esempi pronti per l'uso su come utilizzare CSS insieme a HTML. Puoi semplicemente metterli in un file, salvarlo e aprirlo con il browser che preferisci:

Questo incorpora direttamente il tuo stile CSS nei tuoi tag / elementi. Generalmente questo non è un approccio molto carino, perché dovresti sempre separare il contenuto / html dal design.

<?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>

Il prossimo è un approccio più generale e funziona su tutti i tag "p" (sta per paragrafo) nel documento e li rende inoltre ENORMI. Btw. Google utilizza questo approccio nella sua ricerca:

<?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>

Probabilmente impiegherai un paio di giorni a giocare con i primi esempi, tuttavia ecco l'ultimo. In questo hai finalmente separato completamente il design (css) e il contenuto (html) l'uno dall'altro in due file diversi. stackoverflow utilizza questo approccio.

In un file metti tutti i CSS (chiamalo 'hello_world.css'):

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

In un altro file dovresti inserire l'html (chiamalo 'hello_world.html'):

<?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>

Spero che questo aiuti un po '. A specifici elementi di indirizzo nel documento e non tutti i tag si dovrebbe fare dimestichezza con i class, ide nameattributi. Divertiti!

— merkuro
fonte
8 
Selector name{
font-weight:bold;
}

Supponiamo di voler rendere grassetto per l'elemento p

p{
font-weight:bold;
}

Puoi usare altri valori alternativi invece di grassetto

p{
 font-weight:bolder;
 font-weight:600;
}
— Santosh Khalse
fonte
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
fonte
-1

Potresti usare un paio di approcci. Innanzitutto sarebbe usare il tag forte

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

Un altro approccio sarebbe usare la proprietà font-weight. Puoi ottenere in linea o tramite una classe o un ID. Diciamo che stai usando un corso.

.className {
  font-weight: bold;
}

In alternativa, puoi anche utilizzare un valore rigido per lo spessore del carattere e la maggior parte dei caratteri supporta un valore compreso tra 300 e 700, incrementato di 100. Ad esempio, il seguente sarebbe in grassetto:

.className {
  font-weight: 700;
}
— Andrew Tuzson
fonte
Altre risposte hanno già trattato questi punti. In che modo questa risposta aggiunge valore?
— Basil Bourque,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.