css进阶

11. 字体&图标

字体

字体的相关样式

  • color：用来设置字体颜色

  • font-size：字体的 大小

    相关单位：

    • em 相对于当前元素的一个font-size
    • rem 相对于根元素的一个font-size

  • font-family：字体的样式

    可以同时指定多个字体，用，隔开，使用时优先选择前面的

    可选值：

    • serif：衬线字体
    • sans-serif：非衬线字体
    • monospace：等宽字体

    这些值一般都写在最后

  • font-weight：字体的粗细

    可选值：

    • normal：默认值 不加粗
    • bold：加粗
    • 100-900 九个级别（一般不用）

  • font-style：字体样式

    可选值：

    • normal：正常
    • italic：斜体

  • font的简写属性

    语法：

    font: 字体大小 字体族

    font: 字体大小/行高 字体族

  • text-decoration文本修饰

    可选值：

    • none 无样式
    • underline 下划线
    • line-through 删除线
    • overline 上划线

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

    可选值：

    • normal 正常换行
    • nowrap 不换行，显示很长的一行
    • pre 保留多个空格或者换行，显示原有内容

​ 练习：为溢出文本加加…

1
2
3
4
5
6
7
8
9
10
11
<style>
    .box{
        width: 200px;
        /*不换行*/
        white-space: nowrap;
        /*裁剪多余内容*/
        overflow: hidden;
        /*文本溢出后加……*/
        text-overflow: ellipsis;
    }
</style>
1
2
3
font:40px 'Times New Roman', Times, serif;   
/*或者*/
font:40px/2 'Times New Roman', Times, serif;

​ 行高可以省略不写，不写时使用默认值

​ 前面还可以加bold(加粗)，italic(斜体)

1
font:bold italic 40px/2 'Times New Roman', Times, serif;

​ font-face可以将服务器的字体直接提供给用户使用

1
2
3
4
5
6
@font-face {
    /*为字体命名*/
    font-family: 'myfont';
    /*导入字体的路径*/
    src: url('./font/HGWT_CNKI.TTF');
}

图标

​ 在网页中使用图标时，由于通过图片引入图片不灵活，
​ 还可以将图标直接设置为字体 ，然后通过font-face的形式对字体进行引入

font awesome 图标

Image

1
<script src="https://kit.fontawesome.com/39057c4fb4.js" crossorigin="anonymous"></script> 
1
2
3
<body>                                                
    <i class="fa-solid fa-meteor"></i>
    <i class="fa-solid fa-user-astronaut" style="font-size: 40px; color: cornflowerblue"></i>

练习：图标列表

  1. 找到要设置图标的元素通过before或after选中
  2. 找到图标的编码.将其加入到content中
  3. 设置字体的样式font-family
  4. 有的需要加font-weight（和all.css保持一致）
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <ul>
        
        <li>数着一圈圈年轮</li>
        <li>我认真</li>
        <li>将心事都封存</li>
        <li>密密麻麻是我的自尊</li>
        <li>修改一次次离分</li>
        <li>我承认</li>
        <li>曾幻想过永恒</li>
        <li>可惜从没人陪我演这剧本</li>
    </ul>
</body>
1
2
3
4
5
6
7
li::before{
    content: '\f77b';
    /*font-family: 'FontAwesome;*/
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400; 

}

行高—文字占有的实际高度

​ 通过line-height来设置行高

​ 行高可以直接指定一个大小（px em）

​ 也可以设置一个整数（字体的指定倍数）

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

1
2
3
4
5
6
div{
    font-size: 40px;
    /*line-height: 400px;*/
    line-height: 3;
    border: 1px green solid;
}

字体框

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

文本的水平和垂直对齐

  • text-align：文本的水平对齐方式

    可选值；

    • left：左侧对齐

    • right：右侧对齐

    • center：居中对齐

    • justify：两端对齐

1
text-align: center;

  • vertical-align：元素的垂直对齐方式

    可选值：

    • baseline：默认值 基线对齐
    • top：顶部对齐
    • bottom：底部对齐
    • middle：居中对齐
    • 直接指定值 
1
vertical-align: bottom;                                               vertical-align: 100px;

12.背景

