100字范文 > css3从入门到熟练运用（三）:炫目字体多样背景和渐变颜色神奇边框

css3从入门到熟练运用（三）:炫目字体多样背景和渐变颜色神奇边框

时间：2021-09-29 01:29:07

字体

字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？

font-family 定义字体系列

传统字体

我们在开发一个互联网项目首先要做的就是字体选择，通常我们在设计的时候尽量去考虑系统默认的字体；而一个系统中通常会包含很多字体，一般如何选择呢？css 中 font-family 去实现。

比如：我们给一个div定义一个字体，如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替，如果都没有就让系统自动选择

div{font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;}

font-family 定义字体系列可以在后面跟很多个，数目不限，实现顺序就是先用第一个，如果没有在去找第二个，以此类推，如果都没有就找系统的默认字体。

时代的进步，很多情况我们不喜欢系统为我们提供的字体，那怎么办呢？

自定义字体

css 3的出现允许自定义字体，也就说当系统没有字体的时候，可以自己下载，听上去很厉害，

css 3 给我们提供了一个 @font-face 可以从服务器导入字体，导入的字体可以自己随便命名

举例：自定义一个字体比叫myfont ，然后应用在div上

@font-face{font-family: myfont ; /* 自定义字体名称*/src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */}/* 调用自定义字体应用到div中*/div{font-family:myfont /*调用定义好的字体名称*/}

@font-face 两个基础属性是必须的：如上面的例子

font-family: 定义字体的名称然后需要用到字体的地方调用

src ：后面的url 表示导入字体的路径可以是相对路径绝对路径

在div中用字体和传统方法一样直接使用即可

字体分栏

分栏效果就是像报纸一样一栏一栏的看一下示例：

实现这个效果可用div加上浮动布局float 属性也可以完成，但是浮动带来的问题是，高度要写死，并且还要清除浮动，因为他是脱离了文档流。

实现这个效果推荐用css3 字体分栏方法

html 代码

<h1>分栏效果</h1><div>字体字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？font-family 定义字体系列传统字体我们在开发一个互联网项目首先要做的就是字体选择，通常我们在设计的时候尽量去考虑系统默认的字体；而一个系统中通常会包含很多字体，一般如何选择呢？css 中 font-family 去实现。比如：我们给一个div定义一个字体，如果是在window下面用‘微软雅黑’如果没有的话就用‘黑体’代替，如果都没有就让系统自动选择div{font-family:"Microsoft YaHei","微软雅黑","黑体","宋体",sans-serif;}font-family 定义字体系列可以在后面跟很多个，数目不限，实现顺序就是先用第一个，如果没有在去找第二个，以此类推，如果都没有就找系统的默认字体。时代的进步，很多情况我们不喜欢系统为我们提供的字体，那怎么办呢？自定义字体css 3的出现允许我们，自定义字体，也就说当系统没有字体的时候我们可以自己下载，听上去很厉害，css 3 给我们提供了一个 @font-face 可以从服务器导入字体，导入的字体可以自己随便命名举例：自定义一个字体叫，myfont ，这个字体其实是一个艺术字体，然后应用在div上@font-face{font-family: myfont ;src: url('Sansation_Light.ttf'),url('Sansation_Light.eot'); /* IE9 */}/* 调用自定义字体应用到div中*/div{font-family:myfont}@font-face 两个基础属性是必须的：如上面的例子font-family: 定义字体的名称然后需要用到字体的地方调用src ：后面的url 表示导入字体的路径可以是相对路径绝对路径在div中用字体和传统方法一样直接使用即可字体分栏背景和颜色边框多样化</div>

css

div{column-count: 3; column-gap: 30px;column-rule: blue 1px solid;}

这样就简单实现了3栏文字布局，动手练，还有很多字体相关的特性

注意：浏览器支持目前还不是很普级，最好使用可编译的css技术less，sass等

背景

css 可以允许纯色应用为背景同时也支持图片作为背景，css3的出现背景更加多样化，渐变，背景适应大小等等

背景写法

常用书写格式

background: 颜色值，图片地址，重复设置区域定位 ;

颜色值：可以是十六进制或者rgba都可以，

图片地址：可以是绝对路径或者相对路径，

重复设置：可以设置为x、y方向重复或者不重复背景

区域定位：背景图片从哪里开始展现

在开发中比较常用的就是上述表现出来的

如：定义一个纯色的蓝色背景，不用图片，不重复，区域定位从0.0 开始即：左上角

div{background:blue no-repeat 0 0;}/*或者定义纯色后面的都可以删掉。不存在重复设置*/div{background:blue;}

设置一张图美女图片为背景，不重复，区域定位从0.0 开始

div{background: url('/timg?image&quality=80&size=b9999_10000&sec=1592124104699&di=d7ebb683d4baccff9a741254a900e736&imgtype=0&src=http%3A%2F%%2Fupload%2Fallimg%2F170614%2F1TJB554-0.jpg') no-repeat 0 0;}

在开发中灵活使用相对路径，少用绝对路径