CSS样式基础
CSS简介
重要程度：8 分
<h1>CSS简介</h1>
<p>CSS (Cascading Style Sheets) 是一种用于描述HTML或XML（包括各种XML语言，如SVG、XHTML等）文档样式的语言。</p>
<h2>作用</h2>
<ul>
<li>定义元素的显示方式，如颜色、字体大小、边距等。</li>
<li>使网页更加美观，提高用户体验。</li>
<li>使页面布局更加灵活，易于维护。</li>
</ul>
<h2>如何引入CSS</h2>
<ul>
<li>内联样式：直接在HTML标签中使用style属性定义样式。</li>
<li>内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。</li>
<li>外部样式表：将样式定义在独立的.css文件中，并通过<link>标签引入到HTML文档中。</li>
</ul>
<h2>选择器</h2>
<p>选择器用于指定需要应用样式的HTML元素。</p>
<ul>
<li>元素选择器：直接使用HTML元素名作为选择器。</li>
<li>类选择器：使用点（.）加类名作为选择器。</li>
<li>ID选择器：使用井号（#）加ID名作为选择器。</li>
</ul>
<h2>属性和值</h2>
<p>属性定义了要设置的样式类型，值则定义了具体的样式效果。</p>
<ul>
<li>color: 定义文本颜色。</li>
<li>font-size: 定义文本字体大小。</li>
<li>margin: 定义元素的外边距。</li>
<li>padding: 定义元素的内边距。</li>
</ul>
<h2>示例</h2>
<pre>
<style>
/* 内部样式表 */
p {
color: blue; /* 文本颜色为蓝色 */
font-size: 16px; /* 字体大小为16像素 */
}
.highlight {
background-color: yellow; /* 背景颜色为黄色 */
}
#title {
font-weight: bold; /* 文字加粗 */
}
</style>
<p class="highlight" id="title">这是一个段落。</p>
</pre>