字体

字体随处可见，网页上看到的任何字都包含字体的使用，怎么使用呢？
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 字体分栏方法

column-count	表示需要分为多少栏
column-gap	每一栏之间的间距
column-rule	每一栏之间的样式

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('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592124104699&di=d7ebb683d4baccff9a741254a900e736&imgtype=0&src=http%3A%2F%2Fpic.feizl.com%2Fupload%2Fallimg%2F170614%2F1TJB554-0.jpg') no-repeat 0 0;
}

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

背景大小

在css3 以前控制背景大小很不方便，有可能还要找设计师改图片大小，现在就很简单了

backgournd-size:'宽度' '高度'

宽度和高度的单位不固定可以是px，rem，em等等都可以，有一个前提必须是在background-img 地址后面，否则无效；

假设：有一个div宽度和高度分别是300px和200px，有一个图片实际大小事 600px和 400px，现在我们需要把这个图片当做div的背景，并且无剪切填充满？
html

<div class ='box'>一张美女图300*200
</div>

css 代码

 .box{width: 300px;height: 200px;background: url('https://img.tupianzj.com/uploads/allimg/202003/9999/8969d449f7.jpg') no-repeat 0 0;background-size: 100% 100%;
}

background-size 可以自行调试多试试就知道了。

渐变

这是一种有规律的变化，能给人一种很强的节奏感和审美情趣，日常生活中随处可见，是一种视觉形象。
看一个生活的渐变

是一种很有规律很有节奏感的视觉之美。
css 中最常用的是线性渐变，其他渐变当然可以轻松实现只要你有较强的审美观念，如果没有还是交给设计师去处理吧。
线性渐变
基本语法

 background-image: linear-gradient('渐变开始位置[坐标点||角度]','渐变开始颜色','渐变结束颜色','颜色')

颜色最低通常包含两个，如果有三个或者以上按照等比例来分，第二个是第三个的开始颜色以此类推；
如：从上到下的渐变

 background-image: linear-gradient( to bottom,#ccc,#000);

线性渐变支持，向下/向上/向左/向右/对角方向，模式是向下，因此向下渐变也可以

background-image: linear-gradient('#ccc','#000')

如果有三段渐变

background-image: linear-gradient(top,'#ccc','#000','#fff')

边框多样化

边框让一个样式吧内容框起来就叫边框
最简单的边框

border：'宽度大小' '边框样式' '边框颜色'

1px 直线红色边框

border:1px solid red

90度的边框不好看，加点圆角

border: 1px solid red;
border-radius: 2px;

效果

来点阴影：

  width: 50px;height: 20px;border: 1px solid red;border-radius: 5px;box-shadow: #cccccc 1px 5px 5px;

border-radius ：圆角的写法后面可以根百分比的单位
box-shadow 阴影语法

box-shadow:颜色 水平偏移 垂直偏移 模糊距离 阴影尺寸 内外阴影（默认外）

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

CSS3快速入门：三、美化网页
美化网页 CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS选择器 CSS3快速入门:三.美化网页 CSS3快速入门:四.盒子模型 CSS3快速入门:五.浮动 ...
CSS3快速入门：五、浮动
浮动在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动. CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS ...
linux内核二当家,Linux PWN从入门到熟练（二）
前言上回说到,如何利用程序中system函数以及bin/sh字符串来进行pwn.这里我们会介绍,如何在栈可执行而system函数以及参数没有的情况下,如何自己布置payload进行pwn.此外,还提 ...
【github干货】主流深度学习开源框架从入门到熟练
文章首发于微信公众号<有三AI> [github干货]主流深度学习开源框架从入门到熟练今天送上有三AI学院第一个github项目 01项目背景目前深度学习框架呈百家争鸣之态势,光是为人 ...
matlab z变换离散化_MATLAB作图从入门到熟练
有同学说,靠网络上的文章,很难学到系统的知识,还得自己看书,这话不假.主要是因为网上文章篇幅过短,难免无法概括全面,加之同学们更关心一些高效的学习方法,更倾向于接受高密集信息的学习方式,节省时间和精力 ...
Linux PWN从入门到熟练
最近在复习pwn的一些知识.主要涉及到当堆栈开启了保护的时候,我们不能够直接将shellcode覆盖到堆栈中执行,而需要利用程序其他部分的可执行的小片段来连接成最终的shellcode.此小片段就是g ...
HTML + CSS3 基础入门与进阶
HTML + CSS3 基础入门与进阶简介 1.前端三层 2.IDE简介 3.网页实时热更新 4.项目开发流程一.HTML 入门与进阶 1.HTML 语法与基础标签 (1)HTML5基础入门 (2 ...
图像处理入门100题（三）
图像处理入门100题(三) 本篇记录了自己写的GIthub上的ImageProcessing 100 Wen的问题21-30的答案,注释里包含了一些自己的感悟.为了方便,注释是用英文写的. 进一步感受 ...
CSS3基础入门03
目录 CSS3 基础入门03 线性渐变径向渐变重复渐变 CSS3 过渡 CSS3 2D CSS3 3D CSS3 动画 animate 动画库 CSS3 基础入门03 线性渐变在css3当中,通 ...

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

字体