颜色 color 字体 font 图标字体

时间:2024-02-20 15:29:49

color

color 前景色,通常用来设置字体的颜色

transparent

特殊的颜色,transparent 透明色,一般所有背景颜色的默认值

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色
比如:red、orange、yellow、blue、green ... ...
但是在css中直接使用颜色名是非常的不方便

RGB值

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red,G green ,B blue
每一种颜色的范围在 0 - 255 (0% - 100%) 之间

语法:RGB(红色,绿色,蓝色)
e.g. color: rgb(250,80,100);

Hello World!

RGBA

就是在rgb的基础上增加了一个a表示不透明度
需要四个值,前三个和rgb一样,第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明

e.g. color: rgba(250,80,100,.5);

Hello World!

十六进制的RGB值

语法:#红色绿色蓝色
颜色浓度通过 00-ff

如果颜色两位两位重复可以进行简写
#bbffaa --> #bfa

e.g. color: #bfa 护眼豆沙绿

Hello World!

HSL值 HSLA值

H 色相(0 - 360)

S 饱和度,颜色的浓度 0% - 100%

L 亮度,颜色的亮度 0% - 100%

A 不透明度

e.g. color: hsla(98,48%,40%,0.658);

Hello World!

font-size

font-size 设置字体的大小

字体大小单位

像素

屏幕(显示器)实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
所以同样的20px在不同的设备下显示效果不一样

而网页字体默认的大小为 16px

e.g. font-size: 25px;

Hello World!

em

em 是相对于元素的字体大小来计算的

1em = 1*font-size

em 相当于当前元素的一个font-size

rem

rem 是相对于根元素的字体大小来计算

rem 相对于根元素的一个 font-size(16px)

font-family

font-family 字体族(字体的格式)

可选值:

  1. serif 衬线字体类

    你好世界 Hello World

  2. sans-serif 非衬线字体类

    你好世界 Hello World

  3. monospace 等宽字体类

    你好世界 Hello World

除了这些,还有像 cursive fantasy 之类不常用的字体类

上面这些值是指定字体的类别,浏览器会自动使用该类别下的字体


font-family 可以同时指定多个字体,多个字体间使用 , 隔开

字体生效时优先使用第一个,第一个无法使用则使用第二个 以此类推

@font-face

可以将服务器中的字体直接提供给用户去使用

