CSS text

亚连
Release: 2018-05-10 09:59:54
Original
1974 people have browsed it

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:"宋体";}
Copy after login

##Color

body{color:#666}
Copy after login

Size

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

Indentation

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

Font style

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

##To the way

h1{text-align:center;}
Copy after login
Values: left, right, center, justify

Word spacing

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


Letter spacing

h1 {letter-spacing:2px;}
h1 {letter-spacing:normal;}
Copy after login

Character conversion

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

Text modification

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

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。
Copy after login
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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template