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

10.31 知识总结(选择器、css属性相关)

一、选择器

    1.1 属性选择器

通过标签的属性来查找标签,标签都有属性
<div class="c1" id="d1"></div>

id值和class值是每个标签都自带的属性,还有另外一种:自定义属性
<div class="c1" id="d1" username='kevin' password='123'></div>
针对于username='kevin' password='123'属性就是div标签的自定义属性

   1.2  分组和嵌套选择器

 分组选择器使用逗号隔开,所有的选择器都是并列的
 组合(嵌套)选择器使用的是空格隔开,选择器不是并列的,最终生效的还是最后一个选择器

  1.3  伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

 1.4 伪元素选择器

 p:first-letter {
            font-size: 48px;
            color: red;
}

    /*在每个<p>元素之前插入内容*/
    p:before {
        content: "你好啊";
        color: red;
    }

        /*在每个<p>元素之后插入内容*/
 p:after {
    content: "[?]";
    color: blue;
}

before和after多用于清除浮动。它可以解决浮动中得父标签塌陷问题!!!

注: 选择器的优先级

比较选择器的优先级高低
1. 选择器相同的情况下:
         离谁越近,就听谁的,就近原则.
2. 选择器不同的情况下:
    行内选择器 >>>    id选择器  >>>   类选择器  >>>  标签选择器

二、  CSS属性相关

       2.1  宽和高

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
# 块级标签才能设置宽度,内联标签的宽度由内容来决定。
"""默认情况下,只有块儿级元素才能设置长、宽,内联元素不能设置,设置了也不错,就是没有效果而已"""

     2.2   字体属性

font-weight用来设置字体的字重(粗细)。
值                    描述
normal                默认值,标准粗细
bold                粗体
bolder                更粗
lighter                更细
100~900                设置具体粗细,400等同于normal,而700等同于bold
inherit                继承父元素字体的粗细值

# 文本颜色
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
● 十六进制值 - 如: #FF0000
● 一个RGB值 - 如: RGB(255,0,0)
● 颜色的名称 - 如:  red
还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。

# 文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
left        左边对齐 默认值
right        右对齐
center        居中对齐

# 文字装饰
text-decoration
none            默认。定义标准的文本。
underline        定义文本下的一条线。
overline        定义文本上的一条线。
line-through    定义穿过文本下的一条线。

# 背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x:背景图片只在水平方向上平铺
 repeat-y:背景图片只在垂直方向上平铺
 no-repeat:背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

# 支持简写
background:#336699 url('1.png') no-repeat left top;
    
# 边框
边框属性 
● border-width
● border-style
● border-color
#i1 {
  border: 2px solid red;
}

border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。

 2.3  display属性

值    意义
## display:"none"    HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"    默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline"    按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"    使元素同时具有行内元素和块级元素的特点。

相关文章:

10.31 知识总结(选择器、css属性相关)

一、选择器 1.1 属性选择器 通过标签的属性来查找标签&#xff0c;标签都有属性 <div class"c1" id"d1"></div> id值和class值是每个标签都自带的属性&#xff0c;还有另外一种&#xff1a;自定义属性 <div class"c1" id"d1…...

【网络协议】聊聊TCP如何做到可靠传输的

网络是不可靠的&#xff0c;所以在TCP协议中通过各种算法等机制保证数据传输的可靠性。生活中如何保证消息可靠传输的&#xff0c;那么就是采用一发一收的方式&#xff0c;但是这样其实效率并不高&#xff0c;所以通常采用的是累计确认或者累计应答。 如何实现一个靠谱的协议&…...

记一次flask框架环境综合渗透测试

PART.01 登入过程 访问靶场地址http://101.43.22.226/?name2023&#xff0c;框架为Flask。 2. 测试存在ssti注入。 3. 直接执行以下命令。 http://101.43.22.226/?name{% for c in [].class.base.subclasses() %} {% if c.name ‘catch_warnings’ %} {% for b in c.i…...

博弈论学习笔记(2)——完全信息静态博弈

前言 这部分我们学习的是完全信息静态博弈&#xff0c;主要内容包括博弈论的基本概念、战略式博弈、Nash均衡、Nash均衡解的特性、以及Nash均衡的应用。 零、绪论 1、什么是博弈论 1&#xff09;博弈的定义 博弈论&#xff1a;研究决策主体的行为发生直接相互作用时候的决策…...

【COMP304 LEC4 LEC5】

LEC 4 1. Truth-Functionality Propositional logic 的connectives&#xff08;连接词&#xff09;are truth-functional 但是&#xff0c;有时候的描述不是true-functional的&#xff0c;比如&#xff1a;"Knowing that", "It is necessary that",&quo…...

表白墙(服务器)

目录 0.需求 1.创建Maven项目 2.给pom.xml内引入三个依赖 3.完善目录&#xff0c;并补充web.xml中的内容 4.编写代码 后端代码 ​编辑前端代码 5.引入数据库 创建message表 创建工具类 往MessageServlet类中添加方法 0.需求 前面写好了表白墙页面&#xff0c;但存…...

在 Mac 中卸载 Node.js

