CSS伪类与常用标签属性整理与块级、行级、行级块标签(文本,背景,列表,透明,display)

目录

文本

color:字体颜色

font-size:字体大小​编辑

front-family:字体

text-align:文本对齐

text-decoration:line-through:定义穿过文本下的一条线

text-decoration:underline:定义文本下的一条线

text-decoration:none:定义标准的文本

font-style: italic:斜体文本

font-weight:字体粗细

line-height:设置行高

letter-spacing:可以指定字符间距

text-indent:用来设置首行缩进

背景

background-color:背景颜色

background-image:背景图片

background-repeat:背景重复

background-size:背景尺寸

background- position :背景位

列表

list-style-image: 将图片设置为列表项标志(需要先删除默认图标)

list_style-position:设置列表中列表项标志的位置

list-style-type:设置列表项标志的类型

list-style:简写属性

透明

块级,行级,行级块标签

Display


文本

  • color:字体颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{color: crimson;}</style></head><body><p>颜色</p></body>
</html>w

  • font-size:字体大小
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{font-size: 1cm;}</style></head><body><p>字体大小</p></body>
</html>

  • front-family:字体
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>p{font-family: 楷体;}</style></head><body><p>字体</p></body>
    </html>

  • text-align:文本对齐
  • <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>p{text-align: center;}</style></head><body><p>文本对齐</p></body>
    </html>

  • text-decoration:line-through:定义穿过文本下的一条线
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{text-decoration:line-through;}</style></head><body><p>穿过文本线条</p></body>
</html>

  • text-decoration:underline:定义文本下的一条线
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{text-decoration:underline;}</style></head><body><p>下划线</p></body>
</html>

 

  • text-decoration:none:定义标准的文本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{text-decoration:none;}</style></head><body><p>标准文本</p></body>
</html>

  • font-style: italic:斜体文本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{font-style: italic;}</style></head><body><p>斜体文本</p></body>
</html>

  • font-weight:字体粗细
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{font-weight: 300;}</style></head><body><p>字体粗细</p></body>
</html>

 

  • line-height:设置行高
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{line-height: 1cm;background-color: aquamarine;}</style></head><body><p>行高</p></body>
</html>

  • letter-spacing:可以指定字符间距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{letter-spacing: 1cm;}</style></head><body><p>字符间距</p></body>
</html>

  • text-indent:用来设置首行缩进
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{text-indent: 2em;}</style></head><body><p>首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进</p></body>
</html>

背景

  • background-color:背景颜色
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{background-color: aqua;}</style></head><body><p>背景颜色</p></body>
</html>

 

  • background-image:背景图片
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{background-image: url("../img/wemeet image_20240302144250660.png");}</style></head><body><p>背景图片</p></body>
</html>

  • background-repeat:背景重复
    描述
    repeat默认。背景图像将在垂直方向和水平方向重复。
    repeat-x背景图像将在水平方向重复。
    repeat-y背景图像将在垂直方向重复。
    no-repeat背景图像将仅显示一次。
    inherit规定应该从父元素继承 background-repeat 属性的设置。
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><style>p{background-repeat:repeat-x;background-image: url("../img/wemeet image_20240302144256433.png");}</style></head><body><p>背景图片横向重复,背景图片横向重复,背景图片横向重复,背景图片横向重复,背景图片横向重复,背景图片横向重复,背景图片横向重复,背景图片横向重复背景图片横向重复,背景图片横向重复</p></body>
    </html>
     
  • background-size:背景尺寸

字面意思就是调整背景大小就不举例了

  • background- position :背景位

属性为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的。

列表

CSS列表属性可以放置、改变列表项标志,或者将图片作为列表项标志。

  • list-style-image: 将图片设置为列表项标志(需要先删除默认图标)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.u1 li{color: red;list-style-type:none; /* 去除默认的图标 */list-style-image:url("../img/wemeet image_20240302144244667.png"); /* 指定一个图片当作图标 */}</style></head><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></body>
