CSS学习-cascading style sheet层叠样式表格
CSS权重
选择器 权重（256进制）
！important Infinity（正无穷）
行间样式 1000
id选择器 100
class选择器|属性～|伪类～ 10
标签|伪元素 1
通配符* 0
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<!-- 外部样式引入 -->
<link rel="stylesheet" type="text/css" href="css03.css">
<!-- 内部样式引入 -->
<style type="text/css">
*{
background-color: blue;
}
#div1{
width: 100px;
height: 100px;
background-color: orange;
}
.class01{
width: 100px;
height:100px;
border-radius: 50%;
background-color: black;
}
p{
color: yellow;
}
</style>
</head>
<body>
<!-- css基础 -->
<!-- 内联样式引入 -->
<div style="width: 200px;height: 200px;
background-color: green;">
</div>
<div id="div1"></div>
<!-- 选择器 -->
<!-- id选择器 -一对一-->
<div id="div2"></div>
<!-- class选择器 -多对多-->
<div class="class01"></div>
<!-- 标签选择器 -->
<p>标签选择器</p>
<!-- 通配符选择器* -->
<!-- 属性选择器 -[属性名]，[id="div2"]-->
<!-- 选择器优先级：!important>行间样式>id>class|属性>标签>* -->
</body>
</html>
CSS代码
#div2{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: red;
}
屏幕快照 2020-02-24 下午9.35.08.png
主流浏览器
1.IE浏览器:微软推出，支持windows，内核：Trident（又称MSHTML）
2.Firefox（火狐）浏览器:开源浏览器，支持windows、Linux、Mac，内核：Gecko
3.Google Chrome浏览器:支持Windows、Linux、Mac、移动端（安卓、iOS），内核：webkit/blink
4.Safari浏览器：Apple公司为Mac、iOS系统，内核：webkit
5.Opera浏览器:挪威Opera Software ASA公司制作， 支持Windows、Linux、Mac，内核：presto
网友评论