您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS基础与应用详解

时间：02-12来源：作者：点击数：27

前言

CSS（层叠样式表）是网页设计中不可或缺的一部分，它使得HTML文档更加美观和功能丰富。本文将详细介绍CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容，并通过具体的代码示例进行解析，帮助读者更好地理解和掌握CSS的应用。

1. CSS概述

1.1 什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页外观的标记性语言。它与HTML配合使用，可以精确地控制网页中的文本、图像、表格等元素的样式。CSS的主要作用是将内容与表现分离，使网页的维护和更新更加方便。

1.2 CSS的基本语法

CSS的基本语法结构如下：

css选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

选择器：用于指定要应用样式的HTML元素。
属性名：定义要设置的样式属性。
属性值：指定属性的具体值。

1.3 CSS的引入方式

CSS可以通过以下几种方式引入到HTML文档中：

行内样式：直接在HTML标签中使用style属性。
内部样式表：在HTML文档的<head>部分使用<style>标签。
外部样式表：通过<link>标签或@import规则引入外部CSS文件。

1.3.1 行内样式

行内样式直接在HTML标签中使用style属性来定义样式。例如：

html

<p style="color: red; font-size: 16px;">这是一个段落。</p>

1.3.2 内部样式表

内部样式表在HTML文档的<head>部分使用<style>标签来定义样式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: lightblue;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

1.3.3 外部样式表

外部样式表通过<link>标签或@import规则引入外部CSS文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

或者使用@import规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

2. CSS选择器

2.1 基本选择器

CSS选择器用于选择要应用样式的HTML元素。常见的基本选择器包括：

全局选择器（通配符选择器）：*，选择所有元素。
标签选择器：通过标签名称选择元素。
类选择器：通过class属性选择元素。
ID选择器：通过id属性选择元素。

2.1.1 全局选择器

全局选择器*选择所有元素。例如：

* {
    color: seagreen;
}

2.1.2 标签选择器

标签选择器通过标签名称选择元素。例如：

p {
    color: lightblue;
}

2.1.3 类选择器

类选择器通过class属性选择元素。例如：

.list {
    color: brown;
}

2.1.4 ID选择器

ID选择器通过id属性选择元素。例如：

#a {
    color: black;
}

2.2 复合选择器

复合选择器由多个基本选择器组成，用于更精确地选择元素。常见的复合选择器包括：

群组选择器：同时选中多个标签，用逗号隔开。
后代选择器：选中选择符1的所有后代选择符2，用空格隔开。

2.2.1 群组选择器

群组选择器同时选中多个标签，用逗号隔开。例如：

.list, #a, p {
    color: red;
}

2.2.2 后代选择器

后代选择器选中选择符1的所有后代选择符2，用空格隔开。例如：

ol li {
    color: blueviolet;
}

3. CSS优先级

3.1 优先级规则

CSS优先级决定了当多个样式规则应用于同一个元素时，哪个规则会被应用。优先级规则如下：

行内样式 > 内部样式 = 外部样式
重要性（!important）优先级最高

3.2 权重值

权重值是一个虚拟的概念，用于计算选择器的优先级。权重值的计算规则如下：

全局选择器：0
标签选择器：1
类选择器：10
ID选择器：100
重要性（!important）：1000+

例如：

* {
    color: seagreen;
} /* 权重值：0 */

p {
    color: lightblue;
} /* 权重值：1 */

.list {
    color: brown;
} /* 权重值：10 */

#a {
    color: black;
} /* 权重值：100 */

.list, #a, p {
    color: red;
} /* 权重值：10 + 100 + 1 = 111 */

ol li {
    color: blueviolet;
} /* 权重值：1 + 1 = 2 */

4. CSS颜色表示法

4.1 基本颜色表示法

CSS提供了多种颜色表示法，常用的有：

英文单词：如red、green等。
十六进制：如#000（黑色）、#fff（白色）等。
RGB三原色表示法：如rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）等。
HSB表示法：色调、饱和度、亮度表示颜色。

4.1.1 英文单词

使用英文单词表示颜色。例如：

div {
    background-color: red;
}

4.1.2 十六进制

使用十六进制表示颜色。例如：

div {
    background-color: #f00;
}

4.1.3 RGB三原色表示法

使用RGB三原色表示颜色。例如：

div {
    background-color: rgb(255, 0, 0);
}

4.1.4 HSB表示法

使用HSB表示颜色。例如：

div {
    background-color: hsb(0, 100%, 50%);
}

4.2 透明度

CSS还支持设置颜色的透明度，使用rgba或hsla表示法。例如：

div {
    background-color: rgba(122, 196, 159, 0.5);
}

5. 图片格式

5.1 常见图片格式

常见的图片格式包括：

JPG：有损压缩，占用空间小。
PNG：支持透明，无损压缩。
GIF：动图，支持256种颜色。

5.1.1 JPG

JPG是一种有损压缩格式，适用于照片等复杂图像。例如：


<img src="img/photo.jpg" alt="照片">

5.1.2 PNG

PNG是一种无损压缩格式，支持透明，适用于图标、logo等。例如：


<img src="img/logo.png" alt="Logo">

5.1.3 GIF

GIF是一种动图格式，支持256种颜色，适用于简单的动画。例如：


<img src="img/animation.gif" alt="动画">

6. 伪类选择器

6.1 伪类选择器概述

伪类选择器用于选择具有特定状态的元素。常见的伪类选择器包括：

:link：未访问的链接。
:visited：已访问的链接。
:hover：鼠标悬停时的链接。
:active：鼠标点击时的链接。

6.2 伪类选择器示例

a:link {
    color: red;
}

a:visited {
    color: yellow;
}

a:hover {
    color: green;
}

a:active {
    color: blue;
}

7. 实际应用示例

7.1 示例1：基本样式应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: rgb(122, 196, 159, 0.5);
        }
    </style>
</head>
<body>
    <div>这是一个div元素。</div>
</body>
</html>

7.2 示例2：外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="a" id="a">文字</div>
</body>
</html>

7.3 示例3：图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/dabai.jpg" alt="提示文字" title="大白" width="300">
</body>
</html>

7.4 示例4：伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: red;
        }
        a:visited {
            color: yellow;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">点击跳转</a>
</body>
</html>

7.5 示例5：复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: seagreen;
        }
        p {
            color: lightblue;
        }
        .list {
            color: brown;
        }
        #a {
            color: black;
        }
        .list, #a, p {
            color: red;
        }
        ol li {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li>你干嘛呀</li>
        <li>你干嘛呀</li>
        <li class="list">你干嘛呀</li>
        <li id="a">你干嘛呀</li>
        <li>你干嘛呀</li>
        <li>你干嘛呀</li>
    </ul>
    <ol>
        <li>哎呦</li>
        <li>哎呦</li>
        <li>哎呦</li>
        <li>哎呦</li>
        <li>哎呦</li>
    </ol>
    <p>段落文本</p>
    <p>段落文本2</p>
</body>
</html>

结尾

本文详细介绍了CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容，并通过具体的代码示例进行了解析。希望本文能帮助读者更好地理解和掌握CSS的应用，提高网页设计的技能。在未来的学习和实践中，建议多尝试不同的CSS技巧和效果，不断积累经验，提升自己的技术水平。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:Css动画:爱心动画效果实现下一篇:CSS之排列系列--dl, dt, dd--使用/教程/实例

记录在本地电脑部署自	围棋入门教程十天即
围棋下法	Grid-A-Licious 基于