一表格CSS 属性
1
表格边框
指定 CSS 表格边框,使用 border 属性,通常定义td,th的边框属性
表格会呈现双边框,是因为表和 th / td 元素有独立的边界。
table存在默认属性border-collapse:separate
2
表格的折叠边框
border-collapse 属性设置表格的边框
取值 separate:边框独立(默认值) collapse:相邻边框被合并
border-spacing:单元格之间的间距
* border-spacing:水平方向 垂直方向;
* border-spacing:一个值;代表水平方向和垂直方向的间距是一样的
注意:只有在 边框独立border-collapse: separate时才能用
(三)
3
单元格内容的垂直对齐
vertical-align 作用:垂直对齐属性设置垂直对齐,比如顶部,底部或中间
常用值 top顶部对齐 middle居中对齐 bottom底部对齐
(二)CSS字体 ,文本属性
1、text-align:作用:设置文本的水平对齐方式 left居左对齐 [默认值]
- right居右对齐 center居中对齐
- text-align: justify文本两端对齐方式
2,text-decoration: 作用:设置文本装饰
常用值 - none 默认。定义标准的文本。 【常用】
- underline 定义文本下的一条线 【常用下划线】
- line-through 定义穿过文本的一条线。【比较常用删除中线】
- overline 定义文本上的一条线。 【不常用上划线】
3
text-indent:作用:设置文本块首行的缩进 长度值,px,em
4
color:- 作用:设置文字的颜色 transparent:透明色
5
十六进制色值
ps:英文状态下,按下i键,鼠标右键单击,拷贝颜色的十六制进制代码,在代码中ctrl+v粘贴
在代码的颜色中要写#在粘贴颜色的十六进制代码
由#和六位十六进制的数组成(0-9 a-f)
例:#000000表示黑色 #ff0000表示红色 #ffffff 表示白色
6
rgba(r,g,b,a) r: red 红色 g: green 绿色 b: blue 蓝色
a: alpha 透明度 透明度在0-1之间表示,0表示完全透明 1 表示完全不透明
r,g,b取值范围0-255 rgb(255, 255, 255); 表示白色 rgb(0, 0, 0);表示黑色
(三)选择器1.后代选择器
1
后代选择器又称包含选择器,可以选择某元素后代的元素
语法:E F { 样式声明; } 描述:【空格】连接一个或多个选择器
作用: 选择E元素内部包含的所有F元素
2
子代选择器
子代选择器他只能选择他的子代范围内的选择器,也就是父子关系
语法 E > F {样式声明; } 描述:【大于】号 连接一个或多个选择器
作用: 选择E元素内部包含的所有直接子元素F(第一嵌套层级)
3
群组选择器
群组选择器是在样式表中有很多具有相同样式的元素,为了尽量减少代码,我们可以用群组选择器
群组选择器是将任意多个选择器分在一组,每个选择器之间用逗号隔开
语法 E,F {样式声明; }描述:【逗号】连接一个或多个选择器
作用: 使用逗号分隔的列表来对选择器进行分组,给列表中每一个选择器选中的元素设置样式
选择器1和选择器2选择器3是都具有相同的样式的
选择器1和选择器2选择器3中间以逗号来隔开: 选择器1,选择器2,选择器
注意:最后一个选择器后面不用加逗号
4
伪类链接选择器
用于添加特殊效果
语法: 选择器:伪类{ } 用于设置链接的不同状态
a:link{ 链接的默认样式 } a:visited{ 链接访问过后的样式 }
a:hover{ 鼠标悬停的样式 } a:active{ 鼠标按下的样式 }
四个伪类状态都有效:L-v-H-a
hover不仅可以表示链接的悬停,也可以用于其他标签中
5
相邻选择器
语法 示例:E+F{ 样式声明 } 用加号连接
- 描述:【加号】 连接一个或多个选择器
作用于E元素之后紧跟着的兄弟元素F
(四)CSS 盒模型
概述 :CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:外间距、边框、内填充、和实际内容。(即装东西的容器)所有 HTML 标签可以看作盒子,在 CSS 中,"box model" 这一术语是用来设计和布局时使用的。(即网页布局 就是利用 CSS 摆盒子)