前端知识补充—CSS
CSS介绍
什么是CSS
基本语法规范
CSS 要写到 style 标签中(后⾯还会介绍其他写法)style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换)
引入方式
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使⽤style属性, 属性值是css属性键值对 | <div style="color:red">红色</div> |
| 内部样式 | 定义<style>标签, 在标签内部定义css样式 | <style>h1{
}</style> |
| 外部样式 | 定义<link>标签, 通过href属性引⼊外部css⽂件 | <link rel="stylesheet" href="CSS文件目录"> |
规范
CSS选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性
CSS选择器主要分以下⼏种:
1)标签选择器 通过标签来选择
2)类选择器 通过class来选择(.class)
3)ID选择器 通过ID来选择(#ID)
4)复合选择器 对元素进行分类,通过class来标识类名
5)通用选择器 (通配符选择器) 对元素进行起名,通过ID来标识(ID不能重复)

<style>
div{
color:red;
} //标签选择器
.center{
color:red;
} //类选择器
#test{
color:red;
} //ID选择器
</style>
<div>已有账号?</div>
<sapn class="center">已有账号?</span>
<span class="center" id="test">已有账号?</sapn>span>
复合选择器——>有多个单选择器组成,选择器之间,使用 空格 隔开
.order li{
color:red;
}
<ol class="order">
<li style=" color:blue;">1111</li>
<li>2222</li>
<li>3333</li>
</ol>
通配符选择器
/* 设置⻚⾯所有元素 , 颜⾊为红⾊ */* {color : red;}
注意:
常见的CSS样式
< div class = "text" > 我是⽂本 </ div >![]()
1)color: 设置字体颜⾊
.text{
color:red;
}
2)font-size: 设置字体⼤⼩
.text{
color:red;
font-size: 32px;
}
3)border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
}
分别为边框粗细, 边框样式, 边框颜⾊![]()
.text{
border-width: 1px;
border-style: solid;
border-color: purple;
} //两处的代码是等价的
4)width / height
块级元素是HTML标签的⼀种显示模式, 对应的还有行内元素常⻅块级元素: h1-h6, p, div 等常⻅⾏内元素: a span块级元素独占⼀⾏, 可以设置宽⾼⾏内元素不独占⼀⾏, 不能设置宽⾼
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
}
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
margin: 10px 20px 30px 40px;
}
.text{
color:red;
font-size: 32px;
border: 1px solid blue;
width: 200px;
height: 100px;
padding-right: 10px;
padding-left: 20px;
margin: 10px 20px 30px 40px;
}
html{
padding: 20px;
}
![]()
相关文章:
前端知识补充—CSS
CSS介绍 什么是CSS CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式 CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离 基本语法规范 选择器 {⼀条/N条声明} 1)选择器决定针对谁修改…...
企业架构学习笔记-数字化转型
1. 企业数字化发展阶段 案例1.业务部门“点菜”,IT部门叫苦 随着企业信息化进程的不断推进,IT部门的角色和面临的挑战也在发生显著变化。在信息化建设的初级阶段,确实存在IT部门需要积极引导和说服业务部门重视信息技术价值的情况。当时&am…...
Linux网络——TCP的运用
系列文章目录 文章目录 系列文章目录一、服务端实现1.1 创建套接字socket1.2 指定网络接口并bind2.3 设置监听状态listen2.4 获取新链接accept2.5 接收数据并处理(服务)2.6 整体代码 二、客户端实现2.1 创建套接字socket2.2 指定网络接口2.3 发起链接con…...
Vue3之状态管理Vuex
Vuex作为Vue.js的官方状态管理库,在大型或复杂的前端项目中扮演着至关重要的角色。本文将从Vuex的原理、特点、应用场景等多个方面进行深入解析,并通过代码示例展示如何在Vuex中实现特定功能。 一、Vuex原理 Vuex是一个专为Vue.js应用程序开发的状态管…...
DPO(Direct Preference Optimization)算法解释:中英双语
中文版 DPO paper: https://arxiv.org/pdf/2305.18290 DPO 算法详解:从理论到实现 1. 什么是 DPO? DPO(Direct Preference Optimization)是一种直接基于人类偏好进行优化的算法,旨在解决从人类偏好数据中训练出表现…...
Hostapd2.11解析笔记
最近在调试Hostapd,尝试通过配置使能一个支持MLO的AP,不过不知道hostapd conf里面哪些选项开启后可以使能,所以对Hostapd做一个整体解析. 简介 hostapd 是用于接入点和身份验证服务器的用户空间守护程序。它实现 IEEE 802.11 接入点管理、IEEE 802.1X/WPA/WPA2/WPA3/EAP 身份…...
js控制文字溢出显示省略号
.text{display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }本人有个需求就是在一个盒子内有一段文本,然后控制文本显示两行,第二行要显示…...
WPF+MVVM案例实战与特效(四十七)-实现一个路径绘图的自定义按钮控件
文章目录 1、案例效果2、创建自定义 PathButton 控件1、定义 PathButton 类2、设计样式与控件模板3、代码解释3、控件使用4、直接在 XAML 中绑定命令3、源代码获取4、总结1、案例效果 2、创建自定义 PathButton 控件 1、定义 PathButton 类 首先,我们需要创建一个新的类 Pat…...
操作002:HelloWorld
文章目录 操作002:HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端(生产者)②消息接收端(消费者)③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面 操作…...
odoo中@api.model, @api.depends和@api.onchange 装饰器的区别
文章目录 1. api.model用途特点示例 2. api.depends用途特点示例 3. api.onchange用途特点示例 总结 在 Odoo 中,装饰器(decorators)用于修饰方法,以指定它们的行为和触发条件。api.model、api.depends 和 api.onchange 是三个常用…...
有哪些精益工具可以帮助企业实现转型?
为了在激烈的市场竞争中立于不败之地,许多企业开始寻求通过精益转型来优化运营、降低成本、提高效率和客户满意度。然而,精益转型并非一蹴而就,而是需要一系列精益工具的辅助,这些工具能够帮助企业识别浪费、优化流程、提升质量&a…...
以太网帧结构
以太网帧结构 目前,我们局域网当中应用最广的技术或者协议啊,就是以太网。我们首先来看一下以太网的真结构。这块内容这里边再系统的来给大家去展开说一下,以太网真格式就如下面这个图。所示前面有八个字节,是用于时钟同步的&…...
QT调用Sqlite数据库
QT设计UI界面,后台访问数据库,实现数据库数据的增删改查。 零售商店系统 数据库表: 分别是顾客表,订单详情表,订单表,商品表 表内字段详情如下: 在QT的Pro文件中添加sql,然后添加头…...
前端
前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本:文本,声音,图片,视频,表格,链接 标记:由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…...
【Git】—— 使用git操作远程仓库(gitee)
目录 一、远程仓库常用命令 1、从远程仓库克隆项目 2、查看关联的远程仓库 3、添加关联的远程仓库 4、移除关联的远程仓库 5、将本地仓库推送到远程仓库 6、从远程仓库拉取项目 二、分支命令 1、查询分支 2、创建分支 3、切换分支 4、推送到远程分支 5、合并分支 …...
Paddler负载均衡器
Paddler负载均衡器 Paddler本身是用Go语言编写的,没有直接的Python接口,但可以通过以下方式在Python中使用: 执行命令行调用 在Python中可以使用 subprocess 模块来调用Paddler的命令行工具,实现负载均衡功能 。例如: import subprocessdef start_paddler_agent():com…...
OSCP - Proving Grounds - Slort
主要知识点 文件包含 windows的reveseshell 具体步骤 执行nmap,依旧是很多端口开放,尝试了ftp,smb等均失败 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-10-13 12:00 UTC Nmap scan report for 192.168.53.53 Host is up (0.00095s latency). Not sho…...
YoloV9改进策略:Head改进|DynamicHead,利用注意力机制统一目标检测头部|即插即用
摘要 论文介绍 本文介绍了一种名为DynamicHead的模块,该模块旨在通过注意力机制统一目标检测头部,以提升目标检测的性能。论文详细阐述了DynamicHead的工作原理,并通过实验证明了其在COCO基准测试上的有效性和效率。 创新点 DynamicHead模块的创新之处在于它首次尝试在一…...
BFD综合详细实验配置案例
前言 本实验的目的是通过配置BGP(边界网关协议)、OSPF(开放式最短路径优先协议)、VRRP(虚拟路由冗余协议)以及BFD(双向转发检测)等网络协议,模拟企业级网络环境中的多协…...
自然语言处理与知识图谱的融合与应用
目录 前言1. 知识图谱与自然语言处理的关系1.1 知识图谱的定义与特点1.2 自然语言处理的核心任务1.3 二者的互补性 2. NLP在知识图谱构建中的应用2.1 信息抽取2.1.1 实体识别2.1.2 关系抽取2.1.3 属性抽取 2.2 知识融合2.3 知识推理 3. NLP与知识图谱融合的实际应用3.1 智能问答…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...








