引入css、css基础选择器_css选择器放在外置文件-CSDN博客

本文链接：https://blog.csdn.net/weixin_59605625/article/details/122663930

引入css、css基础选择器

html结构，css样式，js行为三者相分离
css相当于装修材料，cascading style sheet(层叠样式表）
html 的注释是 <!—块注释 --> //行注释快捷键 ctrl+?
css 注释方式仅有 /* 被注释的内容 */ 快捷键 ctrl+?
注释可以用来调bug。
1、引入css
1）行间样式

<div style="width: 100px;height: 100px;background-color: #f80;">
	</div>

2)页面级css
就是在head标签中用style标签

<head>
<style type = “text/css”>


</style>

3\外部css文件
打开一个文件以 leason.css 命名保存，一定要写.css
并且在头标签里面写

<head>
<link rel = “stylesheet” type = “text/css” href = “地址”>
</head>

二、简单选择器
1）id选择器
特点：一个元素只有一个id值，一个id只对应一个元素
举例：<div id="only">123</div>
在css中：

#only {
 background-color: red;
}

2）class选择器
特点：一个 class 可以对应多个元素
举例：

`<div class="demo">123</div>`
 <div class = “demo”> 234</div>

css中：

.demo{
 background-color: green;
}

如上，123和234都变绿色

例：若想让第一个多一个值，多写一个class名
代码如下：

<div class = “demo demo1”> 123</div>
<div class = “demo”> 234</div>

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

3）标签选择器
语法格式：标签名{}
例：

<span>123</span>
<div>
<span>234</span>
</div

#only{
	background-color: red;

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

4）通配符选择器
语法格式：*{}

css权重
标签名	权重值
！important	infinity正无穷
行间样式	1000
id选择器	100
class选择器、属性选择器、伪类选择器	10
标签选择器、伪元素选择器	1
通配符选择器	0
在计算机中，正无穷+1>正无穷
如果权重值一样（优先级一样），会显示后面的
就是先来后到，谁在后面，谁（后面的）覆盖前面的——后面的会覆盖前面的
在权重中，是 256 进制，是从 0 到 255 后变成 1所以这里的 1000 不是一千，100 不是一百