前端HTML5&CSS3笔记--Fonts&Background（六）

梧桐街角
145 阅读7分钟

一、字体

  1. color 用来设置字体颜色；
  2. font-size 字体的大小；
  3. font-family 字体族（字体的格式）；
    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等宽字体
  4. font-family 可以同时指定多个字体，多个字体间使用,隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推；
p {
    color: blue;
    font-size: 40px;
    font-family: 'Courier New', Courier, monospace;
}
从服务器加载字体
@font-face {
       /* 指定字体的名字 */
       font-family: 'myfont' ;
       /* 服务器中字体的路径 */
       src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}

二、图标字体

  1. 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活；
  2. 在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入；

fontawesome使用

  1. 将css和webfonts移动到项目中；

  2. 将all.css引入到网页中；

  3. 使用图标字体；

    • 直接通过类名来使用图标字体；
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash" style="font-size:50px; color:green;"></i>
</body>
</html>

pic_008.PNG

  1. 通过伪元素来设置图标字体

    • 找到要设置图标的元素通过before或after选中;
    • 在content中设置字体的编码;
    • 设置字体的样式;
      • fab：（font-family: 'Font Awesome 5 Brands';）
      • fas：（font-family: 'Font Awesome 5 Free';）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }

        li::before{
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <!-- <i class="fas fa-cat"></i> -->

    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 
        通过实体来使用图标字体：
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
</body>
</html>

pic_009.PNG

三、行高

  1. 行高指的是文字占有的实际高度，可以通过line-height来设置行高；
  2. 行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定的倍数，默认行高一般是1.333；
  3. 行高经常还用来设置文字的行间距：（行间距 = 行高 - 字体大小）；
  4. 字体框：字体存在的格子，设置font-size实际上就是在设置字体框的高度；
  5. 行高会在字体框的上下平均分配；
  6. 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中（line-height）；

四、字体的简写属性

  1. font 可以设置字体相关的所有属性；

    • 语法：font: 字体大小/行高 字体族 （行高 可以省略不写 如果不写使用默认值）

  2. font-weight（字重 字体的加粗 ）

    • normal 默认值 不加粗
    • bold 加粗
    • 100-900 九个级别（没什么用）

  3. font-style（字体的风格）

    • normal 正常的
    • italic 斜体

  4. 简写

    font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;

五、文本样式（排版、对齐）

  1. text-align (文本的水平对齐)

    • left 左侧对齐
    • right 右对齐
    • center 居中对齐
    • justify 两端对齐

  2. vertical-align (元素垂直对齐的方式)

    • baseline 默认值 基线对齐
    • top 顶部对齐
    • bottom 底部对齐
    • middle 居中对齐（是基于字母x的高度对齐的）

  3. 图片对齐默认使用基线对齐，下方会有空白，使用vertical-align处理；

    img {
   vertical-align: bottom;
}

  4. text-decoration (设置文本修饰)

    • none 什么都没有
    • underline 下划线
    • line-through 删除线
    • overline 上划线

  5. white-space 设置网页如何处理空白

    • normal 正常
    • nowrap 不换行
    • pre 保留空白
    .box{
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

pic_010.PNG

六、背景颜色

  1. background-color 设置背景颜色；

  2. background-image 设置背景图片；

    • 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色；
    • 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满；
    • 如果背景的图片大于元素，将会一个部分背景无法完全显示；
    • 如果背景图片和元素一样大，则会直接正常显示；

  3. background-repeat 用来设置背景的重复方式；

    • repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
    • repeat-x 沿着x轴方向重复
    • repeat-y 沿着y轴方向重复
    • no-repeat 背景图片不重复

  4. background-position 用来设置背景图片的位置；

    • 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置，使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
    .box1{
	width: 500px;
	height: 500px;
	background-color: #bfa;
	background-image: url("./img/1.png");
	background-repeat: no-repeat;
	background-position: -50px 300px;
}

七、设置背景的范围

  1. background-clip 设置背景的范围

    • border-box 默认值，背景会出现在边框的下边；
    • padding-box 背景不会出现在边框，只出现在内容区和内边距；
    • content-box 背景只会出现在内容区；

  2. background-origin 背景图片的偏移量计算的原点

    • padding-box 默认值，background-position从内边距处开始计算
    • content-box 背景图片的偏移量从内容区处计算
    • border-box 背景图片的变量从边框处开始计算

  3. background-size 设置背景图片的大小

    • 第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是 auto；

      background-size: 100% auto; //可以设置百分比

    • cover 图片的比例不变，将元素铺满；

    • contain 图片比例不变，将图片在元素中完整显示；

  4. background-attachment 背景图片是否跟随元素移动

    • scroll 默认值 背景图片会跟随元素移动
    • fixed 背景会固定在页面中，不会随元素移动\

  5. background 背景相关的简写属性

    • 所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有哪个属性是必须写；

八、练习

渐变条

pic_012.PNG

<style>
        .box1{
            width: 990px;
            height: 32px;
            margin: 0 auto;
            /* background-image: url('./img/07/bg.png');
            background-repeat: repeat-x; */
            background: url('./img/07/bg.png') repeat-x;
        }
</style>
图片切换

pic_013.PNG

<style>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url('./img/08/link.png') //默认
        }

        a:hover{
            background-image: url('./img/08/hover.png') //鼠标放在图标上
        }

        a:active{
            background-image: url('./img/08/active.png') // 鼠标点击时
        }
</style>

存在问题

  • 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载，hover和active会在指定状态触发时才会加载，第一次使用时会有闪烁现象；

解决图片闪烁的问题

  1. 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片；

  2. 这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题；

  3. 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图；

    a:link{
	display: block;
	width: 93px;
	height: 29px;
	background-image: url('./img/09/btn.png')
}

a:hover{
	background-position: -93px 0;
}

a:active{
	background-position: -186px 0;
}

九、渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。渐变是图片，需要通过background-image来设置。

线性渐变

  1. linear-gradient()： 颜色沿着一条直线发生变化；

  2. linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域。

  3. 线性渐变的开头，我们可以指定一个渐变的方向：

    • to left
    • to right
    • to bottom
    • to top
    • deg deg表示度数
    • xx turn 表示圈

  4. 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。

  5. repeating-linear-gradient() 可以平铺的线性渐变。

    background-image: repeating-linear-gradient(to right ,red, yellow 50px);
径向渐变

  1. radial-gradient() 径向渐变(放射性的效果)；

  2. 也可以指定渐变的位置；

    • circle 圆形
    • ellipse 椭圆
    • closest-side 近边
    • closest-corner 近角
    • farthest-side 远边
    • farthest-corner 远角
     background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
avatar
文章
阅读
粉丝