CSS中的字体样式、文本样式、列表样式以及背景和渐变

一、字体样式和文本样式

1.span标签

span标签的作用：能让某几个文字或者是词语凸显出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>span</title><style>.show{color: red;}</style>
</head>
<body><p>享受华为<span class="show">人工智能</span>带来的方便</p>
</body>
</html>

2字体样式

属性名含义举例
font-family设置字体类型font-family:“华文彩云”；
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体粗细font-weight：bold(700);
font（注意顺序）在一个声明中设置所有字体属性font:italic bold 30px “华文彩云”;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03字体样式</title><style>p{font-family: "华文彩云";  /*字体类型*/font-size: 30px;  /*字体大小*/font-style: italic;  /*字体风格   italic：斜体*/font-weight:700;   /*设置字体的粗细   bold (700)：加粗*/}span{font: italic bold 30px "华文彩云";  /*注意顺序：风格  粗细  大小   类型*/}</style>
</head>
<body><p>基建大国</p><span>厉害了，我的锅</span>
</body>
</html>

2.1字体类型

可以在一个页面中分别设置中文和英文字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04字体类型补充</title><style>p{font-family:'Times New Roman', "Times", "华文彩云";}</style>
</head>
<body><p>of people or behaviour 人或举止大胆自信的；敢于表白情感的；敢于冒险的
brave and confident; not afraid to say what you feel or to take risks
</p>
</body>
</html>

2.2字体大小

font-size单位：

  • px(像素)
  • em、rem、cm、mm、pt、pc（1em大概是16px）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05字体大小</title><style>p{font-size: 32px;}span{font-size: 2em;  /*1em大概是16px*/}</style>
</head>
<body><p>我爱中国</p><span>我爱世界</span>
</body>
</html>

2.3font属性

font的属性顺序：字体风格-字体粗细-字体大小-字体类型

3.文本样式

3.1文本属性

属性含义举例
color颜色color:#00c;
text-align水平对齐方式text-align：right;
text-indent首行文本缩进text-indent:20px;
line-height文本行的高度line-height：25px；
text-decoration文本装饰text-decoration：underline;

3.2文本颜色

RGB （Red Green Blue）：

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色的分量，最后两位表示蓝色的分量

rgb(r,g,b)，RGB的取值只能是正整数，取值范围为0~255 ，如：rgb（255，0，0）

因为是十六进制可以取值：0 1 2 3 4 5 6 7 8 9 A B C D E F。，也可以取值：#FF0000

RGBA：

在rgb的基础上增加了一个控制alpha透明度的参数，其中可以取值0~1，如：color: rgba(255, 0, 0, 0.2);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06文本颜色</title><style>p{/* color: red; *//* color: #fa0000; *//* color: rgb(0,0,0); */color: rgba(255, 0, 0, 0.5);}</style>
</head>
<body><p>世界你好！</p>
</body>
</html>

3.3 水平对齐方式（text-align）

适用于块级元素 原因：块级元素独占一行

块级元素：h1-h6 p li dl/dt/dd div

属性值说明
left文本排列到左边，默认值
right文本排列到右边
center文本排列在中间
justify实现文本两端对齐效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07text-align</title><style>p{text-align: center;}</style>
</head>
<body><h1>你好中国</h1><p><span>厉害了，我的国！</span><span>遥遥领先</span></p><span>你好世界</span>
</body>
</html>

3.4首航文本缩进（text-indent）

单位：

  • em（推荐，1em就等于一个汉字）
  • px
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/*text-indent: 28px; 缩进可以使用像素为单位*/text-indent: 2em;}</style>
</head>
<body><p>当地时间9月19日，中国第22批赴黎维和部队多功能工兵分队营区周边多枚航弹爆炸，造成部分设施受损。</p>
</body>
</html>

3.5行高（line-height）

单位：px

