首页 › CSS论坛 › CSS学习总结

胡展中 發表於 2024-6-18 22:51:00

CSS学习总结

<h2 id="css学习总结">CSS学习总结</h2>
<h3 id="一简介">一、简介</h3>
<p>W3C的介绍中介绍CSS 指层叠样式表 (Cascading Style Sheets)， 样式定义如何显示 HTML 元素。浏览器将内容装在一个元素里面（一个盒子），然后CSS通过调整盒子背景、大小、颜色、样式、内容的文本以及字体的大小，最后展示出我们需要的排版样式。</p>
<p>css在使用的过程中，有很多的参数需要记忆。特别是还有很多的浏览器的有自己独有的参数，很难记忆。只有多使用，多查文档。用的时候可以到w3c.com中查询&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;http://www.w3school.com.cn/cssref/index.asp</p>
<h3 id="二盒子模型">二、盒子模型</h3>
<p>浏览器在处理HTML标签的时候，都是通过盒子模型进行排版。将内容放在这种盒子容器内，根据容器是行内标签和块级标签最后在浏览器中形成样式。下面是W3C网站的介绍</p>
<p></p>
<p>我们用通过CSS来排版，在浏览器中形象的展示出，它们之间的区别</p>
<pre><code>&lt;!DOCTYPE&nbsp;html&gt;
&lt;html&gt;
&lt;head&gt;
        &lt;style&gt;
                .test{
                        background&nbsp;:&nbsp;gray;
                        border&nbsp;:&nbsp;5px&nbsp;solid&nbsp;red;
                       
                        height&nbsp;:&nbsp;20px;
                        width&nbsp;:&nbsp;250px;
                        font&nbsp;:&nbsp;italic&nbsp;bold&nbsp;12px/20px&nbsp;arial,sans-serif;
                       
                        margin:&nbsp;22px;
                        padding&nbsp;:&nbsp;25px;
                }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
        &lt;div&nbsp;class="test"&gt;Begin&nbsp;Test&nbsp;Cascoding&nbsp;Style&nbsp;Sheets&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>效果图</p>
<p><img src="http://static.oschina.net/uploads/space/2016/0301/152509_ng7K_2246410.png"></p>
<p><img src="http://static.oschina.net/uploads/space/2016/0301/152509_89n0_2246410.png"></p><br><br>
来源：https://www.cnblogs.com/fxl-xyz/p/18255054

查看完整版本: CSS学习总结