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

来源：互联网发布：如果当时知乎编辑：程序博客网时间：2024/06/11 07:03

跟随小甲鱼老师每天学习一点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 0