当前位置：首页 > news >正文

03-CSS基础选择器

news 文章来源：https://blog.csdn.net/qq_40663855/article/details/134424470 2025/5/4 13:55:21

3.1 CSS基础认知🍎

3.1.1 👁️‍🗨️CSS概念

CSS：层叠样式表（Cascading style sheets)，为网页标签增加样式表现的

语法格式：

选择器{<!-- 属性设置 -->属性名:属性值;  <!--每一个键值对属性写完之后都要加 英文 `;`g隔开-->
}
比如：
p{color:red;
}

CSS常见属性	作用
color	文字颜色
background-color	背景颜色
background-image	背景图片
font-size	字体大小
width	宽度
height	高度

3.1.2 👣CSS的引入方式

1. 内嵌式

写在style标签，style标签一般在head中，title下面

    <style>/* 内嵌式 */p{/*属性设置==》 属性名：属性值  */color: red;/* 文字大小 */font-size: 50px;/* 背景颜色 */background-color: yellow;/* 宽度 高度 *//* width: 60px;height: 600px; */}</style>

<p>你好！世界！</p>

2. 外联式

写在一个单独的.css文件中，通过`link`标签进行导入

    <!-- link 标签 导入外联的css样式 --><link rel="stylesheet" href="./css/01-css.css">

<div> 这是div标签-演示外联式CSS </div>

3. 内联式

直接写在标签的style属性中

<!-- 内联式：直接写在标签里面 -->
<span  style="color: springgreen; font-size: 90px;" >这是span标签-用来演示内联式</span>

3.2 基本选择器🌶️

3.2.1 🏀标签选择器

通过标签名去控制对应标签的样式

标签选择器是一次性控制整个页面对应的标签

语法：

标签名{属性：属性值
}

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 20px;}</style>
</head>
<body><!-- 演示标签选择器 --><p>这是span标签-用来演示标签选择器</p><p>p1 </p><p>p2 </p><p> p3</p><p> p4</p><div><ol><li><p>这是嵌套的p标签</p></li></ol></div>
</body>

3.2.2 🎉类选择器

通过类名，找到页面中所有带有这个类名的标签，设置样式

class="类名"

语法：

.类名{属性：值
}

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类选择器 .类名 */.xzq03{color: aqua;font-size: 30px;}.p03{background-color: red;}</style>
</head>
<body><p> 这是第一个p标签</p><p class="xzq03"> 这是第二个p标签，有类名的p标签</p><!-- 多个类名 --><p class="xzq03 p03"> 这是第三个p标签，有类名的p标签</p><span class="xzq03 span03">这是span标签</span><div class="xzq03">这是div标签</div>
</body>

注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

3.2.3 🎿id选择器

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

语法：

#id名{属性：值
}

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#ix{font-size: 40px;}#sx{background-color: red;}</style>
</head>
<body><p id="ix sx">这是p标签-测试id选择器</p><p id="ix">这是p标签-测试id选择器</p><span id="ix">这是span标签</span><div id="ix">这是div</div>
</body>

3.2.4 🔮通配符选择器

以通配符“*”直接选择设置整个页面的标签

语法：

*{属性：值
}

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: red;font-size: 40px;}</style>
</head>
<body><p>111</p><p>222</p><span>这是span</span><div>这是div</div>
</body>

3.3 CSS样式层叠🍖

一个标签有多个相同的属性，比如：设置两个 color，最后就会覆盖第一个，一最后的样式为准

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* 后面的属性会覆盖掉前面的属性 */font-size: 60px;font-size: 20px;color: red;color: violet;}</style>
</head>
<body><p>这是p标签</p>
</body>
</html>

3.4 字体和文本的基础样式🍊

3.4.1 🎯字体样式

格式：

font-size:数值+px

要跟px单位，不跟没有效果

字体粗细、倾斜：`font-weight`、`font-style`

<!DOCTYPE html>
<html lang="en">
<head><style>p{color: red;/* 字体加粗 */font-weight: bold;}div{font-weight: 900;font-style: oblique;}span{font-weight: 100;font-style: italic;}</style>
</head>
<body><p>这是p标签</p><div>这是div标签</div><span>这是span</span>
</body>
</html>

主体加粗

关键字：

正常：normal
加粗：bold

数值：

100~900 （9个级别，依次递增）
正常：400
加粗：700

字体倾斜

正常：normal（默认值）
倾斜：italic

字体选择：`font-family`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* font-family:微软雅黑,黑体,宋体; */font-family:Georgia, 'Times New Roman', Times, serif;}</style>
</head>
<body><p>这是一个p标签</p><div>这是div</div>
</body>
</html>

常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,

具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体等……
字体系列：sans-serif、serif、monospace等……

注意：

从左往右按照顺序查找
如果字体名称中存在多个单词，推荐使用引号包裹最后一项
尽量使用系统常见自带字体

font连写

直接将字体系列的 font...属性写在一起

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* font-size: 40px;font-weight: 900;font-style: italic; *//* font 连写 *//* font : style weight size family;连写的顺序 *//* font连写：- 按照顺序写- 只能省略前两个属性（style、weight）*/font: italic 900 90px 黑体 ;/* font: 900px 宋体; */}</style>
</head>
<body><p>这是p标签</p>
</body>
</html>

