<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Css on Gore's Blog</title><link>https://mygoare.github.io/tags/css/</link><description>Recent content in Css on Gore's Blog</description><generator>Hugo</generator><language>zh-cn</language><copyright>2009 - Gore&amp;rsquo;s Blog</copyright><lastBuildDate>Mon, 20 Jun 2011 15:44:00 +0800</lastBuildDate><atom:link href="https://mygoare.github.io/tags/css/index.xml" rel="self" type="application/rss+xml"/><item><title>css的一些继承</title><link>https://mygoare.github.io/css/2011/06/20/css-inherit.html</link><pubDate>Mon, 20 Jun 2011 15:44:00 +0800</pubDate><guid>https://mygoare.github.io/css/2011/06/20/css-inherit.html</guid><description>&lt;p&gt;&lt;img alt="css继承" loading="lazy" src="https://i.imgur.com/HOKETOT.png"&gt;&lt;/p&gt;
&lt;p&gt;CSS的继承，感觉自己最开始接触到这个词的时候还不知道是何物，虽然自己那时在书写CSS代码的时候都一种在用这个概念，有点可笑，自己自学CSS都是网上看视频学的，没有些什么很系统的认识，这也是弊端吧。&lt;/p&gt;
&lt;p&gt;一起来学习下吧，CSS Inheritance – a simple step-by-step tutorial，是由Russ Weakley发布的一个CSS继承的经典PPT。&lt;/p&gt;
&lt;p&gt;&lt;a href="http://www.slideshare.net/maxdesign/css-inheritance-a-simple-stepbystep-tutorial"&gt;PPT地址&lt;/a&gt;&lt;/p&gt;
&lt;iframe src="//www.slideshare.net/slideshow/embed_code/key/1YgIAoMqVV7oxC" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen&gt; &lt;/iframe&gt;
&lt;p&gt;再说写点自己的一些心得：&lt;/p&gt;
&lt;p&gt;整个PPT给人的感觉是：老外真的很风趣，各种插图，各种搞笑；&lt;/p&gt;
&lt;p&gt;其中我觉得最要学习的就是font-size的继承，也是作者花了比较多的篇幅。我的理解：font-size继承会根据上一层的依次继承下去，而不是根据最初的继承，再一个导致font-size继承特殊的原因是它的value有时是需要计算的。&lt;/p&gt;
&lt;p&gt;作者在继承上留了很大的空间给读者自己去思考，而没有直接下任何结论，让读者自己去理解，这样有了自己的理解总结，才会更加地深刻。&lt;/p&gt;
&lt;p&gt;不过对于PPT的83页的结果，我有些自己的见解，我想作者应该是基于最开始的那段p标签包裹em标签的代码得出的表里的结果，即h1,h2只是定义了，却没有真正写到html里去。所以，我在此拓展下，强化下自 己的理解，当然结果也告诉我，我的理解是正确的，哈哈！&lt;/p&gt;
&lt;p&gt;CSS代码:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-css" data-lang="css"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;h1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;150&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;h2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;font-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="kt"&gt;%&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;html代码:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-css" data-lang="css"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;mygoare&lt;/span&gt; &lt;span class="nt"&gt;is&lt;/span&gt; &lt;span class="nt"&gt;coming&lt;/span&gt; &lt;span class="nt"&gt;from&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;em&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;China&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;em&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nt"&gt;Wuhan&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h6&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt; &lt;span class="nt"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;font-size:32px;&amp;#34;&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;mygoare&lt;/span&gt; &lt;span class="nt"&gt;is&lt;/span&gt; &lt;span class="nt"&gt;coming&lt;/span&gt; &lt;span class="nt"&gt;from&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;em&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;China&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;em&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nt"&gt;Wuhan&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="o"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h6&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;html代码中，用h1标签包裹住p和em，结果font-size的继承发生了变化，字体大小与PPT中的不同，证明了自己的理解，很有成就感，哈哈。如果我再深一层给em加百分比大小，那么一定是继承p的大小，再计算。&lt;/p&gt;
&lt;p&gt;就说到这，一起学习，一起分享，一起进步！&lt;/p&gt;</description><content:encoded><![CDATA[<p><img alt="css继承" loading="lazy" src="https://i.imgur.com/HOKETOT.png"></p>
<p>CSS的继承，感觉自己最开始接触到这个词的时候还不知道是何物，虽然自己那时在书写CSS代码的时候都一种在用这个概念，有点可笑，自己自学CSS都是网上看视频学的，没有些什么很系统的认识，这也是弊端吧。</p>
<p>一起来学习下吧，CSS Inheritance – a simple step-by-step tutorial，是由Russ Weakley发布的一个CSS继承的经典PPT。</p>
<p><a href="http://www.slideshare.net/maxdesign/css-inheritance-a-simple-stepbystep-tutorial">PPT地址</a></p>
<iframe src="//www.slideshare.net/slideshow/embed_code/key/1YgIAoMqVV7oxC" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
<p>再说写点自己的一些心得：</p>
<p>整个PPT给人的感觉是：老外真的很风趣，各种插图，各种搞笑；</p>
<p>其中我觉得最要学习的就是font-size的继承，也是作者花了比较多的篇幅。我的理解：font-size继承会根据上一层的依次继承下去，而不是根据最初的继承，再一个导致font-size继承特殊的原因是它的value有时是需要计算的。</p>
<p>作者在继承上留了很大的空间给读者自己去思考，而没有直接下任何结论，让读者自己去理解，这样有了自己的理解总结，才会更加地深刻。</p>
<p>不过对于PPT的83页的结果，我有些自己的见解，我想作者应该是基于最开始的那段p标签包裹em标签的代码得出的表里的结果，即h1,h2只是定义了，却没有真正写到html里去。所以，我在此拓展下，强化下自 己的理解，当然结果也告诉我，我的理解是正确的，哈哈！</p>
<p>CSS代码:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span><span class="k">font-size</span><span class="p">:</span><span class="mi">20</span><span class="kt">px</span><span class="p">;}</span>
</span></span><span class="line"><span class="cl"><span class="nt">h1</span> <span class="p">{</span><span class="k">font-size</span><span class="p">:</span><span class="mi">150</span><span class="kt">%</span><span class="p">;}</span>
</span></span><span class="line"><span class="cl"><span class="nt">h2</span> <span class="p">{</span><span class="k">font-size</span><span class="p">:</span><span class="mi">200</span><span class="kt">%</span><span class="p">;}</span>
</span></span><span class="line"><span class="cl"><span class="nt">p</span> <span class="p">{</span><span class="k">font-size</span><span class="p">:</span><span class="mi">80</span><span class="kt">%</span><span class="p">;}</span>
</span></span></code></pre></div><p>html代码:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nt">h2</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="o">&lt;</span><span class="nt">p</span><span class="o">&gt;</span><span class="nt">mygoare</span> <span class="nt">is</span> <span class="nt">coming</span> <span class="nt">from</span> <span class="o">&lt;</span><span class="nt">em</span><span class="o">&gt;</span><span class="nt">China</span><span class="o">&lt;/</span><span class="nt">em</span><span class="o">&gt;</span> <span class="nt">Wuhan</span><span class="o">&lt;/</span><span class="nt">p</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="nt">h2</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="o">&lt;</span><span class="nt">h6</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="o">&lt;</span><span class="nt">p</span> <span class="nt">style</span><span class="o">=</span><span class="s2">&#34;font-size:32px;&#34;</span><span class="o">&gt;</span><span class="nt">mygoare</span> <span class="nt">is</span> <span class="nt">coming</span> <span class="nt">from</span> <span class="o">&lt;</span><span class="nt">em</span><span class="o">&gt;</span><span class="nt">China</span><span class="o">&lt;/</span><span class="nt">em</span><span class="o">&gt;</span> <span class="nt">Wuhan</span><span class="o">&lt;/</span><span class="nt">p</span><span class="o">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="o">&lt;/</span><span class="nt">h6</span><span class="o">&gt;</span>
</span></span></code></pre></div><p>html代码中，用h1标签包裹住p和em，结果font-size的继承发生了变化，字体大小与PPT中的不同，证明了自己的理解，很有成就感，哈哈。如果我再深一层给em加百分比大小，那么一定是继承p的大小，再计算。</p>
<p>就说到这，一起学习，一起分享，一起进步！</p>
]]></content:encoded></item></channel></rss>