@font-face {
    /* 指定字体的名字 */
    font-family:\'myfont\' ;
    /* 服务器中字体的路径 */
    src: url(\'./font/ZCOOLKuaiLe-Regular.ttf\') format("truetype");
    /* format 指定字体文件格式,一般都不用写 */
}

p {
    font-family: myfont;
}

可能会有些问题:

  • 加载速度
  • 版权
  • 字体格式
    .ttf woff 之类的

图标字体(iconfont)

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

这样我们就可以通过使用字体的形式来使用图标

引用图标有3中方式:(下面会讲到)

  1. 引用类
  2. 实体
  3. 设置伪元素

fontawesome

fontawesome 使用步骤

  1. 下载 https://fontawesome.com/
  2. 解压
  3. 将 css 和 webfonts 移动到项目中,必须在同一级目录下
  4. 将 all.css (或 all.min.css) 引入到网页中
  5. 使用图标字体

直接通过类名来使用图标字体

class="fas fa-bell"

class="fab fa-accessible-icon"

fas 和 fab 是设置字体格式,后面的就是详细的那种图标

注意:fas 和 fab 是免费的

<!-- 通常用 i 标签来创建图标元素 -->
<!-- 可以根据需要,来调整图标的大小,颜色等样式 -->
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>	<!-- otto -->
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>

image-20201219173859294


其他引用方式

<head>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }

        /* 通过设置伪类的方式使用图标 */
        li::before{
            content: \'\f1b0\';
            /*font-family: \'Font Awesome 5 Brands\'; */	/* fab */
            font-family: \'Font Awesome 5 Free\';	
            font-weight: 900; /* fas */
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>

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

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

    <!-- 
		<span class="fas fa-bell"></span>
		除了引用类的方式
        还可以通过实体来使用图标字体:
        格式:	&#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
    
</body>

image-20201219175425942

阿里图标库

阿里图标库里面有很多图标,使用方式和上面的 fontawesome 差不多

https://www.iconfont.cn/

打开主页,搜索或者查看需要的图标,加至购物车,然后导入项目,查看此项目,可以下载到本地,也可以使用在线的 css(推荐)

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2280834_a3jjthi2f8.css"/>
    <style>
        .iconfont {
            font-size: 50px;
            color: red;
        }
        p::before {
            content: "\e600";
            font-family: "iconfont";
            font-size: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-like"></i>	<!-- 引用类 -->
    <i class="iconfont">&#xe600;</i>	<!-- 实体 -->
    <p>LOVE</p>	<!-- 设置伪元素 -->
</body>

效果:

image-20201219190242824

行高

行高(line-height)

行高指的是文字占有的实际高度
可以通过 line-height 来设置行高

行高可以直接指定一个大小(px emd 等)

也可以直接为行高设置一个整数(默认是 line-height: 1.33;
如果是一个整数的话,行高将会是字体的指定的倍数


字体框

字体框就是字体存在的格子,设置 font-size 实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中

div {
    font-size: 50px;
    height: 200px; /* 可以不写 */
    line-height: 200px;
    border: 1px red solid;
}

image-20201220163435010


div {
    font-size: 50px;
    height: 30px;
    border: 1px red solid;
}

image-20201220163859284


div {
    font-size: 50px;
    line-height: 30px;
    border: 1px red solid;
}

image-20201220164025293

行高经常还用来设置文字的行间距

行间距 = 行高 - 字体大小

div {
    font-size: 50px;
    line-height: 200px;
    border: 1px red solid;
}

image-20201220162358035

字体简写属性

font

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

语法:

font: 字体大小/行高 字体族 (字体大小 和 字体族 是必须写的
行高 可以省略不写 如果不写使用默认值(line-height: normal;

font: font-style font-variant font-weight font-size/line-height font-family;

e.g.

font: 50px/2  微软雅黑, \'Times New Roman\', Times, serif;
div {
	line-height: 2;
	font: 50px 微软雅黑, \'Times New Roman\', Times, serif;
	/* 此时呢,上面的 line-height: 2; 就失效了,因为后面的 font 给覆盖了成了 normal(默认值)*/
    /* 解决这种情况,要么在 font 内设置,要么把 line-height 放到下面来 */
}

font-variant

  • normal 默认值
  • small-caps 将小写字母变成大写,并且比普通的大写字母变得小一些,而原本大写的字母不发生改变

font-weight

font-weight 字重 字体的加粗

可选值:

  • normal 默认值 不加粗
  • bold 加粗
  • lighter 减细
  • 100-900 九个级别(一般没什么用,因为字体文件里一般都有 正常 normal 和 加粗 bold 的字体,所以这些几百的级别都没作用)

font-style

font-style 字体的风格

  • normal 正常的
  • italic 斜体

上面这俩属性也可以加到 font 里,这俩的顺序无所谓,但要放在最前面

div {
    border: 1px red solid;
    font-weight: normal;	/* 因为下面覆盖设置了,所以这个会失效 */
    font: bold italic 50px/2  微软雅黑, \'Times New Roman\', Times, serif;
}

image-20201220165552070

文本的样式

text-align

text-align 文本的水平对齐

可选值:

  1. left 左侧对齐(默认值)
  2. right 右对齐
  3. center 居中对齐
  4. justify 两端对齐

left

image-20201220171902258

right

image-20201220171925455

center

image-20201220171946523

justify

image-20201220172025102

vertical-align

vertical-align 设置元素垂直对齐的方式

可选值:

  1. baseline 默认值 基线对齐
  2. top 顶部对齐
  3. bottom 底部对齐
  4. middle 居中对齐(一般不是我们所谓的居中)
  5. 具体值 e.g. vertical-align: 100px; 正数向上,负数向下
<style>
    div {
        width: 800px;
        border: 1px red solid;
        font-size: 50px;
    }

    span {
        font-size: 20px;
        border: 1px blue solid;
        vertical-align: baseline;
    }
</style>
<div>今天天气 Helloyx <span>真不错 Hello</span> !</div>

image-20201220173514368

<style>
    p {
        border: 1px red solid;
    }

    img {
        vertical-align: bottom;
        /* 图片是带 基线 baseline的,所以在默认垂直对齐下,图片与父元素边框(被撑开的情况下)下面会有一段空隙 */
        /* 消除这段空隙的解决办法就是设置 非 baseline 值的 vertical-align */
    }
</style>    
<p>
    <img src="./img/an.jpg" alt="" />
</p>

不设置 vertical-align

image-20201220174315853

设置了非 baseline 值的 vertical-align

image-20201220174235483

text-decoration

text-decoration 设置文本修饰

值:

  1. text-decoration-color 修饰线的颜色
  2. text-decoration-line 修饰线的位置
  3. text-decoration-style 修饰线的样式
  4. text-decoration-thickness 修饰线的粗细

这些值都可以简写到 text-decoration 里

text-decoration-line 可选值:

  • none 什么都没有
    Hello World!

  • underline 下划线

    Hello World!

  • line-through 删除线

    Hello World!

  • overline 上划线

    Hello World!

text-decoration-style 可选值:

  • solid 单实线

    Hello World!

  • double 双实线

    Hello World!

  • dotted 点线

    Hello World!

  • dashed 虚线

    Hello World!

  • wavy 波浪线

    Hello World!

注意:这些值IE可能不支持

white-space

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

可选值:

  1. normal 正常,换行
  2. nowrap 不换行
  3. pre 保留空白

normal

<style>
    .box2{
        width: 200px;
        border: 1px red solid;
        white-space: normal;
    }
</style>
<div class="box2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
    minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
    cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
    numquam. Dolores, cupiditate enim.
</div>

<div class="box1">
    今天天气真不错
</div>

image-20201220181602102

pre

<style>
    .box2{
        width: 200px;
        border: 1px red solid;
        white-space: pre;
    }
</style>
<div class="box2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
    minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
    cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
    numquam. Dolores, cupiditate enim.
</div>

<div class="box1">
    今天天气真不错
</div>

image-20201220181647297

nowrap

<style>
    .box2{
        width: 200px;
        border: 1px red solid;
        white-space: nowrap;
    }
</style>
<div class="box2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
    minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
    cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
    numquam. Dolores, cupiditate enim.
</div>

<div class="box1">
    今天天气真不错
</div>

image-20201220181832724

实现多余的文字用省略号 ...

<style>
    .box2{
        border: 1px red solid;
        width: 200px;	/* 显示文字的宽度 */
        white-space: nowrap;	/* 文字不换行 */
        overflow: hidden;	/* 超出的不显示 */
        text-overflow: ellipsis;	/* 显示省略符号来代表被修剪的文本 */
        /* 缺一不可 */
    }
</style>
<div class="box2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
    minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
    cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
    numquam. Dolores, cupiditate enim.
</div>

<div class="box1">
    今天天气真不错
</div>

image-20201220182019952

text-transform

设置字母大小写

text-indent

设置文本缩进

<!-- 这样标签里的文字就看不到了,但有利于SEO -->
<p style="text-index=\'-999999\'">
    标题
</p>