跳到主要内容位置

css6

查看所有标签(分类)

使用 HTML 原生 kbd 标签显示快捷键样式

张旭乾

在编写技术文档的时候,我们经常会给用户展示一些常用的快捷键,那么在 HTML 中,我们可以使用原生的 <kbd> 标签来表示一个按键,它也是 HTML 语义化的标签之一,相比于使用 <div> 等通用的、无意义的标签,使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd

<kbd> 是一个行内元素,跟 span 类似,每个按键都放到一个单独的 <kbd> 标签即可,例如下方示例:

CSS 如何隐藏滚动条,但不影响内容滚动

张旭乾

使用 CSS 隐藏滚动条,如果直接使用 overflow: hidden 会导致内容不能滚动,要想使用 css 隐藏滚动条,但不影响内容滚动,这里有两种方法:

  • 使用 padding 把滚动条移出浏览器视口。
  • 使用 ::webkit-scrollbar 伪元素选择器(简单,但兼容性不好)。

下面分别来看一下这两种方法。

CSS :is() 伪类选择器使用指南

张旭乾

在使用 CSS 编写页面样式的时候,你是不是写过类似的代码:

li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}

为了给一篇文章中,不同位置的超链接设置不同的颜色,需要在多个选择器中,重复的选择 a  元素,如果是其它名字比较长的元素或者 class,那么写起来会特别麻烦,稍加不注意就会写错。

Web 性能优化:使用 CSS font-display 控制字体加载和替换

张旭乾

在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通过改变 CSS 中的 font-display 属性,就可以避免这个问题。

5个技巧助你成为 CSS 大神

张旭乾

作为一名前端工程师,经常在写完 HTML 以后,才觉得真正的噩梦要开始了,啊,写 CSS 的时候,面对满屏乱飞的组件,真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握,最愁给页面编写样式,其实都是因为还没有形成一个对 CSS 宏观的了解,只要有了正确的学习方法、设计思维,再通过不断的积累,就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下,让你在以后编写 CSS 的时候不再发愁。

CSS 选择器优先级特异性权重详解

张旭乾

在写 CSS 的时候你一定遇到过有些样式明明写对了,也选择了正确的 html 元素去应用这些样式,可是就是不生效,这是为什么呢?因为在选择同一个 HTML 元素的时候,不同的选择器有不同的优先级,优先级低的选择器的样式会被优先级高的覆盖。