Css基础内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<!-- <link rel="stylesheet" href="Html5与Css3\CSS\my.css"> -->
<!-- link引入外部样式表:rel:关系.样式表,敲完link直接按回车就行 -->
<!-- <style>
/* 写css代码 */
p{
color:red
}
</style> -->
</head>
<body>
<!-- css的定义:css就是层叠样式表是一种样式表语言,用来描述html文档的呈现美化内容
书写位置:title标签下方添加style双标签,style标签里面书写css代码
规则:选择器{属性名:属性值;}
-->
<p>体验css</p>
<!-- <div style='color:red;font-size:20px'>这是div标签</div> -->
<!--用css把段落变红 -->
<!-- CSS引入方式
内部样式表:css代码写在style标签里面
外部样式表:css代码写在单独的css文件中(.css),在html使用link标签引入
<link rel = 'stylesheet'href='./my.css'>
行内样式:配合JavaScript使用,写在标签的style属性值里
<div style='color:red;font-size:20px'>这是div标签</div>
-->
<!-- 选择器
作用:查找标签,设置样式
1.标签选择器:使用标签名作为选择器,选中同名标签设置相同样式
2.类选择器:查找标签,差异化设置标签的显示效果
特点:一个类选择器可以给多个标签使用,一个标签可以使用多个类名,类名用空格隔开
注意:类名自定义,尽量用英文命名
开发习惯:类名见面知意,多个单词用-连接
步骤:定义类选择器 .类名
使用类选择器 标签添加class='类名'
<style>
.red{
color:red;
}
</style>
如<div class='red'>变红</div>
3.id选择器:
查找标签,差异化设置标签的显示效果
id选择器一般配合JavaScript使用,很少用来设置css样式
步骤:
定义id选择器:#id名
使用id选择器:标签添加id='id名'
#id{
color:red;
}
4.通配符选择器:
通配符选择器:*,不需要调用,浏览器自动查找页面所以标签,设置相同的样式
*{
color:red;
}
-->
<!-- 画盒子
属性:
width:宽度
height:高度
background-color:背景色
-->
<!-- 网页的文字效果
字体大小:font-size
属性值:文字尺寸,常用单位是px
属性必须有单位,否则不生效
{
font-size:30px;
}
字体粗细:font-weight
属性值:数字或关键字
正常:normal / 400
加粗:bold / 700
{
font-weight:400;
}
字体倾斜:font-style
属性值:
正常:normal
.text
{
color:red;
font-size: 30px;
font-style: normal;
}
.text1
{
color:blue;
font-weight:400;
font-style:italic;
}
行高:line-height
行高的测量方法:从一行文字的最顶端量到下一行文字的最顶端
作用:设置多行文本的间距
属性名:line-height
属性值:
数字+px
数字(当前标签font-size属性值的倍数)
.text2
{
line-height: 50px;
}
垂直居中技巧:行高属性值等于盒子高度属性值(只适用于单行文字)
字体族:font-family
属性值:字体名
可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找,属性最后设置一个字体族名,网页开发建议使用五衬线字体
.text2{
font-family: 楷体;;
}
字体复合属性:font
使用场景:设置网页文字公共样式
复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开
font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
注意:字号和字体值必须书写,否则font属性不生效
div{
font:italic 700 30px/2 楷体
}
文本缩进:text-indent
属性值:
数字+px
数字+em(推荐:1em = 当前标签的字号大小)
p{
text-indent:2em;
}
文本对齐:text-align
作用:控制内容水平对齐方式
居中的是文字内容而不是标签
属性值:
left:左对齐
center:居中对齐
right:右对齐
{
text-align:center;
}
水平对齐方式-图片
text-align本质是控制内容的对齐方式,属性要设置给内容的父级
<style>
div{
text-align:center;
}
</style>
<div>
<img>
</div>
修饰线:text-decoration
属性值:
none:去掉下划线
underline:下划线
line-through:删除线
overline:上划线
颜色:color
属性值:
颜色关键字:颜色英文单词:red,green,blue等
rgb表示法:rgb(r,g,b):r,g,b表示红绿蓝三原色,取值:0-255
rgba表示法:rgb(r,g,b,a):a表示透明度,取值:0-1
十六进制表示法:#RRGGBB:#000000,#ffcc00,简写:#000,#fc0
a{
text-decoration: none;
/* color:red; */
/* color:rgb(0, 100, 0); */
/* color:rgba(1, 0, 0, 0.3); */
color:#ff0000;
}
-->
<!--调试工具
作用:检查,调试代码;帮助程序员发现代码问题,解决问题
1.打开调试工具
浏览器窗口任意位置/选中标签 ——>鼠标右键——>检查
F12
2.使用调试工具
细节:
1.如果是错误的属性,有黄色感叹号
2.css属性的前面有多选框,如果勾选,这个属性生效,如果没有勾选这个属性不生效
-->
<p class="text">测试下划线</p>
<p class="text1">测试2删除线</p>
<p class="text2">上划线aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<a href="#">没有下划线</a>
</body>
</html>
相关文章:
Css基础内容
<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>CSS</title> <!-- <link rel"stylesheet" href"Html5与Css3\CSS\my.css"> --> <!-- link引入外部样式表:rel&…...
微服务(11)
目录 51.pod的重启策略是什么? 52.描述一下pod的生命周期有哪些状态? 53.创建一个pod的流程是什么? 54.删除一个Pod会发生什么事情? 55.k8s的Service是什么? 51.pod的重启策略是什么? 可以通过命令kub…...
连锁门店管理需要信息化系统
连锁门店管理的信息化系统可以提供以下功能,以满足连锁企业日常管理的需求: 1. 连锁线下收银:信息化系统可以提供线下收银功能,包括商品扫码、价格结算、支付方式选择等。通过系统记录每笔交易数据,方便对销售情况进行…...
UTF-8编码:打破字符编码的国界
UTF-8编码:打破字符编码的国界 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,让我们一同探讨编程世界中一项至关重要的技术——“UTF-…...
HTML进阶
列表、表格、表单 文章目录 列表、表格、表单01-列表无序列表有序列表定义列表 02-表格表格结构标签-了解合并单元格 03-表单input 标签input 标签占位文本单选框上传文件多选框下拉菜单文本域label 标签按钮 04-语义化无语义的布局标签有语义的布局标签 05-字符实体 01-列表 …...
基于策略模式和简单工厂模式实现zip、tar、rar、7z四种压缩文件格式的解压
推荐语 这篇技术文章深入探讨了基于策略模式和简单工厂模式实现四种常见压缩文件格式的解压方法。通过阅读该文章,你将了解到如何利用这两种设计模式来实现灵活、可扩展的解压功能,同时适应不同的压缩文件格式。如果你对设计模式和文件处理感兴趣或刚好…...
修改jenkins的目录(JENKINS_HOME)
默认JENKINS_HOME是/var/lib/jenkins/ 现要修改为/home/jenkins_data/jenkins 最开始 sudo cp -a /var/lib/jenkins/ /home/jenkins_data/ 然后如下操作: 1、首先 /etc/sysconfig/jenkins:jenkins配置文件,“端口”,“JENKIN…...
Bytebase:统一数据库 CI/CD 解决方案 | 开源日报 No.128
bytebase/bytebase Stars: 7.9k License: NOASSERTION Bytebase 是一个数据库 CI/CD 解决方案,为开发人员和 DBA 提供统一的工具来管理不同数据库系统的开发生命周期。其主要功能包括标准化操作流程、SQL 代码审查、GitOps 集成以及数据访问控制等。关键特性和核心…...
History对象常用方法
文章目录 一、什么是History对象二、使用History对象 一、什么是History对象 history 对象来保存浏览器历史记录信息,也就是用户访问的页面。浏览器的前进与后退功能本质上就是 history 的操作。history 对象记录了用户浏览过的页面,通过该对象提供的 A…...
修改源码,element的el-table合并,处理合并产生的hover样式问题
1、确认自己element-ui的版本号 2、此element-ui下的lib包是修改过hover样式的包,如何替换自己文件下的node_modules中的包 修改后将lib文件夹中文件替换你项目中/node_module/element-ui/Lib中的文件问题??如果替换开发环境中的node_module的包无法升级到测试环境,因为nod…...
IoT 物联网常用协议
物联网协议是指在物联网环境中用于设备间通信和数据传输的协议。根据不同的作用,物联网协议可分为传输协议、通信协议和行业协议。 传输协议:一般负责子网内设备间的组网及通信。例如 Wi-Fi、Ethernet、NFC、 Zigbee、Bluetooth、GPRS、3G/4G/5G等。这些…...
使用java备份和恢复SQLServer表数据
需求 近来工作中遇到一个问题,内网办公系统中的数据需要导出到外网中进行查询,外网的数据库中还有一些表存储外网的数据,因此无法使用全库备份恢复功能来满足需求。即只从内网数据库中导出若干表的内容至外网数据库的对应表。 其他解决方案…...
27 UVM queue
uvm_queue类构建一个动态队列,该队列将按需分配并通过引用传递。 uvm_queue类声明: class uvm_queue #( type T int ) extends uvm_object 1 uvm_queue class hierarchy 2 uvm_queue class Methods 3 UVM Queue Example 在下面的示例中,…...
聊聊自动化测试的分层实践
技术群里,有同学聊起了各自在实践自动化测试时遇到的各种问题,最典型的就是落地难度和投入产出比。毕竟在当前这个时间节点,单纯的技术实践如果不能带来实际可见的业务价值,确实很影响个人绩效和团队产出。 这篇文章,…...
LVS那点事
LVS 原理 IPVS LVS 的 IP 负载均衡技术是通过 IPVS 模块来实现的,IPVS 是 LVS 集群系统的核心软件,它的主要作用是:安装在 Director Server 上,同时在 Director Server 上虚拟出一个 IP 地址,用户必须通过这个虚拟的…...
2022-2023年度广东省职业院校学生专业技能大赛“软件测试”赛项接口测试训练题目
接口测试 新增接口脚本编写和执行测试,并执行脚本。 (1)商品单位添加接口描述如下: 接口功能:提供商品单位新增处理。 接口地址(根据实际系统IP及端口自行替换): http://XX.XX.XX.XX:XXXX/prod-api/manager/category/add。 请求方式:POST。 请求参数:...
[Python][LeetCode]28. 找出字符串中第一个匹配项的下标
给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始)。如果 needle 不是 haystack 的一部分,则返回 -1 。 示例 1: 输入:haystack &quo…...
Prometheus监控mysql
docker-compose.yml 创建mysql mkdir/data/mysql -pcat > /data/mysql/docker-compose.yml << EOF version: 3.1 services:db:image: mysql:8.0restart: alwayscontainer_name: mysqlenvironment:TZ: Asia/ShanghaiLANG: en_US.UTF-8MYSQL_ROOT_PASSWORD: 123456comm…...
骑砍战团MOD开发(30)-游戏大地图map.txt
骑砍1战团mod开发-大地图制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1rz4y1c7wH/ 一.骑砍游戏大地图 骑砍RTS视角游戏大地图 大地图静态模型(map.txt) 军团/城镇图标(module_parties.py). 骑砍大地图的战争迷雾和天气通过API进行管理和控制: # Weather-h…...
关于 bringup sensor 时,曝光时间异常的问题排查
1、问题背景 这两天在配置 sc223a 这颗 sensor 的驱动,按 datasheet 的要求配置 sensor 的曝光后,发现最大曝光时间增加了一倍, sensor setting 用的是30fps ,理论上最大的绝对曝光时间应该是 33ms 才正确,但实际用 …...
linux用户态与内核态通过字符设备交互
linux用户态与内核态通过字符设备交互 简述 Linux设备分为三类,字符设备、块设备、网络接口设备。字符设备只能一个字节一个字节读取,常见外设基本都是字符设备。块设备一般用于存储设备,一块一块的读取。网络设备,Linux将对网络…...
如何高效查询文件:Linux 下的多种方法详解
如何高效查询文件:Linux 下的多种方法详解 在日常工作中,我们经常需要查找文件,无论是寻找特定的代码文件、配置文件还是其他文档。Linux 提供了多种强大的命令和工具,通过巧妙地使用管道符,我们可以将这些命令组合起来…...
记矩阵基础概念
转自up:Naruto_Qcsdn:三维空间几何变换矩阵 先贴个站里分享的基础概念。 learn form 肥猫同学VFX b站:会用transform就会用矩阵 移动 旋转 缩放 1.transofrm ——输出变化矩阵 可以移动transform查看变化去理解 位移 缩放 旋转 由此—…...
用html,js和layui写一个简单的点击打怪小游戏
介绍: 一个简单的打怪小游戏,点击开始游戏后,出现攻击按钮,击败怪物后可以选择继续下一关和结束游戏。 继续下一个怪兽的血量会增加5点,攻击按钮会随机变色。 效果图: html代码: <!DOCTYPE…...
[线代]不挂科猴博士
行列式的性质 行列式的计算及应用 矩阵的运算上(加减,相乘,取行列式) 矩阵的运算下(转置,逆,秩) 向量组与线性空间 解方程组...
扩散式过滤器 水泵角通除污器 0阻力过滤器直角过滤器工作原理
1:扩散式除污器过滤器介绍 扩散除污器是一种在多个领域都有应用的设备,例如在泵站中用于拦截介质中的杂质,净化介质,保护管路,提高水泵效率,延长水泵寿命等。它还可以方便地进行变径处理,可以…...
MetalLB:本地Kubernetes集群的LoadBalancer负载均衡利器
背景 在本地集群进行测试时,我们常常面临一个棘手的问题:Service Type不支持LoadBalancer,而我们只能选择使用NodePort作为替代。这种情况下,我们通常会配置Service为NodePort,并使用externalIPs将流量导入Kubernetes…...
C++判定终端ip和目标ip是否在同一局域网内
程序如下:用于判断给定的终端 IP、子网掩码和目标 IP 是否在同一局域网内。请注意,这个程序假设 IP 地址是用整数表示的。 #include <iostream> #include <sstream> #include <vector> #include <bitset>// Function to check …...
深入解析 可空值类型
前言: 问:为什么会有可空值类型的诞生? 答:应对在某些特定场景中获取的信息可能是不完整的。 C# 1中的可空值类型 在C#1中没有对应的表示Null值的方法。当时普遍都是采用其他方式。第一种在数据缺失的情况下给其一个默认值。第…...
esp32idf使用thingscloud例程
对于不同的消息类型,API 如下: 消息类型 HTTP Method HTTP URL 设备上报属性 POST /device/v1//attributes 设备获取属性 GET /device/v1//attributes 设备上报事件 POST /device/v1//event/report 您只需要将以上的 HTTP URL 和接入点拼接即可获得最终…...
记一次应急响应练习(Linux)
记一次应急响应练习(Linux) Linux: 请提交攻击者的IP地址 答: 192.168.31.132 思路: 通过查看历史命令和开放的8080端口看到这台主机上运行的是Tomcat服务。并且在历史命令中看到了Tomcat的安装路径。那么就算是找到了日志的查看点了&#x…...
Pandas教程(四)—— 分层索引及数据联合
1.分层索引 分层索引就是在一个轴上拥有多个(两个及以上)索引级别,能以低维度形式处理高维度数据。 行索引有两层 1.1 分层索引的创建 1.1.1 方式一:直接设置 1)在创建series、dataframe或读取文件时时,行…...
小梅哥Xilinx FPGA学习笔记16——FSM(状态机)的学习
目录 一、 状态机导读 1.1 理论学习 1.2 状态机的表示 1.3 状态机编码 1.4 状态机描述方式 二 、实战演练一(来自野火) 2.1 实验目标 2.2 模块框图 2.3 状态转移图绘制 2.4 设计文件 2.5 仿真测试文件 2.6 仿真结果 三、 实战演练二&…...
vol----学习随记!!!
目录 一、代码生成1.先新建一个功能的对应的代码配置各项解释: 2.后设置配置菜单3.再点保存,生成vue页面,生成model,生成业务类4.再通过菜单设置编写系统菜单 一、代码生成 1.先新建一个功能的对应的代码配置 各项解释ÿ…...
HarmonyOS4.0系统性深入开发10卡片事件能力说明
卡片事件能力说明 ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互,当前支持router、message和call三种类型的事件,仅在卡片中可以调用。 接口定义:postCardAction(component: Object, action: Object): void 接口…...
openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程
文章目录 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 openGauss学习笔记-181 openGauss 数据库运维-升级-升级流程 本章介绍升级到该版本的主要升级过程。 图 1 升级流程图 说明: 本文档中描述的时间仅供参考,实际操作时间以现场情况…...
提前应对威胁
通过新的《2023-2028 年荷兰国际网络安全战略》,荷兰政府在面对国家和犯罪分子持续构成的网络威胁时展现了责任和机构。它渴望将民主、人权和规范放在首位,并寻求维护全球开放、自由和安全的互联网。该战略明确了政府在国内实施打击的意愿和能力…...
C语言与人生:数组交换和二分查找
少年们,大家好。我是博主那一脸阳光,今天和分享数组交换和二分查找。 前言:探索C语言中的数组交换操作与二分查找算法 在计算机编程领域,特别是以C语言为代表的低级编程语言中,对数据结构的理解和熟练运用是至关重要的…...
Python实现【亚马逊商品】数据采集
前言 亚马逊公司,是美国最大的一家网络电子商务公司,位于华盛顿州的西雅图 是网络上最早开始经营电子商务的公司之一,亚马逊成立于1994年 今天教大家用Python批量采集亚马逊平台商品数据(完整代码放在文末) 地址&#…...
Git使用教程 gittutorial
该教程对该文章的翻译:https://git-scm.com/docs/gittutorial 本文介绍怎用使用 Git 导入新的工程、修改文件及如何其他人同步开发。 首先, 可以使用以下指令获取文档帮助 git help log笔者注:不建议看这个文档,标准的语法介绍…...
有了向量数据库,我们还需 SQL 数据库吗?
“除了向量数据库外,我是否还需要一个普通的 SQL 数据库?” 这是我们经常被问到的一个问题。如果除了向量数据以外,用户还有其他标量数据信息,那么其业务可能需要在进行语义相似性搜索前先根据某种条件过滤数据,例如&a…...
信息网络协议基础-IPv6协议
文章目录 概述为什么引入IP服务模型IPv4的可扩展性问题解决方法***CIDR(Classless Inter-Domain Routing, 无类别域间寻路)前缀汇聚***前缀最长匹配***NAT(网络地址转换)存在的问题解决方案路由表配置***局限性IPv6协议头标IPv6地址表示前缀类型单播地址链路局部地址(Link-Loca…...
VC++ ado 实现单表CURD
继续修改前文的资产管理源码; 新建一个数据库sds;把代码中的数据库连接改为连接此库; 新建下图一个表; 把之前的资产类别管理对话框改为下图所示;对话框ID也改为下图; 资产类别管理菜单和ID改为下图; 直接修改资产类别管理对话框类不太方便,新建一个对话框类,没有关联…...
C#使用switch多路选择语句判断何为季节
目录 一、 switch语句 二、示例 三、生成 一、 switch语句 switch语句是多路选择语句,它通过一个表达式的值来使程序从多个分支中选取一个用于执行的分支。 switch表达式的值只可以是整型、字符串、枚举和布尔类型。 switch语句中多个case可以使用一个break。 在…...
可爱的魔法曲线 Lovely Magical Curves(12年开始只有5个人AC)
一起来交流编程吧!【CSDN app】:http://qm.qq.com/cgi-bin/qm/qr?_wv1027&k3svdDJTlkD76TRRShbxYCYK1zK1c8cyF&authKeyv1pxp6rS8AA4SRy7bflJl9LIwp8d5v0HOudw%2BDxHiWDRqZ1LzjeoBJH1Z1EXnl35&noverify0&group_code546881376 可爱的魔法…...
通过C++程序实现光驱的自动化刻录和读取
文章目录 ISO文件格式光盘的基本概念光盘种类特点DVDR光盘使用windows调用Linux调用Linux平台下用到的C库:读取设备驱动列表向光驱中写文件 数字存储媒体快速发展的今天,光驱的使用已经不像以前那样普及了。但是在数据备份、安装软件和操作系统、旧设备兼容等领域还…...
【电商项目实战】商品详情显示与Redis存储购物车信息
🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《电商项目实战》。🎯🎯 &am…...
概率论基础
1.概率论 1.1 随机事件与概率 1.1.1 基本概念 样本点(sample point): 称为试验 S S S的可能结果为样本点,用 ω \omega ω表示。 样本空间(sample space):称试验 S S S的样本点构成的集合为样本空间,用 Ω \Omega Ω表示…...
Mac电脑CMake安装和配置
1.从CMake官网下载dmg文件并且安装 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a43f1462b5f743b4ba0bf5302ee76066.png)...
FormData传送复杂数据
FormData 是一个用于创建表单数据对象的 JavaScript 类。它通常用于通过 JavaScript 发送表单数据,尤其是用于发送 AJAX 请求时非常有用。 使用 FormData 可以方便地构建一个以 multipart/form-data 格式提交的表单数据,这允许你在发送 XMLHttpRequest …...