Home Web Front-end CSS Tutorial What are the css text attributes? Summary of css text properties

What are the css text attributes? Summary of css text properties

Aug 13, 2018 am 09:42 AM

This article brings you what are the css text attributes? The summary of css text attributes has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have briefly summarized the usage of some properties of CSS text. You can also use it to look it up when you forget it. You don’t have to go to the website to check it.

The following is a partial summary, I hope it will be useful to others

Text modification

(1)text -decoration: Text decoration (horizontal line)

4 attribute values

overline line-through underline blink

(1)overline

Define a horizontal line on the text

(2)line-through

This attribute value is the most useful. Generally, the price after the merchant's price promotion will be crossed out with a horizontal line to indicate that it was before The price

(3) Generally, the tag will be marked by unline

If you want to remove it, set text-decoration:none

(4)blink

Text flashing, generally rarely used, only used in canvas, and browser support is not high, only Firefox supports it

In addition:

You can also use text- decoration-color to modify the color of horizontal lines

(2)text-transform Letter case

5 attribute values

capitalize uppercase lowercase inhert none

(1)capitalize

First letter is capitalized

(2)uppercase and lowercase

uppercase

(3)inhert

Inherit the letter attribute of the parent element

(4)none

Default, no effect

(3)text-overflow defines text Out-of-range modification

3 attributes

clip ellipsis string

(1)clip

Trim text

( 2)ellipsis

Use ellipses to represent excess text

(3)string

Use fixed characters to represent excess text

(4) text-shadow: h-shadow v-shadow blur color Text shadow effect

3 attribute values

(1)v-shadow Required, the position of the horizontal shadow, Allow negative values

(2)v-shadow Required, vertical shadow position, allow negative values

(3)blur Optional, blur distance

(4) color Optional, the color of the shadow

Text layout

##(1)text-indent Text indent

3 types of attribute values

length % inhert

(1)length

Define fixed indent, in pixels, the default value is 0

(2)%

Use the percentage of the width of the parent element as the length to indent

(3)inhert

Inherit the indent of the parent element

(2)text-align Text alignment

5 attribute values

left center right justify inhert

(1)left and right

Rarely used

(2)center

Center alignment

Often used together with line-height: parent element height to center align the text

If you do not add the line-height attribute, the text will be above the parent element

(3)justify

Align both ends of the text

Related recommendations:

Use CSS to dynamically control text attributes_CSS/HTML

css Chinese text wrapping properties word-wrap and white-space

The above is the detailed content of What are the css text attributes? Summary of css text properties. 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

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.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

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)

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Creating Your Own Bragdoc With Eleventy Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Let's use (X, X, X, X) for talking about specificity Let's use (X, X, X, X) for talking about specificity Mar 24, 2025 am 10:37 AM

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and

See all articles