CSS的常用属性

1.字体

①font-family:定义文字的字体,如serif(衬线字体),sans-serif(非衬线字体:比较圆润),monospace(字母或文字宽度相同)
②font-size:定义文字的尺寸,如30px或者50%
③font-style:定义字体样式,如italic 斜体效果,默认值为normal 标准效果
④font-weight:字体粗细,如默认值为normal 相当于400,正常粗细;
属性值为bold 相当于700,显示为粗体;
属性值为bolder ,显示更粗;
属性值为lighter,显示更细;
也可以设置属性值为具体的数值:100/200/300/400/500/600/700/800/900
⑤简写属性:font=font-style+font-weight+font-size+font-family,如p{font:normal bolder 30px monospace;}

.text{
            font-family:monospace;
            font-size:20px;
            font-weight:bold;
            font-style:italic;
            
            font:normal bolder 30px monospace;
        }

2.文本

①color:文字颜色,属性值为颜色名,十六进制颜色值,RGB颜色值
②line-height:文本行高,默认值为normal,其他属性值为长度值,百分比
③text-align:文本对齐方式,如right,left,center
④direction:文本的方向,如ltr(左),rtl(右)
⑤text-indent:设置段落的首行缩进,默认值为0,其他属性有:长度值,百分比
⑥text-decoration:设置文本的装饰线,如underline(下画线),overline(上画线),line-through(中画线),默认值为none,表示没有线
⑦letter-spacing:设置文本字符间隔的大小,属性值为长度值,可为负值
⑧text-shadow:设置文本的阴影,属性值为:x轴偏移量+y轴偏移量+模糊距离+颜色,如text-shadow:10px 10px 5px gray

3.尺寸

①width:定义宽度
height:定义高度
属性值为auto,长度,百分比
②min-width:定义最小宽度
min-height:定义最小高度
③max-width:定义最大宽度
max-height:定义最大高度

4.列表

①list-style-image:指定一个图片作为列表项前面的标记,默认值为none,可以设置一个图片的url作为标记图片
②list-style-position:设置在什么位置显示列表项前面的标记,默认值为outside,还可以设置为inside
③list-style-type:设置列表项前面图标的类型,默认值为disc,其他值:circle,square,decimal,none,lower-alpha,upper-alpha
④list-style:简写属性,list-style=list-style-image+list-style-position+list-style-type
如:ul{list-style:decimal inside}

5.背景

①background-color:设置元素的背景颜色,默认值为:transparent,3种方法直接设置颜色:颜色名,十六进制颜色,RGB函数(255 ,0,0)
②background-image:设置元素的背景图片,默认值为none,还可以设置一个图片的url地址,用来作为背景图片
③background-repeat:
➢主要用来配合background-image属性一 起使用,用来设置背景图片的平铺方式默认值为: repeat ,表示将背景图片在x轴和y轴方向平铺显示

➢还可设置为沿X轴平铺( repeat-x )、沿Y轴平铺( repeat-y )、不平铺( no-repeat )
④background-position:也是用来配合background-image属性一起使用,用来设置背景图片的起始点位置标默认为左上角零点位置

位置参数: X轴方向left、center、 right ; Y轴方向top、center、 bottom

➢百分比: X轴位置x%、 Y轴位置y%

长度: X轴离原点长度、Y轴离原点长度
⑤background-attachment

➢用于设置背 景图片固定或者跟随页面滚动默认值: scroll

➢还可以设置 为fixed
⑥background

➢简写属性

background = background-color + background-image + background-repeat +background-position + background-attachment

➢可以全部设置 ,也可以省略其中几项

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值