阅读 55

css的一些常用属性、函数

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

在苹果官网:www.apple.com.cn/ ,看到的一些css的处理方法,记录一下!

一、CSS :not()选择器

介绍: :not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

例子:

html:not(.aos){...} :为每个html下的并非.aos的类,设置样式

:not(p) { background:red; } :为每个并非p元素的元素设置背景颜色红色

二、CSS quotes属性

介绍:quotes 属性设置嵌套引用的引号类型。

例子:

样式:q { quotes: '“' '”' "‘" "’"; }

用法:<q>This is a <q>big</q> quote.</q>

说明:quotes一共有4个属性,前两个为最外级引号,后两个为内部引号,上面的代码,输出为: “This is a ‘big’ quote”.,可以看到,里面会被‘’包住,头尾则用“”包住。

三、CSS calc() 函数

介绍:calc() 函数用于动态计算长度值。

(需要注意的是,运算符前后都需要保留一个空格,例如width: calc(100% - 10px))

例子:

width: calc(100% - 500px);:当前自适应100%宽度的情况下的宽度px,再减去500px,得到的最终宽度!

四、CSS 变量var()

介绍:var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。

例子: div1和div2背景都设置为红色,:root里定义变量,以--开头命名

:root {
  --main-bg-color: red;
}
 
#div1 {
  background-color: var(--main-bg-color);
}
 
#div2 {
  background-color: var(--main-bg-color);
}
复制代码

五、figure标签

介绍:标签规定独立的流内容(图像、图表、照片、代码等等),figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

例子:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
复制代码
文章分类
前端
文章标签