CSS的了解（二）

一、选择器（两个文件的保存是相对路径的状态）
1、id选择器（一一对应）
在lesson3.1.html中写

<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>Document</title>
       <link rel="stylesheet" type="text/css" href="lesson3.1.css">
 </head>
 <body>
       <div id="only">123</div>
 </body>
 </html>

在lesson3.1.css中写

#only
 {   background-color:blue;   }

2、class标签（多对多）
在lesson3.1.html中写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body>
    <div class="demo demo1">123</div>
    <div class="demo ">234</div>
</body>
</html>

在lesson3.1.css中写

 .demo{
	background-color:yellow;
}
.demo1{
	color:#f40;
}

在id和class选择器的区别是选择器与元素之间的对应关系，css文件中id是#属性值{}
而class是.属性值{}

3、标签选择器
在lesson3.1.html中写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body>
     <span>你好</span>
     <div>
       <span>选择</spn>
     </div>
</body>
</html>

在lesson3.1.css中写

span {
	color:#F40;
	font-weight:bold;
}

4、通配符选择器（运用于全局标签）
在lesson3.1.html中写

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body> 
    <div></div>
</body>
</html>

在lesson3.1.css中写

*{

 }

5、属性选择器
在lesson3.1.html中写

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body> 
    <div>123</div>
</body>
</html>

在lesson3.1.css中写

[div]{

 }

二、小结
选择器之间的优先级：！important > 行间样式 > id > class/属性 > 标签 >通配

这些是CSS的基础，只有基础牢固才能更好的完成后面的事情，如果想让HTML更加美观，这些是远远不够，好好加油！！

23号婷儿

发布了8 篇原创文章 · 获赞 1 · 访问量 230

私信关注

猜你喜欢