css-2

最新推荐文章于 2024-11-01 13:54:34 发布
最新推荐文章于 2024-11-01 13:54:34 发布
阅读量64 收藏
点赞数
分类专栏： JAVAWEB入门 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53280238/article/details/130219465
版权
本文详细介绍了CSS的基础知识，包括外部、内部和内联样式表的使用，以及常见的CSS属性如盒子模型、浮动和定位。还探讨了伪类和伪元素在定义元素特殊状态和内容插入中的应用。此外，文章还讨论了复杂选择器和属性选择器在CSS中的作用。
摘要由CSDN通过智能技术生成

css

什么是css
css的使用
	外部
	内部
	内联
常用的css属性
盒子模型
浮动
定位
伪类
伪元素

什么是css

  • CSS 指的是层叠样式表 (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中

学习css一定需要先学习html

css的使用

外部样式表

新建一个后缀为.css的文件

在html中引入这个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/test.css">
</head>
<body>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p class="a c e">表示一个段落</p>
    <p>表示一个段落</p>
    <div>这是div这是div这是div这是div</div>
    <div>这是div这是div这是div这是div</div>
    <div id="a" class="a">这是div这是div这是div这是div</div>
    <div >这是div这是div这是div这是div</div>
</body>
</html>

css文件的语法

选择器 {
    css属性:css值;
    css属性:css值;
    css属性:css值;
}

选择器就是在html中寻找对应标签的一个工具



/*
    *是通配符选择器
    通配符会匹配所有的标签
*/
*{
   color: red;
}

/*
    元素/标签 选择器
    权重为1
*/

p{
    color: blue;
}
/*
    如果权重一致的时候使用后面的css属性
*/
p{
    /*color: yellow;*/
}

/*
    类选择器
    权重为10
*/
.a{
    color:green;
}

.e{
    color: #1efffa;
}


/*
id 选择器
权重为100
在同一个html中id必须是唯一的
*/
#a{
    color: #000000;
}

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
    *是通配符选择器
    通配符会匹配所有的标签
*/
        *{
            color: red;
        }

        /*
            元素/标签 选择器
            权重为1
        */

        p{
            color: blue;
        }
        /*
            如果权重一致的时候使用后面的css属性
        */
        p{
            /*color: yellow;*/
        }
        /*
            类选择器
            权重为10
        */
        .a{
            color:green;
        }

        .e{
            color: #1efffa;
        }
        /*
        id 选择器
        权重为100
        在同一个html中id必须是唯一的
        */
        #a{
            color: #000000;
        }
    </style>
</head>
<body>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p>表示一个段落</p>
    <p class="a c e">表示一个段落</p>
    <p>表示一个段落</p>
    <div>这是div这是div这是div这是div</div>
    <div>这是div这是div这是div这是div</div>
    <div id="a" class="a">这是div这是div这是div这是div</div>
    <div >这是div这是div这是div这是div</div>
</body>
</html>

可以发现外部和内部样式表语法都是一样的,如何选择使用哪一种呢？

一般来说如果属性是很多页面通用的，都会选择使用外部样式表

如果是单个页面特有的，一般选择内部样式表，但是如果内容很多，还是会独立出来形成外部样式表

内联样式表

直接在html的标签上添加style属性，值为对应的css内容

	权重为1000
    <div style="color: orange" id="a" class="a">这是div这是div这是div这是div</div>