</html>
 
  • list_style-position:设置列表中列表项标志的位置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.u1 li{text-align: center; /* 居中*/color: red;list-style-type:none; /* 去除默认的图标 */list-style-image:url("../img/wemeet image_20240302144244667.png"); /* 指定一个图片当作图标 */list-style-position: inside;</style></head><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></body>
</html>

  • list-style-type:设置列表项标志的类型
  • list-style:简写属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.u1 li{text-align: center; /* 居中*/color: red;list-style: none url("../img/wemeet image_20240302144244667.png") inside; }</style></head><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></body>
</html>

透明

定义透明效果的属性是opacity,属性设置标签的不透明级别值为1。 规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{opacity:0.5;}</style></head><body><p>hahaha</p></body>
</html>

块级,行级,行级块标签

  1. 块级标签:无论内容多少都会独自占据一行。【例如<p>、<h1>、<ul>、<ol>】

  2. 行级标签:只占自身大小得到标签,不会占一行。【例如<font>、<b>、<i>、<a>】

  3. 行级块标签:可以和其它元素保持在一行,还能设置宽高。【例如<input/><img>】

Display

通过display样式可以修改标签的类型。

可选值:

  • block :设置标签为块标签

  • inline :设置标签为行级标签

  • inline-block :设置标签为行级块标签

  • none :隐藏标签(标签将在页面中完全消失)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/737160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何轻松打造属于自己的水印相机小程序?

水印相机小程序源码 描述&#xff1a;微信小程序。本文将为您详细介绍小程序水印相机源码的搭建过程&#xff0c;教您如何轻松打造属于自己的水印相机小程序。无论您是初学者还是有一定基础的开发者&#xff0c;都能轻松掌握这个教程。 一&#xff1a;水印相机搭建教程 1 隐…

上位机图像处理和嵌入式模块部署(qmacvisual旋转和镜像)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 旋转和镜像是图像处理中经常遇到的一个情况。很多时候&#xff0c;摄像头面对物体进行拍摄&#xff0c;未必是正对着进行拍摄的&#xff0c;这个时…

【学习笔记】VMware vSphere 6.7虚拟化入门

VMware vSphere 6.7虚拟化入门课程介绍 课程内容 1、VMware vSphere 6.7虚拟化入门课程介绍 2、ESXi6.7控制台设置 3、使用vSpkere Host client管理虚拟机 4、VMware EsXi基础操作 5、VMware Esxi存储管理 6、管理ESXi主机网络与虚拟机网络 7、安装配置vCenter Server Applia…

使用Amazon Bedrock托管的Claude3 学习中国历史

最近被Amazon Bedrock托管的Claude3 刷屏了&#xff0c;那么先简单介绍下什么是Claude 3。 Claude 3是Anthropic 推出了下一代 Claude模型&#xff0c;针对不同用例进行优化的三种先进模型&#xff1a;Claude 3 Haiku、Claude 3 Sonnet 和 Claude 3 Opus&#xff0c;使用户能够…

C/C++ 通过C语言可变参数打印(正常参数、正常格式化,运行不确定时间后崩溃)

在 C/C 之中&#xff0c;有时会遇到一些疑难杂症&#xff0c;但大多数情况下不会触发它&#xff0c;但如果触发它导致崩溃&#xff0c;的确会让人心态很炸裂。 我们知道我们想要提供C语言接口的动态参数传递给其它C动态参数函数&#xff0c;会通过va_list 来转发调用&#xff0…

解决方案|珈和科技推出农业特色产业数字化服务平台

今年中央一号文件提出&#xff0c;鼓励各地因地制宜大力发展特色产业&#xff0c;支持打造乡土特色品牌。 然而&#xff0c;农业特色产业的生产、加工和销售仍然面临诸多挑战。产品优质不能优价&#xff0c;优质不能优用的现象屡见不鲜&#xff0c;产业化程度低、生产附加值不…

Linux进程概念僵尸进程孤儿进程

文章目录 一、什么是进程二、进程的状态三、Linux是如何做的&#xff1f;3.1 R状态3.2 S状态3.3 D状态3.4 T状态3.5 t状态3.6 X状态3.7 Z状态 四、僵尸进程4.1 僵尸进程危害 五、孤儿进程 一、什么是进程 对于进程理解来说&#xff0c;在Windows上是也可以观察到的&#xff0c…

蓝桥杯(3.10)

1219. 移动距离 import java.util.Scanner; public class Main{public static void main(String[] args) {Scanner sc new Scanner(System.in);int w sc.nextInt();int m sc.nextInt();int n sc.nextInt();m--;n--;//由从1开始变为从0开始//求行号int x1 m/w, x2 n/w;//…

数据结构与算法第三套试卷小题

1.删除链表节点 **分析&#xff1a;**首先用指针变量q指向结点A的后继结点B&#xff0c;然后将结点B的值复制到结点A中&#xff0c;最后删除结点B。 2.时间复杂度的计算 **分析&#xff1a;**当涉及嵌套循环的时候&#xff0c;我们可以直接分析内层循环即可&#xff0c;看内…

2024年春招,如何做一份高水平的简历?(附个人简历模板)

抓对这几个重点,你想不通过简历面都难! HR想看到什么?雇主想看到什么?你未来的Leader想看到什么? 1. 简历模板:第一印象至关重要 专业与个性并存:选择一个既专业又有个性的模板。例如,如果你是一名工程师,可以选择一个简洁、有技术感的模板;如果是艺术行业,可以选…

Docker 的资源控制

目录 Docker 的资源控制为什么需要资源控制&#xff1f;控制内存使用限制 CPU 使用磁盘 I/O 控制网络带宽限制实践建议 Docker 资源控制&#xff1a;保障性能与稳定性Docker资源控制概览内存限制CPU限制磁盘 I/O 控制网络带宽管理实际应用 Docker 启动后的 更新资源管理 Docker…

面试官:线程调用2次start会怎样?我支支吾吾没答上来

写在开头 在写完上一篇文章《Java面试必考题之线程的生命周期&#xff0c;结合源码&#xff0c;透彻讲解!》后&#xff0c;本以为这个小知识点就总结完了。 但刚刚吃晚饭时&#xff0c;突然想到了多年前自己面试时的亲身经历&#xff0c;决定再回来补充一个小知识点&#xff…

Dgraph 入门教程三《linux本地部署》

上一章中&#xff0c;我们用的官方的Clound操作的&#xff0c;怎么在本地部署一套Dgraph呢。这一章将做详细介绍。安装有好几种方式&#xff0c;最简单的就是联网部署。因为项目需要&#xff0c;这里先不介绍和测试线上部署了&#xff0c;只介绍离线部署。 1、下载安装包 Rel…

理论学习:nn.CrossEntropyLoss

该标准计算输入 logits 和目标之间的交叉熵损失。 代码实战 该损失函数结合了nn.LogSoftmax()和nn.NLLLoss()两个函数。它在做分类&#xff08;具体几类&#xff09;训练的时候是非常有用的。在训练过程中&#xff0c;对于每个类分配权值&#xff0c;可选的参数权值应该是一个…

cdn和oss有什么区别

CDN&#xff08;内容分发网络&#xff09;和OSS&#xff08;对象存储服务&#xff09;是两种常见的互联网技术&#xff0c;它们在内容存储和分发方面有着不同的功能和特点。 CDN&#xff1a;加速网络内容分发 CDN通过部署在全球各地的节点服务器&#xff0c;将静态内容缓存到离…

langchain入门

1、langchain的2个能力 可以将 LLM 模型与外部数据源进行连接允许与 LLM 模型进行交互 2、基础功能 LLM 调用 支持多种模型接口&#xff0c;比如 OpenAI、Hugging Face、AzureOpenAI ...Fake LLM&#xff0c;用于测试缓存的支持&#xff0c;比如 in-mem&#xff08;内存&am…

开源是什么?——跟老吕学Python编程

开源是什么&#xff1f;——跟老吕学Python编程 开源是什么&#xff1f;开放源代码软件是什么&#xff1f;开源软件许可证是什么&#xff1f;开放源代码软件是什么&#xff1f;开放源代码的软件代表有什么&#xff1f;开放源代码软件与自由软件的概念 开源的定义是什么&#xf…

JavaScript基础6之执行上下文、作用域链、函数创建、函数激活、checkScope的执行过程、闭包、this

JavaScript基础 执行上下文执行上下文中的属性变量对象全局上下文的变量对象函数上下文执行过程进入执行上下文代码执行思考题 作用域链函数创建函数激活checkScope的执行过程总结 闭包分析闭包 this 执行上下文 执行上下文中的属性 每一个执行上下文都有三个核心属性 变量对…

职场逆袭!如何打造‘黄金简历’

现在的职场&#xff0c;无论是哪个行业都特别卷&#xff0c;想要找到一份满意&#xff0c;不仅要求你要拥有丰富的工作经验&#xff0c;而且还要求你的简历足够精彩&#xff0c;这样才能在一众求职者中脱颖而出&#xff01; 一、希赛老师在线指导 之前&#xff0c;小赛分享了…

c#WPF绑定

在 C# WPF 中&#xff0c;绑定是一种将 UI 元素&#xff08;如文本框、列表框等&#xff09;与数据源&#xff08;如对象、集合等&#xff09;关联起来的技术。通过绑定&#xff0c;可以在 UI 元素上显示和更新数据源中的数据&#xff0c;实现数据的双向同步。 下面是一个简单的…