百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

CSS样式更改——字体设置Font&边框Border

bigegpt 2024-10-05 13:46 7 浏览

上篇文章主要讲述了CSS样式更改中的背景Background，这篇文章我们来谈谈字体设置Font&边框Border的基础用法。

1.字体设置Font

1).字体系列

<div style='font-family: sans-serif normal'></div>
可用字体：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字体风格

<div style='font-style:normal'></div>
文本倾斜:
normal   文本正常显示
italic   文本斜体显示
oblique  文本倾斜显示

3).字体变形

<div style='font-variant:small-caps'></div>
normal          显示标准字体。
small-caps      显示小型大写字母的字体。

4).字体加粗

<div style='font-weight:normal'></div>
normal    标准的字符
bold      粗体字符
bolder    更粗的字符
lighter   更细的字符
也可以使用数字表示，范围为100~900

5).字体大小

<div style='font-size:60px'></div>
smaller 变小
larger  变大
length  固定值
而且还支持百分比

2.边框Border

首先说一下边框风格，它的风格比较多，常用的一般是实线为主：

<div style='border-style:none'></div>
hidden     隐藏边框
dotted     点状边框
dashed     虚线边框
solid      实线边框
double     双线边框
groove     3D凹槽边框
ridge      3D垄状边框
inset      3D inset边框
outset     3D outset边框
边框也有四面，所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用：
border-top-style     上边框样式
border-right-style   右边框样式
border-bottom-style  下边框样式
border-left-style    左边框样式

先定义边框的宽度 风格和颜色，然后定义边框的其它属性。

1).边框形状

<div style='border-radius:25px;'></div>

2).边框阴影

<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义：
边框各个方向的大小和颜色

3).边框图片

<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义：
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

总结

这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置，希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获？请转发分享给更多的人****

IT共享之家

想要学习更多，请前往Python爬虫与数据挖掘专用网站：http://pdcfighting.com/

相关推荐

C#.NET Autofac 详解（c# autoit）

简介Autofac是一个成熟的、功能丰富的.NET依赖注入（DI）容器。相比于内置容器，它额外提供：模块化注册、装饰器（Decorator）、拦截器（Interceptor）、强o的属性/方法注...

webapi 全流程（webapi怎么部署）

C#中的WebAPIMinimalApi没有控制器，普通api有控制器，MinimalApi是直达型，精简了很多中间代码，广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...

.NET外挂系列:3. 了解 harmony 中灵活的纯手工注入方式

一：背景1.讲故事上一篇我们讲到了注解特性，harmony在内部提供了20个HarmonyPatch重载方法尽可能的让大家满足业务开发，那时候我也说了，特性虽然简单粗暴，但只能解决95%...

C# 使用SemanticKernel调用本地大模型deepseek

一、先使用ollama部署好deepseek大模型。具体部署请看前面的头条使用ollama进行本地化部署deepseek大模型二、创建一个空的控制台dotnetnewconsole//添加依赖...

C#.NET 中间件详解（.net core中间件use和run）

简介中间件（Middleware）是ASP.NETCore的核心组件，用于处理HTTP请求和响应的管道机制。它是基于管道模型的轻量级、模块化设计，允许开发者在请求处理过程中插入自定义逻辑。...

IoC 自动注入:让依赖注册不再重复劳动

在ASP.NETCore中，IoC（控制反转）功能通过依赖注入（DI）实现。ASP.NETCore有一个内置的依赖注入容器，可以自动完成依赖注入。我们可以结合反射、特性或程序集扫描来实现自动...

C#.NET 依赖注入详解（c#依赖注入的三种方式）

简介在C#.NET中，依赖注入（DependencyInjection，简称DI）是一种设计模式，用于实现控制反转（InversionofControl，IoC），以降低代码耦合、提高可...

C#从零开始实现一个特性的自动注入功能

在现代软件开发中，依赖注入（DependencyInjection,DI）是实现松耦合、模块化和可测试代码的一个重要实践。C#提供了优秀的DI容器，如ASP.NETCore中自带的Micr...

C#.NET 仓储模式详解（c#仓库货物管理系统）

简介仓储模式（RepositoryPattern）是一种数据访问抽象模式，它在领域模型和数据访问层之间创建了一个隔离层，使得领域模型无需直接与数据访问逻辑交互。仓储模式的核心思想是将数据访问逻辑封装...

C#.NET 泛型详解（c# 泛型 滥用）

简介泛型（Generics）是指在类型或方法定义时使用类型参数，以实现类型安全、可重用和高性能的数据结构与算法为什么需要泛型类型安全防止“装箱／拆箱”带来的性能损耗，并在编译时检测类型错误。可重用同一...

数据分析-相关性分析（相关性 分析）

相关性分析是一种统计方法，用于衡量两个或多个变量之间的关系强度和方向。它通过计算相关系数来量化变量间的线性关系，从而帮助理解变量之间的相互影响。相关性分析常用于数据探索和假设检验，是数据分析和统计建模...

geom_smooth()函数-R语言ggplot2快速入门18

在每节，先运行以下这几行程序。library(ggplot2)library(ggpubr)library(ggtext)#用于个性化图表library(dplyr)#用于数据处理p...

规范申报易错要素解析（规范申报易错要素解析）

为什么要规范申报？规范申报是以满足海关监管、征税、统计等工作为目的，纳税义务人及其代理人依法向海关如实申报的行为，也是海关审接单环节依法监管的重要工作。企业申报的内容须符合《中华人民共和国海关进出口货...

「Eurora」海关编码归类 全球海关编码查询 关务服务

　　海关编码是什么?　　海关编码即HS编码，为编码协调制度的简称。　　其全称为《商品名称及编码协调制度的国际公约》(InternationalConventionforHarmonizedCo...

9月1日起，河南省税务部门对豆制品加工业试行新政7类豆制品均适用投入产出法

全媒体记者杨晓川报道9月2日，记者从税务部门获悉，为减轻纳税人税收负担，完善农产品增值税进项税额抵扣机制，根据相关规定，结合我省实际情况，经广泛调查研究和征求意见，从9月1日起，我省税务部门对豆制品...

一周热门
最近发表
标签列表