Como fazer texto em negrito no CSS

O negrito fará com que os elementos pareçam espessos ou aparecerão com uma aparência forte ou clara. O texto em negrito é o texto que parece mais espesso do que o texto simples. Podemos tornar nosso texto ousado aplicando a propriedade CSS "font-weight" e configurando-a "ousada". Também podemos definir alguns valores numéricos ou a palavra -chave "mais ousada" para esta propriedade. Nesta propriedade de "peso da fonte", definiremos a espessura do texto na tela de saída. Também podemos negrito nosso texto em html utilizando tags diferentes. Mas aqui discutiremos a propriedade CSS que é usada para aplicar o efeito ousado ao texto. Vamos explorar este texto em negrito em detalhes neste tutorial. Também faremos alguns códigos nos quais oucemos o texto definindo valores numéricos na propriedade, bem como usando palavras -chave.

Exemplo 1:

Precisamos de alguns elementos para aplicar a propriedade "Fonte-peso". Como resultado, começamos criando alguns elementos HTML. Devemos primeiro abrir um novo arquivo para criar um arquivo HTML escolhendo HTML como um idioma. O software que usaremos neste tutorial é o código do Visual Studio. Neste arquivo, começaremos a escrever o código. Além disso, entramos “!”E, em seguida, pressione“ Enter ”para adquirir as tags HTML fundamentais, necessárias para todos os códigos HTML.

Depois de tudo isso, precisamos criar o corpo onde adicionaremos alguns parágrafos abaixo do título. Estamos dando a cada parágrafo um nome único para que possamos usá-lo quando aplicarmos o atributo "font-peso" a esses parágrafos. Temos três parágrafos aqui. Agora, aplicaremos a propriedade "Fonte-peso" a esses parágrafos no código CSS. Devemos vincular os dois arquivos, o arquivo HTML e o CSS dentro da cabeça, utilizando a tag "Link".

Primeiro, colocamos o nome do parágrafo “P.P1 ”e depois utiliza a propriedade“ Fonte-peso ”. Esta propriedade é usada para definir a espessura do texto. Aqui, configuramos como "normal", o que também é um valor padrão. O "tamanho da fonte" para este primeiro parágrafo é "20px". Depois disso, temos um segundo parágrafo chamado "P2" e definimos seu "peso da fonte" como "ousado". Essa palavra -chave "ousada" é usada para tornar o texto do parágrafo mais grosso que o texto simples e também define seu tamanho como "20px". Agora, para "P3", utilizamos novamente a propriedade "Fonte-peso". Desta vez, definimos o valor numérico para definir a espessura do terceiro parágrafo e torná -lo "ousado". Aqui, usamos o valor "900" para esta propriedade "peso-fonte". Portanto, o texto do parágrafo aparecerá "ousado" e também "tamanho da fonte" é o mesmo que os parágrafos acima.

Aqui está a saída abaixo, temos três parágrafos na saída e o primeiro parágrafo é simples porque definimos seu valor normalmente. O segundo parágrafo é mais espesso que o primeiro, o que significa que este parágrafo é "ousado". Além disso, o último parágrafo é "ousado", mas para o terceiro parágrafo, definimos o valor numérico na propriedade "Fonte-peso".

Exemplo # 2:

Aqui, temos sete parágrafos diferentes com nomes exclusivos, para que usaremos esses nomes no código CSS para aplicar a propriedade "Fonte-peso" neles. Definiremos um valor numérico para esta propriedade, bem como palavras -chave.

Estamos utilizando "cor" para o cabeçalho como "marrom" e definimos o "tamanho da fonte" para todo o "corpo" para "22px". Para "PAR1", definimos o "peso da fonte" como "normal" e "vermelho" como a "cor" deste "par1". Para "PAR2", definimos o valor "Fonte-peso" como "600" e a cor "verde" está aqui para "PAR2". O valor de "peso da fonte" para "PAR3" foi definido como "700" e a cor "azul" é usada aqui. Agora, utilizamos novamente a propriedade "Fonte-peso" para o próximo parágrafo "par4" e o estabelecemos como "800" e sua "cor" é "laranja". O "PAR5" "Fonte-peso" é definido como "900" e a "cor" para "par5" é "roxa". Depois disso, estamos definindo a palavra-chave "BOLD" para o valor de "peso da fonte" para "par6" e também definindo sua "cor" para "rosa". Agora, temos o último parágrafo "par7" e o definimos para a palavra -chave "mais ousada". A "cor" de "par7" é "magenta".