设置行高后字体会自动放在整行的中间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05行高</title><style>#test{line-height: 100px;}</style>
</head>
<body><p id="test">初步计票结果显示</p><p >斯里兰卡国家人民力量党领导人迪萨纳亚克赢得总统选举】斯里兰卡选举委员会22日公布的初步计票</p><p >国家人民力量党领导人迪萨纳亚克在21日举行的总统选举中胜出。（新华社）</p></body>
</html>

3.6文本装饰（text-decoration）

值说明
none默认值，无文本装饰（定义的标准）
underline文本的下划线
overline文本的上划线
line-through文本的删除线

在这里插入图片描述

4.文本阴影

4.1语法

x轴位移：用来指定阴影水平位移（x轴数值为正）向右

y轴位移：用来指定阴影垂直位移（y轴数值为正）向下

模糊半径：阴影向外模糊的范围

语法中不需要逗号，只需要以;结尾

text-shadow:阴影颜色 x轴位移 y轴位移 模糊半径；

在这里插入图片描述

二、超链接伪类

伪类：伪类（Pseudo-classes）是CSS（层叠样式表）中的一种特殊选择器，用于选择处于特定状态或满足特定条件的元素，并为其定义不同的样式。伪类选择器的基本语法是在选择器后面加上冒号和伪类名称，然后是花括号中包含的CSS属性和值。

1.伪类样式

语法：

标签名：伪类名{声明;}

如：

a:hover{color:red;text-decoration:underline;
}

2.常用伪类

伪类名称含义
a:link未单击访问时超链接的样式
a:hover鼠标悬浮其上的超链接样式
a:active鼠标单机未释放的超链接样式
a:visited单击访问后超链接的样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15超链接伪类</title><style>a {font-size: 25px;}/* 未单击访问时超链接的样式 (可以不用) */a:link {color: black;  /*字体颜色为黑色*/text-decoration: none; /*无下划线*/}/* 鼠标悬浮其上的超链接样式 */a:hover {color: green;  /*字体颜色为绿色*/}/* 鼠标单击未释放的超链接样式 */a:active {color: blue; /*字体颜色为蓝色*/}/* 单击访问后超链接的样式 */a:visited {color: red;}</style>
</head>
<body><a href="#">这是百度链接地址</a>
</body>
</html>

三、列表样式

list-style-type: 列表中项目符号的类型 如实心圆点、空心圆点、实心方块

list-style-image：这个属性允许开发者使用一张图片来替换默认的列表项符号

list-style-position:用于设置列表项标记（通常是项目符号或编号）相对于列表项内容的位置

list-style

1.list-style-type

设置列表中项目符号的类型 如实心圆点、空心圆点、实心方块

值说明
none无标记符号
disc实心圆点（默认值）
circle空心圆点
square实心方块
decimal十进制阿拉伯数字

2.list-style-image

这个属性允许开发者使用一张图片来替换默认的列表项符号

在这里插入图片描述

3.list-style-position

list-style-position:用于设置列表项标记（通常是项目符号或编号）相对于列表项内容的位置

4.list-style

<style>p{list-syle:none;	}
</style>

四、背景

1.background-color

背景颜色

 <style>#nav {width: 230px; /*宽度*/background-color: #D7D7D7;  /*背景颜色*/}
</style>

2.background-image和background-repeat

背景图片

background-repeat 是CSS（层叠样式表）中的一个属性，用于设置背景图像是否以及如何重复。它定义了背景图像在元素背景区域中的平铺模式

属性值说明
repeat沿水平和垂直两个方向平铺
no-repeat不平铺，图像只显示一次
repeat-x沿水平方向平铺
repeat-y沿垂直方向平铺
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框：粗细1px、实线、红色*/background-image: url(image/1.jpg);  /*背景图片，默认会铺满整个*/background-repeat: repeat-y;  /*背景图片重复方式*/}</style>
</head>
<body><div></div>
</body>
</html>

3.background-position

调整背景图片位置

