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

CSS概念

news 2026/3/29 19:40:36

1、CSS与HTML结合方式

1.1 第一种方式内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。

优点:简单方便；
缺点:只能对一个标签进行修饰。

1.2 第二种方式内部样式

我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置
优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰
语法：选择器 {属性:值;属性:值}

1.3 第三种方式外部样式

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在<head>中使用<link>标签引用外部的css文件

还可以使用另一种引入css文件的方式：

<style> @import 'css/.css' 
</style>

关于外部导入css使用<link>与@import的区别?
1. 加载顺序不同
@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

2、CSS的使用

2.1CSS中的选择器

2.1.1 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称

2.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

2.1.3 id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

2.1.4 选择器组

2.1.5 派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

2.1.6 CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：

:active 向被激活的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */ 
a:visited {color: #00FF00} /* 已访问的链接 */ 
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 
a:active {color: #0000FF} /* 选定的链接 */

2.2 CSS基本属性

2.2.1 文本属性

指定字体：font-family : value;
字体大小：font-size : value；（注：px：像素；em：倍数）
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）;

2.2.2 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
```
	background-image: url('img/1.jpg');
```
background-repeat 设置背景图像的墙纸效果，是否及如何重复

repeat：在垂直方向和水平方向重复，为重复值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次

background-position 设置背景图像的起始位置
1：控制水平方向 x轴：正值，向右移动；负值，向左移动
2：控制垂直方向 y轴：正值，向下移动；负值，向上移动

	/* 图片向左移动50px，向下移动100px （可以为负值） */background-position:50px 100px;

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

默认值是 scroll：默认情况下，背景会随文档滚动
可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

background-attachment: fixed;

2.2.3 列表属性

CSS列表属性作用如下:

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

有两种类型的列表:

无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

none:无标记。(去除标记)
disc:默认。标记是实心圆。
circle:标记是空心圆。
square:标记是实心方块。
decimal:标记是数字。
decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。)
lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman:大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

2.2.4 边框属性(未完待续...)

CSS概念

1、CSS与HTML结合方式 1.1 第一种方式内联/行内样式就是在我们的HTML标签上通过style属性来引用CSS代码。优点:简单方便 ； 缺点:只能对一个标签进行修饰。 1.2 第二种方式内部样式我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在…...

编程日记 2023/8/26 8:45:18

淘宝API技术解析，实现关键词搜索淘宝商品（商品详情接口等）

淘宝提供了开放平台接口（API）来实现按图搜索淘宝商品的功能。您可以通过以下步骤来实现： 获取开放平台的访问权限：首先，您需要在淘宝开放平台创建一个应用，获取访问淘宝API的权限。具体的申请步骤和要求可以…...

编程日记 2023/8/26 8:44:17

Redis 7 教程数据类型基础篇

🌹 引导 Commands | Redishttps://redis.io/commands/Redis命令中心（Redis commands） -- Redis中国用户组（CRUG）Redis命令大全，显示全部已知的redis命令，redis集群相关命令，近期也会翻译过来,Redis命令参考，也可以直接输入命令进行命令检索。...

编程日记 2023/8/26 8:43:16

-bash: tree: command not found 的解决方法

在学习git操作时发现使用命令tree .git时显示错误在网上查阅资料后，发现可能是没有安装生成tree的应用，所以我们使用命令安装应用即可 sudo yum install -y tree像这样就是安装成功了我们再来试试问题解决了，成功显示出树形结构...

编程日记 2023/8/26 8:42:15

SPI总线协议

简述 SPI协议是一种芯片与芯片之间的通讯，全称是Serial Peripheral Interface SPI通讯采用一主多从模式，产生时钟的一侧称为主机，另一侧称为从机。只有一个主机（一般来说可以是微控制器/MCU），但是可以有一…...

编程日记 2023/8/26 8:41:13

ubuntu20.04：mysql主库 sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf # 修改完毕重启 sudo service mysql stop sudo service mysql start主库mysqld.cnf配置 [mysqld] ... # bind-address>->--- 127.0.0.1 # 注释掉，允许外部连接 # mysqlx-b…...

编程日记 2023/8/26 8:40:12

HTTP 服务器(基于go实现)

编写一个 HTTP 服务器，接收客户端 request，并将 request 中带的 header 写入 response header 解析HTTP请求头 import ("fmt""net/http" )func headers(w http.ResponseWriter, r *http.Request) {// 将request中的信息写入到 w中…...

编程日记 2023/8/26 8:39:11

【整数二分】

数的范围 #include<iostream> using namespace std; const int N 100000 11;int n; int q; int a[N];int key;int main(){cin>>n>>q;for(int i0;i<n;i)cin>>a[i];while(q--){cin>>key;//先去找左（大于等于）再去找右…...

编程日记 2023/8/26 8:38:10

开发一款AR导览导航小程序多少钱？ar地图微信小程序 ar导航源码

随着科技的不断发展，增强现实（AR）技术在不同领域展现出了巨大的潜力。AR导览小程序作为其中的一种应用形式，为用户提供了全新的观赏和学习体验。然而，开发一款高质量的AR导览小程序需要投入大量的时间、人力和技术资源…...

编程日记 2023/8/26 8:37:09

Shell 编程快速入门之函数基础知识

目录 shell函数基础知识函数定义函数名函数体参数返回值 return返回值的含义 return与echo返回值的区别可变参数函数自定义库函数定义库函数调用库函数执行结果递归函数阶乘函数斐波那契函数 shell函数基础知识函数定义函数名 Shell函数用…...

编程日记 2023/8/26 8:36:08

Flink流批一体计算（18）：PyFlink DataStream API之计算和Sink

目录 1. 在上节数据流上执行转换操作，或者使用 sink 将数据写入外部系统。 2. File Sink File Sink Format Types Row-encoded Formats Bulk-encoded Formats 桶分配滚动策略 3. 如何输出结果 Print 集合数据到客户端，execute_and_collect…...

编程日记 2023/8/26 8:35:07

03.sqlite3学习——数据类型

目录 sqlite3学习——数据类型 SQL语句的功能 SQL语法 SQL命令 SQL数据类型数字类型整型浮点型定点型decimal 浮点型 VS decimal 日期类型字符串类型 CHAR和VARCHAR BLOB和TEXT SQLite 数据类型 SQLite 存储类 SQLite 亲和类型(Affinity)及类型名称 Boo…...

编程日记 2023/8/26 8:34:06

LLM-chatgpt训练过程

流程简介主要包含模型预训练和指令微调两个阶段模型预训练：搜集海量的文本数据，无监督的训练自回归decoder； O T P ( O t < T ) O_TP(O_{t<T}) OTP(Ot<T)，损失函数CE loss指令微调：在输入文本中加入…...

编程日记 2023/8/26 8:33:05

【学习笔记】[ABC274Ex] XOR Sum of Arrays

有点难😅 真的是 A B C ABC ABC的难度吗😅 非常精妙的哈希题目。定义矩阵乘法： c i , j ⊕ ( a i , k & b k , j ) c_{i,j}\oplus (a_{i,k}\& b_{k,j}) ci,j⊕(ai,k&bk,j) 之所以可以矩阵乘法是因为满足 ( a ⊕ b )…...

编程日记 2023/8/26 8:32:04

抖音web频道爬虫

抖音web频道爬虫代码： <?php header(Content-Type:application/json; charsetutf-8);//抖音频道爬虫class DouyinChannel{private $app_id 1;private $spider_code 1;private $channels [["channel_name" > "热点","url"…...

编程日记 2023/8/26 8:31:03

sql中的替换函数replace()总结

1，表达式 --replace（）--语法: REPLACE ( string_expression , string_pattern , string_replacement )--参数：string_expression：字符串表达式string_pattern：想要查找的子字符串string_replacement&#…...

编程日记 2023/8/26 8:30:02

vue3 vite使用 monaco-editor 报错

报错：Unexpected usage at EditorSimpleWorker.loadForeignModule 修改配置： "monaco-editor-webpack-plugin": "^4.2.0",删除不用版本： "monaco-editor": "^0.28.1", 修改如下： opti…...

编程日记 2023/8/26 8:29:01

微信小程序获取蓝牙权限

要获取微信小程序中的蓝牙权限，您可以按照以下步骤进行操作： 1. 在 app.json 文件中添加以下代码： "permissions": { "scope.userLocation": { "desc": "需要获取您的地理位置授权以搜索…...

编程日记 2023/8/26 8:28:00

GE 8920-PS-DC安全模块

安全控制： 这个安全模块通常用于实现工业自动化系统中的安全控制功能。它可以监测各种安全参数，如机器运动、温度、压力等，以确保系统在安全范围内运行。 PLC兼容性： 通常，这种安全模块可以与可编程逻辑控制器&#x…...

编程日记 2023/8/26 8:26:59

UG\NX二次开发使用BlockUI设计对话框时，如何设置默认的开发语言？

文章作者：里海来源网站：王牌飞行员_里海_里海NX二次开发3000例,C\C++,Qt-CSDN博客简介： NX二次开发使用BlockUI设计对话框时，如何设置默认的代码语言？效果：方法：依次打开“文件”->“实用工具”->“用户默认设置”->“用户界面”->“操作记录”->“…...

编程日记 2023/8/26 8:25:58

如何永久保存微信聊天记录：3步实现数据自主管理的完整指南

如何永久保存微信聊天记录：3步实现数据自主管理的完整指南【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告项目地址: https://gitcode.com/GitHub_Trending/we/W…...

编程新知 2026/3/29 18:39:29

Mars3D新手必读：从零开始的开发者实战手册

1. 初识Mars3D：数字地球的新世界第一次打开Mars3D的场景编辑器时，那种震撼感至今难忘——就像小时候第一次转动地球仪，但这次是用代码在操控整个星球。作为国内领先的Web3D地理信息引擎，Mars3D用浏览器就能呈现毫米级精度的地形地…...

编程新知 2026/3/29 17:55:11

7个维度解锁洛雪音乐音源：从新手到专家的全方位指南

7个维度解锁洛雪音乐音源：从新手到专家的全方位指南【免费下载链接】lxmusic- lxmusic(洛雪音乐)全网最新最全音源项目地址: https://gitcode.com/gh_mirrors/lx/lxmusic- 洛雪音乐音源作为GitHub加速计划的重要组成，是一款专注于音乐资源聚合的…...

编程新知 2026/3/29 17:00:33

SeqGPT-560M代码补全能力展示：Python开发效率提升50%

SeqGPT-560M代码补全能力展示：Python开发效率提升50% 1. 引言作为一名长期与代码打交道的开发者，我深知代码补全工具的重要性。好的补全工具不仅能减少敲击键盘的次数，更能帮助我们避免低级错误、保持编码思路的连贯性。最近体验了SeqGPT-…...

编程新知 2026/3/29 16:32:25

开源ERP新选择：Odoo如何助力钢铁冶金企业实现数字化转型

Odoo开源ERP：钢铁冶金企业数字化转型的模块化引擎钢铁冶金行业正面临前所未有的转型压力——从环保合规到供应链波动，从劳动力成本上升到全球化竞争。在这个背景下，一套既能快速响应业务变化又能控制成本的ERP系统不再是奢侈品，…...

编程新知 2026/3/29 15:58:15

通义千问3-Reranker-0.6B入门指南：app.py核心逻辑解析+自定义路由扩展

通义千问3-Reranker-0.6B入门指南：app.py核心逻辑解析自定义路由扩展 1. 引言如果你正在寻找一个既轻量又强大的中文重排序模型，那么通义千问3-Reranker-0.6B绝对值得你花时间了解一下。这个只有6亿参数的模型，在文本检索和排序任务上的表…...

编程新知 2026/3/29 15:50:11

Phi-3-Mini-128K高并发服务架构设计：负载均衡与自动扩缩容策略

Phi-3-Mini-128K高并发服务架构设计：负载均衡与自动扩缩容策略你是不是也遇到过这种情况？自己部署的AI模型服务，平时用着挺好，一旦用户量稍微上来点，或者有人发了个长请求，服务就卡死甚至直接挂掉。然后就…...

编程新知 2026/3/29 13:10:27

EEVDF调度器完全调优指南：从lag公式推导到place_entity()参数配置

EEVDF调度器完全调优指南：从lag公式推导到place_entity()参数配置在Linux内核6.6版本中，EEVDF（Earliest Eligible Virtual Deadline First）调度器正式取代CFS成为默认进程调度算法。这一变革不仅带来了更精细的权重分配机制&…...

编程新知 2026/3/29 12:34:13

iOS日志与事件深度解析工具：iLEAPP技术架构与实战指南

iOS日志与事件深度解析工具：iLEAPP技术架构与实战指南【免费下载链接】iLEAPP iOS Logs, Events, And Plist Parser 项目地址: https://gitcode.com/gh_mirrors/il/iLEAPP 在移动设备取证和数据分析领域，iOS系统的复杂性一直是技术人员的挑战。面…...

编程新知 2026/3/29 11:49:43

UEFI启动全流程拆解：从按下电源键到系统加载的幕后故事

UEFI启动全流程拆解：从按下电源键到系统加载的幕后故事当你按下电脑的电源键，短短几秒内，一场精密的交响乐正在硬件深处悄然上演。这场演出的总指挥，正是现代计算机的启动管家——UEFI（统一可扩展固件接口&#xff0…...

编程新知 2026/3/29 11:17:17