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

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

前言


上篇文章主要讲述了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样式更改有个简单的认识和了解。

相关文章
|
8天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
22天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
39 4
|
1月前
|
前端开发 JavaScript UED
|
1月前
CSS3圆角边框
CSS3圆角边框
41 0
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。