在 Mac 中卸载 Node.js&#xff0c;可以选择以下两种方法&#xff1a; 使用命令行卸载 Node.js 第一步&#xff1a;打开终端&#xff0c;输入以下命令显示 Node.js 的安装路径&#xff1a; which node 执行该命令后&#xff0c;会显示安装路径&#xff1a;/usr/local/bin/n…...

Hafnium构建选项及FVP模型调用

安全之安全(security)博客目录导读 目录 一、Hafnium构建选项 二、FVP模型调用 一、Hafnium构建选项 本节解释了在支持基于FF-A的SPM (SPMD位于EL3, SPMC位于S-EL1、S-EL2或EL3)的情况下进行构建时涉及的TF-A构建选项:...

第44天:前端及html、Http协议

前端 前端是所有跟用户直接打交道的都可以称之为是前端&#xff0c;比如&#xff1a;PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容。 前端的用处&#xff1a; 学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等),能够写一些简单的…...

shell_63.Linux产生信号

Linux 系统信号 信号 值 描述 1 SIGHUP 挂起&#xff08;hang up&#xff09;进程 2 SIGINT 中断&#xff08;interrupt&#xff09;进程 3 SIGQUIT 停止&#xff08;stop&#xff09;进程 9 …...

互联网摸鱼日报(2023-11-01)

互联网摸鱼日报(2023-11-01) 36氪新闻 毫末智行张凯&#xff1a;2023年高阶智能辅助驾驶市场迎来大爆发 ​撕开三星、金士顿市场&#xff0c;国产老牌存储器企业出海三年&#xff0c;营收翻三倍&#xff5c;insight全球 给医生一双“透视眼”&#xff0c;「锦瑟医疗」专注开…...

AR的光学原理?

AR智能眼镜的光学成像系统 AR眼镜的光学成像系统由微型显示屏和光学镜片组成&#xff0c;可以将其理解为智能手机的屏幕。 增强现实&#xff0c;从本质上说&#xff0c;是将设备生成的影像与现实世界进行叠加融合。这种技术基本就是通过光学镜片组件对微型显示屏幕发出的光线…...

语义分割 实例分割的异同点

语义分割和实例分割是计算机视觉领域中两个相关但不同的任务&#xff0c;它们都涉及对图像像素进行分类和标记&#xff0c;但关注的对象和目标有所不同。 目标对象&#xff1a; 语义分割&#xff1a;语义分割的目标是将图像中的每个像素标记为对应的语义类别&#xff0c;即将…...

C++学习初探---‘C++面向对象‘-继承函数重载与运算符重载

文章目录 前言继承继承是什么&#xff1f;三种访问权限的继承&#xff1a; 函数重载与运算符重载函数重载运算符重载可重载运算符&不可重载运算符 前言 第三次学习记录&#xff0c;依旧是C面向对象的内容。 继承 继承是什么&#xff1f; C中的继承是一种面向对象编程&am…...

Linux下搭建SRS服务器环境

搭建环境 Ubuntu的Linux环境srs 安装源码&#xff1a;源码地址为&#xff1a;GitHub - ossrs/srs at 3.0release 搭建步骤 下载srs源码 git clone GitHub - ossrs/srs: SRS is a simple, high-efficiency, real-time video server supporting RTMP, WebRTC, HLS, HTTP-FLV,…...

pytest 使用(一)

pytest 使用pytest&#xff0c;默认的测试用例的规则以及基础应用pytest测试用例的运行方式pytest执行测试用例的顺序是怎样的呢&#xff1f;如何分组执行&#xff08;冒烟&#xff0c;分模块执行&#xff0c;分接口和web执行&#xff09;pytest跳过测试用例 b站课程链接 使用…...

基于秃鹰算法的无人机航迹规划-附代码

基于秃鹰算法的无人机航迹规划 文章目录 基于秃鹰算法的无人机航迹规划1.秃鹰搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用秃鹰算法来优化无人机航迹规划。 1.秃鹰搜索算法 …...

08. 按键输入

08. 按键输入 按键原理图代码编写GPIO驱动代码按键驱动代码主函数 加上清除BSS段&#xff0c;代码不运行 按键原理图 按键KEY0连接到了UART1_CTS上。默认情况下&#xff0c;KEY0为高&#xff0c;当按下KEY0后&#xff0c;UART1_CTS为低电平 代码编写 在bsp下创建一个key和一个…...

YOLOv8-pose关键点检测:模型轻量化创新 |轻量高性能网络PPLCNet助力backbone

💡💡💡本文解决什么问题:轻量高性能网络PPLCNet替换YOLOv8 backbone PPLCNet | GFLOPs从9.6降低至6.6, mAP50从0.921下降至0.901,mAP50-95从0.697提升至0.752 Yolov8-Pose关键点检测专栏介绍:https://blog.csdn.net/m0_63774211/category_12398833.html ✨✨✨手…...

大数据笔记-关于Cassandra的删除问题

Cassandra是Facebook开源的一个NoSQL数据库&#xff0c;它除了具备一般的NoSQL分布式数据库特点以外&#xff0c;最大的一个特点是去中心化架构设计&#xff0c;这和Hadoop HDFS/HBase等不一样&#xff0c;比如HDFS分为NameNode和DataNode&#xff0c;而Cassandra集群中所有节点…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...