39. css_01

news/2025/2/8 2:47:37/文章来源:https://www.cnblogs.com/hbutmeng/p/18580180

1. css的概念

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML文档的表现形式的样式语言。它被设计用于将网页的内容与表现形式分离，可以控制网页的外观和布局，包括间距、颜色、字体等视觉元素，而不需要直接修改HTML的结构。

2. 语法结构

选择符 {样式属性: 样式属性值;样式属性: 样式属性值;样式属性: 样式属性值, 样式属性值, 样式属性值;
}

2. 注释语法

/* 这是注释 */

3. 引入css的方式

3.1 head内style标签内部直接编写css代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {color: aqua;}</style>
</head>
<body><p>avril lavigne</p>
</body>
</html>

3.2 head内link标签引入外部css文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="newcss.css">
</head>
<body><p>avril lavigne</p>
</body>
</html>

3.3 行内式

标签内部通过style属性直接编写

将HTML和css糅合到了一起（不推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p style="color: blue">avril lavigne</p>
</body>
</html>

4. 基本选择器

4.1 标签选择器（范围查找）

通过标签名查找标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1 {color: cornflowerblue;}</style>
</head>
<body><h1>avril</h1><h1>lavigne</h1><h1>haaland</h1>
</body>
</html>

 

4.2 类选择器（范围查找）

通过标签的class属性查找标签　　.类名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1 {color: cornflowerblue;}</style>
</head>
<body><h1 class="c1">avril</h1><h1 class="c1">lavigne</h1><h1 class="c2">haaland</h1>
</body>
</html>

4.3 id选择器（精确查找）

通过标签的id属性查找标签　　#id

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 {color: lightseagreen;}</style>
</head>
<body><h1 class="c1" id="d1">avril</h1><h1 class="c1" id="d2">lavigne</h1><h1 class="c2" id="d3">haaland</h1>
</body>
</html>

5. 关系选择器

5.1 分类

后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器

5.2 演示说明

    <div>div1<div>div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span></div>

通过嵌套来表示标签关系：

[1]对于div1来说，div2、p2、span2是子代

[2]对于div1来说，内部的所有标签无论层级都是div1的后代

[3]div2、p2、span2是兄弟

5.3 代码

[1] 子代选择器

关键符号是大于号　　

查找id是d1标签内部所有的子代span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 > span {color: blueviolet;}</style>
</head>
<body><div id="d1">div1<div>div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span><span>span3</span></div>
</body>
</html>

[2]后代选择器

关键符号是空格

查找id是d1标签内部所有的后代span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d1 span {color: blueviolet;}</style>
</head>
<body><div id="d1">div1<div>div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span><span>span3</span></div>
</body>
</html>

[3]相邻兄弟选择器

关键符号是加号

查找id是d2标签同级别紧随其后的span标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d2 + span {color: blueviolet;}</style>
</head>
<body><div id="d1">div1<div>div2<p>p1</p></div><p id="d2">p2<span>span1</span></p><span>span2</span><span>span3</span></div>
</body>
</html>

[4]通用兄弟选择器

关键符号是波浪号

查找id是d2标签同级别下所有的h1标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#d2 ~ h1{color: blueviolet;}</style>
</head>
<body><div>div1<div id="d2">div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span><h1>avril</h1><h1>lavigne</h1></div>
</body>
</html>

6. 属性选择器

根据标签内部的属性名和属性值查找标签（关键符号是中括号）

方式一：直接通过属性名查找

将带有id属性的标签背景颜色改为blueviolet

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[id] {background: blueviolet;}</style>
</head>
<body><input type="text" name="aaa" id="1"><input type="text" name="bbb" id="2"><p id="3">avril</p><p id="4">lavigne</p>
</body>
</html>

方式二：属性名+属性值

将属性名为id，属性值为1的标签背景颜色改为blueviolet

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[id="1"] {background: blueviolet;}</style>
</head>
<body><input type="text" name="aaa" id="1"><input type="text" name="bbb" id="2"><p id="3">avril</p><p id="4">lavigne</p>
</body>
</html>

方法三：标签名+属性名+属性值

将标签名为p、属性名为id、属性值为3的标签背景颜色改为blueviolet

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p[id="3"] {background: blueviolet;}</style>
</head>
<body><input type="text" name="aaa" id="1"><input type="text" name="bbb" id="2"><p title="666" id="3">avril</p><p title="666" id="4">lavigne</p>
</body>
</html>

7. 分组与嵌套

7.1 分组

[1] 语法

/*查找div或者p或者span*/
div, p, span {color: red;
}

[2]示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {color: blue;}p {color: blue;}span {color: blue;}</style></head>
<body><div>这是div标签</div><p>这是p标签</p><span>这是span标签</span>
</body>
</html>

上述方法，重复代码造成了代码的冗余

[3]优化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 逗号表示并列关系 */div,span,p {color: blue;}</style></head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>

7.2 嵌套

