CSS属性【文本属性】or【列表属性】
CSS属性
1.文本属性
- font-size 字体大小 单位是px，浏览器默认是16px，设计图常用字号是12px
- font-family 字体 多个字体中间用逗号连接，先解析第一个字体，如果没有解析第二个人字体
- color 字体颜色 color:red; color:rgb(255,0,0)取值在0~255之间 ;十六进制color:#fffff
- font-weight 字体加粗
font-weight：bolder (更粗的) / bold (加粗) / normal (常规) /lighter(细的)
font-weight: 100-900; 100-500 不加粗 600-900 加粗
常用:100 细体 400 正常 700 加粗 900 更粗
- font-style 字体倾斜
font-style: italic(倾斜字)/ oblique (倾斜的文字)/ normal (常规显示)
- text-align 文字水平对齐
text-align:left; 水平靠左
text-align:right; 水平靠右
text-align: center; 水平居中
text-align: justify; 水平2端对齐，但只对多行起作用；
- line-height 行高
line-height的数据=height的数据，可以实现单行文本垂直居中
- text-indent 首行缩进
text-indent可以取负值
text-indent属性只对第一行起作用
.p{
text-indent:2em;
}
- letter-spacing 字间距
控制文字和文字之间的间距
- word-spacing 词间距
控制英文单词，词与此之间的间距
- text-decoration 文本修饰
text-decoration: none没有/underline 下划线/overline 上划线/ line-through删除线
- font 文字简写
font是font-style font-weight font-size/ line-height font-family的简写。
font:italic 800 30px/80px "宋体"; 顺序不能改变,必须同时指定font-size和font-family属性时才起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
font: italic bold 20px/1em 微软雅黑;
}
</style>
</head>
<body>
<p>
大家好,Lorem ipsum dolor sit amet consectetur adipisicing elit.
Numquam dignissimos exercitationem iure laborum inventore
rerum sit expedita natus a ipsam, possimus deleniti cum unde
officia maiores debitis cumque. Rem, iure.
</p>
</body>
</html>
- text-transform 大小写
CSS
text-transform 大小写
capitalize 单词首字母大写
lowercase 所有单词字母小写
uppercase 所有单词字母大写
none 没有
p{
/* text-transform: capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase;
}
2. 列表属性
- list-style-type 定义列表符合样式
list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉符号)
- list-style-image 将图片设置为列表符合样式
CSS
list-style-image:url();
- list-style-position 设置列表项标记的放置位置
CSS
list-style-position:outside; 列表的外面 默认值
list-style-position:inside; 列表的里面
- list-style 缩写
CSS
list-style:none; 去除列表符号
