CSS 是什么?

编辑于:2023年05月23日

CSS 是什么?

在《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 基础,为日后学习更高级的技术做好准备。

相关推荐

暂无评论