跟随小甲鱼老师每天学习一点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选择器和类选择器。
这三种选择器不仅可以分开使用,还能组合使用。
比如:
1.
多个标签需要设置共同的颜色:
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 的时候,不同元素要用空格分开。