网页的构成要素
CSS样式
重要程度：7 分
<h2>CSS样式</h2>
<p>CSS (Cascading Style Sheets) 是一种用来描述HTML或XML（包括各种XML语言，如SVG、XHTML等）文档样式的语言。</p>
<p>CSS的作用是将内容和表现分离，使得网页更加灵活、易于维护。</p>
<h3>内联样式</h3>
<p>内联样式直接写在HTML元素上，只对当前元素有效。</p>
<pre><div style="color: red; font-size: 16px;">这是内联样式</div></pre>
<h3>内部样式表</h3>
<p>内部样式表写在HTML文档的 <head> 部分，并用 <style> 标签包裹。</p>
<pre><style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<div class="highlight">这是内部样式表</div></pre>
<h3>外部样式表</h3>
<p>外部样式表是将CSS代码写在一个单独的文件中，然后通过 <link> 标签引入到HTML文档中。</p>
<pre><link rel="stylesheet" href="styles.css"></pre>
<h3>CSS选择器</h3>
<p>选择器用于选择需要添加样式的HTML元素。</p>
<ul>
<li>元素选择器：根据HTML标签名来选择元素。</li>
<pre><p>这是段落文本</p></pre>
<li>类选择器：通过class属性来选择元素。</li>
<pre><div class="example">这是类选择器</div></pre>
<li>ID选择器：通过id属性来选择元素。</li>
<pre><div id="unique">这是ID选择器</div></pre>
</ul>
<h3>盒模型</h3>
<p>盒模型是CSS布局的基础，它定义了元素框的组成方式。</p>
<pre>
box-sizing: border-box; /* 内容 + 边框 + 内边距 = 元素宽度 */
box-sizing: content-box; /* 内容 = 元素宽度 */
</pre>
<h3>示例：创建一个简单的CSS样式</h3>
<pre>
<style>
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #f0f0f0;
text-align: center;
}
.title {
color: blue;
font-size: 24px;
margin-bottom: 10px;
}
.content {
font-size: 16px;
line-height: 1.5;
}
</style>
<div class="container">
<div class="title">欢迎来到我的网页</div>
<div class="content">这是一个简单的示例，展示了如何使用CSS样式来美化网页内容。</div>
</div>
</pre>