值含义
X、Y方向关键字水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
X%、Y%使用百分比表示背景图片的位置
Xpos Ypos单位：px
Xpos表示水平位置，Ypos表示垂直位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框：粗细1px、实线、红色*/background-image: url(image/1.jpg);  /*背景图片，默认会铺满整个*/background-repeat: no-repeat;  /*背景图片重复方式*//* 第一个控制水平方向，第二个控制垂直方向*//* background-position: left bottom; *//* background-position: 0% 50%; */background-position: 30px 20px;}</style>
</head>
<body><div></div>
</body>
</html>

4.background-size

/*背景图片的大小，第一个表示宽，第二个表示高度*/
background-size:20px 120px;
属性值说明
auto默认值
percentage当使用百分比值的时候，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover图片放大填充了整个元素
contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域

5.合在一起写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;border: 1px solid red;/* background-image: url(image/1.jpg);background-size: 20px 20px;background-repeat: no-repeat;background-position: 50%; */background: url(image/1.jpg) no-repeat center center;  /*可以写一起，没有顺序和全部必写的要求*/background-size: 20px 20px;}</style>
</head>
<body><div></div>
</body>
</html>

五、CSS渐变

  • 线性渐变
    • 颜色沿着一条直线过度：从左到右、从右到左，从上到下等等
  • 径向渐变
    • 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝着所有的方向混合

1.CSS渐变兼容

  • IE浏览器的内核Trident，加前缀：-ms-
  • Chrom浏览器内核是Webkit，前缀加：-Webkit-
  • Safari浏览器内核是Webkit，加前缀：-Webkit-
  • Opear浏览器内核是Blink,加前缀：-o-
  • Firefox浏览器内核是Mozilla，加前缀：-moz-

2.渐变性

linear：直线

gradient：坡度

语法：

linear-gradient(渐变方向,第一种颜色，第二种颜色...后面可以包含多种颜色)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>20渐变</title><style>div{width: 100px;height: 100px;/* to top background: linear-gradient(to top,orange,blue);*//* background: -webkit-linear-gradient(to top,orange,blue); *//* to bottom background: linear-gradient(to bottom,orange,blue);*//* to left background: linear-gradient(to left,orange,blue);*//* to right background: linear-gradient(to right,orange,blue);*//* to top left background: linear-gradient(to top left,orange,blue);*//* to top right */background: linear-gradient(to top right,orange,blue,green,red);/* to bottom left *//* to bottom right */}</style>
</head>
<body><div></div>
</body>
</html>
20渐变

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

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

相关文章

在深度学习中，是否应该打破正负样本1:1的迷信思想？

在深度学习中，是否应该打破正负样本1:1的迷信思想？

Q&#xff1a;是否应该打破正负样本 1:1 的迷信思想&#xff1f;A&#xff1a;是的&#xff0c;类别不平衡的比例只是表象&#xff0c;并非本质。 Q&#xff1a;当训练集和测试集分布匹配&#xff0c;但正负样本比例仍然悬殊&#xff0c;是否有必要再引入处理不平衡样本的策略…
阅读更多...
新峰商城之订单处理流程

新峰商城之订单处理流程

订单处理是电商系统中的重要模块&#xff0c;从用户单击提交订单并成功生成订单开始&#xff0c;包括订单支付成功、订单信息确认、订单出库、到确认收货的正常订单流程。也包括了订单取消、订单退款等其它异常流程。 一、订单处理流程 正常流程&#xff1a; 订单生成后&…
阅读更多...
Git - 初识版本库

Git - 初识版本库

版本库也叫仓库&#xff0c;英文名 repository。 ‍ 创建版本库 之前我们说了版本库的概念&#xff1a; 存储版本的地方&#xff08;存放各个版本之间差异的地方&#xff09;&#xff0c;通常称为版本库。通常版本库是以文件&#xff08;夹&#xff09;的形式存放在磁盘上&a…
阅读更多...
处理RabbitMQ连接和认证问题

处理RabbitMQ连接和认证问题

