1、文本格式化
1、字体相关
1、指定字体
属性:font-family
取值:字体值列表
语法:font-family:value1,value2,value3 ...;
eg :
font-family:"Microsoft Yahei",Arial,Times;
2、字体大小
font-size: px/pt;
页面常用字体大小:
12px
18px
36px
3、字体加粗
效果等同于 <b></b>
属性:font-weight
取值:normal / bold / value
value : 没有单位的数字
400 - 900
400 --> normal
900 --> bold
4、字体样式
效果等同于<i></i> 斜体
属性:font-style
取值:normal / italic
5、小型大写字母
属性:font-variant
取值:normal / small-caps;
6、字体属性
将所有的字体相关属性放在一个声明中
属性:font
取值:font-style font-varaint font-weight font-size font-family;
eg :
font:italic small-caps bold 12px "microsoft yahei",Arial;
font:bold 12px/24px "microsoft yahei",Arial;
12px(文字大小)/24px(行高)
font-size:12px;
2、文本格式
1、文本颜色
属性:color
取值:颜色单位值
2、文本排列
效果等同于 <xx align=""></xx>
水平对齐方式
属性:text-align
取值:left / center / right / justify
注意:该属性对 行内元素 没有效果
<span style="text-align:center;">Hello World</span>
3、文字修饰(线条)
属性:text-decoration
取值:none / underline(下划线) / overline(上划线) / line-through(删除线)
4、行高
1、什么是行高
当前元素内"一行"数据的高度是多少。如果行高的高度大于文本的高度,那么该行文本会在当前的行高范围内呈"垂直居中"状态显示
2、属性
line-height
取值:以px为单位的数字
3、首行文本缩进
属性:text-indent
取值:以px为单位的距离
eg : text-indent:24px;
4、文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
2、表格属性
1、表格常用属性
1、尺寸属性
width , height
2、内边距
padding
3、边框
border
/*只给表格设置边框,单元格没有*/
table{
border:1px solid red;
}
/*单元格边框,与表格无关*/
td{
border:1px solid red;
}
4、文本格式化
font-*
text-*
5、背景属性
background-*
6、vertical-align
垂直对齐方式
取值:top / middle / bottom
2、表格特有样式
1、边框合并(重要)
属性:border-collapse
取值:
separate : 默认值,分离边框
collapse : 边框合并
2、边框边距
相当于 td 的外边距
属性:border-spacing
取值:
1个值 :水平 和 垂直间距是相同的
2个值 :第一个值表示水平间距,第二个值表示垂直间距
注意:
1、只有表格在分离边框模式下,border-spacing 才会起到作用
2、该属性加在table中
3、显示规则
如何布局或显示/解析一个table 。定义加载表格的算法
属性:table-layout
取值:
auto : 自动表格布局,默认值,列的宽度是由单元格的内容来决定的。
fixed : 固定表格布局,列的宽度是表格宽度和列宽度一起决定的。
固定表格布局,算法较快,但是不太灵活
自动表格布局,算法较慢,能够反映传统的表格特点
1、字体相关
1、指定字体
属性:font-family
取值:字体值列表
语法:font-family:value1,value2,value3 ...;
eg :
font-family:"Microsoft Yahei",Arial,Times;
2、字体大小
font-size: px/pt;
页面常用字体大小:
12px
18px
36px
3、字体加粗
效果等同于 <b></b>
属性:font-weight
取值:normal / bold / value
value : 没有单位的数字
400 - 900
400 --> normal
900 --> bold
4、字体样式
效果等同于<i></i> 斜体
属性:font-style
取值:normal / italic
5、小型大写字母
属性:font-variant
取值:normal / small-caps;
6、字体属性
将所有的字体相关属性放在一个声明中
属性:font
取值:font-style font-varaint font-weight font-size font-family;
eg :
font:italic small-caps bold 12px "microsoft yahei",Arial;
font:bold 12px/24px "microsoft yahei",Arial;
12px(文字大小)/24px(行高)
font-size:12px;
2、文本格式
1、文本颜色
属性:color
取值:颜色单位值
2、文本排列
效果等同于 <xx align=""></xx>
水平对齐方式
属性:text-align
取值:left / center / right / justify
注意:该属性对 行内元素 没有效果
<span style="text-align:center;">Hello World</span>
3、文字修饰(线条)
属性:text-decoration
取值:none / underline(下划线) / overline(上划线) / line-through(删除线)
4、行高
1、什么是行高
当前元素内"一行"数据的高度是多少。如果行高的高度大于文本的高度,那么该行文本会在当前的行高范围内呈"垂直居中"状态显示
2、属性
line-height
取值:以px为单位的数字
3、首行文本缩进
属性:text-indent
取值:以px为单位的距离
eg : text-indent:24px;
4、文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
2、表格属性
1、表格常用属性
1、尺寸属性
width , height
2、内边距
padding
3、边框
border
/*只给表格设置边框,单元格没有*/
table{
border:1px solid red;
}
/*单元格边框,与表格无关*/
td{
border:1px solid red;
}
4、文本格式化
font-*
text-*
5、背景属性
background-*
6、vertical-align
垂直对齐方式
取值:top / middle / bottom
2、表格特有样式
1、边框合并(重要)
属性:border-collapse
取值:
separate : 默认值,分离边框
collapse : 边框合并
2、边框边距
相当于 td 的外边距
属性:border-spacing
取值:
1个值 :水平 和 垂直间距是相同的
2个值 :第一个值表示水平间距,第二个值表示垂直间距
注意:
1、只有表格在分离边框模式下,border-spacing 才会起到作用
2、该属性加在table中
3、显示规则
如何布局或显示/解析一个table 。定义加载表格的算法
属性:table-layout
取值:
auto : 自动表格布局,默认值,列的宽度是由单元格的内容来决定的。
fixed : 固定表格布局,列的宽度是表格宽度和列宽度一起决定的。
固定表格布局,算法较快,但是不太灵活
自动表格布局,算法较慢,能够反映传统的表格特点