发布
登录
注册
5分钟带你领略CSS常用技巧
前端频道

图灵联邦

恒河沙
关注

图灵联邦

0

评论

0

点赞

要想构建美观的网页,学习CSS是其中一种方式,但在学习过程中,我们大部分会限制自己,一次次地运用相同的属性, 毕竟,人是一种习惯性的动物。随着科技进步,现在的生活节奏越来越紧凑,各行各业都关注着提高效率,前端开发也不例外。很多人会通过选择器的使用和简化代码来快速加载渲染,但Less、SCSS这样的预处理器在工作时就会“绕路”,而使用CSS速度更快。这里有些小技巧教你减少重复规则,标准化样式流程等等,帮助你解决日常问题,让你的工作变得高效流畅!
img

1、精灵技术,它主要针对背景图片,插入的img不需要这个技术,但要测量每个小背景图片的大小和位置。给盒子指定小的背景图片时,背景定位几乎都是负值。它可以有效地减少服务器接受和发送请求的次数,提高页面的加载速度

2、运用字体图标,首先把包包里面的font文件夹复制出来一份,放在我们项目根目录。然后在html文件标签里面添加结构,接着在html文件样式style里面声明字体:告诉代码和别人使用我们自己自定义的字体,一定要注意路径哦!最后给盒子设置字体就行。

3、一致的垂直结构提供了一种视觉美学,让人更想看下去,更具可读性。如果owl选择器过于通用,请在元素内使用通用选择器(*)为布局的特定部分创建一致的垂直节奏。

4、如果你希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色,但不希望整个段落或标题看起来像一个方块。Box Decoration Break属性让你可以只对文本运用样式,同时保持填充和页边距的完整性。当你要在悬停时应用突出显示,或在滑块中设置子文本样式让它有突出显示的外观,这功能特别有用。

5、样式“默认”链接,你几乎可以在每个样式表中找到一个通用的A样式。但这会逼迫你为子元素中的任何链接编写额外的覆盖和样式规则,而且在使用像WordPress这样的CMS时,或许会致使你的主链接样式容易出现问题。尝试这种较少干扰的方式为“默认”链接添加样式。

6、隐藏未静音的自动播放视频,这对于自定义用户样式表来说是一个很好的技巧。比如在你处理无法从源代码轻松控制的内容时,它就会帮你免除在加载页面时自动播放视频中的声音干扰访问者。

7、最强大的CSS级别来自CSS变量,它允让你可以声明一组公共属性值,这些值可以通过样式表中任何位置的关键字重用。你能有一套颜色在整个项目中使用,来维持一致性。在CSS中反复重复这些颜色值是件烦人的事情,而且还容易出错。假如某个颜色在某个时刻需要改变,就得去找寻和替换,这是相当慢的,当为最终用户构建产品时,变量使得定制变得容易。

8、shape-outside的CSS 属性定义了一个可以是非矩形的形状,相邻的内容应围绕该形状包装。 一般情况下,内联内容包围其边距框。 shape-outside提供了一种自定义此包装的方法,就像是文本包装在复杂对象周围而不是简单的框中。简单来说就是文字是根据图片的边边排版的,什么形状都行。它采用与clip-path相同的值。clip-path定义用户如何查看元素,shape-outside定义其他HTML元素如何查看元素。

发布

评论 0