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 大小写
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 将图片设置为列表符合样式
list-style-image:url();
  • list-style-position 设置列表项标记的放置位置
list-style-position:outside; 列表的外面 默认值
list-style-position:inside; 列表的里面 
  • list-style 缩写
list-style:none;	去除列表符号
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值