CSS优化技巧【适合收藏2024 7月】

直接上干货

01. 启动平滑滚动

添加scroll-behavior：smooth到元素中，使整个页面能够平滑滚动。

html{  
    scroll-behavior: smooth;  
  }

02. 链接的属性选择器

此选择器以href属性以“https”开头的链接为目标

a[href^="https"] {
    color: blue;
}

03. ~用于合并节点

选择作为

同级元素的所有

元素。

h2 ~ p {
    color: blue;
}

04. :not()伪类

此选择器将样式应用于不具有类“Special”的 li。

li:not(.special) {
    font-style: italic;
}

05. 响应式排版的视窗单位 vw

使用视区单位(vw, vh, vmin, vmax)可以使字体大小与视区大小相对应。

h1 {
    font-size: 5vw;
}

06. :empty 对于空元素

此选择器以空的 p 元素为目标并隐藏它们。

p:empty {
    display: none;
}

07. 自定义特性(css变量)

可以定义和使用自定义特性，以便更轻松地创建主题和进行维护。

:root {
    --main-color: #3498db;
}

h1 {
    color: var(--main-color);
}

08. Object-fit 图像控件的适配性

这里是引用

object-fit 控制替换元素(如)的内容应该如何调整大小。

img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

09. 简化布局的网格

Css网格提供了一种功能强大的方式来以更直接的方式创建布局。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

10.自定义选定内容的突出显示颜色

自定义在网页上选择文本时的突出显示颜色。

::selection {
    background-color: #ffcc00;
    color: #333;
}

11. 设置占位符文本的样式

::placeholder {
    color: #999;
    font-style: italic;
}

12. 渐变边界

.element {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-image: linear-gradient(to right, red, blue);
}

13. 使用vw实现可变字体大小

根据视口宽度调整字体大小，实现更加响应式的排版。

body {
    font-size: calc(16px + 1vw);
}

14.使用clamp()函数实现响应式文本

使用clamp()函数设置字体大小的范围，确保在不同屏幕尺寸下的可读性。

.text {
    font-size: clamp(16px, 4vw, 24px);
}

15.自定义下划线样式

使用border-bottom和text-decoration的组合来自定义链接的下划线样式。

a {
    text-decoration: none;
    border-bottom: 1px solid #3498db;
}

16.选择偶数和奇数元素

li:nth-child(even) {
    background-color: #f2f2f2;
}

li:nth-child(odd) {
    background-color: #e6e6e6;
}

17. CSS :is()选择器

使用:is()伪类简化复杂的选择器。

:is(h1, h2, h3) {
    color: blue;
}

18.CSS变量中的计算

在CSS变量中进行计算，实现动态样式。

:root {
    --base-size: 16px;
    --header-size: calc(var(--base-size) * 2);
}

h1 {
    font-size: var(--header-size);
}

19. 自定义单选框和复选框样式

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #3498db;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #e74c3c;
}

20.textarea的resize属性

使用resize属性控制textarea的调整大小行为。

textarea {
    resize: vertical;
}

21.backdrop-filter用于模糊背景

使用backdrop-filter为背景应用模糊效果，实现毛玻璃效果。

.element {
    backdrop-filter: blur(10px);
}

22.font-variant用于小型大写字母

.small-caps {
    font-variant: small-caps;
}