在使用RabbitMQ进行消息队列管理时&#xff0c;我们可能会遇到各种连接和认证问题。本文将介绍如何诊断和解决这些问题&#xff0c;并通过使用RabbitMQ的管理端进行登录验证来确保配置正确。 1. 问题概述 在最近的一次部署中&#xff0c;我们遇到了两个主要问题&#xff1a; …
阅读更多...
成为谷歌开发者专家（GDE）的经历

成为谷歌开发者专家（GDE）的经历

大家好&#xff0c;我是张海龙(Jason)。经过一年多的准备&#xff0c;GDE申请 终于正式成功通过面试&#xff0c;成为了国内第一位Firebase GDE。下面对整个过程做个总结&#xff0c;希望对大家有所帮助。 1.什么是 GDE&#xff1f; Google Developers上面有详细的说明&#x…
阅读更多...
Apache Druid命令执行（CVE-2021-25646）

Apache Druid命令执行（CVE-2021-25646）

漏洞详情&#xff1a; Apache Druid 是用Java编写的面向列的开源分布式数据存储系统&#xff0c;旨在快速获取大量事件数据&#xff0c;并在数据之上提供低延迟查询。 Apache Druid含有能够执行嵌入在各种类型请求中由用户提供的JavaScript代码功能。此功能适用于高度信任环境…
阅读更多...
计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-21

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-21

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-21 1. AIvril: AI-Driven RTL Generation With Verification In-The-Loop Authors: Mubashir ul Islam, Humza Sami, Pierre-Emmanuel Gaillardon, and Valerio Tenace AIVRIL: 人工智能驱动的RTL生成与验证内…
阅读更多...
如何在Excel中快速找出前 N 名，后 N 名

如何在Excel中快速找出前 N 名，后 N 名

有如下销售额统计表&#xff1a; 找出销售额排前 10 名的产品及其销售额&#xff0c;和销售额排倒数 10 名以内的产品及其销售额&#xff0c;结果如下所示&#xff1a; 前 10 名&#xff1a; spl("E(?1).sort(ProductSales:-1).to(10)",A1:C78)后 10 名&#xff1…
阅读更多...
K8S精进之路-控制器StatefulSet有状态控制 -(2)

K8S精进之路-控制器StatefulSet有状态控制 -(2)

状态说明 在进行StatefulSet部署之前&#xff0c;我们首先可能要了解一下&#xff0c;什么是"有状态应用"和"无状态应用"。无状态应用就是pod无论部署在哪里&#xff0c;在哪台服务器上提供服务&#xff0c;都是一样的结果&#xff0c;比如经常用的nginx。…
阅读更多...
Debian与Ubuntu：深入解读两大Linux发行版的历史与联系

Debian与Ubuntu：深入解读两大Linux发行版的历史与联系

Debian与Ubuntu&#xff1a;深入解读两大Linux发行版的历史与联系 引言 在开源操作系统的领域中&#xff0c;Debian和Ubuntu是两款备受瞩目的Linux发行版。它们不仅在技术上有着密切的联系&#xff0c;而且各自的发展历程和理念也对开源社区产生了深远的影响。本文将详细介绍…
阅读更多...
主数据的前世今生与治理方法论（附PPT | 某集团公司主数据项目案例与方法论）

主数据的前世今生与治理方法论（附PPT | 某集团公司主数据项目案例与方法论）

主数据&#xff08;Master Data&#xff09;是指企业内核心业务实体数据&#xff0c;具有共享、稳定、跨部门和系统的特点。主数据在企业数据管理中扮演着至关重要的角色&#xff0c;它是企业核心业务实体数据的核心组成部分。它是企业经营运作的主体对象&#xff0c;也是企业数…
阅读更多...
HTTP中的event-stream，eventsource，SSE，chatgpt，stream request，golang

HTTP中的event-stream，eventsource，SSE，chatgpt，stream request，golang

