这是一个带有内联样式的段落。
### 内部样式表
内部样式表是在HTML文档的`<head>`部分使用`<style>`标签定义CSS规则的方法。这种方式适用于整个HTML文档中的多个元素，但仍不如外部样式表易于管理和复用。**示例:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表示例</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个带有内部样式表样式的段落。</p>
</body>
</html>
</code></pre>
<h3>外部样式表</h3>
外部样式表是将CSS代码放在单独的<code>.css</code>文件中，并通过HTML文档的<code><link></code>标签引用该文件的方式。这种方式使得CSS代码可以被多个HTML文档共享，便于维护和管理。
<strong>示例:</strong>
<strong>styles.css</strong>
<pre><code class="language-css line-numbers">p {
color: blue;
font-size: 16px;
}
</code></pre>
<strong>index.html</strong>
<pre data-language=HTML><code class="language-markup line-numbers"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个带有外部样式表样式的段落。</p>
</body>
</html>
</code></pre>
<h2>2. CSS选择器</h2>
选择器用于指定要应用样式的HTML元素。常见的选择器包括元素选择器、类选择器、ID选择器等。
<h3>元素选择器</h3>
元素选择器通过匹配HTML元素的名称来选择元素。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">p {
color: red;
}
</code></pre>
<h3>类选择器</h3>
类选择器通过匹配HTML元素的<code>class</code>属性值来选择元素。一个元素可以有多个类名，多个元素也可以共享同一个类名。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">.highlight {
background-color: yellow;
}
</code></pre>
<strong>HTML:</strong>
<pre data-language=HTML><code class="language-markup line-numbers"><p class="highlight">这是一个高亮显示的段落。</p>
<div class="highlight">这也是一个高亮显示的div。</div>
</code></pre>
<h3>ID选择器</h3>
ID选择器通过匹配HTML元素的<code>id</code>属性值来选择元素。每个页面中的<code>id</code>必须是唯一的，不能重复。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">#header {
font-size: 24px;
color: green;
}
</code></pre>
<strong>HTML:</strong>
<pre data-language=HTML><code class="language-markup line-numbers"><h1 id="header">这是标题</h1>
</code></pre>
<h3>属性选择器</h3>
属性选择器通过匹配HTML元素的属性及其值来选择元素。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">input[type="text"] {
width: 200px;
}
</code></pre>
<h3>伪类选择器</h3>
伪类选择器用于选择处于特定状态的元素，如鼠标悬停、链接访问过等。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">a:hover {
text-decoration: underline;
}
</code></pre>
<h3>伪元素选择器</h3>
伪元素选择器用于选择元素的特定部分，如首字母、首行等。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">p::first-line {
font-weight: bold;
}
</code></pre>
<h2>3. 盒模型</h2>
盒模型是CSS布局的基础，每个HTML元素都被视为一个矩形盒子，由内容区域（content）、填充（padding）、边框（border）和边距（margin）组成。
<h3>边框（border）</h3>
边框围绕在元素的内容和填充周围。可以通过<code>border</code>属性设置边框的宽度、样式和颜色。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">.box {
border: 2px solid black;
}
</code></pre>
<h3>填充（padding）</h3>
填充是内容与边框之间的空间。可以通过<code>padding</code>属性设置填充的距离。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">.box {
padding: 10px;
}
</code></pre>
<h3>边距（margin）</h3>
边距是元素与其他元素之间的空间。可以通过<code>margin</code>属性设置边距的距离。
<strong>示例:</strong>
<pre><code class="language-css line-numbers">.box {
margin: 20px;
}
</code></pre>
通过理解这些基础知识，你可以开始构建简单的网页样式，并为更复杂的布局打下坚实的基础。
```
这样所有的内容都在一个Markdown代码块中了，方便阅读和复制。希望这符合你的需求！如果有任何进一步的问题或需要修改的地方，请告诉我。
评论 (0)