CSS3-其它特性

1. web字体和字体图标

1.1 web字体

概述:用户电脑上没有安装相应字体,强制让用户下载该字体(浏览器临时性自动下载网页编写者给定在CSS中的字体文件)

步骤:

  1. 提供需要生成字体字体文件内容

  2. 使用网络资源生成web字体,然后下载并解压到本地;如阿里巴巴icofont字体图标网站

  3. 把解压的字体文件复制到,项目的font文件夹

  4. 把下载到的字体代码复制到css文件中

    /*代码格式:*/
    @font-face{
        font-family:"字体名";
        src:url("字体文件路径");
    }
    /*注:因为字体文件放在font文件夹中,所有一定要更改代码里面的路径,一般前面加上 ./font/*/
  1. 创建类样式,并把类样式添加给需要的元素
    .myFont{
        font-family:iconfont;
    }

1.2 字体图标

概述:常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了

步骤

  1. 使用网络资源找到需要的字体图标,然后下载并解压到本地;如阿里巴巴icofont字体图标网站

  2. 把解压的字体文件复制到,项目的font文件夹

  3. 把下载到的字体代码复制到css文件

    /*代码格式:*/
    @font-face{
        font-family:"iconfont";
        src:url("字体文件路径");
    }
    /*注:因为字体文件放在font文件夹中,所有一定要更改代码里面的路径,一般前面加上 ./font/*/
  1. 创建类样式,并把类样式添加给需要的元素
    .myFont{
        font-family:iconfont;
    }
  1. 给需要字体图标的元素,生成一个伪元素,设置字体图标
    .myFont::before{
        /*把16进制的字体编码""写成以下格式*/
        content:"\e620";
        /*可以自由添加字体样式 */
        font-size:20px;
        ....
    }

2. 多列布局(文本)

概述: CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人
           员轻松的让文本呈现多列显示

常用属性(设置多列布局):

 1. column-count: 属性设置列的具体个数
       如:column-count:3;
       注:会根据列的个数均分元素空间

    2. column-width: 属性控制列的宽度
       如: column-width:200px;
       注意:a).当指定了列的个数和宽度时,原则上取大优先
            b).如果设置的宽度更大,则取宽度,用元素总宽度/设置的宽度,重新生成列数,
            c).但是会填充整个元素,意味最终的宽度可能会大于设置的宽度  
            d).如果设置的宽度小于生成列数形成的宽度,则使用列数生成的宽度

    3. column-gap: 两列之间的缝隙间隔
       column-gap:50px;

    4. column-rule: 规定列之间的宽度、样式和颜色,与设置边框样式一样
       column-rule: 1px dashed #000; 

    5. column-span: 规定元素应横跨多少列,只有两个参数:1(1)、all(跨所有列)
       一般如文本标题,放在最顶部,横跨所有列

3. CSS3 新增的的计算属性

  1. calc() 是css3的一个新增的功能,用来指定元素的长度。
  2. calc() 可以元素的border、margin、pading、font-size和width等属性设置动态值
    .wrappers { 
    	height: calc(100% - 93px);
     } 
     // 这里的 100% 相对于父元素,calc 方法内部可以做计算,注意运算符两边要留一个空格
    

4. vh 单位

  1. vh 是相对于视口的单位
    .wrappers { 
    	height: 100vh;
     } 
     // 100vh 表示,相对于视口的 100%	
    

5. 图片模糊

  1. filter属性将模糊或颜色偏移等图形效果应用于元素
    filter: blur(5px)
    // blur模糊处理,值越大越模糊
    

6. calc()函数

  1. calc()计算属性值
    width: calc(100% - 80px)
    // 运算符两边留空格
    
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页