/*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {color: red;
}

7.3 综合运用

div#d1 　　 查找id是d1的div标签
div.c1 　　 查找class包含c1的div标签
div #d1 　　查找div内部id是d1的后代标签
#d1>.c1　　 查找id是d1的内部class包含c1的子代标签

8. 伪类选择器

8.1 hover

设置鼠标悬停在标签时的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {color: grey;}p:hover {color: deepskyblue;}</style></head>
<body><p>Avril lavigne</p>
</body>
</html>

 

8.2 focus

设置标签在成为输入焦点时的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>input:focus {background-color: deepskyblue;}</style>
</head>
<body><input type="text">
</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/845979.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DevExpress-独立使用的控件介绍-02

DevExpress-独立使用的控件介绍-02

XtraEditors 库提供了只能独立使用的控件，即这些控件只能依附于其他控件配合使用，不能单独使用。这些控件包括：几种类型的列表控件、数据导航控件、滚动条和一个按钮控件，这些控件都是继承于BaseStyleControl,因此支持所有Dev 控件共有的样式、外观与感觉、以及工具提示机制…
阅读更多...
preo/creo出图比例永久设置为1：1解决方法

preo/creo出图比例永久设置为1：1解决方法

平时画好的PREO/CREO模型需要转工程图后再导出到CAD时发现尺寸发生改变，那怎么设置可以导出比例1：1呢？下面分享下我的设置。 1.如图1画好的模型尺寸长宽为100*100MM的。（方法一）2.如图2当工程图再转CAD导出时，尺寸自动变成3.9370*3.9370MM。到时还需手动更改尺寸这样影响…
阅读更多...
hhdb数据库介绍(10-29)

hhdb数据库介绍(10-29)

管理 数据备份 从存储节点或灾备机房数据备份 选择灾备机房类型、从库（双主备库）存储节点类型进行备份，页面根据选择类型，对应给出提示信息。发起备份时，检测从存储节点状态是否符合备份条件。主从数据一致性检测如果机房类型选择灾备机房或者存储节点类型选择从库（双主备…
阅读更多...
hhdb数据库介绍(10-30)

hhdb数据库介绍(10-30)

管理 数据恢复 当业务数据遭受损坏或丢失时，可使用数据恢复功能将已备份的数据重新还原到损坏或丢失的逻辑库中。 数据恢复时序图：发起恢复发起说明点击“管理->数据恢复->【发起恢复】”即可跳转到数据恢复页面恢复发起前，出于数据安全性考虑，若超过3小时没有数据备…
阅读更多...
使用Nginx搭建流媒体服务器

使用Nginx搭建流媒体服务器

目录什么是流媒体服务器Nginx如何实现流媒体服务器为Nginx安装nginx-http-flv-module概述流程操作步骤配置流媒体服务器使用OBS推流使用VLC拉RTMP使用flv.js拉流使用jls.js拉m3u8总结引用 什么是流媒体服务器 流媒体服务器（Streaming Media Server）是一种用于存储和传输音频、…
阅读更多...
[Go] Go语言教程

[Go] Go语言教程

Go-lang概述Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。 Go 是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发，后来还加入了Ian Lance Taylor, Russ Cox等人，并最终于2009年11月开源，在2012年早些时候发布了Go 1稳定版本。现在Go…
阅读更多...
hhdb数据库介绍(10-28)

hhdb数据库介绍(10-28)

管理 管理菜单主要囊括对业务数据进行管理的功能，例如对数据的备份恢复或执行业务表的DDL语句等操作。 数据对象 数据对象功能可以帮助用户通过列表实时查看当前已存在的数据对象，了解业务数据的整体情况。提供了对数据对象的筛选、统计、关联、详情等信息。基础数据对象的统…
阅读更多...
hhdb数据库介绍(10-26)

hhdb数据库介绍(10-26)

报表 数据节点吞吐量 数据节点吞吐量为计算节点发往存储节点的操作量统计，一般用SELECT、UPDATE、DELETE、INSERT、OTHER五种类型分类计算节点操作。 图形模式 数据节点吞吐量图形模式包含数据节点吞吐总量对比图、数据节点吞吐量变化趋势、集群吞吐类型对比图、逻辑库吞吐量对…
阅读更多...
离散数学命题逻辑

离散数学命题逻辑

离散数学命题逻辑语雀链接：https://www.yuque.com/g/wushi-ls7km/zyko8c/tfttq5zq0xyldfxn/collaborator/join?token=u0bJmfKd8DcgpA1k&source=doc_collaborator# 《离散数学命题逻辑》
阅读更多...
值班空岗睡岗识别智慧矿山视频分析技术安防摄像机的红外（补光）技术阐述科普

值班空岗睡岗识别智慧矿山视频分析技术安防摄像机的红外（补光）技术阐述科普

在现代安防监控领域，红外线（IR）技术因其在夜间或光线不足环境中的卓越表现而变得愈发重要。本文将深入探讨红外线技术在安防监控中的应用，分析其工作原理、分类以及在不同场景下的实际应用，同时探讨红外技术在智能交通和智慧矿山等领域中面临的挑战和解决方案。通过这一讨…
阅读更多...
图片是不是越小越好？如何优化图片呢？

图片是不是越小越好？如何优化图片呢？

图片并非越小越好，而是要在文件大小和图像质量之间找到一个平衡点。过小的图片文件大小通常意味着图像质量的损失，导致图片模糊、像素化或细节丢失，从而影响用户体验。优化的目标是在保证可接受的图像质量的前提下，尽可能减小文件大小，以提高网页加载速度和性能。 以下是一…
阅读更多...
井底车场人员进入识别智慧矿山一体机人车防碰撞识别AI科技护航矿山安全生产

井底车场人员进入识别智慧矿山一体机人车防碰撞识别AI科技护航矿山安全生产

在当代工业制造领域，安全生产始终是企业稳定发展的重中之重，特别是在那些如非煤矿山这般风险较高的作业场所，保障工作人员的安全、防止意外发生是极其关键的。信息技术的快速进步使得智慧矿山一体机成为了安全管理中不可或缺的一环，其在非煤矿山行业的应用正变得越来越重要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023