注意：

font连写时按照顺序写：`font : style weight size family;`
font连写可以省略前2个属性（style、weight）

3.4.2 🏓文本样式

首先缩进：`text-indent`

可以跟数值px
可以指定字：em(一个em 表示一个字大小)

对齐方式：`text-align`

居中:center
右对齐：right
左对齐：left

文本修饰：`text-decoration`

underline:下划线
line-through:删除线
overline:上划线
none:去掉所有文本修饰

<!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{/* 首先缩进：text-indentpx：像素值*//* text-indent: 40px; */text-indent: 2em;/*em:一个字*//* 对齐：居中:center 右对齐：right左对齐：left*/text-align: left;/* 文本修饰：text-decorationunderline:下划线line-through:删除线overline:上划线none:去掉所有文本修饰*/text-decoration: underline;}div{text-decoration:line-through;}span{text-decoration: overline;}.p1{text-decoration: none;}</style>
</head><body><p class="p1">前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。</p><p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p><div>这是div标签</div><br><span>这是span</span>
</body></html>

3.4.3 🎗️行高

每一行字体所占的高度（`line-height`）

行高取值：

数值+px
em（一个em就表示一个字的大小）
font-size的倍数(一般情况下，浏览器默认字体大小是 16px)

可以font连写：font : style weight size/line-height family ;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 行高 */p{/* line-height: 30px; *//* line-height: 3em; */line-height: 4;/*谷歌默认16px */}   </style>
</head>
<body><p>前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。</p>
</body>
</html>

03-CSS基础选择器

3.1 CSS基础认知🍎 3.1.1 👁️‍🗨️CSS概念 CSS：层叠样式表（Cascading style sheets)，为网页标签增加样式表现的语法格式： 选择器{属性名:属性值; <!--每一个…...

编程日记 2023/11/17 0:12:39

【ROS】RViz2源码分析（二）：main函数及编译配置详解

【ROS】郭老二博文之：ROS目录 1、main函数 #include <memory> #include <string> #include <vector>#include <QApplication>...

编程日记 2023/11/17 0:11:39

Vue.js的生命周期钩子

聚沙成塔每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

编程日记 2023/11/17 0:10:38

第3章：搜索与图论【AcWing】

文章目录图的概念图的概念图的分类有向图和无向图连通性连通块重边和自环稠密图和稀疏图参考资料图的存储方式邻接表代码邻接矩阵 DFS全排列问题题目描述思路回溯标记剪枝代码时间复杂度 [N 皇后问题](https://www.luogu.com.cn/problem/P1219)题目描述全排列思路 O ( n ! …...

编程日记 2023/11/17 0:08:35

C++ Qt 学习（七）：Qt 线程与并发

1. Qt 创建线程的三种方法 1.1 方式一：派生于 QThread 派生于 QThread，这是 Qt 创建线程最常用的方法，重写虚函数 void QThread::run()，在 run() 写具体的内容，外部通过 start 调用，即可执行线程体 run() …...

编程日记 2023/11/17 0:07:33

Django框架之模板层

【一】Django模板系统官方文档：官方文档【二】常用语法只需要记两种特殊符号： {{ }}和 {% %} 变量相关的用{逻辑相关的用{%%}。【三】变量在Django的模板语言中按此语法使用： {{ 变量名 }}。当模版引擎遇到一个变量，它…...

编程日记 2023/11/17 0:06:32

【AI视野·今日Robot 机器人论文速览第六十五期】Mon, 30 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 30 Oct 2023 Totally 18 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Gen2Sim: Scaling up Robot Learning in Simulation with Generative Models Authors Pushkal Katara, Zhou Xian, Katerina F…...

编程日记 2023/11/17 0:05:31

LuatOS-SOC接口文档(air780E)--otp - OTP操作库

otp.read(zone, offset, len)# 读取指定OTP区域读取数据参数传入值类型解释 int 区域, 通常为0/1/2/3, 与具体硬件相关 int 偏移量 int 读取长度, 单位字节, 必须是4的倍数, 不能超过4096字节返回值返回值类型解释 string 成功返回字符串, 否则返回nil 例…...

编程日记 2023/11/17 0:04:30

为什么LDO一般不用在大电流场景？

首先了解一下LDO是什么？ LDO（low dropout regulator，低压差线性稳压器）或者低压降稳压器，它的典型特性就是压降。那么什么是压降？ 压降电压 VDO 是指为实现正常稳压，输入电压 VIN 必须高出所…...

编程日记 2023/11/17 0:03:29

Adobe家里的“3D“建模工 | Dimension

今天，我们来谈谈一款在Adobe系列中比肩C4D的高级3D软件的存在—— Dimension。 Adobe Dimension ，其定位是一款与Photoshop以及Illustrator相搭配的3D绘图软件。 Adobe Dimensions与一般的3D绘图软件相较之下，在操作界面在功能上有点不大相同…...

编程日记 2023/11/17 0:02:28

MIB 6.1810实验Xv6 and Unix utilities(2)sleep

难度:easy Implement a user-level sleep program for xv6, along the lines of the UNIX sleep command. Your sleep should pause for a user-specified number of ticks. A tick is a notion of time defined by the xv6 kernel, namely the time between two interrupts f…...

编程日记 2023/11/17 0:01:26