第一課
- 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.頁面級(jí)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>
<!-- 頁面級(jí)-->
<div>
</div>
</body>
</html>
3.外部CSS文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 1.選擇器 一一對(duì)應(yīng)關(guān)系， 一個(gè)元素只能有一個(gè)id，并且兩個(gè)元素id不能一樣
#only{
width: 100px;
height: 100px;
background-color: #0f0;
}-->
<div id="only">123</div>
<!-- 2.class選擇器 多對(duì)多關(guān)系
.firstDiv{
height: 100px;
width: 100px;
color: #0FD9E6;
}-->
<div class="firstDiv secondDiv"></div>
<div class="firstDiv"></div>
<!-- 3.標(biāo)簽選擇器 所有div均會(huì)出現(xiàn)以下樣式-->
<!-- div{
bavkground-color:#fff;
}-->
<!-- 4.通配符 所有標(biāo)簽均有該樣式，包括<html>標(biāo)簽-->
<!-- *{
background-color: yellow;
}-->
</body>
</html>
- 若一個(gè)組件同時(shí)有id、class ，則id中的樣式優(yōu)先級(jí)高與class
- 優(yōu)先級(jí)關(guān)系行間樣式>id>class>標(biāo)簽選擇器>通配符
/*屬性選擇器 例：有id的使用該樣式*/
[id]{
background-color: red;
}
[id="demo"]{
background-color:red;
}
css權(quán)重
- !important Infinity
/*放到里面*/
.firstDiv{
height: 100px!important;
width: 100px;
color: #0FD9E6;
}
/*放在上面*/
P!important{
background-color: antiquewhite;
}
- 行間樣式 1000
- id 100
- class|屬性|偽類 10
- 標(biāo)簽|偽元素 1
- 通配符 0
- 上數(shù)為256進(jìn)制
css權(quán)重
!important-----------Infinity
行間樣式---------------1000
id------------------------- 100
class|屬性|偽類---------- 10
標(biāo)簽選擇器|偽元素--------1
----------------------------進(jìn)制為256
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<span>123</span>
</div>
<span>456</span>
</body>
</html>
/*派生選擇器 div為父級(jí) span為子級(jí)*/
div span{
background-color: antiquewhite;
}
第二種
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<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>
/*父子級(jí)不一定是標(biāo)簽，也可以是class，可混合用*/
.first .second em{
background-color: red;
}
直接子元素選擇器
/*直接子元素選擇器 只有div下第一代em才會(huì)使用該樣式*/
div > em{
background-color: blue;
}
并列選擇器
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<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;
}
權(quán)重計(jì)算，確定樣式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<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>
/*權(quán)重計(jì)算*/
/*權(quán)重 100 + 1*/
#idP P{
background-color: red;
}
/*權(quán)重 1 + 10 + 100*/
div .classP#idP{
background-color: aqua;
}
/*所以顏色為aqua*/
/*權(quán)重一樣，以后面為準(zhǔn)*/
分組選擇器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--關(guān)聯(lián)外部樣式表-->
<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;
}
