寒假周报二
@规则
at-rule: @规则 \ @语句 \ CSS语句 \ CSS指令
- import
@import “路径”;
导入另一个css文件
- charset
@charset “utf-8”;
告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行
- media
@media
媒体查询
- font-face
@font-face
自定义字体
css线性渐变
渐变分为线性渐变和径向渐变。
- 线性渐变:变化根据一条线进行变化。
- 径向渐变:由一个点向外进行渐变。
- 写法
background: linear-gradient(color1,color2);
渐变方向默认从上到下
div{
width: 200px;
height: 200px;
background-image: linear-gradient(red,blue);
}
- 改变渐变方向
- 通过设置渐变终点
background: linear-gradient(direction,colro1,color2);
其中,direction即为设置渐变终点。(to …)
【从左到右,就将direction写成to right】
【左下角到右上角,将direction写成to right top】
- 通过设置渐变线起始角度
background: linear-gradient(angle,color1,color2);
其中,angle即为角度。是以六点为起始,进行顺时针计算确定渐变的起始位置。
【左上角十点半,135度】
div{
width: 200px;
height: 200px;
background-image: linear-gradient(135deg,red,blue);
}
可以看出,通过角度设置渐变的,一个是设置了起始点的位置,再一个是设置了渐变线的角度。
- 可设置多个颜色
background: linear-gradient(color1,color2,color3,color4…);
div{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,red,blue,green,yellow);
}
- 设置颜色起始位置
通过设置颜色的起始位置,可以设置颜色占比,也可以设置渐变重复,还可以设置渐变起始点。
background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);
- length/percentage 都是颜色起止位置,length表示长度,percentage表示百分比
需要说明一下的是,渐变,每个颜色的起止位置为一个固定的点,而不是一段距离。因为,只有在那个固定的点的位置才是最纯正的该颜色,而无论向两侧任何方向变化,都不再是最纯的颜色了。当未设置颜色起止点时,即为均匀渐变,即第一个颜色起始位置为0%,第二个颜色的起止位置为50%,第三个为100%。
【均匀渐变,第二个颜色起始位置在中间】
div{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,red,blue);
}
【将第二个颜色起始位置进行改变】
div{
width: 200px;
height: 200px;
background-image: linear-gradient(pink,red 80%,blue);
}
- 设置颜色渐变重复
background-image: repeating-linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);
当第三个颜色结束时,剩下的地方会重新渐变。
div{
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(pink,red 60px,blue 120px);
}
表格元素
table属性
在css技术出现之前,网页通常使用表格布局.
后台管理系统中可能会使用表格.
前台: 面向用户
后台: 面向管理员.对界面要求不高,对功能性要求高.
表格不再适用于网页布局? 表格的渲染速度过慢.
标题: caption
表头: thead
表身: tbody
表尾: tfoot
行: tr
列: td
跨越$
行: rowspan="$
"
跨越$
列: colspan="$
"
- table-layout: fixed;
定义列宽的算法,fixed的计算方式为根据列表宽度自动计算列宽,每列的宽度为均分整个表格的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 100%;
border-collapse: collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
}
th,td{
border: 1px solid #999;
text-align: center;
padding: 20px 0;
}
thead tr{
background-color: #008c8c;
color: #fff;
}
tbody tr:nth-child(odd){
background-color: #eee;
}
tbody tr:nth-child(odd):hover{
background-color: #cccccc;
}
tbody td:first-child{
color: chocolate;
}
tfoot td{
text-align: right;
padding-right: 20px;
}
</style>
</head>
<body>
<table>
<caption>这是表格标题</caption>
<!-- 表头 -->
<thead>
<!-- table row -->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<!-- 表身 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 跨越2行 -->
<!-- <td rowspan="2">数据1</td> -->
<!-- 列 -->
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- 跨越至第5列 -->
<td colspan="5">合计:XXXX</td>
</tr>
</tfoot>
</table>
</body>
</html>