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.mzph.cn/web/53664.shtml

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

相关文章

【ComfyUI】生成图细节更清晰——Consistency_Decoder

原文&#xff1a;https://github.com/openai/consistencydecoder comfyui: https://github.com/gameltb/Comfyui_Consistency_Decoder_VAE 博文资料下载&#xff1a;https://pan.baidu.com/s/1SwfA4T6iMsA8IrRrGXm4sg?pwd0925 安装 【秋葉aaaki】comfyui一键运行包 夸克网盘…

Vue3 + TS 实现同一项目同一链接,pc端打开是web应用,手机打开是H5应用

前言&#xff1a; 我自己搭建的项目基本都是用 postcss-px-to-viewport 插件进行适配的&#xff1b; 最近在做一个项目&#xff0c;需求是同样的功能&#xff0c;用户可以在电脑上打开操作使用&#xff0c;也可以在手机上登录进去操作使用&#xff0c;但是跳转链接是同一个&am…

LVS-DR实战案例,实现四层负载均衡

环境准备&#xff1a;三台虚拟机&#xff08;NET模式或者桥接模式&#xff09; 192.168.88.200 &#xff08;web1&#xff09;(安装nginx服务器作为测试) 192.168.88.201 &#xff08;服务器&#xff09;&#xff08;用于部署lvs-dr&#xff09; 192.168.88.202 (web2)…

猫头虎分享:Python库 Jinja2 的简介、安装、用法详解入门教程

猫头虎分享&#xff1a;Python库 Jinja2 的简介、安装、用法详解入门教程 &#x1f42f; 摘要 今天有粉丝问猫哥&#xff1a;“如何使用Jinja2进行Python模板渲染&#xff1f;”这是一个非常常见的问题&#xff0c;特别是在开发Web应用时。Jinja2是一个强大的模板引擎&#x…

一篇带你搞定数据结构散列表

数据结构入门学习&#xff08;全是干货&#xff09;——散列表 1 散列表 1.1 引子&#xff1a;散列的基本思路 C语言变量名的管理&#xff1a; 定义/声明&#xff1a;先定义后使用。插入与查找&#xff1a; 插入&#xff1a;新变量定义。查找&#xff1a;检查变量是否已定义。…

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

前言 最近做文章突然想到很多文章其实也可以用视频的方式来展现&#xff0c;以现在短视频的火爆程度&#xff0c;肯定能让更多的人看到。 恰巧最近看了很多关于动画的前端 js 库&#xff0c;那如果将这些动画帧连续起来&#xff0c;岂不是就成了一个视频吗&#xff1f; 而且…

smartctl 命令:查看硬盘健康状态

一、命令简介 ​smartctl​ 命令用于获取硬盘的 SMART 信息。 介绍硬盘SMART 硬盘的 SMART (Self-Monitoring, Analysis, and Reporting Technology) 技术用于监控硬盘的健康状态&#xff0c;并能提供一些潜在故障的预警信息。通过查看 SMART 数据&#xff0c;用户可以了解硬…

Python第一篇:Python解释器

一&#xff1a;python解释器 python解释器是一款程序&#xff0c;用于解释、执行Python源代码。 一般python解释器都是c python使用c编写的&#xff0c;还有j python用java编写的。 二&#xff1a;python下载 三&#xff1a;使用示例 python进入控制台&#xff0c;python。 三…

Claude 的上下文检索功能提升了 RAG 准确率,这会是人工智能革命?

前言 在人工智能领域不断进步的过程中&#xff0c;人们对更准确且具备上下文理解能力的响应的追求&#xff0c;催生了诸多突破性创新。 而 Claude 的上下文检索技术就是其中一项进步&#xff0c;有望显著提升检索增强生成 (RAG) 系统的表现。 可能有同学就要问了&#xff1a;…

uniapp实现在表单中展示多个选项,并且用户可以选择其中的一个或多个选项