背景的相关样式

  • background-color：设置背景颜色

  • background-image：设置背景图片

    1
    background-image: url(../font/img/girl.jpg);

  • background-repeat：设置背景的重复方式

    可选值：

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

  • background-position：设置背景图片的位置

    • 通过top, left, right, bottom, center几个表示方位的词来设置背景图片的位置，九宫格的位置

    • 通过偏移量指定背景图片的位置

      ​ 水平和竖直方向的偏移量

      1
      2
            background-position: top left;
      background-position: 100px 100px;

  • background-clip：设置背景的范围

    可选值：

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

  • background-origin：背景图片的偏移量计算的原点

    可选值：

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

  • background-size：设置背景图片的大小

    • 可以设置宽和高的一个值也可以设置两个值

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

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

  • background-attachment：背景元素是否移动

    可选值：

    • scroll：默认值 背景元素随元素移动
    • fixed：背景固定，不随元素移动

  • background：背景相关的简写属性，所有背景相关的样式都可以用该属性来设置

    没有顺序要求，可以随意写

    注意：

    • background-size必须写在background-position后边，并用/隔开，及background-position/background-size
    • ackground-origin必须写在background-clip前

背景渐变

​ 渐变是图片，需要通过background-image来设置
可选值：

  1. linear-gradient()：线性渐变

    可以指定渐变的方向和多个颜色颜色

    方向：

    • to left
    • to right
    • to bottom:默认
    • to top
    • to top left
    • 指定度数：xxdeg（eg. 45deg）
    • 指定圈数：xxturn（eg. .5turn/.25turn） 
1
2
3
4
/*从上到下渐变*/                                                    
*background-image: linear-gradient(red,yellow);
/*从左到右渐变*/
background-image: linear-gradient(to right,red,yellow);
  1. repeating-linear-gradient(): 可以平铺的线性渐变
1
background-image: repeating-linear-gradient(red 0px,yellow 100px);

  1. radial-gradient()：径向渐变

    默认情况下径向渐变的形状根据元素的形状来自动改变

    可以手动设置径向渐变的范围，或形状

    形状可以自定义大小，也可以选择值、

    可选值：

    • circle：圆形
    • ellipse：椭圆
    • closest–side：近边
    • closest-corner：近角
    • farthest-side：远边
    • farthest-corner：远角
1
2
3
background-image: radial-gradient(red,yellow);
background-image: radial-gradient(300px 100px,red,yellow);

​ 也可以指定渐变中心的位置

​ at 后加位置

​ 语法：radial-gradient(形状 at 位置, 颜色 位置, 颜色 位置, )

  1. repeating-radial-gradient()：径向重复渐变
1
background-image: radial-gradient(300px 100px at 0 0,red,yellow);
1
background-image: repeating-radial-gradient(300px 100px,red,yellow);

13. flex布局

​ flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1
display:flex;

注：任何一个容器都可以指定为flex布局

当父盒子 flex布局后，子元素的float，clear和vertical-align属性将失效

flex布局父项常见属性

Image

  1. flex-direction 设置主轴的方向

    可选值：

    • row：默认值，从左到右排列
    • row-reverse 从右到左
    • column：从上到下
    • column-reverse：从下到上

  2. justify-content：设置主轴上的子元素的排列/对齐方式

    注：使用此属性前要先确定好主轴是哪个

    可选值：

    • flex-start：默认值，从头部开始，如果主轴是x，则从左到右
    • flex-end：从尾部开始排列
    • center：在主轴居中对齐，如果主轴是x，水平居中
    • space-around：空白平均分布在盒子左右
    • space-evenly：空白平均分布在盒子 一侧
    • space-between：先两边贴边，再平分剩余空间

  3. flex-wrap设置子元素是否换行

    默认情况下，项目都排在一条线上，装不下时自动缩小盒子宽度

    可选值：

    • nowrap：默认 不换行
    • wrap：装不下时换行

    flex-flow是 flex-direction和flex-wrap的简写属性

  4. align-items 设置侧轴上元素的排列方式，当子项为单项（单行）时使用

    可选值：

    • flex-start：从上到下
    • flex-end：从左到右
    • center：垂直居中
    • stretch：拉伸 此时子盒子不能设置高度
    • baseline：基线对齐

  5. align-content：设置侧轴上元素的排列方式 ，当子项出现换行（多行）时使用

    可选值：

    • flex-start：默认值，从侧轴的头部开始排列
    • flex-end：从侧轴的尾部开始排列
    • center：在侧轴的中间显示
    • space-around：子项在侧轴平分剩余空间
    • space-betwee：子项在侧轴先两边贴边，再平分剩余空间
    • stretch：设置子项元素高度平分父元素高度

  6. flex-flow：是flex-direction和flex-wrap属性的复合属性

    可以同时设置主轴和换行属性

1
flex-flow:row wrap;

