表格常用属性:
属性 | 含义 |
---|---|
cellpadding=“5px” | 表格内容和单元格边缘之间的距离为5px |
cellspacing=“0” | 单元格之间的距离 |
border-collapse: collapse | 合并相邻的边框 |
colspan=“2” | 合并行 |
rowspan=“2” | 合并列 |
字体属性的复合写法
字体属性的复合写法:
font:font-style font-weight font-size/line-height font-family;
顺序不能调换,含义如下:
属性 | 说明 |
---|---|
font-style | 定义字体的风格(italic,倾斜 |
font-weight | 定义字符的粗细,值由100到900,注意不加单位。400 等同于 normal(标准字体),而 700 等同于 bold(加粗) |
font-size | 设置字体的尺寸 |
line-height | 设置字体的行高 |
font-family | 规定元素的字体系列。(‘Microsoft YaHei’ 、serif) |
背景图片的复合写法
背景图片的复合写法:
background: black url(“images/logo.jpg”) no-repeat fixed center top;
- 背景的复合写法没有顺序的,但是一般习惯性的写成如下的顺序,如果不设置则可以省略
- 背景颜色 图片地址 是否平铺 背景图片固定 图片位置。
- 颜色还可以用rgba()来代替
参数 | 作用 |
---|---|
background-position: right | 此时 水平一定是靠右侧对齐 , 第二个参数省略,则在 y 轴方向上是垂直居中显示的 |
background-position: top | 第一个参数是top,即y轴 顶部对齐, 第二个参数省略,则在x 轴方向上是 水平居中显示的 |
background-attachment: fixed | 背景图片固定,不会随着滚动条的滑动而滚动 |
background-attachment:scrool | 背景图片不固定,随着滚动条滑动而滚动,默认值 |
边框的复合写法
边框的复合写法
border:设置4个边框样式
border:5px solid red;
值 | 描述 |
---|---|
border-width | 规定边框的宽度 |
border-style | 规定边框的样式 |
border-color | 规定边框的颜色 |
inherit | 规定应该从父元素继承 border 属性的设置 |
border-color:设置四个边框的颜色
|border-color:red green blue pink;
值 | 描述 |
---|---|
border-color:red green blue pink; | 上右下左 |
border-color:red green blue; | 上边框是红色,右边框和左边框是绿色,下边框是蓝色 |
border-color:dotted red green; | 上边框和下边框是红色,右边框和左边框是绿色 |
border-color:red | 四个边框都是红色 |
border-bottom:设置下边框样式
下边框:
border-bottom:thick dotted #ff0000;
设置圆角:
border-radius: 2em 1em 4em / 0.5em 3em;
值 | 描述 |
---|---|
border-bottom-width | 规定下边框的宽度 |
border-bottom-style | 规定下边框的样式 |
border-bottom-color | 规定下边框的颜色 |
inherit | 规定应该从父元素继承 border-bottom 属性的设置 |
内边距(padding)的复合写法
内边距(padding)的复合写法
padding:10px 5px 15px 20px;
写法 | 说明 |
---|---|
padding: 1px; | 一个参数,说明上下左右都有1像素的内边距 |
padding: 1px 2px; | 两个参数,说明上下内边距是1像素,左右内边距是2像素 |
padding: 1px 2px 3px; | 三个参数,说明上内边距是1像素,左右内边距是2像素,下内边距是3像素 |
padding: 1px 2px 3px 4px; | 四个参数,此时按顺时针方向匹配值,上内边距是1像素,右内边距是2像素,下内边距是3像素,左内边距是4像素 |
外边距(margin)的复合写法
外边距(margin)的复合写法
margin:2cm 4cm 3cm 4cm;
写法 | 说明 |
---|---|
margin: 1px; | 一个参数,说明上下左右都有1像素的内边距 |
margin: 1px 2px; | 两个参数,说明上下内边距是1像素,左右内边距是2像素 |
margin: 1px 2px 3px; | 三个参数,说明上内边距是1像素,左右内边距是2像素,下内边距是3像素 |
margin: 1px 2px 3px 4px; | 四个参数,此时按顺时针方向匹配值,上内边距是1像素,右内边距是2像素,下内边距是3像素,左内边距是4像素 |