html字体样式规则,css-样式的相关规则

1) 字体规则(可以被继承)font-family 'Microsoft YaHei',宋体

font-style:

font-weight:

font-size:

line-height:

font:bold normal 14px/1.5em '微软雅黑'

em 相对单位，相对于当前元素的字体大小

hello world

rem 相对单位，相对于body中声明的字体大小

body{

font-size:10px

}

hello world

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font

2) 网络字体(字体图标库)iconfont(阿里的图标库)图片(设计师设计icon图标)

图标--特殊的字体 (写的字跟画画一样)

3) 文本相关规则(可以被继承)text-decoration 字体装饰

none 不加任何字体装饰

underline 下划线

line-through 删除线

overline 上划线

color

关键字 lightblue blue red

十六进制 #000000 #ffffff #ff0000 #32b593(山西大学校徽绿)

rgb rgb(r,g,b) 0~255 rgb(255,0,0)

rgba rgba(r,g,b,a) 0~255 rgb(255,0,0,0.5)

text-align 容器中的字体的排列方式

text-transform 转换英文的大小写

uppercase

lowercase

text-indent 字体的缩进

4) 列表相关(ul,ol)list-style:none 取消列表的样式(列表项前面的小黑点或者数字)

5) 盒子相关width

height

margin 外边距

margin-top

margin-right

margin-bottom

margin-left

border 边框

padding 内边距

box-sizing

content-box 内容盒子 (默认盒子) width 不包含padding、border

border-box 边框盒子 (怪异盒子) width 包含padding、border

6) 背景相关background-color: 背景色

background-clip: 背景的铺设范围

border-box 边框及边框以内

padding-box 内边距及内边距以内

content-box 内容

background-image:

url('./images/logo.jpg');

背景图，参数为地址【相对地址、绝对地址】

background-repeat: no-repeat;

背景图的重复方式

no-repeat 不重复

repeat-x

repeat-y

background-position: center;

背景图的显示位置

center

let 左边中间

left top 左上角

10px 20px

background-size: cover;

cover 调整背景图的大小以至于覆盖整个区域

contain 调整背景图的大小以至于背景图嵌入到区域中，有可能回导致容器中部分没有背景覆盖

background-origin: content-box;

背景图的铺设起点

border-box

padding-box

content-box

background

背景色的简写形式