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

开发 前端
这篇文章我们来谈谈字体设置Font&边框Border的基础用法。。

[[347934]]

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

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

  1. <div style='font-family: sans-serif normal'></div> 
  2. 可用字体: 
  3. Serif 
  4. Sans-serif 
  5. Monospace 
  6. Cursive 
  7. Fantasy 
  8. Times 
  9. Courier 

2).字体风格

  1. <div style='font-style:normal'></div> 
  2. 文本倾斜: 
  3. normal   文本正常显示 
  4. italic   文本斜体显示 
  5. oblique  文本倾斜显示 

3).字体变形

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

4).字体加粗

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

5).字体大小

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

2.边框Border
首先说一下边框风格,它的风格比较多,常用的一般是实线为主:

  1. <div style='border-style:none'></div> 
  2. hidden     隐藏边框 
  3. dotted     点状边框 
  4. dashed     虚线边框 
  5. solid      实线边框 
  6. double     双线边框 
  7. groove     3D凹槽边框 
  8. ridge      3D垄状边框 
  9. inset      3D inset边框 
  10. outset     3D outset边框 
  11. 边框也有四面,所以也会有上下左右 
  12. 所以有时候为了更精确定位并修改样式可以使用: 
  13. border-top-style     上边框样式 
  14. border-right-style   右边框样式 
  15. border-bottom-style  下边框样式 
  16. border-left-style    左边框样式 

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

1).边框形状

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

2).边框阴影

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

3).边框图片

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

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

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

 

责任编辑:姜华 来源: IT共享之家
相关推荐

2020-10-22 08:50:04

Cascading S

2020-10-26 13:40:00

CascadingSt

2010-08-26 10:33:27

CSSborder

2021-01-25 05:39:54

Css前端Border

2010-09-03 14:57:33

CSS样式表CSS

2010-09-14 15:04:42

list-styleCSS

2010-09-06 10:16:21

CSS字体

2010-09-06 10:50:50

CSS边框

2010-09-13 13:44:35

CSS表格CSS表单

2010-09-01 08:58:58

2010-08-25 16:03:26

CSSborder

2010-09-06 16:00:41

CSSborder

2010-09-08 14:46:36

CSSborder

2016-10-21 10:15:53

2010-08-25 13:18:53

border-collCSS

2010-08-25 13:40:31

CSSfont-weight

2010-08-30 15:06:04

CSSfont-size

2020-05-11 07:39:13

CSS边框前端开发

2024-09-05 11:20:54

2017-07-20 11:11:39

前端CSS书写规范
点赞
收藏

51CTO技术栈公众号