前言 uni-data-checkbox是uni-app的一个组件,用于在表单中展示多个选项,并且用户可以选择其中的一个或多个选项。该组件可以通过设置不同的参数来控制选项的样式、布局和行为。 提示:以下是本篇文章正文内容,下面案例可供参考 uni-data-checkbox组件具有以下特点:: 1、跨…

Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称&#xff1a;Visual Studio Code vscode用来写html文件&#xff0c;打开文件夹与创建文件夹&#xff1a;①选择文件夹 ②拖拽文件 生成浏览器的html文件的快捷方式&#xff1a; &#xff01;enter 运行代码到网页的方法&#xff1a; 普通方法&#xff1a…

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

Debian与Ubuntu&#xff1a;深入解读两大Linux发行版的历史与联系 引言 在开源操作系统的领域中&#xff0c;Debian和Ubuntu是两款备受瞩目的Linux发行版。它们不仅在技术上有着密切的联系&#xff0c;而且各自的发展历程和理念也对开源社区产生了深远的影响。本文将详细介绍…

从零开始学习Python

目录 从零开始学习Python 引言 环境搭建 安装Python解释器 选择IDE 基础语法 注释 变量和数据类型 变量命名规则 数据类型 运算符 算术运算符 比较运算符 逻辑运算符 输入和输出 控制流 条件语句 循环语句 for循环 while循环 循环控制语句 函数和模块 定…

丹摩智算(damodel)部署stable diffusion实验

名词解释&#xff1a; 丹摩智算&#xff08;damodel&#xff09;&#xff1a;是一款带有RTX4090&#xff0c;Tesla-P40等显卡的公有云服务器。 stable diffusion&#xff1a;是一个大模型&#xff0c;可支持文生图&#xff0c;图生图&#xff0c;文生视频等功能 一.实验目标 …

MODELS 2024震撼续章:科技与可持续性的未来交响曲

MODELS 2024国际会议正如火如荼地进行着&#xff0c;每一天都充满了新的发现与启迪&#xff0c;每一场分享都是对技术前沿的一次深刻探索&#xff0c;更是对现实世界可持续性挑战的一次积极回应。现在让我们继续这场科技盛宴&#xff0c;看看小编为您精选几场的学术分享吧~ 会议…

地质工程专业职称申报条件详细解读

一、初级&#xff08;助理&#xff09;地质工程工程师评审条件&#xff1a; 1、理工类或者地质工程类专业毕业 2、专科毕业满3年或本科毕业满1年 3、研究生毕业&#xff0c;从事本专业技术工作&#xff0c;当年内考核认定 二、中级地质工程工程师评审条件&#xff1a; 1、理工…

大数据 flink 01 | 从零环境搭建 简单Demo 运行

什么是Flink Flink是一个开源的流处理和批处理框架,它能够处理无界和有界的数据流&#xff0c;具有高吞吐量、低延迟和容错性等特点 Flink 可以应用于多个领域如&#xff1a;实时数据处理、数据分析、机器学习、事件驱动等。 什么是流式处理&#xff1f;什么是批处理 流处理…

xQTLs 共定位分析(XQTLbiolinks包)

XQTL 共定位分析 XQTLbiolinks 是一个端到端的生物信息学工具&#xff0c;由深圳湾实验室李磊研究团队开发&#xff0c;用于高效地分析公共或用户定制的个xQTLs数据。该软件提供了一个通过与 xQTLs 共定位分析进行疾病靶基因发现的流程&#xff0c;以检测易感基因和致病变异。…

【STM32】RTT-Studio中HAL库开发教程七:IIC通信--EEPROM存储器FM24C04

文章目录 一、简介二、模拟IIC时序三、读写流程四、完整代码五、测试验证 一、简介 FM24C04D&#xff0c;4K串行EEPROM&#xff1a;内部32页&#xff0c;每个16字节&#xff0c;4K需要一个11位的数据字地址进行随机字寻址。FM24C04D提供4096位串行电可擦除和可编程只读存储器&a…

2.1 HuggingFists系统架构(一)

系统架构 HuggingFists的前端主体开发语言为HtmlJavascript&#xff0c;后端的主体开发语言为Java。在算子部分有一定份额的Python代码&#xff0c;用于整合Python在数据处理方面强大能力。 功能架构 HuggingFists的功能架构如上&#xff0c;由下向上各层为&#xff1a; 数据存…