1、文本属性:
(1)font-size字体大小:单位是px,浏览器默认为16px,设计图常用字号是12px;
<style>
.p1{
/* 字体大小 */
font-size: 13px;
}
</style>
<p class="p1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
consequuntur aperiam, repellat, eos neque dignissimos facere excepturi
</p>
(2)font-family字体:当字体是中文字体或英文字体中有空格时,需要加双引号;
多个字体中间用逗号连接,先解析第一个字体,如果没有解析第2个字体,以此类推;
<style>
.p2{
/* 字体 */
font-family: 宋体;
}
</style>
<p class="p2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
consequuntur aperiam, repellat, eos neque dignissimos facere excepturi
</p>
(3)color:颜色:color:red; color:#ff0; color:rgb(255,0,0); 0-255
color:#ff0是十六进制0-9 A-F(六位,前两位为红色,中间两位是绿色,后两位是蓝色)
.p1{
/* 颜色 */
/*1、 color: red; */
/* 2、color:rgb(111, 1, 80) */
/* color:#00f; */
color:#14c145;
}
<p class="p1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et fugiat
consequuntur aperiam, repellat, eos neque dignissimos facere excepturi
</p>
(4)font-weight加粗:(100-900)
100细
400正常
700加粗
900更粗
font-weight:bolder/bold/normal/ligter
.p3{
/* 加粗 */
/* font-weight: 100; */
font-weight: bold;
}
<p class="p3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Eius maxime nesciunt, quaerat voluptate ea accusantium
</p>
(5)font-style倾斜:italic(斜体)/oblique(更倾斜)/normal
.p4{
/* 倾斜 */
/* font-style: italic; */
font-style: oblique;
}
<p class="p4">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Eius maxime nesciunt, quaerat voluptate ea accusantium
</p>
(6)text-align文本水平对齐:left/right/center/justify(水平2端对齐,但是只对多行起作用)
.p5{
/* 文本水平对齐 */
text-align: center;
}
<p class="p5">
大家好!
</p>
(7)line-height行高:line-height=height的数据,可以实现单行文本垂直居中;
.p6{
/* 行高 */
line-height: 100px;
}
<div class="p6">哈哈哈哈哈</div>
(8)text-indent首行缩进:text-indent可以取负值;text-indent属性只对第一行起作用;
.p10{
text-indent: 32px;
/* 当前字体的两倍:2em */
text-indent: 2em;
}
<p class="p10">
谁念西风独自凉, 萧萧黄叶闭疏窗,沉思往事立残阳。
被酒莫惊春睡重,赌书消得泼茶香,当时只道是寻常。
</p>
(9)Letter-spacing字间距
word-spacing词间距
/* 文本间距:词间距、字符间距 */
.p8{
/* 字间距 */
letter-spacing: 10px;
}
.p9{
/* 词间距 */
word-spacing: 10px;
/* word-spacing: -10px; */
}
<p class="p8">
谁念西风独自凉, 萧萧黄叶闭疏窗,沉思往事立残阳。
被酒莫惊春睡重,赌书消得泼茶香,当时只道是寻常。
</p>
<p class="p9">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Magnam optio nihil obcaecati molestias. Harum iste iusto
ducimus quae consectetur aspernatur, odit illo est!
Quibusdam dolore error nobis ex distinctio. Nesciunt.
</p>
(10)text-decoration文本修饰:text-decoration:none没有/underline下划线/overline上划线/line-through删除线
none:用在超链接上,超链接默认有下划线
.p11{
/* text-decoration: underline; */
text-decoration: line-through;
/*同时加上上中下划线
text-decoration: overline line-through underline; */
}
<p class="p11">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Magnam optio nihil obcaecati molestias. Harum iste iusto
ducimus quae consectetur aspernatur, odit illo est!
Quibusdam dolore error nobis ex distinctio. Nesciunt.
</p>
(11)font文字简写:
font是font-style、font-weight、font-size/line-height 、font-family的简写,顺序不能改变,必须同时指定font-size和font-family属性才能起作用。例:font:italic 800 30px/80px “宋体”;
(12) text-transform大小写:
.p12{
/* 字体大小写 */
/* 首字母大写 */
/* text-transform: capitalize; */
/* 全部转小写 */
/* text-transform: lowercase; */
/* 全部转大写 */
text-transform: uppercase;
}
<p class="p12">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Magnam optio nihil obcaecati molestias. Harum iste iusto
ducimus quae consectetur aspernatur, odit illo est!
</p>