web前端「HTML+CSS」零基础入门精英课学习笔记（三）CSS初级篇-css引入css基本选择器及选择器权重

最新推荐文章于 2024-11-08 16:59:14 发布

Miamoressobrenatural

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量102

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_57773848/article/details/120816379

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.主流浏览器的内核（知识储备问题，对行业的了解）

所谓主流，就要满足两个条件：1.有一定的市场份额； 2.有独立研发的内核。

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

2.CSS cascading style sheet层叠样式表

HTML	CSS	JAVASCRIPT
结构	样式	行为

3.引入CSS

1.行间样式

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

2.页面级css

<head>
	<meta charset="utf-8">
	<title></title>
<!-- 浏览器里面写的是css代码，也可以不写 -->
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}

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

3.外部css文件

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="lesson1.css">
</head>

4.异步和同步

网页的包放在服务器上，当我们访问一个网页时，就会从服务器上下载这个包在自己的电脑上运行。对于一个html文件，并不是全部下载好了再执行，而是下载一点就执行一点。当我们下载到需要引入css文件那行代码时，计算机会再开一个线程去同时下载css文件，互不耽误，异步加载，即同时下载另一个文件。同步在计算机中则表示干完一件才能干下一件。

这里的同步和异步，与生活中的认知恰好相反。

4.CSS选择器-CSS如何选择html元素

1.id

<div id="only">123</div>

#only{
	background-color: green;
}

类似于身份证，一个元素对应一个id值，一一对应。

2.class

	<div class="demo demo1">123</div>
	<div class="demo">234</div>

.demo{
	background-color: red;
}

.demo1{
	width: 100px;
}

类似于衣服，多对多，一个元素可以有多个class，一个class可以对应多个class。

3.标签选择器

	<span>123</span>
	<div>
		<span>567</span>
	</div>

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

无论标签在哪，无论套了多少层，都能被选中。

4.通配符选择器

	<span>123</span>
 	<div>234</div>
 	<strong>111</strong>

/*any: include body*/
*{
	background-color: green;
}

浏览器中显示如下：

5.属性选择器

 	<div id="only" class="demo">123</div>
 	<div id="only1">234</div>

[id] {
	background-color: yellow;
}

[id="only"] {
	color: blue;
}

[class] {
	width: 200px;
}

6.优先级比较

!important > 行间样式 > id > class | 属性选择器 | 伪类 > 标签 | 伪元素 > 通配符

css权重：

!important	Infinity
行间样式	1000
id	100
class \| 属性选择器 \| 伪类	10
标签 \| 伪元素	1
通配符	0

（注：1.这里的进制是256进制 2.Infinity+1 > Infinity）

Miamoressobrenatural

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录