CSS样式

困了吃慕斯

已于 2023-08-03 21:07:46 修改

阅读量46

点赞数

分类专栏：前端的薄弱基础文章标签： css 前端

于 2023-08-03 21:07:34 首次发布

本文链接：https://blog.csdn.net/zwb0303/article/details/132091760

版权

前端的薄弱基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS样式

文字样式
文本样式
背景样式
边框样式
实例

文字样式

文字大小：font-size

文字加粗：font-weight

文字倾斜：font-style

字体：font-family

小型大写字母：font-variant

自定义引入字体：@font-face{

font-family:起名;
src:url(字体路径);

}

	<style>
        p{
            /* 文字大小 */
            font-size: 10px;
            /* 文字加粗 100最小；900最大；bold加粗是b的全写；bolder更粗 */
            font-weight: 900;
            /* 文字倾斜 italic倾斜是i的全写 */
            font-style:italic;
            /* 字体 */
            font-family:xiaozhao;
            /* 小型大写字母 */
            font-variant:small-caps;
        }
        /* 自定义字体 */
        @font-face {
                /* 给字体起名字 */
                font-family: xiaozhao;
                /* 字体位置 */
                src: url(./Wesley__.ttf);
            }
    </style>

文本样式

具体使用可以查看下方视觉错位与信纸

文本阴影：text-shadow:水平方向位移竖直方向位移模糊度颜色;

文本颜色：color

文本样式：text-decoration

none 无装饰
line-through 删除线
underline 下划线
overline 上划线
blink 闪烁

首字母大写：text-transfrom:capitalize

文本缩进：只对p标签应用：text-indent em字符

文本对齐：text-align

居中 center
左对齐 left
右对齐 right
两端对齐 justify

文本行高：line-height（一般用来做竖直位置上的居中效果；与容器高度一致时，竖直位置居中）

文本换行：word-wrap:break-word；

文本不换行：white-space:nowrap

背景样式

具体使用可以查看下方信纸案例

背景颜色：background-color

背景图片：background-image:url(图片路径)

背景重复：background-repeat

重复 repeat
- 水平方向 repeat-x
- 垂直方向 repeat-y
不重复 no-repeat

背景定位：background-position

居中：center
右下角：right bottom
左上角：left top
只定义一个关键字剩下一个默认为center

背景尺寸：background-size

cover 覆盖铺满与100%一样
contain 宽/高一边完全覆盖，展示完整图片

背景固定：background-attachment

scroll 默认，随着页面滚动
fixed 固定

背景盒模型定位：background-origin

padding-box 填充框开始，默认是它
border-box 线框开始
content-box 内容框开始

背景裁剪：background-clip

padding-box 剪切成内边距方框
border-box 剪切成边框方框
content-box 剪切成内容方框

边框样式

线：border

线宽：border-width

线样式：border-style

无边框 none
点状边框 dotted
虚线 dashed
实线 solid
双线 double
3D凹糟边框 groove
3D垄状边框 ridge
3Dinset边框 inset
3Doutset边框 outset

线颜色：border-color

透明色：transparent

方位：

上 border-top
下 border-bottom
左 border-left
右 border-right

盒阴影：box-shadow:水平方向位移竖直方向位移模糊度颜色

过渡时间：transition:时间

实例

使用盒阴影与过渡时间

<!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>
        div{
            width: 100px;
            height: 100px;
            text-align: center;
            background-position: center;
        }
        .box{
            background-image: url(../img/zwdzjs.png);
            float: left;margin-right: 15px;
        }
        .box2{
            background-image: url(../img/navicat.png);
            float: left;margin-right: 38px;
        }
        .box2:hover{
            box-shadow: 10px 10px 5px rgba(120, 120, 120, 0.8);
            transition: 1s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></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>
        div{
            padding: 40px;
            width: 600px;
            height: 800px;
            border: 20px groove rgba(255, 0, 0, 0.385);
            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-origin: border-box,border-box,content-box,border-box;
            background-position: left top,right bottom,0% 0%,0% 0%;
            background-size: 30%,30%,30%,100%;
            background-clip: border-box,border-box,content-box,border-box;
        }
        
        p{
            margin-top: 90px;
            text-indent: 2em;
            line-height: 23px;
        }
    </style>
</head>
<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>
        div{
            background-position: center;
            background-attachment: fixed;
        }
        div:nth-child(1){
            width: 100%;
            height: 800px;
            background-image: url(../img/bj_1.jpg);
        }
        div:nth-child(2){
            width: 100%;
            height: 800px;
            background-image: url(../img/bj_2.jpg);
        }
        div:nth-child(3){
            width: 100%;
            height: 800px;
            background-image: url(../img/bj_3.jpg);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>