继承
需求： 页面中所有文字的字体为微软雅黑
解析 ： 一种方法是：我们所有元素都有一个font-family是微软雅黑 但是如果我们元素特别多的话 我们可以使用继承
boby{font-family:"Microsoft Yahei";}
属性的继承就是在某个元素上的样式，他里面的子元素是可以继承到它的样式的
并不是所有属性都是默认继承的，有的属性是可以自动继承的
· 继承属性
- color 颜色 <div>
- font <h2>标题一</h2>
- text - align <p> 段落一</p>
- list - style </div>
- ... div{color:red;} 可以使得div里面所有字体是红色的
· 非继承属性
- background 背景颜色 <div>
- border 边框 <h2>标题一</h2>
- position <p> 段落一</p>
- .... </div>
div{border:1px solid #ccc;} 给div属性一个灰色的框，border的属性就不会被里面面的属性h2 p 继承
如何知道哪些属性使可以或者不可以继承的
在文档上描述一些详情的时候 我们可以在 Inherited 上查看 yes 表示可以 no 表示不可以
如果他显示的引用了Inherited 的话 也是可以把非继承改为继承的
假设我有两个选择器 我选中了同一个元素，是哪个属性会运用到这个元素上去呢？
<p class="tip" > 这是一段提示文字。</p>
p{color:red;}
.tip{color:gray;}
CSS优先级
· 计算方法
- a = 行内样式
- b = ID选择器的数量
- c = 类、伪类和属性选择器的数量
- d = 标签选择器和伪元素选择器的数量
一个选择器的优先级的值可以这样计算： value = a * 1000 + b * 100 + c * 10 + d 优先级高的样式会覆盖优先级低的样式
如果我这两个优先级样式使一样的话？这时候就需要用到css层叠这个概念
<a herf="#">这是一个站内链接。</a>
a : link{color:blue;}
a[herf^="#"]{color:gray;}
CSS层叠
·相同的属性会覆盖
- 优先级 如果优先级高的话 它会覆盖低的
- 后面覆盖前面 如果优先级一样的话 后面的会覆盖前面的
· 不同的属性会合并
p:first -child 属性大于前两者 所有颜色为 green p.special 属性大于 p 所有 排列方式为 right 因为p标签中的font-weight 和前两种都不同 ，所以会合并
CSS改变优先级
· 改变先后顺序
如果优先级一样 我们可以改变顺序 使前选择器调换到后面
· 提升选择器优先级 p.special{
. special{ color:red;
color:red; }
} .tip{
.tip{ color:blue;
color:blue； }
} 如果我们想让.special胜出的话 我们可以在.special选择器前面加个标签选择器
如果前两者方法都不可行的话 我们可以使用
！ important
<p class = "tip special"> !impotytant</p>
.tip{
color:blue !important ; 胜出
}
p.special {
color:red;
}