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>

image-20220123213947224

  • 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;	去除列表符号
posted @ 2022-04-14 11:39  请善待容嬷嬷  阅读(115)  评论(0)    收藏  举报