CSS 技巧和窍门。

2025-05-24

CSS 技巧和窍门。

我们已经完成了HTML和JavaScript技巧，现在是时候介绍 CSS 技巧和窍门了💖✨

这print media queries

您可以使用打印媒体查询来设计网站的可打印版本。

@media print {

  * {
    background-color: transparent;
    color: #000 ;
    box-shadow: none;
    text-shadow: none;
  }

}
Enter fullscreen mode Exit fullscreen mode

这gradient text

h1{
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

使用 CSS 渐变的两种颜色的文本

提升media defaults

编写 css reset 时添加这些属性以改善媒体默认值。

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}
Enter fullscreen mode Exit fullscreen mode

以…为中心positioning

如果您不了解 grid 或 flex，这是使 div 垂直和水平居中的方法。

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
Enter fullscreen mode Exit fullscreen mode

这comma separated list

这是制作逗号分隔列表所需的代码。

li:not(:last-child)::after{
  content: ',';
}
Enter fullscreen mode Exit fullscreen mode

包含三个项目的逗号分隔列表

这smooth scrolling

距离平滑滚动仅一步之遥。

 html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

网站滚动流畅

这hyphens

在文本内容上设置连字符属性，以便在文本跨越多行时使用连字符。

带有连字符的段落，用于换行

这first letter

避免不必要的跨度并使用伪元素来设置内容样式，同样，首字母伪元素我们也有第一行伪元素。

 h1::first-letter{
   color:#ff8A00;
}
Enter fullscreen mode Exit fullscreen mode

文本首字母样式不同

这accent color

不要使用内置的默认颜色，而是使用强调色自定义表单控件的颜色，它具有内置的颜色对比可访问性功能。

不同颜色的复选框

这Image filled text

h1{
  background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

充满插图的文字

这placeholder pseudo-element

使用占位符伪元素来设置占位符的样式。

::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}
Enter fullscreen mode Exit fullscreen mode

这colors animation

使用色调旋转滤镜改变元素颜色。


button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

带有“商店现在”文字的按钮正在改变颜色

以…为中心margin

.parent{
  display: flex;  /* display: grid; also works */
}

.child{
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

这clamp function

使用夹钳功能实现响应式和流畅的排版。

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}
Enter fullscreen mode Exit fullscreen mode

字体大小根据屏幕大小变化

这selection pseudo element

设置内容选择的样式。

::selection{
  color:coral;
}
Enter fullscreen mode Exit fullscreen mode

选择时文本颜色会改变

这decimal leading zero

将列表样式类型设置为十进制前导零，以将前导零附加到有序列表项中。

li{
  list-style-type:decimal-leading-zero;
}
Enter fullscreen mode Exit fullscreen mode

有序列表项在起始编号前附加前导零

以…为中心flex

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

这caret color

您可以使用插入符号颜色属性自定义文本输入光标颜色。

input{
  caret-color:coral;
}
Enter fullscreen mode Exit fullscreen mode

输入字段的文本光标以自定义颜色闪烁

这resize property

将 resize 属性设置为 none 以避免调整文本区域的大小

textarea{
  resize:none;
}
Enter fullscreen mode Exit fullscreen mode

这only child

如果元素是其父元素的唯一子元素，则仅子伪类会选择一个元素。

li:only-child{
  color:lightgrey;
}
Enter fullscreen mode Exit fullscreen mode

仅包含一个列表项的有序列表

这text indent

文本缩进属性允许我们缩进文本的第一行，我们也可以使用负值。

p{
  text-indent:5.275rem;
}
Enter fullscreen mode Exit fullscreen mode

首行向右缩进的段落

这list style type

您可以将表情符号设置为列表样式类型。

li{
  list-style-type:'🟧';
}
Enter fullscreen mode Exit fullscreen mode

表情符号作为列表样式类型，包含三个列表项，一个橙色框表情符号

希望您喜欢阅读这篇文章！如果您有话要说或有任何疑问，请随时在下面发表评论。

编码快乐📕✨

文章来源：https://dev.to/devsyedmohsin/css-tips-and-tricks-you-will-add-to-cart-163p
Devto 翻译
PREV
面向开发人员的免费开源作品集模板⚡🚀
NEXT
每个开发人员都应该知道的 22 个 CSS 技巧和窍门