search
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

CSS inheritance

Some styles of CSS

are inherited, so what is inheritance? Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants. For example, the following code: If a certain color is applied to the p tag, this color setting applies not only to the p tag, but also to all sub-element text in the p tag, where the sub-element is the span tag.

p{color:red;}

<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

It can be seen that the text in p and the text in span in the result window on the right are set to red. But note that some CSS styles are not inherited. For example, border:1px solid red;

p{border:1px solid red;}

<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

In the above example, the function of the code is only to set the border to 1 pixel, red, and solid border line for the p tag, but it has no effect on the sub-element span. of.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>继承</title>
<style type="text/css">
p{color:red;}
span{border:1px solid blue;
    color:#aa2355;}
p{border:1px solid red;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
</body>
</html>

######
new file
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>继承</title> <style type="text/css"> p{color:red;} span{border:1px solid blue; color:#aa2355;} p{border:1px solid red;} </style> </head> <body> <h1>勇气</h1> <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p> </body> </html>
Reset Code
Automatic operation
submit
Preview Clear