我们都知道chatgpt是生成式的&#xff0c;因此它返回给客户端的消息也是一段一段的&#xff0c;所以普通的HTTP协议无法满足&#xff0c;当然websocket是能满足的&#xff0c;但是这个是双向的通信&#xff0c;其实 SSE&#xff08;Server-Sent Events&#xff09; 正好满足这个…
阅读更多...
[数据集][目标检测]手机识别检测数据集VOC+YOLO格式9997张1类别

[数据集][目标检测]手机识别检测数据集VOC+YOLO格式9997张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;9997 标注数量(xml文件个数)&#xff1a;9997 标注数量(txt文件个数)&#xff1a;9997 标注…
阅读更多...
用Python提取PowerPoint演示文稿中的音频和视频

用Python提取PowerPoint演示文稿中的音频和视频

将多种格式的媒体内容进行重新利用&#xff08;如PowerPoint演示中的音频和视频&#xff09;是非常有价值的。无论是创建独立的音频文件、提取视频以便在线分发&#xff0c;还是为了未来的使用需求进行资料归档&#xff0c;从演示文稿中提取这些媒体文件可以为多媒体内容的多次…
阅读更多...
Remotion：使用前端技术开发视频

Remotion：使用前端技术开发视频

前言 最近做文章突然想到很多文章其实也可以用视频的方式来展现&#xff0c;以现在短视频的火爆程度&#xff0c;肯定能让更多的人看到。 恰巧最近看了很多关于动画的前端 js 库&#xff0c;那如果将这些动画帧连续起来&#xff0c;岂不是就成了一个视频吗&#xff1f; 而且…
阅读更多...
本地电脑基于nginx的https单向认证和双向认证(自制证书+nginx配置)保姆级

本地电脑基于nginx的https单向认证和双向认证(自制证书+nginx配置)保姆级

目录 1、背景 2、运行环境 3、工具下载 3.1、OpenSSL下载 3.2、nginx下载 4、制作https证书&#xff1a; 4.1、CA与自签名&#xff1a; 4.2、制作CA根证书&#xff08;公钥&#xff09; 4.3、制作服务端证书&#xff1a; 4.4、制作客户端证书&#xff1a; 4.5、制作…
阅读更多...
了解云计算工作负载保护的重要性，确保数据和应用程序安全

了解云计算工作负载保护的重要性，确保数据和应用程序安全

云计算de小白 云计算技术的快速发展使数据和应用程序安全成为一种关键需求&#xff0c;而不仅仅是一种偏好。随着越来越多的客户公司将业务迁移到云端&#xff0c;保护他们的云工作负载&#xff08;指所有部署的应用程序和服务&#xff09;变得越来越重要。云工作负载保护&…
阅读更多...
性能指标前言：`DOMContentLoaded`和`load`

性能指标前言：`DOMContentLoaded`和`load`

前言&#xff1a;DOMContentLoaded和load 最初&#xff0c;评价前端页面加载性能有两个指标&#xff1a;DOMContentLoaded和load事件&#xff0c;分别代表 DOM 树构造完成和首屏资源加载完成。 DOM 文档加载步骤&#xff1a; 解析 html 结构加载外部脚本和样式表文件解析并执…
阅读更多...
生活英语口语柯桥学英语“再确认一下“ 说成 “double confirm“？这是错误的！

生活英语口语柯桥学英语“再确认一下“ 说成 “double confirm“？这是错误的！

在追求英语表达的过程中&#xff0c;我们常常会遇到一些看似合理实则错误的表达习惯。今天&#xff0c;我们就来聊聊一个常见的误区——“再确认一下”被误译为“double confirm”。 “再次确认”不是double confirm 首先&#xff0c;我们需要明确&#xff0c;“double confi…
阅读更多...
线性基定义性质及例题

线性基定义性质及例题

线性基的定义 以上是官方给出的线性基的定义&#xff0c;但是需要一定的线性代数的基础&#xff0c;其实线性基很好理解&#xff0c;我们用下面一个例子去讲解 假设有3个数&#xff0c;1,2,3&#xff0c;我们这三个数互相异或总共有八种可能&#xff0c;我们能否找到一组数去…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发