【CSS】-文本与表格
文本格式化属性
1、字体属性
属性 | 取值 | 含义 |
---|---|---|
font-family | 具体字体,用,隔开字体名称列表 | 指定字体 |
font-style | normal-正常,italic -斜体 | 字体样式 |
font-variant | normal-正常,small-caps-小型大写字符 | 小型大写字符-少用 |
font | style variant weight size family | 简写属性 |
注意:
- 使用简写属性时,必须设置family的值,否则无效
- 正确写法:font:12px “楷体”
2、文本属性
文本排列:
- 属性:text-align:left/center/right/justify
- 作用:指定文本、行内、行内块元素的水平对齐方式
文字修饰:
- 属性:text-decoration
- 取值:none,underline:下划线,line-through:删除线,overline:上划线
行高:
- 属性:line-height
- 取值:以px为单位的值
- PS:如果行高设置的比文字高的话,文本将在指定行高范围内垂直居中显示;
text-align: justify; /*文本的排列方式为两端对齐*/
text-decoration: underline; /*文本修饰下划线修饰*/
line-height: 1.5; /*行高设置为字体大小的1.5倍的高度*/
text-indent: 24px; /*首行缩进*/
text-shadow: 0 0 2px blue; /*文本阴影:水平 垂直偏移为0,模糊距离为2px,颜色为蓝色*/
表格属性
1、特有属性
边框合并:
- 属性:border-collapse
- 取值:separate-分离边框模式,collapse-边框合并
- 分离边框模式实例:
边框边距:设置单元格与表格之间的举例
- 属性:border-spacing
- PS:只有在分离边框模式下,边框边距才有效,即:border-collapse:separate,这时这是的border-spacing才有效;
显示规则:帮助浏览器如何设置布局一张表,设置td尺寸计算方式
- auto:默认值,自动表格布局,列的尺寸由内容决定(优:布局灵活,缺点:表格复杂时加载慢)
- fixed:固定表格布局,列的尺寸由设定的值决定,适用于确定每列大小的情况下使用(优:任何情况下加速显示,缺:不灵活)
border: 1px solid #000;
border-collapse: collapse; /*边框合并*/
caption-side: top; /*标题位置*/
table-layout: fixed; /*将表格的布局改为固定布局*/