Você pode ver vários parágrafos com diferentes valores da propriedade "Peso-fonte". O primeiro parágrafo parece normal quando definimos seu valor como "normal". Os parágrafos restantes parecem "ousados" porque definimos a espessura desses parágrafos no código CSS, utilizando a propriedade "Fonte-peso".

Exemplo # 3:

Temos dois parágrafos neste código e aplicaremos a propriedade "Fonte-peso" a um parágrafo e mostraremos a diferença entre o texto em negrito e o texto simples.

Primeiro, vamos estilizar o corpo utilizando duas propriedades. A propriedade "Size da fonte" define o tamanho do texto para "20px" e depois alinha todos os elementos do corpo ao "centro" usando a propriedade "Text-Align". Também estilizamos o cabeçalho para torná -lo mais atraente, utilizando "Maroon" para a "cor" de "H1". Definimos "argelino" como "font-família" e "sublinhado" o "H1" usando a propriedade "Text-Decoration". Para o "H2", definimos a cor "verde" e a "família da fonte" é "Times New Roman". Agora, vamos utilizar a propriedade "do peso da fonte" para ambos os parágrafos. Para "para1", seu valor é definido como "normal". Mas para o "para2", simplesmente usamos a palavra -chave como seu valor e o definimos como "ousado" para tornar o texto grosso.

Você pode notar facilmente a diferença entre os dois parágrafos. O primeiro parágrafo é o parágrafo normal, mas o segundo parágrafo aqui é "ousado". O tamanho da fonte de ambos os parágrafos é o mesmo, mas você pode ver que o segundo parágrafo parece ousado.

Exemplo # 4:

Temos dois títulos diferentes e quatro classes diferentes com nomes diferentes para cada div. Vamos utilizar a propriedade "Fonte-peso" para essas divs.

Primeiro, usaremos esses dois parâmetros para estilizar o corpo. O atributo "tamanho da fonte" ajusta o tamanho do texto para "21px". A propriedade "Alinhamento de Texto" "centro" de todos os componentes do corpo enquanto o definimos. A “família da fonte” para todos os elementos do corpo é “Times New Roman”. Usamos "roxo" como a "cor" de "H1", definimos a "família da fonte" para "argelino" e também estilizamos o título definindo o atributo "decoração de texto" para "sublinhar" o "H1". Escolhemos a cor "laranja" para o "H2" e "Calibri" como a família de fontes. Não aplicamos nenhuma propriedade para o "div1" e o "div2", estamos definindo um valor numérico de "900" para o valor do "peso da fonte". Temos "div3" e "ousado" usado para "peso-fonte" e o "div4", "peso-fonte" é definido como "mais ousado".

O primeiro parágrafo "div1" é simples e não definimos nenhum valor de "peso da fonte" para este div1, então o valor padrão é definido aqui para "div1". Para os outros divs, definimos o valor do valor de "peso da fonte" e fazemos o texto desses divs "ousado" ou "grosso". Também mencionamos o “peso da fonte” de todos os divs na saída. O Div2 aparece com o valor do peso da fonte "900", o próximo Div3 aparece aqui como um valor "ousado" para a propriedade "Fonte-peso" e "ousado" para o último div3.

Conclusão

Você aprendeu a usar a propriedade CSS "font-weight" ao longo deste tutorial. Neste tutorial, examinamos a propriedade CSS "font-weight" e explicamos o que ela faz, por que usamos, como usá-la e quais resultados produzem. A propriedade "fonte-peso" já foi abordada neste tutorial. Utilizamos esta propriedade de "peso da fonte" para definir o peso da fonte como mais grosso ou ousado. Juntamente com os resultados de cada exemplo neste tutorial, também fornecemos códigos de como usar a propriedade "Fonte-peso". Eu acredito que você terá um entendimento sólido da propriedade CSS “Fonte-peso” depois de ler cuidadosamente este tutorial.