常用的css属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*首行缩进
            em 是一个相对单位 表示一个字的大小
            */
            text-indent: 2em;
            /*
            字体装饰
            line-through  删除线
            underline 下划线
            overline 上划线
            none 取消装饰  一般用在超链接取消下划线的地方
            */
            text-decoration: none;
            /*对齐方式
                left
                right
                center
                justify
            */
            text-align: center;
            /*行高*/
            line-height: 30px;
            /*大小写转换
            lowercase
            uppercase
            capitalize 首字母大写
            */
            text-transform: capitalize;
            /*文字或字母之间的间距*/
            letter-spacing: 10px;
            /*单词之间的间距 主要是空格*/
            word-spacing: 20px;

            /*文字*/
            /*字体颜色*/
            color: red;
            /*字号大小*/
            font-size: 30px;
            /*字体样式*/
            font-style: normal;
            /*字体粗细
                100-900
                normal  400
                bold 700
            */
            font-weight: bold;
            /*字体样式*/
            font-family: 宋体;
        }
        div{
            width: 900px;
            height: 900px;
            /*背景颜色*/
            background-color: #ff39eb;
            background-image: url("../images/banner.png");
            /*背景图重复
                repeat
                repeat-x
                repeat-y
                no-repeat
            */
            background-repeat: no-repeat;
            /*背景图定位*/
            background-position: center center;
        }

        #icon{
            width: 40px;
            height: 40px;
            background-image: url("../images/bg.png");
            background-position: -388px 0px;
            /*background-attachment: scroll;*/
        }

        ul{
            /*
                disc
                square
                circle
                lower-roman
                upper-roman
                lower-latin
                upper-latin
                lower-greek
                lower-alpha
             */
            /*list-style-type: lower-alpha;*/
            /*list-style-image: url("../images/5.png");*/
            list-style-position: outside;
        }
        table,th,td{
            border: 1px solid black;

        }
        table{
            border-collapse: collapse;
            cursor: url("../images/5.png"),default;
        }
        img{
            /*0-1
            w3c标准的透明度都是这样设置的
            */
            opacity: 0.5;
            /*0-100*/
            filter: opacity(50);

        }
    </style>
</head>
<body>
<img src="../images/timg.jpg" alt="">
<table>
    <tr>
        <th>111</th>
        <th>111</th>
        <th>111</th>
        <th>111</th>
    </tr>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
</table>
<ul>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
    <li>111111</li>
</ul>
<div id="icon"></div>
<div></div>
<a href="#">百度</a>
<p>hello world</p>
<p>
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
</p>
</body>
</html>

盒子模型

在html中块级元素都可以看做是一个盒子，通过css来改变大小，变成对应的矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            border: 1px solid black;
        }
        #out{
            width: 300px;
            height: 300px;
            /*溢出如何显示
            hidden
            */
            overflow: scroll;
        }
        #in{
            width: 100px;
            height: 100px;
            /*上右下左
                左参考右
                下参考上
                右参考上
            */
            /*margin: 10px;*/
            /*可以设置单个方向的外边距*/
            /*块级元素居中显示*/
            margin: 0 auto;
            /*4个方向的边框*/
            /*border: 1px dotted red;*/
            /*
                单个方向设置边框
                left
                right
                top
                bottom
            */
            border-bottom: 1px dotted red;
            /*内边距
                和外边距一样 也是上右下左
                左参考右
                下参考上
                右参考上
            */
            padding: 200px;
            /*也可以只设置单个方向*/

        }

    </style>
</head>
<body>
    <div id="out">
        <div id="in"></div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZC5gXtl1-1681795103105)(css.assets/image-20220321093850053.png)]

盒子模型可以参考该图，主要由外边距，边框，内边距和内容组成

浮动float

在块级元素中，默认情况下会自动换行，当宽度设置的较小时，想让块级元素横着排，为了让块级元素可以横着排，可以选择使用浮动

float:left / right  设置浮动
clear:both 清除浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ALmgcR5-1681795103106)(css.assets/wps1.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a1yFhDYj-1681795103107)(css.assets/图片2.png)]

面试题：什么叫浮动塌陷，如何解决？

什么叫浮动塌陷：使用浮动的时候一个比较疑惑的问题。如果父级标签只包含了浮动元素，且未设置父级标签的宽高的时候，那么他的高度就会塌陷为0，如果父元素不包含任何可见的背景，这个问题很难被注意到，但是这是一个很重要的问题。

如何解决浮动塌陷

1.在父元素上添加overflow:hidden 可以解决，但是父元素里面的内容过多的时候可能显示不完整

2.给父元素设置一个高度，很多的时候可能不知道设置为多少

3.使用一个空标签设置浮动清除，可能会多出很多无意义的标签

<div>
    <div style="float: left"></div>
    <div style=" height: 0px;clear: both"></div>
</div>
<p>aSEDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</p>

4.将被浮动影响的标签设置为清除浮动，会影响和上面标签的外边距

5.伪元素：after 可以解决浮动塌陷的问题，只需要将浮动元素的父元素添加class="clear"即可

.clear:after{
    clear:both;
    content:".";
    display:block;
    height:0px;
    width:0px;
    visibility:hidden
}

定位position

在css中定位有4中，分别是 绝对定位(absolute) 相对定位(relative) 固定定位(fixed) 静态(static)

