第一课
- CSS全名：cascading style sheet（层叠样式表）
引入方式：
1.行间样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
</head>
<body>
<!--1.行间样式-->
<div style="
width: 100px;
height: 100px;
background-color: #f00;
">
</div>
</body>
</html>
2.页面级CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<style type="text/css">
div{
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<!-- 页面级-->
<div>
</div>
</body>
</html>
3.外部CSS文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 1.选择器 一一对应关系， 一个元素只能有一个id，并且两个元素id不能一样
#only{
width: 100px;
height: 100px;
background-color: #0f0;
}-->
<div id="only">123</div>
<!-- 2.class选择器 多对多关系
.firstDiv{
height: 100px;
width: 100px;
color: #0FD9E6;
}-->
<div class="firstDiv secondDiv"></div>
<div class="firstDiv"></div>
<!-- 3.标签选择器 所有div均会出现以下样式-->
<!-- div{
bavkground-color:#fff;
}-->
<!-- 4.通配符 所有标签均有该样式，包括<html>标签-->
<!-- *{
background-color: yellow;
}-->
</body>
</html>
- 若一个组件同时有id、class ，则id中的样式优先级高与class
- 优先级关系行间样式>id>class>标签选择器>通配符
/*属性选择器 例：有id的使用该样式*/
[id]{
background-color: red;
}
[id="demo"]{
background-color:red;
}
css权重
- !important Infinity
/*放到里面*/
.firstDiv{
height: 100px!important;
width: 100px;
color: #0FD9E6;
}
/*放在上面*/
P!important{
background-color: antiquewhite;
}
- 行间样式 1000
- id 100
- class|属性|伪类 10
- 标签|伪元素 1
- 通配符 0
- 上数为256进制
css权重
!important-----------Infinity
行间样式---------------1000
id------------------------- 100
class|属性|伪类---------- 10
标签选择器|伪元素--------1
----------------------------进制为256
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<span>123</span>
</div>
<span>456</span>
</body>
</html>
/*派生选择器 div为父级 span为子级*/
div span{
background-color: antiquewhite;
}
第二种
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="first">
<div class="second">
<em>1234</em>
</div>
</div>
<span>456</span>
</body>
</html>
/*父子级不一定是标签，也可以是class，可混合用*/
.first .second em{
background-color: red;
}
直接子元素选择器
/*直接子元素选择器 只有div下第一代em才会使用该样式*/
div > em{
background-color: blue;
}
并列选择器
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="second">123</div>
<p class="second">456</p>
</body>
</html>
/*并列选择器 不加空格*/
div.first{
background-color: blue;
}
权重计算，确定样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="classdiv" id="idDiv">
<p class="classP" id="idP">1234</p>
</div>
</body>
</html>
/*权重计算*/
/*权重 100 + 1*/
#idP P{
background-color: red;
}
/*权重 1 + 10 + 100*/
div .classP#idP{
background-color: aqua;
}
/*所以颜色为aqua*/
/*权重一样，以后面为准*/
分组选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="classDiv">1</div>
<strong class="classStrong">2</strong>
<span class="classSpan">3</span>
</html>
/*分组选择器*/
.classDiv,.classStrong,.classSpan{
background-color: red;
}
div,
span,
strong{
background-color: blue;
}
伪类选择器
/*伪类选择器之hover*/
div:hover{
background-color: orange;
}