flex布局子项常见属性

  1. 伸展属性

    • flex-grow：元素的增长系数，默认为0

      定义子项分配父项剩余空间，会按照比例分配剩余空间

      属性值是某个数字

    • flex-shrink：缩减系数，默认为1

    • flex-basis：指定元素在主轴上的基础长度（row->width, column->height）

    默认值是auto，表示元素自身的高度或宽度

    • flex：以上三个属性的简写属性

    可选值

    可以写三个值，本别代表 增长 缩减 基础

    • initial：flex: 0 1 auto 能缩
    • auto：flex: 1 1 auto 能伸能缩
    • none：flex: 0 0 auto 不能伸缩

  2. align-self控制子项自己在侧轴上的排列方式，用来覆盖align-items，选值与align-items一致

  3. order：定义子项的排列顺序

    为属性指定数值

    子项按order属性数值大小排列数值越小，排列越靠前，默认为0

14. 过渡-transition

​ 属性：

  1. transition-property：指定要过渡的属性

    多个属性间用，隔开

    如果所有属性都要过渡，则使用all关键字

    注意过渡时要从一个有效值到另一个有效值，不能是auto

1
2
transition-property: width, height;
transition-property: all 0.5s;
  1. transition-duration：指定过渡效果的持续时间
1
2
transition-duration: 100ms,0.5s;
transition-duration: 0.5s;

  1. transition-function过渡时的时序函数
    可选值：

    ​ ease：默认值。慢速开始，先加速再减速

    ​ linear：匀速

    ​ ease-in：加速运动

    ​ ease-out ：减速运动

    ​ ease-in-out：先加速再减速

    ​ cubic-bezier()：指定时序函数
    ​ https://cubic-brzier.com

    ​ steps(n)：分布执行过渡效果

  2. transition-delay：过渡效果的延迟

1
transition-delay: 1s;
  1. transition：简写属性 ​ 同时设置过渡相关的所有属性 ​ 注：同时写持续时间和延迟时间时，第一个是持续时间

15. 动画

​ 动画和过渡类似，都可以实现一些动态的效果

​ 不同的是，过渡需要在某个属性发生变化时触发，动画可以自动触发动态效果

  1. 关键帧
    设置动画效果，必须先设置一个关键帧（@keyframes 关键帧名），关键帧设置了动画执行的每一个步骤
1
2
3
4
5
6
7
8
9
10
11
/*@keyframes 关键帧名*/
@keyframes test{
        /*from表示动画开始的位置，也可以用0%*/
        from{
            margin-left: 0;
        }
        /*to表示动画结束的位置，也可以用100%*/
        to{
            margin-left: 700px;
        }
    }
  1. animation-name：要对当前元素生效的关键帧的名字
1
animation-name: test;
  1. animation-duration：动画持续时间
1
animation-duration: 2s;

  1. animation-delay：动画的延迟

  2. animation-timing-function：动画效果函数

  3. animation-iteration-count：动画执行次数

    可选值：

    ​ 数值

    ​ infinite

1
animation-iteration-count: 5;

  1. animation-direction：指定动画运行的方向

    可选值：

    ​ normal：默认值，每次都从from到to

    ​ reverse：每次都从to到from

    ​ alternate：从from到to，来回反复执行

    ​ alternate-reverse：从to到from，来回反复执行

  2. animation-play-state：动画执行状态

    可选值：

    ​ running：默认值，动画执行

    ​ paused：动画暂停

  3. animation-fill-mode：动画的填充模式

    可选值：

    ​ none：默认值，动画执行完毕回到原来设置的位置

    ​ forwards：动画执行完毕元素会停止在动画结束的位置

    ​ backwards：动画延时等待时，元素就会处于开始位置

    ​ both：结合forwards和backwards

  4. animation：简写属性

16.变形–transform属性

​ 通过css来改变元素的形状或位置，形变不会影响页面其他元素得布局

​ transform用来设置元素得形变效果transform属性后，才能同时生效

​ 注：多个效果必须写在一个

平移

​ translateX() 沿x轴方向平移
​ translateY() 沿y轴方向平移
​ translateZ() 沿z轴方向平移

1
2
transform: translateX(100px); 
transform: translateX(50%);

注：以下这种方式 的居中，只适用于元素大小确定的情况，否则会充满整个屏幕 

1
2
3
4
5
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

另外一种居中方式 ：

1
2
3
left: 50%;   
top: 50%;
transform:     translateX(-50%)         translateY(-50%);

​ 在观测z轴平移之前，需要设置当前网页的视距，此方法不适用

1
2
3
html{    
    perspective: 800px;
}
1
transform: perspective(800px) translateZ(200px);

旋转

