山西农业大学20240925

04-CSS

- 一. 元素的特性
- - 1. 元素的显示
  - - 1.1 元素的显示取值
    - 1.2 显示其他的属性值
  - 2. 元素的显示和隐藏效果
  - 3. 元素的溢出
- 二. 文字文本的渲染
- - 1. 字体属性
  - - 1.1 字体大小
    - 1.2 字体字重
    - 1.3 字体系列
    - 1.4 字体样式
    - 1.5 字体简写

一. 元素的特性

1. 元素的显示

1.1 元素的显示取值

元素以什么样的形式显示在页面中
属性: display

display:block; 以块级元素的形式显示
display:inline-block; 以行内块元素的形式显示
display:inline; 以行内元素的形式显示

所有元素都可以变化自己的显示形式, 同时改变了自己的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示</title>
    <style>
        .d1{
            width:100px;height: 100px;background-color: red;
            /*
                将块级元素的显示修改为行内元素
                设置宽高无效; 从左向右排列
             */
            display: inline;
        }
        .d2{
            width:100px;height: 100px;background-color: #EBAD7D;
            display: inline;
        }
        .s1{
            background-color: #8EE1FF;
            /*
                将行内元素显示修改为块级元素
                换行显示 ;宽度为父元素的100%
            */
            display: block;
            /* 设置宽高生效 */
            width: 100px;
            height: 100px;
        }
        .s2{
            background-color: lime;
            display: block;
        }
    </style>
</head>
<body>
    <div class="d1">123</div>
    <div class="d2">123</div>
    <br>
    <span class="s1">123</span>
    <span class="s2">123</span>
</body>
</html>

1.2 显示其他的属性值

display: none; 不显示任何元素
display: table; 以表格的形式显示
display: flex; 弹性布局

2. 元素的显示和隐藏效果

在项目中, 经常出现元素的展现和消失
要和元素的状态(伪类选择器)一起使用

display: none; 不显示, 元素在在页面中完全消失, 不占据页面空间
display: block; 显示;
visibility: hidden; 隐藏, 还占据页面空间
visibility: visible; 默认不隐藏
opacity: 0; 元素完全透明:0 ; 完全不透明: 1

会将元素的文字也变透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示也隐藏</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .d1{
            background-color: #8EE1FF;
            /* 元素隐藏, 不占据页面空间*/
            /*display: none;*/
            /* 元素隐藏, 占据页面空间*/
            /*visibility: hidden;*/
        }
        .d2{
            background-color: red;
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2">111111</div>
</body>
</html>

3. 元素的溢出

元素里面的内容(子元素或者文字) 大于父元素的宽和高, 会发生溢出
如果想要发生溢出, 需要设置父元素的范围(宽高),范围小于内容部分
属性: overflow
取值:

hidden: 溢出部分隐藏
scroll: 元素的横向纵向(x, y )方向出现滚动条
auto: 溢出方向出现滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素溢出</title>
    <style>
        .father img{width: 300px;}
        .box{width: 1250px;}
        .father{
            width:600px;
            height: 190px;
            border:1px solid #000;
            /* hidden: 溢出隐藏*/
            /*overflow: hidden;*/
            overflow: auto;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="box">
            <img src="./img/overflow01.jpg" alt="">
            <img src="./img/overflow02.jpg" alt="">
            <img src="./img/overflow0103.jpg" alt="">
            <img src="./img/overflow04.jpg" alt="">
        </div>
    </div>
</body>
</html>