html(hyperText markup language) ——>結構；
css(cascading style sheet)層疊樣式表——>樣式；
javascript ——>行爲；
一.html 引入css 的三種引入方式：
1.行間樣式:
<html>
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<!--引入css-->
1.行間樣式
<div style="
width:100px;
height:100px;
background-color: red;
"></div>
</body>
</html>
2.頁面級css:
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<!-- 2.頁面級css -->
<div><div>
</body>
</html>
3.外部css文件:
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<link rel="stylesheet" type="text/css" href="css/lesson3.css">
</head>
<body>
<!--引入css-->
<!-- 3.外部css文件 -->
<div><div>
</body>
</html>
div {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: black;
}
給別人傳送數據就叫"服務器"；
html文件是怎麼引入到頁面裏面來的麼？
www.baidu.com(域名)——>dns-->192.168.000.001(物理地址)
二. 選擇器
1. id 選擇器
<!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>demon</title>
<link rel="stylesheet" type="text/css" href="css/lesson3.css">
</head>
<body>
<!-- 1 id 選擇器，就像人用的身份證一樣，一個id對應一個代碼一個樣式-->
<div id="only">123</div>
<div id="only1">456</div>
</body>
</html>
#only {
background-color: red;
}
#only1 {
background-color: green;
}
2. class 選擇器
<body>
<!--2. class 選擇器 個class值 可以對多個元素-->
<div class="demo demo1">123</div>
<div class="demo">234</div>
</body>
.demo {
background-color: yellow;
}
.demo1 {
color: #f40;
}
3.標籤選擇器
<body>
<!--3.標籤選擇器 -->
<span>123</span>
<div>
<span>234</span>
</div>
</body>
span {
color: #f40;
font-weight: bold;
}
4 統配符選擇器
<body>
<!--4 統配符選擇器 -->
<span>123</span>
<div>234</div>
<strong>111</strong>
</body>
* {
background-color: green;
}
5 屬性選擇器
<body>
<!--5 屬性選擇器 有屬性是id的元素 或有屬性其它的選擇器-->
<div id="only" class="demo">123</div>
<div id="only1">234</div>
</body>
[id]{
background-color: hotpink;
}
6 !important
<body>
<div style="background-color: red;">123</div>
</body>
div{
background-color: green!important;
}