绝对定位position

绝对定位相对于离他最近的一个有定位的父元素进行定位的，如果父元素都没有定位则相对于页面左上角定位

当使用绝对定位后，其他的元素可以占用这个元素的原本的位置，也就可能导致标签的重叠，可以使用z-index改变层叠次序，数字越大越往上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            border: 1px solid black;
        }

        #out{
            width: 500px;
            height: 500px;
            position: absolute;
        }

        #in{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        #in + div{

            width: 100px;
            height: 100px;
        }
        #out > div{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0px;

        }
    </style>
</head>
<body>
<div id="out">
    <div id="in" style="background-color: #ff39eb;top: 10px;z-index: 100"></div>
    <div  style="background-color: #ff45aa;top: 20px;;z-index: 90"></div>
    <div  style="background-color: #ff3253;top: 30px;;z-index: 80"></div>
    <div style="background-color: #ff8a27;top: 40px;;z-index: 70" ></div>
    <div  style="background-color: #f2ff2d;top: 50px;;z-index: 60"></div>
    <div style="background-color: #63ff26;top: 60px;;z-index: 50" ></div>
    <div  style="background-color: #21ffac;top: 70px;;z-index: 40"></div>
    <div  style="background-color: #41b5ff;top: 80px;;z-index: 30"></div>
    <div  style="background-color: #6c44ff;top: 90px;;z-index: 20"></div>
</div>
</body>
</html>

相对定位relative

相对于原本应该在的位置进行定位，而且定位离开后原本的位置不会被占用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            border: 1px solid;

        }
        #out{
            width: 500px;
            height: 500px;
        }
        #in{
            width: 100px;
            height: 100px;
        }

        #in + div{
            width: 100px;
            height: 100px;
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="out">
        <div id="in">

        </div>
        <div>

        </div>
    </div>
</body>
</html>

在这里两个定位在一起有一个使用小技巧：父相子绝，父级使用相对定位，子级使用绝对定位，那么父级可以在原本的位置不会改变，子级也可以随着父级的定位而改变位置

固定定位fixed

永远相对于窗口的左上角定位，无论页面怎么滚动都固定在这个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        div{
            width: 100px;
            height: 500px;
            position: fixed;
            top: 300px;
            background-color: #ff39eb;
        }
        #left{
            left: 100px;
        }

        #right{
            left: 1300px;
        }
    </style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="left"></div>
<div id="right"></div>
</body>
</html>

默认定位static

相当于不设置定位，也可以作为去除定位使用

伪类

伪类用于定义元素的特殊状态。

例如：可以用于 鼠标悬停在元素上的样式 为已访问和未访问的连接设置不同的样式 设置元素获得焦点时的样式

