5.22 css和基本选择器
1，css的三种引入方式
1，行内样式
2，内接样式
3，外接样式：链接式和导入式。
HTML的缺陷：
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css
行内样式
1 <div> 2 <p style="color: green">我是一个段落</p> 3 </div>
行内样式的级别最高
内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
外接样式-链接式
<link rel="stylesheet" href="./index.css">
外接样式-导入式
<style type="text/css"> @import url('./index.css'); </style>
2，css的选择器
1，标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/*标签选择器*/
a{
font-size: 12px;
text-decoration: none;
}
/**/
span{
color: red;
/*让鼠标显示小手的样式*/
cursor: pointer;
}
/*id选择器 一般不会设置样式，通常都与js有很大关系*/
#p1{
color: green;
font-size: 20px;
}
/*类选择器*/
.w{
width: 968px;
height: 100px;
background-color: blue;
border: 1px solid red;
/*让一个盒子居中显示*/
margin: 0 auto;
}
.t{
border: 1px solid yellow;
}
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
.d:hover{
text-decoration: underline;
color: red;
}
/**/
</style>
</head>
<body>
<!-- 基本选择器： 标签选择器、id选择器、class选择器、*通配符选择器
标签选择器：不管你的标签藏的多深，都会被选中，选的"共性"，而不是特性
-->
<div>
<div>
<div>
<span>内容</span>
<a href="" class="d">哈哈</a>
<a href="">哈哈</a>
<a href="">哈哈</a>
</div>
</div>
<span>另一个内容</span>
<a href="">哈哈</a>
<p id="p1">一个段落</p>
<!-- <a href="" id="app">超链接</a> -->
<div class="w t">
</div>
<div class="w">
</div>
<div class="w">
</div>
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>选择按钮</title>
</head>
<body>
<form>
姓名:<input type="radio" name="请输入用户名">
</form>
</body>
</html>
2，id选择器
3，类选择器
. 点加类名