​ rotateX() 沿x轴旋转
​ rotateY() 沿y轴旋转
​ rotateZ() 沿z轴旋转

​ 旋转方式：

​ xxxdeg：指定度数 eg. 90deg, 180deg

​ xturn：指定圈数 eg. 1turn，.25turn

​ backface-visibility属性，是否显示元素的背面

​ 可选值：

​ hidden

​ visible

1
2

backface-visibility: hidden;

缩放

​ 对元素进行缩放的函数：

​ scaleX() 水平方向缩放

​ scaleY() 竖直方向缩放

​ scale() 双方向缩放

1
transform: scale(1.5);

​ 变形的原点：

​ 默认是中心，可以设置任何一个点

1
transform-origin: 0 0;

17. 变量声明

变量声明

1
2
3
4
html{                                                 
        --color: orange;
        --length: 100px;
    }

变量使用

1
2
3
4
5
.box1{    
        width: calc(100px*2);
        height: var(--length);
        background-color: var(--color);
    }

18. less

注释

​ 1. //
​ less中的单行注释，注释的内容不会被解析到css中
​ 2. /* */
​ css中的注释，内容会被解析到css文件中

变量

​ 变量中可以存储任意的值，并且可以在需要时修改变量中的值
​ 定义：
​ @变量名
​ 使用：
​ 使用变量时，如果直接使用，则以 @变量名 的形式使用
​ 作为类名，或者一部分值使用时，必须以 @{变量名} 的形式

1
2
3
4
5
6
7
8
9
10
11
12
13
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    width: @a;
    background-color: @b;
}
.@{c}{
    width: 200px;
    background-image: url("@{c}/i.png");
    color:pink;
    background-color: $color;
}

子元素

1
2
3
4
5
6
.box1{
    //子元素
    >.box2{
        color: orange;
    }
}

hover

1
2
3
4
5
6
7
8
9
.box1{
    /*.box1:hover &表示外围的选择器*/
    &:hover{
        color: red;  
    }
    div &{
        width: 100px;
    }
}

样式的扩展与复制

1
2
3
4
5
6
7
8
9
10
11
.p1{                    
    width: 100px;
    height: 200px;
}
//p2扩展了p1的样式
.p2:extend(.p1){
}
//将p1的样式复制给p3
.p3{
    .p1();
}
混合函数

​ 类选择器后加()时–混合函数，实际上创建了一个mixins，本身不会被解析到css中，但别的选择器可以使用它的样式

1
2
3
4
5
6
7
8
9
.p4(){
    width: 100px;
    height: 200px;
    background-color: #bfa;
}
.p5{
    .p4();
    //.p4;
}

​ 混合函数中可以直接设置变量

1
2
3
4
5
6
7
8
9
10
.test(@w,@h,@bg-color){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
div{
    .test(200px,300px,#bfa);
    /*参数可以不按顺序传递
    .test(@bg-color:red,@h:200px,@w:300px);*/
}

​ 混合函数中可以设置默认值，当该参数未指定值时，使用默认值

1
2
3
4
5
.test(@w:100px,@h:200px,@bg-color:pink){        
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
颜色变换

​ 颜色的中间值

1
2
3
span{
    color:average(red,yellow);
}

​ 颜色加深

1
2
3
4
5
6
7
8
body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
}
body:hover{
    background-color: darken(#bfa,10%);
}
less语法支持数值的简单运算 +-*/
1
2
3
4
5
.box1{
    width: 200px+100px;
    height: 200px-50px;
    background-color: #bfa;
}

可以引入其他less文件

1
@import "syntax2.less";

19. 响应式布局

网页可以根据不同设备或窗口大小呈现不同的效果

响应式布局的关键是媒体查询 ，通过媒体查询可以为不同的设备，或设备的不同状态来设置样式

​ 使用媒体查询
​ 语法 @media 查询规则{ }
​ 媒体类型：
​ all：所有设备
​ print：打印设备
​ screen： 带屏幕的设备
​ speech：屏幕阅读器
​ 可以使用，连接多个类型的设备

1
2
3
4
5
6
7
<style>                     
    @media all {
        body{
            background-color: #bfa;
        }
    }
</style>

媒体特性：
width
height
min-width 视口最小宽度
max-width 视口最大宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media (min-width: 500px){
    body{
        background-color: #bfa;
    }  
}
/*或者的关系*/
@media (min-width: 500px), (max-width: 300px){
    body{
        background-color: #bfa;
    }
}
/*并且的关系*/
@media only screen and  (min-width: 300px) and (max-width: 500px){
    body{
        background-color: #bfa;
    }
}