大家好，今天Win10系统之家小编给大家分享「css 如何继承」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.CSS语法的继承及其问题

　　根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：
 body{ font-family:Verdana,sans-serif; }
 根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。
 通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
 但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape4就不支持继承，它不仅忽略CSS继承，而且也忽略应用于body元素的规则。IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。
 友善地对待Netscape4
 幸运地是，可以通过使用称为"BeKindtoNetscape4"的冗余法则来处理旧式浏览器无法理解CSS继承的问题。
 body{ font-family:Verdana,sans-serif; } p,td,ul,ol,li,dl,dt,dd{ font-family:Verdana,sans-serif; }
 4.0浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对Netscape4用户进行支持，就不得不这么做。
 CSS继承是一个诅咒？
 如果不希望"Verdana,sans-serif"字体被所有的子元素继承，该怎么做，比方说，希望段落的字体是Times。没问题。创建一个针对p的特殊规则，这样它就会摆脱父元素的规则：
 body{
 font-family:Verdana,sans-serif;
 }
 td,ul,ol,ul,li,dl,dt,dd{
 font-family:Verdana,sans-serif;
 }
 p{
 font-family:Times,"TimesNewRoman",serif;
 }

2.如何实现CSS 类继承呢

　　所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。。css是层叠样式表(cascading style sheets)的简称。
 一、继承
 css的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。下面举例说明：
 样式定义：
 body{color:red;}
 应用举例代码：
 <p>css的<strong>层叠和继承</strong>深入探讨</p>
 这段代码的应用结果是：“css的层叠和继承深入探讨”这段话是红颜色的，“层叠和继承”由于应用了strong元素，所以是粗体。这很符合制作者的意图，也是为什么继承是css的一部分的原因。
 二、css继承的局限性
 在css中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。
 首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。多数边框类属性，比如象padding(补白)，margin(边界)，背景和边框的属性都是不能继承的。
 三、继承中容易引起的错误
 有时候继承也会带来些错误，比如说下面这条css定义：
 body{color:blue}
 在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将css定义成这样：
 body,table,th,td{color:blue}
 这样表格内的文字也会变成蓝色。
 四、多种样式混合应用
 既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：
 样式定义：
 .apple{color:red;}h1{color:yellow;}
 应用举例代码：
 <h1 class="apple">这儿的苹果好红啊</h1>
 应用举例效果：因为选择符h1和.apple都匹配上面的h1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，css规则必须这样进行处理。
 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
 统计选择符中的id属性个数。
 统计选择符中的class属性个数。
 统计选择符中的html标记名格式。
 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
 以下是一个按特性分类的选择符的列表：
 h1 {color:blue;}特性值为：1
 p em {color:purple;}特性值为：2
 .apple {red;} 特性值为：10
 p.bright {color:yellow;} 特性值为：11
 p.bright em.dark {color:brown;} 特性值为：22
 #id316 {color:yellow} 特性值为：100
 从上表可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
 五、css继承的优先级问题
 上面我们讨论了css的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。
 样式定义：
 body { background:black;}
 li { color:gray;}
 ul.white { color:white}
 应用举例代码：
 <ul>
 <li>举例列表一</li>
 <li>举例列表二</li>
 <li>举例列表三</li>
 <li>举例列表四</li>
 </ul>
 有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。因为带选择符li的显式声明的权值比从ul.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。
 下面再来看一个例子，若给定如下所示的标记，则em强调文字将会是灰色的，而非黑色，因为em规则的权值要大于从h1元素继承来的权值：
 样式定义：
 h1#id316 { color:black;} 特性值为：101
 em { color:gray;} 特性值为：1
 应用举例代码：
 <h1 id="id316">深入探讨<em>css的继承性</em></h1>
 这是因为第二条em规则的特性值(1)要比被继承的特性值(0)要大，事实上规定h1#id316的原始特性值(101)对其继承值没有影响，仍旧为0。
 小技巧：
 如果想让h1始终为黑色，而em文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：
 h1,h1 em { color:black;} 特性值为：1，2
 em { color:red;} 特性值为：1
 给定这个规则后，除在h1元素内的任何em文字就都是红色，而h1内的em文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则(一条是对h1的，另一条是对h1 em的)也就有两个特性值--每条规则一个。
 六、人为定义css继承优先级
 在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，css中允许这样设置，它们被称为重要规则(important rule)。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入!important这样一个短语来标记一条重要规则，比如说：
 p.apple { color:#red !important; background:white;}
 颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。
 正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。
 标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。
 看了这么多文字介绍后，我们来举个例子看一下：
 样式定义：
 h1 { color:gray !important;}
 应用举例代码：
 <h1 style="color:black;">看这儿！</h1>
 应用举例效果:!important规则会覆盖内联style属性的内容，所以结果文字是灰色的而不是黑色的。
 还有最后一种需要考虑的情况：继承值总是具有特性值0的特点，即使是从带有!important的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失

3.css自定义类之间可以继承吗

　　绝对可以！子类没定义的样式，子类继承父类中定义的样式；子类定义的样式和父类相同，子类覆盖父类的样式
一、CSS类型
 在给页面或页面元素应用样式时，CSS提供了三种方式，即CSS的三种类型：类、标签、和高级。
1、类
 为了对网页格式的样式定义更为精确，有必要让相同的选择符（一般情况下为页面标记）也能分类，并能按照不同的类别进行不同的样式设计。类就是这样一种新的样式表示符，一句号（.）开头，并可以任意命名，如.title、.fontstyle等。它使CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需要选择标签和高级方式。
2、标签
 标签是将页面文件中的XHTML标记重定义。用标签定义的CSS样式设置完成后，改CSS样式马上生效。例如，定义段落标记
　　样式，可以使用标签类型。
3、高级
 高级是将此时的CSS样式用于特定的XHTML标记组合或ID名，比如伪类选择符、ID选择符。关于伪类选择符，最常用的标记是锚标记

4.怎么在css中继承已有的css样式

　　CSS中可以和不可以继承的属性：
　　一、无继承性的属性
　　1、display：规定元素应该生成的框的类型
　　2、文本属性：
　　vertical-align：垂直文本对齐
　　text-decoration：规定添加到文本的装饰
　　text-shadow：文本阴影效果
　　white-space：空白符的处理
　　unicode-bidi：设置文本的方向
　　3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
　　4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
　　5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
　　6、生成内容属性：content、counter-reset、counter-increment
　　7、轮廓样式属性：outline-style、outline-width、outline-color、outline
　　8、页面样式属性：size、page-break-before、page-break-after
　　9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
　　二、有继承性的属性
　　1、字体系列属性
　　font：组合字体
　　font-family：规定元素的字体系列
　　font-weight：设置字体的粗细
　　font-size：设置字体的尺寸
　　font-style：定义字体的风格
　　font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
　　font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
　　font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
　　2、文本系列属性
　　text-indent：文本缩进
　　text-align：文本水平对齐
　　line-height：行高
　　word-spacing：增加或减少单词间的空白（即字间隔）
　　letter-spacing：增加或减少字符间的空白（字符间距）
　　text-transform：控制文本大小写
　　direction：规定文本的书写方向
　　color：文本颜色
　　3、元素可见性：visibility
　　4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
　　5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
　　6、生成内容属性：quotes
　　7、光标属性：cursor
　　8、页面样式属性：page、page-break-inside、windows、orphans
　　9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
　　三、所有元素可以继承的属性
　　1、元素可见性：visibility
　　2、光标属性：cursor
　　四、内联元素可以继承的属性
　　1、字体系列属性
　　2、除text-indent、text-align之外的文本系列属性
　　五、块级元素可以继承的属性
　　1、text-indent、text-align

5.css里有什么属性可以继承

　　手持手册给你找
　　布局:visibility,
　　颜色:color
　　字体:
　　
　　属性 版本 继承性 描述
　　
　　font    CSS1/2    有    简写属性。定义元素的文本特性    
　　font-style    CSS1    有    指定元素的文本是否为斜体    
　　font-variant    CSS1    有    定义元素的文本是否为小型的大写字母    
　　font-weight    CSS1    有    定义元素文本字体的粗细    
　　font-size    CSS1    有    定义元素的字体大小    
　　font-family    CSS1    有    定义元素文本的字体名称序列    
　　font-stretch    CSS3    有    定义元素的文字是否横向拉伸变形    
　　font-size-adjust    CSS3    有    定义小写字母x的高度与对象文字字号的比率。    
　　
　　属性  版本  继承性  描述
　　
　　text-transform    CSS1/3    有    定义元素的文本如何转换大小写    
　　white-space    CSS1    有    指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。    
　　tab-size    CSS3    有    定义元素内容中制表符的长度    
　　word-break    CSS3    有    定义元素内容文本的字间与字符间的换行行为    
　　word-wrap/overflow-wrap    CSS3    有    定义元素内容文本遇到边界时如何换行    
　　text-align    CSS1/3    有    定义元素内容的水平对齐方式    
　　text-align-last    CSS3    有    定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式    
　　text-justify    CSS3    有    定义使用什么方式实现文本内容两端对齐    
　　word-spacing    CSS1/3    有    指定单词之间的额外间隙    
　　letter-spacing    CSS1/3    有    指定字符之间的额外间隙    
　　text-indent    CSS1/3    有    定义块内文本内容的缩进    
　　vertical-align    CSS1/2    无    定义行内元素在行框内的垂直对齐方式    
　　line-height    CSS1    有    定义元素中行框的最小高度    
　　text-size-adjust    CSS3    有    定义移动端页面中元素文本的大小如何调整   

　　属性 版本 继承性 描述 
　　text-decoration CSS1/3 无 简写属性。定义元素文本装饰 
　　text-decoration-line CSS3 无 定义元素文本装饰线条位于文本的哪个位置 
　　text-decoration-color CSS3 无 指定元素文本装饰线条的颜色 
　　text-decoration-style CSS3 无 定义元素文本装饰线条的形状 
　　text-decoration-skip CSS3 有 定义元素文本装饰线条必须跳过内容中的哪些部分 
　　text-underline-position CSS3 有 定义元素装饰线的位置 
　　text-shadow CSS3 有 定义文字是否有阴影及模糊效果 
　　还有部分就不列了
　　检验 百度搜索CSS 4. 0,  看下
　　CSS参考手册
　　版本：v4.2.7
　　最后更新时间：2018-4-10
　　编著：飘零雾雨

以上就是关于「css 如何继承」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

【②本文来*源Win10系统之家，不得自行转载，违者必追究！】