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;
}