Home Web Front-end CSS Tutorial How to use CSS font-weight

How to use CSS font-weight

Nov 22, 2017 pm 01:24 PM
css

If we need to bold a section of font, what other methods are available besides the H tag mentioned last time? Today I will teach you how to use CSS to operate font-weight

CSS bolding here refers to controlling the bolding of objects through DIV CSS.

Use CSSAttributesWord

font-weight

Object value: from 100 to 900, the most commonly used font-weight value is bold

font-weight parameter:

normal: normal font. Equivalent to number 400. Declaring this value will cancel any previous setting

bold : Bold. Equivalent to number 700. Also equivalent to the role of b object

bolder: IE5+ Extra bold

lighter: IE5+ Thin

number: IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

For detailed basic bolding knowledge, please go to the font-weight manual in the CSS manual.

Html regular bold tags

In the past, HTML tags that directly bolded objects were as follows:

or < /strong>Both have the same effect.

Bold example, the code is as follows:

 <strong>我被加粗</strong><br />
<b>我也被加粗了</b><br/>

I have not been bolded

CSS bold basic skills example

CSS code:

.yangshi1{ font-weight:bold}

.yangshi2{ font-weight:800}

Div html code:

I am bolded

I am also bolded

I have not been bolded

CSS bolding result demonstration:

Here, CSS is used to control bold text to bold objects. Therefore, you can generally use this method to bold text objects and titles.

Summary and recommendation:

1. To directly bold objects in HTML, you can use or to bold them

2 . To use CSS to bold objects, you can use font-weight:bold to achieve bolding.

There are so many ways to operate font-weight in CSS. Friends in need can save it. Please also continue to pay attention to other updates on this site.

Related reading:

How to clear floats in CSS


Use CSS to operate borders Tips


How to set the link style using CSS

The above is the detailed content of How to use CSS font-weight. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1598
276
How to change the list style in CSS How to change the list style in CSS Aug 17, 2025 am 10:04 AM

To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in

How to create a dotted border in CSS How to create a dotted border in CSS Aug 15, 2025 am 04:56 AM

Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.

How to use CSS gradients for backgrounds How to use CSS gradients for backgrounds Aug 17, 2025 am 08:39 AM

CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo

How to create a glassmorphism effect with CSS How to create a glassmorphism effect with CSS Aug 22, 2025 am 07:54 AM

To create a glass mimicry effect of CSS, you need to use backdrop-filter to achieve background blur, set a translucent background such as rgba(255,255,255,0.1), add subtle borders and shadows to enhance the sense of hierarchy, and ensure that there is enough visual content behind the elements; 1. Use backdrop-filter:blur(10px) to blur the background content; 2. Use rgba or hsla to define the transparent background to control the degree of transparency; 3. Add 1pxsolidrgba(255,255,255,0.3) borders and box-shadow to enhance the three-dimensionality; 4. Ensure that the container has rich backgrounds such as pictures or textures to present a blurred penetration effect; 5. It is compatible with old browsers

How to create a responsive testimonial slider with CSS How to create a responsive testimonial slider with CSS Aug 12, 2025 am 09:42 AM

It is feasible to create a responsive automatic carousel slider with pure CSS, just combine HTML structure, Flexbox layout, and CSS animation. 2. First build a semantic HTML container containing multiple recommendation terms, each .item contains reference content and author information. 3. Use the parent container to set display:flex, width:300% (three slides) and apply overflow:hidden to achieve horizontal arrangement. 4. Use @keyframes to define a translateX transformation from 0% to -100%, and combine animation: scroll15slinearinfinite to achieve seamless automatic scrolling. 5. Add media

How to change the cursor in CSS How to change the cursor in CSS Aug 16, 2025 am 05:00 AM

Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol

How to use grid-template-areas in CSS How to use grid-template-areas in CSS Aug 22, 2025 am 07:56 AM

Thegrid-template-areaspropertyallowsdeveloperstocreateintuitive,readablelayoutsbydefiningnamedgridareas;eachstringrepresentsarowandeachwordacolumncell,withgrid-areanamesonchildelementsmatchingthoseinthetemplate,suchas"headerheaderheader"for

How to implement a dark mode theme with CSS How to implement a dark mode theme with CSS Aug 22, 2025 am 09:55 AM

There are two main ways to implement dark mode: one is to use prefers-color-scheme media to query automatically to adapt system preferences, and the other is to add manual switching function through JavaScript. 1. Use prefers-color-scheme to automatically apply dark themes according to the user system. There is no need for JavaScript, just define the styles in the media query; 2. To achieve manual switching, you need to define light-theme and dark-themeCSS classes, add toggle buttons, and use JavaScript to manage the theme status and localStorage to save user preferences; 3. You can combine both to read localSt first when the page is loaded.

See all articles