【HTML+scss】 css进阶使用方法 css阴影 css边框 css文字样式 css背景

本文链接：https://blog.csdn.net/weixin_63436826/article/details/131835875

本文详细介绍了CSS中的文字样式、行高与垂直对齐、背景属性以及边框属性，包括各种属性的用法和示例。此外，还提供了两个实际操作练习，一个是文字样式的应用，另一个是复刻小米官网的部分设计，以帮助读者巩固所学知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

文字样式

font-weight：
指定字体粗细 -blod normal
font-style：
指定字体倾斜 -normal italic(斜体) oblique(倾斜)
font-family：
指定字体
text-shadow：
文本阴影
word-wrap：
允许长的内容可以自动换行（英文）

break-word：在长单词或URL地址内部进行换行（短单词不换行）
word-break：
属性指定非CJK脚本的断行规则。（英文）
break-all：允许在单词内换行（无差别强制换行，不会留有空白）
只能在半角空格或连字符处换行

line-height 和 vertical-align

文本的基本概念：
在这里插入图片描述

font-size:同一行顶线和底线之间的距离
行距：上行的底线和下一行的顶线之间的距离，即控制两行文字垂直的距离
基线：并不是汉字文字的下端沿，而是英文字母“X”的下端沿
行高：是指文本行基线间的垂直距离

font-size 与 line-height之间的距离
font-size等于line-height时，行距 = line-height - font-size = 0；
当font-size 小于 line-height时，行距会变大。
vertical-align
默认情况下，图片、按钮、文字和单元格都可以用vertical-align属性。
只有元素属于inline或是inline-block，vertical-align属性才会起作用

css背景

元素的背景属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认
值。/fixed 当页面的其余部分滚动时，背景图像不会移动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，
那么第二个值将时"center"
x% y% 第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0% 右上角是 100%100%
如果仅规定了一个值，另一个值是 50
background-repeat 设置背景图像是否及如何重复。
repeat/repeat-x/repeat-y/no-repeat
css3新增的背景属性
background-size 规定背景图片的尺寸。
像素/百分比设置宽高。
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
练习：信纸练习（课堂练习）

css边框

元素的边框属性
border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
none 定义无边框。
dotted 定义点状边框。
dashed 定义虚线。
solid 定义实线。
groove定义点状边框。
ridge定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
css3新增的边框属性
border-radius 设置所有四个 border-radius 属性的简写属性。

*同时设定四个角的圆角。
**分别设定左上右下、左下右上圆角。
***分别设定左上右下、左下右上圆角。
**** 分别设定左上、右上、右下、左下圆角
border-top-left-radius 左上角圆角边框。
border-top-right-radius 右上角圆角边框。
border-bottom-right-radius 右下角圆角边框。
border-bottom-left-radius 左下角圆角边框。
border-image 设置所有 border-image 属性的简写属性
值描述
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量。
border- image-repeat(stretched) 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸

小练习

效果图
在这里插入图片描述

素材
在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 600px;
        height: 800px;
        padding: 40px;
        font-size: 12px;
        line-height: 24px;
        border: 20px ridge rgba(200,60,30,0.6);

        background-image: url(img/sc16.png),
        url(img/sc17.png),
        url(img/sc5.png),
        url(img/sc18.png);
        background-repeat: no-repeat,no-repeat,repeat,repeat;
        background-position: left top,right bottom,left top,left top;
        background-size: 25%,25%,auto 96px,15px;
        background-origin: border-box,border-box,content-box,border-box;
        background-clip: border-box,border-box,content-box,border-box;
    }
    p{
        margin: 0;
        padding: 0;
        text-indent: 4em;
    }
</style>
<body>
    <div>
        <p>这里是文字这里是文字这里是文字这里是文字这里
            这里是文字这里是文字这里是文字
            这里是文字这里是文字这里是文字
            这里是文字这里是文字这里是文字
            这里是文字这里是文字这里是文字
            这里是文字这里是文字这里是文字
            是文字这里是文字这里是文字这里是文字</p>
    </div>
</body>
</html>

复刻小米官网块

在这里插入图片描述
素材
从小米商城复制下载
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .kuang{
            height: 172px;
            width: 1240px;
            background-color: #fff;
            margin: 0 auto;
        }
        li{
            list-style: none;
            display: inline-block;
            height: 70px;
            width: 60px;
            float: left;
            padding: 7px;
            border: 1px solid #665E57;
            text-align: center;
            color: #CFCDCB;
            font-size:8px;
        }
        .a{
            height: 24px;
            /* width: 24px; */
            margin:5px 20px;
        }
        ul{
            height: 172px;
            width: 234px;
            background-color: #5F5750;
            
        }
        li:hover{
            cursor: pointer;
            color: #FFF;
        }
        .b{
            width: 316px;
            height: 170px;
            float: right;
            margin: 5px;
        }
        .c{
            position: relative;
            top: -180px;
            left: -32px;
        }
        .b:hover{
            cursor: pointer;
            box-shadow: 1px 1px 10px ;
            position:relative;
            bottom:  1px;
        }
    </style>
</head>
<body>
    <div class="kuang">
        <ul>
            <li><img class="a" src="img/1.png" alt="">保障服务</li>
            <li><img class="a" src="img/2.png" alt="">企业团购</li>
            <li><img class="a" src="img/3.png" alt="">F码通道 </li>
            <li><img class="a" src="img/4.png" alt="">米粉卡  </li>
            <li><img class="a" src="img/5.png" alt="">以旧换新</li>
            <li><img class="a" src="img/6.png" alt="">话费充值</li>
        </ul>
        <div class="c">
            <img class="b" src="./img/7.jpg" alt="">
            <img class="b" src="./img/8.jpg" alt="">
            <img class="b" src="./img/9.jpg" alt="">
        </div>
    </div>
</body>
</html>