锚伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a:link{ /*未访问的连接*/
            color: #2c20fa;
        }
        /*鼠标悬停在上面*/
        a:hover{
            color: #ff2236;
        }
        /*已选择的连接*/
        a:active{
            color: #51ff1e;
        }
        /*已访问的连接*/
        a:visited{
            color: #1afffd;
        }
        ul{
            list-style-type: none;
            padding-left: 0px;
            position: relative;
        }
        ul > li {
            float: left;
            width: 100px;
            height: 30px;
            background-color: #6c44ff;
            text-align: center;
            line-height: 30px;
        }
        li > div {
            display: none;
            width: 600px;
            height:300px;
            position: absolute;
            left: 0px;
            top: 30px;
            background-color: #21ffac;

        }

        li:hover {
            background-color: orange;
            color: #ffffff;
        }

        li:hover > div{
            display: block;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度1</a>
<a href="https://www.taobao.com">百度2</a>
<a href="https://www.jd.com">百度3</a>
<a href="https://www.bilibili.com">百度4</a>


<ul>
    <li>
        菜单一
        <div>菜单一</div>
    </li>
    <li>
        菜单二
        <div>菜单二</div>
    </li>
    <li>
        菜单三
        <div>菜单三</div>
    </li>
    <li>
        菜单四
        <div>菜单四</div>
    </li>
    <li>
        菜单五
        <div>菜单五</div>
    </li>
    <li>
        菜单六
        <div>菜单六</div>
    </li>
</ul>
</body>
</html>

:first-child

这个伪类有一点让人误解，是父级的第一个孩子，而不是他的第一个孩子，所以下面这个是每一个div的第一个p标签字体变成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        p:first-child{
            color: red;
        }
    </style>
</head>
<body>

<div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
</div>
<div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
</div>
<div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
</div>
<div>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
    <p>111111</p>
</div>

</ul>
</body>
</html>

所有 CSS 伪类

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 元素。
:disabledinput:disabled选择每个被禁用的 元素。
:emptyp:empty选择没有子元素的每个

元素。

:enabledinput:enabled选择每个已启用的 元素。
:first-childp:first-child选择作为其父的首个子元素的每个

元素。

:first-of-typep:first-of-type选择作为其父的首个

元素的每个

元素。

:focusinput:focus选择获得焦点的 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 元素。
:invalidinput:invalid选择所有具有无效值的 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 “it” 开头的

元素。

:last-childp:last-child选择作为其父的最后一个子元素的每个

元素。

:last-of-typep:last-of-type选择作为其父的最后一个

元素的每个

元素。

:linka:link选择所有未被访问的链接。
:not(selector):not§选择每个非

元素的元素。

:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个

元素。

:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个

元素，从最后一个子元素计数。

:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个

元素的每个

元素，从最后一个子元素计数

:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个

元素的每个

元素。

:only-of-typep:only-of-type选择作为其父的唯一

元素的每个

元素。

:only-childp:only-child选择作为其父的唯一子元素的

元素。

:optionalinput:optional选择不带 “required” 属性的 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 元素。
:read-onlyinput:read-only选择指定了 “readonly” 属性的 元素。
:read-writeinput:read-write选择不带 “readonly” 属性的 元素。
:requiredinput:required选择指定了 “required” 属性的 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 元素。
:visiteda:visited选择所有已访问的链接。

伪元素

伪元素用于设置元素指定部分的样式

例如：他可以用于 设置元素的首字母，首行的样式 在元素的内容之前和之后插入内容

::first-line 伪元素

作用自第一行

p:first-line{
    color:blue
}

::first-letter 伪元素

作用在第一个字母上

p:first-letter{
    color:blue
}

::before ::after

在元素的之前和之后添加内容

p:before{
    content: url("../images/5.png");
}
p:after{
    content: url("../images/5.png");
}

所有 CSS 伪元素

选择器例子例子描述
::afterp::after在每个

元素之后插入内容。

::beforep::before在每个

元素之前插入内容。

::first-letterp::first-letter选择每个

元素的首字母。

::first-linep::first-line选择每个

元素的首行。

::selectionp::selection选择用户选择的元素部分。

复杂选择器

后代选择器

选择器1 选择器2{
    
}
选择器1所有后代中符合选择器2的元素

子代选择器

选择器1 > 选择器2{
    
}
选择器1 子代中符合选择器2的元素

相邻兄弟选择器

选择器1 + 选择器2{
    
}
紧随着选择器1的符合选择器2的元素

分组选择器

选择器1,选择器2,选择器3{
    
}
匹配三种选择器的任意一种都可以

所有 CSS 属性选择器

选择器例子例子描述
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target=“_blank” 属性的所有元素。
[attribute~=value][title~=flower]选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute|=value][lang|=en]选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]a[href^=“https”]选择其 href 属性值以 “https” 开头的每个 元素。
[attribute$=value]a[href$=“.pdf”]选择其 href 属性值以 “.pdf” 结尾的每个 元素。
[attribute*=value]a[href*=“w3school”]选择其 href 属性值包含子串 “w3school” 的每个 元素。

