CSS样式更改-字体设置Font&amp;边框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/

ont 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。

字体修改

font-family 属性：设置HTML页面中的字体
font-size 属性：设置字体大小
font-weight 属性：设置字体的粗细程度
font-style 属性：设置指定字体样式

font-family写法示例：

 <style>
         p{
             font-family: "幼圆";
         }
     </style>
 </head>
 <body>
     <p>19级启嘉班</p>
 </body>

效果：

字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。

color 属性

color 用来设置文字颜色。

设置方式支持以下几种格式

英语颜色单词形式，如: red（红）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字颜色</div>

十六进制表示法，设计软件中通用的表示方法。
例如：ff00000; ff 即为十进制255；每种颜色分为 0~255的数字。
如果表示颜色值重复例如：#ffaabb 可以简写为#fab.。
黑色为 #000 ，白色为 #fff。
以#ff0000为例，两两分组，分别表示三原色：红、绿、蓝。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字颜色</div>
<div class="box1">简写形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 内部的三个值，依次代表三原色红、绿、蓝。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字颜色</div>

RGBA 表示法，在RGB的表示方法的基础上增加了透明度（最后一个参数代表透明度）。0-表示透明 1-表示实心。透明度是介于[0,1]之间的值。
RGBA 从 IE9开始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字颜色</div>

font-size 属性

font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem

单位的解释

px：像素
em: 相对元素字体的倍数
rem：相对html字体的倍数，例如：html标签设置为font-size为100px ， div 设置font-size为1.5 rem 实际表现为：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 属性

设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。

可以用以下值表示，也可以用数字表示。

值	意义
normal	正常粗细，和400值相等
bold	加粗，与700数值相等
lighter	比正常粗细还细，不常用
bolder	比加粗还粗，不常用
100 200 300 400 500 600 700 800 900	使用数字定义字体粗细
inherit	从父元素继承字体粗细

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗细</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更细</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 数字</div>
</body>

font-style 属性

设置字体的倾斜程度

值	意义
normal	正常字体，不带倾斜效果
italic	倾斜字体（常用，使用倾斜字体）
oblique	倾斜字体（用常规字体模拟倾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字体</div>
  <div class="box2">倾斜字体</div>
  <div class="box3">倾斜字体2</div>
</body>

text-decoration 属性

设置文本的修饰线的样式

示例	意义
none	无线(a标签去除下划线会用到)
underline;	下划线
line-through;	删除线
…等等	还有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">无线修饰</div>
  <div class="decoration-underline">下划线</div>
  <div class="decoration-line-through">删除线</div>
</body>

font-family 属性

指定使用的字体族，操作系统一般自带很多字体；

例如：window操作系统中的 ‘微软雅黑’ ，黑体等。

字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多个字体，后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。

<style>
  div {
      font-family: serif, "Time New Roman", "微软雅黑"
  }
</style>
<body>
  <div>字体</div>
</body>

自定义字体

某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体

自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。

推荐一个比较好用的字体库网站：https://www.iconfont.cn/（具体使用方式请自行百度）。

在线咨询

上一篇：HTML5基础学习 13-拖拽
下一篇：HTML、CSS 和 JavaScript等前端开发技术，必备入门级学习书单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS样式更改-字体设置Font&amp;amp;边框Border