web前端 - 6 个可以在 CSS 代码中使用的CSS 函数

CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。

CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。

在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。

在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我们开始吧。

1、函数计算

我们可以使用 CSS 中的calc() 函数轻松进行计算（+、-、*、/）以确定属性值。

该函数将计算作为其参数。 所以让我们看一个简单的例子：

div{

width: calc(100vw - 50px);

}

正如您在上面看到的，我们使用函数 calc() 来计算我们想要的确切宽度，而无需更改单位。 所以，这是一个完美的功能，可以在你的 CSS 代码中自动执行这些类型的计算。

2、函数var

如果您使用的是 vanilla CSS，此功能非常有用。 它允许您将 CSS 变量的值赋予属性。 所以这个函数 var() 对于创建 CSS 变量并在代码的不同位置使用它们很有用。

这是一个代码示例：

:root {

–main-bg-color: coral;

–main-padding: 15px;

}

/* using the var function to insert variables as property values */

div{

background-color: var(–main-bg-color);

padding: var(–main-padding);

}

结果，由于 var 函数，该 div 将具有背景色珊瑚色和 15px 的填充。

3、网址功能

函数 url() 用于描述或识别我们项目中文件的位置。 此函数通常与以下属性一起使用：背景图像、列表样式、内容、边框等。

这是一个代码示例：

.element{

background-image: url(“pic.gif”);

list-style-image: url(’…/images/pic.jpg’);

content: url(“pdficon.jpg”);

cursor: url(mycursor.cur);

}

如您所见，该函数允许我们将文件或媒体资源设置为 CSS 中某些属性的值。

4、rgb() 和 rgba() 函数

函数 rgb() 和 rgba() 用于描述 CSS 中的颜色级别。

这是一个例子：

#div1{

color: rgb(0, 0, 6);

}

#div2{

color: rgba(0, 0, 0, 1);

}

5、 CSS hsl() 函数

函数 hsl() 代表色相、饱和度和亮度。 它允许我们使用这些参数定义颜色级别。

这是一个代码示例：

div{

background: hsl(0, 100%, 50%);

}

6、函数:not()

CSS 中的 :not() 函数用于将样式应用于没有特定类或 ID 的特定元素。

例如，我们可以使用函数 :not() 将样式仅应用于没有名为 .pic 的类的图像。

这是示例：

img:not(.pic){

padding: 0;

opacity: .5;

}

如何学好前端开发是关键：

前端技术每年都会不断更新，自学前端容易学不到最前沿的课程，学习前端开发建议大家还是要选择培训为好，推荐爱创课堂，是一家专门做前端教育的学校，爱创课堂是一家以就业为导向的前端培训学校，所学习的就是企业所需要的，培养企业最需要的前端工程师为企业理念，授课以实战课程为主，更多的学习大项目对以后工作有帮助，毕业后轻松就业！