WEB前端程序开发

CSS字体和背景总结

2020-12-13  本文已影响0人  西北有高楼lee

六、字体和背景

1、字体

（1）字体的加载

为防止所指定的字体用户电脑中没有，可以在服务器中设置字体，用户从服务器中调用相应的字体使用。存在的问题：

@font-face {
  /* 为所要加载的字体起名字，在后面要设置字体样式的地方，可以直接使用这个名字 */
  font-family: "myfont";
  /* 查找所要加载的字体的路径 */
  src: url("");
}
（2）字体的样式

color: 用来设置字体的颜色
font-size: 字体的大小
和font-size相关的单位
em相当于当前元素的一个font-size
rem相当于根元素的一个font-size
font-family字体族，可选值：
serif:衬线字体
sans-serif:非衬线字体
monospace:等宽字体
这三个值用来指定字体的类别，浏览器会自动根据所指定的类别使用该类别下的字体，font-family可以同时指定多个字体，多个字体间使用,隔开。字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推。

p{
  color: saddlebrown;
  font-size: 40px;
  font-family: "宋体";
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-family: myfont;
}
（3）图标字体

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

（4）行高

行高（line-height）指的是文字占有的实际高度，可以通过line-height来设置行高，行高可以直接指定一个大小（px,em），也可以直接为行高指定一个整数。如果行高是一个整数的话，行高将会是字体的整数倍数，默认的行高是1.33。

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框上下平均分配

可以为行高设置为和高度一样的值，使单行元素在一个元素中居中

（5）字体的简写属性

font可以设置字体相关的所有属性，语法：font:字体大小/行高 字体族，行高可以省略不写，但是不写意味着使用默认值，如果在前面已经设置了行高，则在这里就会被默认值所覆盖。

font-size: 50px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font: 50px/2 Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

也可以在同时为font设置字重和字体风格，语法：font:自重 字体风格 体大小/行高 字体族，同样，如果没有在此设置字重和字体风格，则会使用默认值normal，如果在前面已经设置字重和字体风格则会被覆盖掉。

font-weight字重字体加粗，可选值：
normal：默认值，不加粗
bold：加粗，100-900九个级别（没什么用）

font-style字体的风格
normal：正常的
italic：斜体

font-weight: bold;
font-style: italic;
<div> 阁中帝子今何在？槛外长江空自流what a pity</div>
字体的简写属性.png

2、文本的样式

（1）文本的水平对齐

text-align可选值：
left：左侧对齐
right：右侧对齐
center：居中对齐
justify：两端对齐

        div{
            width: 800px;
            border: 1px red solid;
            text-align: center;
            font-size: 50px;
        }
（2）文本垂直对齐方式

vertical-align可选值：
baseline默认值，基线对齐（文本底部基础线）
top顶部对齐
bottom底部对齐
middle居中对齐
注意：
这里的居中对齐并不是相对于父元素居中，而是相对于前一个文本x的居中，即x的中心点为其中轴线

          span{
            border: 1px red solid;
            font-size: 20px;
            vertical-align: middle;
          }
          <div>今天天气真烂,shitx<span>bad</span></div>
文本的样式.png

想要去除图片与边框之间的很小的距离，只需要将图片的垂直对齐方式设置为非baseline即可

（3）设置文本修饰

text-decoration可选值：
none：什么都没有
underline：下划线
line-through：删除线
overline：上划线

.box2{
  font-size: 50px;
  text-decoration: line-through;
}
<div class="box2">今天天气太糟了</div>
文本修饰.png
（4）网页留白处理

white-space用来设置网页如何处理空白，可选值：
normal：正常
nowrap：不换行
pre：保留空白

text-overflow 属性规定当文本溢出包含元素时发生的事情，可选值：
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本
string：使用给定的字符串来代表被修剪的文本

        .box1{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    <div class="box1">
        could these humble rows of trees prevent a natural disaster? 
    </div>
文本溢出.png

3、背景

（1）设置背景

background-image用来设置背景图片，可以同设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色。如果背景图片小于元素，则背景图片会自动在元素中平铺把元素撑满；如果背景图片大于元素，则会有一部分背景图片无法显示；如果背景图片和元素一样大，则会直接正常显示。

（2）背景的重复

background-repeat用来设置背景的重复方式，可选值：
repeat: 默认值，背景会沿着x轴，y轴双方向重复
repeat-x: 沿着x轴方向重复
repeat-y: 沿着y轴方向重复
no-repeat: 背景不重复

（3）背景的位置

background-position用来设置背景图片位置，设置方式：
通过top,left,right,bottom,center几个表示方位的词来设置背景图片的位置，使用方位词时必须要同时指定两个值，如果只写了一个值，则第二个值默认是center

通过偏移量也可以指定背景图片的位置，第一个值表示水平方向的偏移量，第二个值表示垂直方向的偏移量

（4）背景的范围
        .box1{
            width: 500px; height: 500px;
            border: 10px red double; padding: 10px;
            overflow: auto;
            background-color: #bbffaa;
            background-image: url(2.jpg);
            background-repeat: no-repeat;
            background-position: 20px 20px;
            background-clip: content-box;
            background-origin: border-box;
            background-size: contain;
        }
        .box2{
            width: 300px; height: 1000px;
            background-image: url(1.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt dicta                         dignissimos maiores! Quam dolorum tempora sequi sed maxime, accusamus                           totam suscipit laudantium, adipisci nisi sapiente hic velit ducimus                                 voluptate. Similique.
        </div>
    </div>
背景.gif
（5）背景的简写

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

4、雪碧图的使用

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，浏览器加载外部资源时是按需加载的，用则加载，不用则不加载。因此在打开网页时，link会首先加载，hover和active会在触发时才会加载。

解决图片闪烁问题
可以将多个小图片统一保存到一个大的图片中，然后通过background-position来显示不同的位置，这样图片会同时加载到网页中，就可以有效的避免出现闪烁问题。这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图也称为雪碧图。

雪碧图的使用步骤

雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验

5、渐变

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

（1）线性渐变

linear-gradient()设置线性渐变，颜色沿着一条直线发生变化

linear-gradient(red,yellow)表示红色开头黄色结尾，中间是过渡区域

在线性渐变的开头可以指定一个渐变方向to left、to right、to top 、to bottom、deg 表示度数、turn 表示圈

渐变可以指定多个颜色，多个颜色默认情况下均分，也可以在每个颜色后面手动指定渐变的起始位置

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

background-image: linear-gradient(red,yellow);
background-image: linear-gradient(to left,black,green,red, yellow,white);
background-image: linear-gradient(to top left,black,green,red, yellow,white);
background-image: linear-gradient(160deg,pink,black);
background-image: linear-gradient(.7turn,pink,black);
background-image: repeating-linear-gradient(to right,red,yellow 50px);
渐变.png
（2）径向渐变

radial-gradient()设置径向渐变（放射性效果），默认情况下径向渐变的形状根据元素的形状进行计算了，正方形对应圆形，长方形对应椭圆形。也可以手动改变径向渐变的大小，circle圆形、ellipse椭圆形，也可以指定渐变的位置，语法：
radial-gradient(大小 at 位置，颜色，位置，颜色，位置)

大小：circle圆形、ellipse椭圆、cloest-side近边、farthest-side远边、farthest-corner远角

位置：top、bottom、left、right、center

        .box1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(green,red);
        }
        <div class="box1"></div>
径向渐变.png
上一篇 下一篇

猜你喜欢

热点阅读