前言
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。
1.字体设置Font
1).字体系列
<div style='font-family: sans-serif normal'></div>可用字体:SerifSans-serifMonospaceCursiveFantasyTimesCourier
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样式更改有个简单的认识和了解。