html和css进阶二
一、table标签
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-
table的构成
table表示表格开始表格结束
tr表示表格中的行标签,一个表格中有多少行就应该书写多少对tr标签 + td表示表格中的单元格标签 一行中有多少个单元格就应该书写多少对td标签
表格中所有的内容都必须在放置在td标签里面 也就是说只有td标签才能存放内容
th表示标题单元格 这个单元格里面的文本会加粗显示并且会居中 -
table常用属性
width height 宽高
align 对齐:left right center
valign 用来设置行里面的内容垂直对齐方式
border 边框 像素
border-collapse:collapse 合并边框 -
td th的属性
align
valign
colspan 横向合并
rowspan 纵向合并
二、选择器的权重
-
选择器的权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素 ，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式. -
权重值的计算 可以把样式的应用方式分为几个等级，按照等级来计算权重：
!important，加在样式属性值后，权重值为 10000
行内样式内联样式，如：style=””，权重值为1000
ID选择器，权重值为100
类，权重值为10
标签选择器,权重值为1
三、定位
-
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。 -
关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
-
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。 -
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
伪代码如下:
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
- 新增相关样式属性
/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */
opacity:0.3;
/* 兼容IE */
filter:alpha(opacity=30);
四、background背景图
- 属性解释
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动 - 属性连写
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
最后看一个雪碧图的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>background</title>
<style>
.list{
width: 300px;
/* border: 1px solid black; */
margin: 0px auto;
list-style: none;
}
.list li{
height: 60px;
border-bottom: 1px dotted black;
background: url("images/bg01.png") no-repeat 0 10px;
text-indent: 50px;
line-height: 60px;
}
/* 图片间距是80px */
.list .l2{
background-position-y: -70px;
}
.list .l3{
background-position-y: -150px;
}
.list .l4{
background-position-y: -230px;
}
.list .l5{
background-position-y: -310px;
}
.list li a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<ul class="list">
<li><a href="#">我们的我们</a></li>
<li class="l2"><a href="">我们的我们</a></li>
<li class="l3"><a href="">我们的我们</a></li>
<li class="l4"><a href="">我们的我们</a></li>
<li class="l5"><a href="">我们的我们</a></li>
</ul>
</body>
</html>