ue*]](https://www.w3school.com.cn/cssref/selector_attribute_value.asp) | [target=_blank] | 选择带有 target=“_blank” 属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择带有包含 “flower” 一词的 title 属性的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择带有以 “en” 开头的 lang 属性的所有元素。 |
| [attribute^=value] | a[href^=“https”] | 选择其 href 属性值以 “https” 开头的每个 元素。 |
| [[attributeKaTeX parse error: Can't use function '\]' in math mode at position 9: =*value*\̲]̲](https://www.w…=“.pdf”] | 选择其 href 属性值以 “.pdf” 结尾的每个 元素。 |
| [attribute*=value] | a[href*=“w3school”] | 选择其 href 属性值包含子串 “w3school” 的每个 元素。 |

程序员zhi路
关注
专栏目录
前端开源库-postcss-css-variables
08-30
Postcss-css-variables是PostCSS的一个插件，专门用于处理CSS Variables，将它们转换为浏览器可识别的静态形式，从而提供更广泛的浏览器支持。 **CSS Variables（自定义属性）**： CSS Variables 提供了一种方式，...
postcss-variables-prefixer:PostCSS 插件为所有 css 自定义属性添加前缀
08-04
postcss-变量-前缀 PostCSS 插件为所有 css 自定义属性添加前缀。 用法 使用 ： 在您的项目目录中安装postcss 、 postcss-cli和postcss-variables-prefixer ： npm install postcss postcss-cli postcss-...
PostCSS plugin postcss-uniapp-plugin requires PostCSS 8
拿回忆下酒
09-27 5921
Syntax Error: Error: PostCSS plugin postcss-uniapp-plugin requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
css-loader、style-loader、sass-loader作用
CamilleZJ的博客
06-12 4387
css处理loader
vue利用postcss-px2rem、rem做PC端适配
jijunqing321的博客
01-12 1658
vue实现响应式rem，利用插件postcss-px2rem
Webpack5实战笔记----8.postcss-loader处理兼容
weixin_62273462的博客
11-01 1696
postcss-loader的作用和css-loader类似，即让计算机完成兼容样式的操作 安装postcss-loader npm i postcss-loader -D 在webpack.config.js中进行配置修改： const path = require('path') module.exports = { entry: './src/index.js', output: { filename: 'build.js', //outp
vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配
全栈羊的搬砖日常
12-11 8791
/ 配置基本大小// 设置 rem 函数//当前页面宽度相对于1920px屏幕宽的缩放比例，可根据自己需要修改。//设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）setRem();//初始化// 适配 - 重置函数setRem();// 全局可调用(其他方式也可)// 改变窗口大小时重置 remsetRem()适配的方法总体分为两步:px转换成remrem根据屏幕大小重置基数改变大小。
vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法
double徐
07-06 2386
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。 为什么这三个中要推荐 postcss-plugin-px2rem呢？ 因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。 所以我们可以利用...
craco配置postcss8下的postcss-px-to-viewport插件
qq_43616690的博客
07-13 4787
craco配置postcss中的postcss-px-to-viewport插件
gulp-css-wrap工具的使用之----[批量为css文件扩展命名空间]
乐夫天命兮的博客
03-22 3055
首先把官方指导API挂上 gulp入门指南 gulp-css-wrap 在研究elementUI在线切换皮肤功能时，看到大佬经验中都用到了gulp-css-wrap（批量为css文件扩展命名空间）工具。 这种实现思路： 1.将所有皮肤样式都通过主入口import进来 2.通过点击样式切换事件来改变body的class名 那么问题来了，所有样式都需要增加一个class拓展，手动做？神器来了，gulp...
CSS-hover
热门推荐
qq_43681073的博客
06-10 1万+
页面原始样式 .box:hover 给当前元素设置次hover样式，已经设定了相应style样式的子元素不继承此hover效果 鼠标移入box盒子，box盒子背景色变为紫色，其内部子元素child、inner由于设置了background-color属性，不继承box的hover效果 .box :hover（box和:hover之间有空格） 给当前元素全部的直接子元素设置此hover样式，而box自己本身的hover样式不生效 页面原始样式 语法：.parent:hover .child { 样式;
postcss-px-to-viewport插件教程和适配问题（移动端和PC端）
YI_Zyd的博客
08-03 8053
postcss-px-to-viewport安装教程及用途
css-pro-layout：CSS库，用于构建响应式和可自定义的布局
02-03
CSS Pro布局 CSS库，用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
$ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be processed const css = fs . readFileSync ( "input.css" , "utf8" ) const out ...
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
【前端基础】CSS进阶
qq_41413652的博客
11-01 869
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
超萌！HTML&CSS：超萌卡通熊猫头
最新发布
weixin_52814911的博客
11-01 1012
创建了一个卡通风格的熊猫头。
​CSS之三
qq_75073393的博客
10-31 625
CSS 有三个非常重要的三个特性:层圣性、继承性、优先级。
CSS浮雕效果
p_s_p的博客
10-30 386
【代码】CSS浮雕效果。
css-in-css
02-05
2. CSS-in-JS：CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方式。它通过使用JavaScript对象来描述样式规则，并在运行时动态生成对应的CSS。常见的CSS-in-JS库有styled-components、Emotion等。 3. CSS ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员zhi路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值