您现在的位置是:亿华云 > 人工智能

CSS(Cascading Style Sheets)样式更改——字体设置Font&边框Border

亿华云2025-10-03 06:21:05【人工智能】3人已围观

简介前言上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。。1.字体设置Font1).字体系列 <d

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

1.字体设置Font1).字体系列 

<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)。式更 

参考文档:W3C官方文档(CSS篇)

二、改字总结这篇文章主要介绍了CSS样式更改篇中的体设字体设置Font&边框Border设置,希望让大家对CSS样式更改有个简单的认识和了解。云服务器

很赞哦!(917)