前端小白学习------css初级篇-css引入css基础选择器选择器权重

本文详细介绍CSS的三种引入方式，包括行间样式、页面级CSS及外部CSS文件的使用。深入探讨了各种选择器如ID、Class、标签选择器等的应用，并解析了选择器的权重规则。

前端小白学习------css初级篇-css引入css基础选择器选择器权重

主流浏览器

主流浏览器	内核
IE	trident
Firefox	Gecko
Google chrome	Webkit/bilnk
Safari	Webkit
Opera	presto

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
</head>
<body>
	//注释：1备注，2.调试bug
	<!-- dasdsadassdasdassad-->
	//快捷键：ctrl + ?





</body>
</html>

css 装修html

cascading style sheet

引入css ：1.行间样式

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
</head>
<body>
	//1、引入css
	行间样式：
	<div style="
	width:100px;
	height:100px;
	background-color:red;
	"></div>
	

</body>
</html>

引入css ：2.页面级css

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>

	<style type="text/css">
	div{
	width:100px;
	height:100px;
	background-color:red;
	}
	</style>
	
</head>
<body>
	
	 <div> <div>
</body>
</html>

引入css ：3.外部css文件

lesson3.css里的代码：

div{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:red;
	}

lesson3.html里的代码

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	
	<link rel="stylesheet" type="text/css" href="lesson3.css">

</head>
<body>
	 <div> </div>

</body>
</html>

异步：同时执行
同步：一个执行完在执行另一个。

选择器

id选择器

#only {
background-color: red;
}

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	
	<link rel="stylesheet" type="text/css" href="lesson3.css">

</head>
<body>
	
	 <div id="only">123 </div>
	 <div id="only">123 </div>//这样就不行。id是一一对应的。


</body>
</html>

class 选择器

css代码：

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

html代码：

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	<div class="demo demo1">123</div>
	
</body>
</html>

id是一一对应
class和元素也是多对多的关系

标签选择器

div{
	width:100px;
	height:100px;
	border-radius:50%;
	background-color:red;
	}

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	
	<div>123</div>
	
</body>
</html>

通配符选择器

css代码：

*{
	background-color:green;
}

html代码：

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	
	<div>123</div>//*是通配符，全屏都会绿。
	
</body>
</html>

属性选择器

[id] {
	background-color: red;
}
或
[id="only"] {//加上值的也可以
	background-color: red;
}

<html  lang="en">
<head>
	<meta charset="utf_8">
	<title>document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
	
	<div id="only">123</div>//凡是用到id的就都会用到上面的css
	<div id="">123</div>//凡是用到id的就都会用到上面的css
	//class属性也是同理
</body>
</html>