随着技术的不断进步,CSS早已经从样式表发展为了拥有很多内置函数的强大工具,这些函数让样式变的更加动态、灵活。本篇文章逐一探讨css的每个函数的功能和用法。
CSS的基础函数 attr() 返回选择元素的属性值
语法:attr(attribute-name) HTML 元素的属性名。
CSS的基础函数 url() 用于引用或包含外部资源,如图像、字体或其他媒体文件
语法:url( [ <string> | <uri> ] )
使用场景:
//1.背景图像
body {
background-image: url('images/background.jpg');
}
//2.字体文件
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
}
//3.列表样式图像
ul li {
list-style-image: url('images/list-bullet.png');
}
//4.光标
body {
cursor: url('images/custom-cursor.cur'), auto;
}
//5.边框
div {
border-image: url('images/border.png') 30% round;
}
使用url()函数的注意事项
- URL必须被引号包围,可以是单引号或双引号。
- 如果资源位于同一服务器上,可以使用相对路径。如果资源位于不同的服务器或互联网上,需要使用完整的URL。
- 浏览器会尝试下载并缓存url()函数中指定的资源,以便在需要时快速访问。
- 如果资源无法加载(例如,由于404错误或跨域问题),则相关的CSS属性可能不会按预期工作。
CSS的基础函数 var() 用于访问CSS自定义属性(CSS变量)的值
CSS 自定义属性允许定义可在整个文档或特定元素范围内重复使用的值。通过使用 var() 函数,可以在样式表中引用这些值,从而实现更灵活和可维护的样式。
语法:CSS 变量的声明以两个连字符(--)开头,后面跟着变量名和值
使用场景
然后,可以使用 var() 函数来引用这些变量的值。
这样的好处就是把公共样式提取了出来,减少代码重复,后续设计稿变化,改一个地方的颜色就可以应用到全局,另外在做暗黑和亮色的切换时非常适用。
CSS的基础函数 element() 指定的 HTML 元素渲染为 CSS 背景图像
语法:element(id),其中 id 是必需参数,表示要作为背景图像使用的元素的 ID
假设有一个带有 ID myElement 的元素,可以这样使用 element() 函数:
#someOtherElement {
background-image: -moz-element(#myElement);
}
这里,#someOtherElement 的背景图像会被设置为 #myElement 的内容
CSS的基础函数 image-set() 为不同的设备像素比提供不同的图像资源
确保图像在各种设备上都能以适当的分辨率显示。这对于响应式设计和确保图像在不同设备上的清晰度非常有用。
基本语法如下:
image-set(
<image-candidate> [<resolution> [, <image-candidate> [<resolution>]]*
)
其中,
.img-responsive {
background-image: image-set(
url('image-320w.jpg') 1x,
url('image-640w.jpg') 2x
);
}
在这个例子中,如果设备像素比为 1(标准的非高清设备),浏览器将使用image-320w.jpg。如果设备像素比为 2(如 Retina 屏幕),浏览器将使用image-640w.jpg,这是一个更高分辨率的图像,可以确保在高清设备上显示的清晰度。
CSS的基础函数 counter()、counters() 用于获取和操作计数器的值
CSS计数器是一种可以存储和递增/递减的数字值,通常与列表项、标题、页脚等元素的编号和排序相关。
counter()函数 用于获取指定计数器的当前值。它接受一个参数,即计数器的名称。这个函数的返回值是计数器的当前数值。
selector::before {
content: counter(counter-name);
}
其中,selector是想要添加计数器值的元素的选择器,counter-name是之前使用counter-reset和counter-increment定义的计数器的名称。
counters()函数 用于获取多个嵌套计数器的值,并将它们连接成一个字符串。它接受两个或三个参数:计数器名称、分隔符字符串(可选),以及计数器样式(可选)。
selector::before {
content: counters(counter-name, separator);
/* 或者 */
content: counters(counter-name, separator, style);
}
- counter-name:计数器的名称。
- separator:一个字符串,用于分隔不同计数器的值。
- style:一个可选参数,指定计数器的显示样式,如decimal(十进制)、upper-roman(大写罗马数字)等。如果省略,将使用默认的十进制样式。
假设有一个嵌套列表,想要显示每个列表项的编号,包括所有嵌套的级别。我们可以使用counters()函数来实现这一点。
/* 重置计数器 */
ol {
counter-reset: item;
}
/* 递增计数器 */
li::before {
counter-increment: item;
content: counters(item, " "); /* 使用空格作为分隔符 */
}
//在这个例子中,每当遇到一个<li>元素时,item计数器就会递增。counters(item, " ")函数会将所有嵌套级别的计数器值连接起来,并使用空格分隔它们。因此,对于一个三级嵌套的列表项,它的内容将类似于“1 2 3”。
注意,为了使计数器工作,还需要使用counter-reset和counter-increment属性来初始化和递增计数器。同时,counter()和counters()函数通常与::before或::after伪元素一起使用,以便在元素的内容之前或之后插入计数器的值。