CSS中的文本格式化与表格
程序员文章站
2022-05-29 14:46:14
...
文本格式化
1. 字体属性
1. 指定字体系列
属性: font-family
取值: value1,value2,... ...
注意:
字体取值包含中文或特殊符号,使用""引起来
ex(例子):
font-family:"宋体","微软雅黑",Arial;
2. 字体大小
属性: font-size
取值: px或pt或em
ex(例子):
font-size:24px;
3. 字体加粗
属性:font-weight
取值:
1. normal : 正常体
2. bold : 粗体
3. 400~900
400 : normal
900 : bold
4. 字体样式
属性:font-style
取值:
1. normal : 正常体
2. italic : 斜体
3.
5. 小型大写字母
作用: 针对英文字符,将小写字符变成大写字符,
但是大小与小写一样
属性: font-variant
取值:
1. normal
2. small-caps
6. 字体属性
属性: font
取值: style variant weight size family
注意: 使用简写属性时,必须要设置 family
的值,否则无效;
ex(例子):
font:12px;/*无效*/
font:12px "微软雅黑";/*通过*/
2. 文本属性
1.文本属性
属性:color
取值:任意合法颜色
2. 文本排列方式
作用: 指定当前元素中的文本,行内元素,
行内块元素的水平对齐方式
属性:text-align
取值: left / center / right
3. 文字修饰
作用:指定文本的线条样式
属性:text-decoration
取值:
1. none
没有线条显示
2. underline
下划线
3. overline
上划线
4. line-through
删除线<s></s>
4. 行高
作用:
指定元素中一行数据的高度。如果行高的高度高于文字高度本身,
那么该行文本将在行高的范围内呈现出垂直居中的显示效果
场合:
1. 控制一行文本垂直居中对齐
2. 设置行间距
属性:
line-height
取值:
以px为单位的数值
5. 首行文本缩进
属性: text-indent
取值:缩进的距离,以px为单位的数值
6. 文本阴影
属性: text-shadow
取值: h-shadow v-shadow blur color;
命令显示图:
网页显示图:
表格
1. 表格的常用属性
1. 边距属性: padding
2. 尺寸属性: width , height
3. 文本格式化属性“
font-*
text-align,color,text-indent,... ...
4. 背景属性
背景色,背景图,渐变
5. border属性
6. vertical-align
作用: 在单元格中,设置文本的垂直对齐方式
取值:
top / middle / bottom
2. 表格的特有属性
1. 边框合并
属性: border-collapse
取值:
1. separate
默认值,即分离边框模式
2. collapse
边框合并效果
2. 边框的边距
作用: 单元格之间的距离
属性: border-spacing
取值:
1. 指定一个值
表示单元格间水平和垂直见聚师相同的
2. 指定两个值
第一个值: 单元格间的水平间距
第二个值:单元格间的垂直间距
注意:
仅限于边框分离状态时使用,即
border-collapse:separate;
3. 标题位置
属性: caption-side
取值:
1. top: 默认值,标题显示在表格之上
2. bottom: 标题显示在表格之下
4. 显示规则
作用: 指定表格的布局方式
默认布局方式为自动表格布局,即单元格的宽度实际上是由内容来决定的,
与设定的值无关。
属性: table-layout
取值:
1. auto
默认值,即自动表格布局
2. fixed
固定表格布局,即单元格的宽度以设定的值为主,而不取决于内容
自动表格布局 VS 固定表格布局
1. 自动表格布局
1. 单元格大小会适应内容大小
2. 缺点: 表格复杂时,加载速度慢
3. 适用于不确定梅列大小的情况下使用
4. 虽然算法较慢,但是能体现传统表格特点
2. 固定表格布局
1. 单元格大小取决于td中设置的值
2. 优点: 加载速度较快
3. 确定每列大小时,可以使用固定表格布局
4. 算法较快,缺点是不够灵活