Home  >  Article  >  Web Front-end  >  What is the website style css bold code?

What is the website style css bold code?

青灯夜游
青灯夜游Original
2022-08-12 17:56:226705browse

The website style css bold code is "text element {font-weight: bold;}" or "text element {font-weight: bolder;}". The font-weight attribute is used to set the thickness of text. When the value of this attribute is set to "bold", bold characters can be defined, and when set to "bolder", thicker characters can be defined; the value of the font-weight attribute can also be set. The value is "700", "800" or "900", which can also achieve the text bolding effect.

What is the website style css bold code?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Website style css bold code:

文字元素{font-weight: bold;}
文字元素{font-weight: bolder;}

The CSS attribute used is: font bold attribute "font-weight".

The font-weight attribute can set the thickness of the text and supports multiple attribute values:

Value Description
normal Default value. Defines standard characters, equal to 400.
bold Defines bold characters, equal to 700.
bolder Define bolder characters.
lighter Define finer characters.
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Define characters from thin to thick. 400 is equivalent to normal, and 700 is equivalent to bold.

Example: Set different font weights for four paragraphs

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>css 文字加粗</title>
		<style>
			p.normal {
				font-weight: normal;
			}
			p.bold {
				font-weight: bold;
			}
			
			p.bolder {
				font-weight: bolder;
			}
			
			p.thicker {
				font-weight: 900;
			}
		</style>
	</head>

	<body>
		<p class="normal">测试文本!</p>
		<p class="bold">测试文本!</p>
		<p class="bolder">测试文本!</p>
		<p class="thicker">测试文本!</p>
	</body>

</html>

What is the website style css bold code?

Note: The default font-weight of strong, b, h1~h6 and other tags is bold

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the website style css bold code?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn