在《HTML 新手基础入门概念》中，我们介绍了 HTML 的相关概念和基本用法。然而，仅仅使用 HTML 创建的网页样式相对简单，缺乏个性化设计。这时候，CSS（级联样式表）就派上了用场。
CSS 可以帮助我们定义和控制网页的布局、颜色、字体等样式。本文将向初学者介绍 CSS 的相关概念，并通过实例加以说明。
1. 什么是CSS？
CSS（Cascading Style Sheets，级联样式表）是一种样式表语言，用于描述 HTML 文档的外观和格式。CSS 使得开发者可以将样式信息与 HTML 结构分离，便于对网站的外观进行统一管理和维护。
2. CSS引入方式
CSS 可以通过以下三种方式应用到 HTML 文档中：
2.1 外部样式表：
将 CSS 代码写在一个单独的文件中（通常以.css为扩展名），然后在 HTML 文档的<head>部分使用<link>标签引入。这是最常用且推荐的方式，因为它可以方便地进行样式复用和维护。
<head>
<link rel="stylesheet" href="styles.css">
</head>
2.2 内部样式表
将 CSS 代码直接写在 HTML 文档的<head>部分，用<style>标签包裹。这种方式适用于小型项目或独立页面。
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
2.3 内联样式
将 CSS 代码直接写在 HTML 标签的 style 属性中。这种方式不推荐使用，因为它破坏了结构与样式的分离原则，难以维护。
<h1 style="color: white; text-align: center;">欢迎来到玩机大学！</h1>
3. CSS选择器与实例
CSS 选择器用于定位 HTML 元素，并为这些元素应用样式。以下是一些常用的 CSS 选择器及其用法：
3.1 元素选择器
根据 HTML 标签名称选择元素。例如，以下代码将应用于所有<p>标签：
p {
color: red;
font-size: 16px;
}
3.2 类选择器
根据 HTML 元素的 class 属性选择元素。类选择器以.开头。例如，以下代码将应用于具有 highlight 类的所有元素：
.highlight {
background-color: yellow;
font-weight: bold;
}
在 HTML 文档中，为元素添加 class 属性以应用相应样式：
<p class="highlight">CCCiTU 这是一个被突出显示的段落。</p>
3.3 ID 选择器
根据 HTML 元素的 id 属性选择元素。ID 选择器以#开头。注意，id 属性的值在同一 HTML 文档中应该是唯一的。例如，以下代码将应用于具有 main-title ID 的元素：
#main-title {
font-size: 24px;
text-decoration: underline;
}
在 HTML 文档中，为元素添加 id 属性以应用相应样式：
<h1 id="main-title">这是主标题</h1>
3.4 属性选择器
根据 HTML 元素的属性选择元素。例如，以下代码将应用于具有target="_blank"属性的所有<a>标签：
a[target="_blank"] {
color: blue;
font-style: italic;
}
3.5 伪类选择器
根据元素的状态选择元素。例如，以下代码将应用于鼠标悬停在<a>标签上时：
a:hover {
color: orange;
text-decoration: none;
}
4. CSS盒模型
CSS 盒模型是 CSS 布局的基础概念，用于描述元素在页面上的布局方式。一个盒模型包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
.box {
width: 300px; /* 内容宽度 */
height: 200px; /* 内容高度 */
padding: 20px; /* 内边距 */
border: 5px solid black; /* 边框 */
margin: 10px; /* 外边距 */
}
5. 总结
本文为初学者介绍了 CSS 的相关概念，包括 CSS 的引入方式、选择器、盒模型等，并通过实例进行了说明。学习 CSS 是网页开发的重要环节，掌握 CSS 可以让你为网站创建独特且美观的设计。希望本文能帮助你建立扎实的 CSS 基础，为日后学习更高级的技术做好准备。
暂无评论
要发表评论，您必须先 登录