开发者社区> python进阶者> 正文

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

简介: CSS样式更改——字体设置Font&边框Border
+关注继续查看

上篇文章主要讲述了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/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
「HTML+CSS」--自定义按钮样式【004】
「HTML+CSS」--自定义按钮样式【004】
56 0
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
55 0
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
14 0
html + css + js 怎么实现主题样式的切换?
html + css + js 怎么实现主题样式的切换?
24 0
9款漂亮的纯css字体样式
9款漂亮的纯css字体样式
35 0
css里content使用中文乱码,以及中文转unicode怎么在css样式里使用?
css里content使用中文乱码,以及中文转unicode怎么在css样式里使用?
64 0
CSS样式控制页面的几种方式
1.行内样式。 把样式写在元素标记之间。 用css控制页面样式的行内样式 2.内嵌式 把样式写在head之间,并且用<style></style>包括起来。
17 0
前端知识学习案例5-开发企业网站5-编写导航css样式
前端知识学习案例5-开发企业网站5-编写导航css样式
14 0
js基础笔记学习238读取元素的css样式1
js基础笔记学习238读取元素的css样式1
20 0
+关注
python进阶者
专注于分享Python网络爬虫、数据挖掘、数据分析、数据处理、数据可视化、大数据、人工智能、云计算、机器学习等工具资源、热点资讯、相关技术文章、学习视频和学习资料等~~~ 该社区将不定期分享各种技术干货、学习资料等。关注我们,您收获的不只是知识,还有经验与人脉!
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载