CSS是什么及其继承与选择器

最新推荐文章于 2024-02-15 11:55:29 发布

耐耐~

最新推荐文章于 2024-02-15 11:55:29 发布

阅读量1k

点赞数

分类专栏： # HTML(停更)

HTML(停更) 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

跟随小甲鱼老师每天学习一点CSS和HTML，其乐无穷

学习目录

好，今天学的就是CSS的基础部分了

CSS是什么

先上一段最纯粹的CSS代码：

body{
                background: #E77E22
                }

这一段代码，大名叫规则，小名叫一条样式。

选择器就是上面代码的body，选择器是规则的应用对象。

方括号内的就是声明的集合了，每条声明包含属性/值对，每条声明后面都要加上一个分号。

CSS的继承

先上样例代码：

<!doctype html>
<html>
<head>

	<title>
		css的继承
	</title>
	<meta charset='utf-8'>
	
	<style>
		#first{
			color: #F06
		}
	</style>
</head>
	<body>
		<div id='first'>
			这是1
			<div id='second'>
				这是2
				<div id='third'>
					这是3
				</div>
			</div>
		</div>
	</body>
</html>

猜猜效果会是什么呢？

效果如下：

可以看出来它们的颜色都一样，为什么呢？？

third,second,first的关系就好像父子一样，

first是second的父节点,second是third的父节点，所以当给first设置了颜色属性后，second和third就继承过来了相应的属性。

然后我们再重新设置一下CSS：

<style>
		#first{
			color: #F06
		}
		#second{
			color:#F67;
		}
		#third{
			color: #F98
		}
	</style>

效果图如下：

由此我们可以得到一个结论：CSS的继承就是

儿子有定义，听自己的；

没有，听老子的

CSS选择器

CSS有三种最基础的选择器：标签选择器，id选择器和类选择器。

这三种选择器不仅可以分开使用，还能组合使用。

比如：

多个标签需要设置共同的颜色：

h1,h2,...hn{
			color: red
		}

2.父子标签联合使用设置CSS

section h1{
font-size:33px;
}

3.还可以具体到孙子，，，

section article h1{
font-size:33px
}

4.标签+类选择器

section .red{
color:F#66F;
font-size:33px;
}

注意：写CSS 的时候，不同元素要用空格分开。

耐耐~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS是什么及其继承与选择器

跟随小甲鱼老师每天学习一点CSS和HTML，其乐无穷学习目录好，今天学的就是CSS的基础部分了CSS是什么先上一段最纯粹的CSS代码：body{ background: #E77E22 }这一段代码，大名叫规则，小名叫一条样式。选择器就是上面代码的body，选择器是规则的应用对象。方括号内的就是
复制链接

扫一扫

专栏目录