前端知识补充—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 智能问答…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...








