css忽略事件_您可能忽略了15个有用CSS技巧

如果您已经有一段时间是前端Web开发人员，那么很有可能您花了片刻的时间试图找出如何编写代码并经过一番谷歌搜索之后才意识到，“那是CSS” 。 如果没有，那么您将要完成。

这篇文章是这些CSS代码的集合，可以为您提供一些功能，例如使元素变粘，赋予虚线下划线功能，使页面文本以特殊形状流动或实现视差效果。 其中一些受到广泛支持，而其他一些正在为所有浏览器提供全面支持。

编号标题和子标题

假设您在文档中有一组标题和子标题，并且正在手动或通过脚本对其进行编号。 相反，您可以使用CSS计数器执行此操作。 已经有上有一个深入的岗位在这里 。 而且由于它来自CSS2规范，因此您可以打赌，除IE 6之外，所有浏览器都支持它。

强调简单的底线

有时，我们想用漂亮的虚线或下划线代替实线。 由于没有其他选择，因此我们选择border-bottom 。 但是，如果要加下划线的文本换行，则border-bottom不是一个好的解决方案。

CSS3为文本装饰text-decoration-color ， text-decoration-line和text-decoration-style指定了三个新属性，它们可以简化为旧的老式text-decoration 。

您可以使用这些样式设置下划线，上划线，甚至使文本闪烁等样式。 自2015年4月起，只有Firefox支持此属性，但是您可以启用“实验性网络平台功能”以在Chrome上使用它。

报价

首先，无需费心为短引号输入正确的弯引号，因为它具有HTML： <q>标记，指示内联引号。

<q>标记还负责用单引号将内部引号引起来。 那么，“在那儿有'CSS'的时刻在哪里呢？

假设您不希望使用默认的双引号，或者嵌套的引号不止一层，则可以使用CSS2 quotes属性为CSS定义quote元素的引用首选项。

管理不守规矩的表

您可能遇到了一个大表，每个单元的内容大小各不相同，无论您尝试什么，它都拒绝保持在指定的宽度内。 使用table-layout属性驯服该表（对于相等的列高，请单击此链接 ）。

具体来说，修复方法在表格布局中： 值。 当您为表格分配固定的布局时，表格和单元格的宽度由表格或单元格的第一行（可由用户定义）的宽度而不是内容确定。 所有浏览器都支持。

使它粘

粘性元素是页面上不会滚动到视图之外的元素。 换句话说，它会粘贴到可见区域（视口或滚动框）。 您可以使用以下位置的 CSS创建此对象：sticky; 。

它们在任何滚动之前都像相对位置较高的元素，而在达到滚动阈值之后又像固定元素一样。 目前， 仅Firefox支持它。

使您的文字更整洁

您是否要使页面上的文本很好地弯曲显示在页面旁边的图像？ 您可以尝试CSS Shapes 。 要实现CSS形状，我们可以使用shape-outside ， shape-margin和shape-image-threshold的三个属性。 自2015年4月起， webkit浏览器支持CSS Shapes。

请参见Pen CSS形状。 由Preethi Sam（ @rpsthecoder ）在CodePen上编写 。

必须填写

如果您有表单，则很有可能需要其中的某些字段，而其他字段则不需要。 您将需要让用户知道哪个是哪个。 CSS是：required ：optional伪类。 所有现代的浏览器都支持它们。

挑剔的颜色

如果您不喜欢蓝色这样的特定颜色，我们可以使用其他颜色为所选区域着色，并且::selection伪元素是该颜色CSS。 所有现代浏览器均支持此功能。

我检查了吗？

在已选中一个复选框的情况下，最好将另一个指示与默认复选框内的微小选中标记分开，以表示该项目已被选中。

CSS可以利用两个元素并排的直接兄弟姐妹之间的联系。 CSS有相邻的兄弟选择器，由加号+表示，我们可以使用它来定位复选框旁边的标签。 但是首先定位选中的复选框呢？ 有：checked伪类。

像故事书一样

然后，如果“从前”中的第一个“ O”看起来很漂亮，那不是很好吗？ 我们可以使它看起来很漂亮，毕竟有CSS。 这就是:: first-letter伪元素的使用方法。 它以目标元素第一行的第一个字母为目标。 在此处了解更多信息。

你想知道更多吗？

元素可能具有类X或数据Y或某个属性的其他值。 如果需要在其附近显示元素的属性值，则可以使用content：attr（X） 。 它检索元素的属性X的值，然后可以在元素旁边显示它。

左边多一点

CSS初学者的居中元素是一项壮举。 不同的元素需要使用不同CSS属性集来居中。 我们将从万维网上提供的众多示例中寻找一个示例，以便您可以再次记住，有CSS可以使事物居中 。

公开链接的文件格式

有没有看到链接附近的小图像指示该链接是什么？ PDF？ 或DOC？ 是的，有CSS可以实现。 content：url（）是我们用来在链接后面显示图像的内容。

触发视差效果

视差效果是用来描述背景相对于前景看似缓慢的运动。 这种效果在实施视差滚动的网站中很流行。 有多种实现方法，以下示例在具有背景附件的 Firefox中工作： 。

CSS动画的力量

可能那不是一个巨大的“那一刻有CSS”的时刻，因为到目前为止，大家都最有可能意识到CSS动画 。 但是，一点提醒是没有害处的。 CSS动画有很多用途，但这是一种简单的着色练习。

翻译自: https://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/