页面上的一个元素可以从它爸爸那里继承过来一些样式,也就是我们并不需要单独为每个元素去设计样式。比如一些通用的样式,你可以交给元素的爸爸,子元素会从它们的爸爸那里继承这些样式。
比如我想给页面上显示的这块文字设置一个统一的文字颜色 .. 先用一组 div 标签包装一下这块文字内容 .. div 这个标签表示的是 Division .. 如果你想不起来用什么更有意义的标签包装元素,就可以使用一组 div 作为划分内容用的容器 ..
在它上面添加一个类 .. 名字可以是 container .. 这个带 container 类的 div 就是它里面包装的元素的爸爸 .. 也就是这些元素会从这个 div 那里继承一些样式 ..
在样式表里给 .container 添加一个文字颜色的样式 .. 选择一个颜色 ... 现在页面上使用不同元素包装的文字的颜色都变成了我们给 .container 这个 div 元素添加的颜色样式 ..
这是因为,这些元素都是这个 .container 的儿子,所以它们会从 .container 那里继承过来一些样式 .. 颜色是可以被继承的样式 ..
选择页面上的这些元素 .. 在这里会显示 Inherited from ,从 div.container 那里继承过来的样式 .. 这里有一个 color 样式 ..
指针放到这个 div.container 上面,在页面上会高亮显示这个元素,提示你这个元素在哪里 .. 点一下它,可以选择这个元素 ..
在这个 container 样式里面,再添加一个行高的样式 .. 它设置的是每行文字之间的距离 .. 属性的名字是 line-height .. 高度设置成 1.6 倍 ..
再选择页面上的一个元素 .. 在继承的样式里面,又多了一个行高的样式 .. 说明这个 line-height 也是可以继承的样式 .. 并不是所有的样式都会被继承 .. 再给 container 添加点样式 ..
先用一个 padding 设置一下它的内边距 .. 然后再给它添加点外边距,用的是 margin 这个属性 ..
设置背景用的是 background .. 用一种浅灰色 .. 最后再添加一个边框 .. 使用 border 这个属性 ..
保存 .. 刚才我们添加的这些样式,都只会用在这个 这个 container 元素上 .. 它们并没有被元素的儿子们继承 .. 有些样式不能被继承是比较合理的 ... 这些没有被继承的样式,会使用半透明的效果显示 ..