视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS常用字体属性:background-origin和background-clip介绍说明
2020-11-27 18:52:33 责编:小采
文档


(一)常用的字体属性:

      font-weight: 属性值100-900 400等于正常 700等于bold ,数值越大,越粗

      font-size:字体大小,单位可以为px或者%

      font-family:字体族 比如说:微软雅黑

      font-style:字体的样式 italic斜体 normal正常

      font-variant:small-caps 将字母转化为小一号的大小字母

      注意:所有属性也可以通过font一个属性写,例如:

              font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif,写的顺序:font-style font-variant font-weight font-size line-height font-famiyl,多个样式有空格分开,必须按照这个顺序写,font-size和line-height中间必须用/分开

(二)字体的颜色:color:属性值可以写颜色英文,例如:red

          或者rgb(0-255,0-255,0-255);

          或者rgba(0-255,0-255,0-255,0-1);0表示透明,1表示不透明

      opacity:0-1;也表示透明。和rgba()的区别,该属性会作用于后代标签,而rgba()不会

(三)行距、对齐

          line-height (行高) :a.像素单位,比如48px b.不带px 正常行高的倍数 c.百分数 同b(调整控件中文字垂直方向垂直居中的方式,控件的height=控件的line-height)

      text-align (对齐):块级元素中文字的水平对齐方式left center right

      letter-spacing (字符间距): 字与字之间的距离

      text-decoration (文本修饰 ):下划线underline 删除线line-through 上划线overline none(可以去掉超链接的下划线)

      overflow:控制超出范围文本的显示方式,auto根据文字多少自动显示滚动条,scroll始终显示滚动条,hidden超出范围文本隐藏,也可以通过overflow-x、overflow-y设置水平和垂直方向

      text-overflow:设置多余文字的显示方式,clip裁减掉,ellipsis省略号,(重点,让每行多余的文字显示省略号,a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis)

      text-shadow:(4个属性值:水平阴影距离 垂直阴影距离 模糊距离 阴影颜色)文本的阴影,前面2个属性值不能省。水平阴影距离越大,阴影右移。垂直阴影距离越大,阴影下移。阴影模糊距离,数值越大,阴影越来越模糊,默认为0,不模糊。阴影颜色,可以选,默认为黑色

      text-indent:首行缩进,可以用像素值调整缩进大小

      text-stroke:描边的粗细,描边的颜色

      white-space:nowarp 设置中文行末不断行显示(中文默认自动换行,英文不会自动换行,根据空格会自动换行)

      word-break:浏览器默认在空格处断行,当一个单词长度超出范围时,会不断行显示,break-all允许在单词内换行

(五)背景样式:

          background (缩写形式)

          background-color(背景色 )

          background-image(背景图 ):url(图片的地址),背景图和背景色同时存在,背景图会覆盖背景色

          background-repeat(背景图重复方式 ): no-repeat(不平铺) repeat-x(水平平铺) repeat-y(垂直平铺) repeat平铺(默认)

          background-position(位置坐标、偏移量 2个属性值:水平和垂直):指定位置:left/center/right ,可以写像素或者百分比,只写一个属性值,默认写的是水平方向,另外一个方向默认垂直居中(注意:当使用像素时候,图片的左上角往各个方向移动的实际距离, 当使用百分比的时候,建议不使用负数,代表去掉图片后剩余空白距离的分布比例,例如:background-positon:30% 水平方向去掉图片后,剩余的区域3:7分)

          top/center/bottom 当只写一个属性值的时候 另外一个默认居中

          background-clip :border-box (从边框外缘开始显示)padding-box(从边框内缘开始显示) content-box(从文字内容开始显示,不在显示区的背景图或背景色会被裁切不显示)

          background-origin:定位的起点 border-box(从边框外缘开始) padding-box(从边框内缘) content-box(从文字内容区开始)

          background-size:背景图片大小 一般2个属性:宽度 高度,当只有一个属性值的时候,默认为宽度,高度等比缩放

          宽高的写法:a.直接写像素 b.写百分比(父容器宽高的百分比)

下载本文
显示全文
专题