Home Web Front-end CSS Tutorial What are the css text attributes? Introduction to css text properties

What are the css text attributes? Introduction to css text properties

Aug 18, 2018 am 11:59 AM

What are the text attributes in css styles? What are the uses of each css text attribute? This article will give you an introduction to CSS text attributes (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. CSS text attribute conversion of uppercase and lowercase letters in text—text-transform
Attribute value:
uppercase;(all uppercase)
​ ​ ​ lowercase;(all lowercase)
capitalize; (in all lowercase words, the first letter is capitalized)

p{    text-transform:uppercase;}
Copy after login

2. The text of css text attribute is centered - text-align
Attribute value:
center;(center)
                                                                                                                                                                                                                                                                              left; right (right alignment)

p{    text-align:center;}
Copy after login

3. Paragraph indentation of css text attribute—text-indent

em (in words), ± can be used

p{    text-indent: 3em;}
Copy after login

4. css text attribute setting text decoration effect——text-decoration

Attribute value:
none (remove underline)
Underline (plus line)
​ ​ ​ ​ overline (add underline)
line-through (strikethrough)

a{    text-decoration:none;}
Copy after login

5.css text attribute setting paragraph line height—line-height

Attribute value: percentage, px, number

a{    line-height:13px;}
Copy after login

6. css text attribute setting word spacing

word-spacing (only valid for English)
letter-spacing (both Chinese and English)

p{    letter-spacing: 16px;}
Copy after login

7.css text attribute paragraph spacing-margin

p{    margin: 66px;}
Copy after login

8.css text attribute border - border

There are three attribute values: size, color, style;
Border styles include: solid (solid line), dashed (dashed line), dotted (dotted line)

p{    border:3px lightgreen solid;}
Copy after login

9.css text attribute space——white-space

Attribute value:
                                                                                             pre Nowraw; (text does not automatically change line)
Inherit; (Inherit the Father's Ben)
normal; (display one)

p{    white-space: pre;}
Copy after login

10.css text attribute setting input method status-ime-mode Attribute value:

auto;Default
active; Activate local language input method;
inactive: activate non-local language input method;
disabled; prohibit input method, cannot input Chinese characters

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

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)

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

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.

Can you get valid CSS property values from the browser? Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

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:

Using Markdown and Localization in the WordPress Block Editor Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Comparing Browsers for Responsive Design Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Stacked Cards with Sticky Positioning and a Dash of Sass Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

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