CSS text

If it is just a simple HTML page without any color, we usually need to add some CSS and JS styles to increase the color sense of the page. Let’s talk about CSS text styles.

Font

body{font-family:"宋体";}

##Color

body{color:#666}

Size

body{font-size:12px;}
body{font-size:1em;}

Indentation

p {text-indent: 2em;}
p {text-indent: 50%;} //基于父元素

Font style

p.normal {font-style:normal;}//默认
p.italic {font-style:italic;}// 斜体
p.oblique {font-style:oblique;}// 倾斜

##To the way

h1{text-align:center;}

Values: left, right, center, justify

Word spacing

p{word-spacing:25px;}
p{word-spacing:normal;}// 相当与0px

Letter spacing

h1 {letter-spacing:2px;}
h1 {letter-spacing:normal;}

Character conversion

h1 {text-transform: none;}//默认
h1 {text-transform: capitalize;}//首字母大写
h1 {text-transform: uppercase;}// 全部大写
h1 {text-transform: lowercase;}// 全部小写

Text modification

a {text-decoration: none;}
h1 {text-decoration:overline}//上划线
h2 {text-decoration:line-through}//中划线
h3 {text-decoration:underline}// 下划线
// blink闪烁文本,不过兼容性不好，很多浏览器都不支持

Bold

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}//粗体
p.bolder{font-weight:bolder;}// 更粗
p.lighter{font-weight:lighter;}// 更细
p.thicker {font-weight:900;}//400 等同于 normal，而 700 等同于 bold。

The above are some commonly used CSS text styles. I hope they can give you some help.

Related articles:

Must master CSS text styles

Sample code to achieve css text flying effect

The above is the detailed content of CSS text. For more information, please follow other related articles on the PHP Chinese website!