CSS-因为选择装饰而美
2018-05-18 本文已影响0人
Python野路子
CSS
- css全称层叠样式表（Cascading Style Sheet）——修饰、美化网页，化妆师
css样式的多种形式
- 外链（css）样式
<link rel="stylesheet" href="index.css"> <!--外链css样式,在style之前引入）-->
- 内嵌（css）样式
div{
width: 200px;
height: 200px;
background: red;
}
- 行间样式
<div style="width: 200px;height: 200px;background: red;"></div>
样式优先级
即是指CSS样式在浏览器中被解析的先后顺序。
外链css样式 < （内嵌css）样式 < 行间样式
css选择器
- *通配符选择器：匹配任何元素
*{
margin: 0;
padding: 0;
}
- 元素选择器：选中相同的元素，对相同的元素设置同一种css样式
div{
width: 100px;
height: 100px;
background: darkred;
}
- id选择器：给标签设置一个id属性，在写样式时，在id名字前面加个
#
#box{
width: 150px;
height: 150px;
background: bisque;
}
/*在一个页面中，同名id只能出现一次*/
- class选择器：给标签设置一个class属性，在写样式时，在class名字前面加个
.一般给具有相同属性的元素设置同一个class
.box{
width: 120px;
height: 120px;
background: cornflowerblue;
}
- 群组选择器：对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开
div,p{
width: 120px;
height: 120px;
background: bisque;
}
- ~ 兄弟选择器：操作的对象是该元素下后面的所有同级元素
div~p{ /*选择div后面所有兄弟元素p，之前的不管*/
width: 100px;
height: 100px;
background: red;
}
- + 相邻选择器：操作的对象是该元素的同级元素选择，div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素
div + p{
width: 100px;
background: blueviolet;
height: 100px;
}
- > 子代选择器：选择某个元素下面的子元素
div>div{ /*选择div下面的子元素div3，其他不管了*/
width: 50px;
height: 50px;
background: blue;
}
- 后代选择器：选择某个元素下面的后代元素，可以是子元素也可以是子元素下的子元素，比子代选择器范围广
div ul li{ /*选择div下ul下的li*/
width: 70px;
height: 70px;
background: greenyellow;
}
- 伪类选择器
a:link{ /*:link 未被点击的链接*/
color: red;
}
a:visited{ /*已被点击的链接*/
color: darkgoldenrod;
}
a:hover{ /*鼠标悬停其上的元素 这个一定要掌握*/
color: yellowgreen;
}
a:active{ /*鼠标已经再其上按下但是还没有释放的元素*/
color: aqua;
}
/*要全部有效果，需按照w3c的规定，上面顺序*/
a:link,a:visited,a:hover,a:active{
color: blue;
cursor: pointer;
text-decoration: none; /*去掉下划线*/
}
hover拓展：
.box:hover{} 改变div元素本身，
.box:hover p{} 改变div元素下面的p子元素*/
div:hover{ /*改变的是div本身*/
background: red;
cursor: pointer; *!!*手指
cursor: help; *!!*帮助
cursor: wait; *!!*等待
cursor: default; !*默认通常是一个箭头
}
div:hover p{ /*鼠标悬停在div上，改变的是p元素*/
width: 50px;
height: 50px;
background: blue;
}
a{
cursor: pointer;
text-decoration: none;
}
选择器优先级
- 基本选择器优先级排序（从低到高）
同一个标签内有id，class时，样式id > class > tagName(标签名) > * ，id具有唯一性，在一个页面中，同名id只能出现一次 - 特殊情况
级别相同的选择器：后面的样式会覆盖前面的（后来居上）
.wrap{background:red}
.wrap{background:green}
-
复杂后代选择器
- 比高低顺序依次是：id 选择器 > class选择器 > tanName{}
- id选择器个数不相等，id个数越多的优先级越高，后面不用比
- id选择器个数相等，则看class个数，多的优先级高，后面不用比
- class个数相等，再看tagName个数
- #wrap ul li .list{}和.wrap ul li #list{}优先级一样
选择器使用原则：准确的选中元素，并且不影响其他元素 -
nth-child() 选择器
选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
#指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
p:nth-child(2)
{
background:#ff0000;
}
- :nth-of-type
指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色。
p:nth-of-type(2)
{
background:#ff0000;
}
table表格
表格的常用标签
- table表格
- thead表格头
- tbody表格主体
- tfoot表格尾
- th元素定义表头单元格
- tr定义表格行
- td元素定义内容单元格
- caption表格标题
- rowspan合并行
- colspan合并列
学以致用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table表格</title>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 320px;
height: 220px;
border-collapse: collapse; /*合并列*/
}
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
tr{
/*文字水平居中*/
text-align: center;
}
thead:hover tr{
background: red;
color:white;
}
th:hover{
background: blue;
}
tr:hover{
background: yellow;
color:red;
}
</style>
</head>
<body>
<table border="1">
<caption><b>学生信息</b></caption>
<thead>
<tr class="tc">
<th>学号</th>
<th>姓名</th>
<th>课程</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>20170001</td>
<td>小明</td>
<td>web前端</td>
<td>男</td>
</tr>
<tr>
<td>20170002</td>
<td>小红</td>
<td>大数据</td>
<td>女</td>
</tr>
<tr>
<td>20170003</td>
<td>小王</td>
<td>爬虫</td>
<td>男</td>
</tr>
<tr>
<td>20170004</td>
<td>小林</td>
<td>人工智能</td>
<td>女</td>
</tr>
<tr>
<td>20170005</td>
<td>小陈</td>
<td>web网站</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
image.png
image.png
image.png
