CSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于定义网页内容外观和样式的标记语言。CSS与HTML(超文本标记语言)一起使用,为网页提供了更丰富的样式和布局控制。
通过使用CSS,您可以对网页中的元素(如文本、图像、链接等)进行样式设置,包括字体、颜色、背景、边框、布局和动画效果等。CSS使用选择器(Selector)来选择要应用样式的元素,并使用属性(Property)和值(Value)来定义元素的样式。
一、CSS3 新特性
1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现属性的渐变
8、自定义动画 animate @keyfrom
9、媒体查询 多栏布局 @media screen and (width:800px) {…}
10、border-image 图片边框
11、2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、字体图标 iconfont/icomoon
13、弹性布局 flex
二、四个 CSS 性能优化技巧。
1. 使用内联样式
如果给定样式仅用于单个特定页面元素(例如图像滑块或轮播)并且该组件仅用于站点中的少数页面,请使用内联样式而不是通用加载的 CSS 文件。这不仅会减少外部样式表的大小,还会减少在不使用该组件的页面上发生的 CSS 选择器评估的数量。
2. 使用特定的样式
不要将样式应用于通用选择器、后代选择器和顶级 HTML 元素。这样做会触发许多布尔评估。相反,通过选择更细粒度的元素(例如单个类样式)来优化 CSS 性能。
3. 使用 WebComponents 优化 CSS
WebComponents 是自包含的,减少了对共享 CSS 和 JavaScript 的需求,WebComponents 框架是一种相对较新的基于标准的方法,用于创建可重用组件,其中 JavaScript 和样式是自包含和隔离的。当你将组件所需的样式保留在全局共享的 CSS 文件之外时,你不会看到对站点的其他区域的性能影响,因为未使用的样式应用程序会不必要地消耗时钟周期。
4. 拆分你的 CSS 文件
如果你的许多 CSS 文件是针对特定浏览器或设备定制的,请将这些样式分解为多个 CSS 文件。在运行时,仅加载必要的那些。
这个 CSS 性能优化技巧将需要一些客户端 JavaScript 或服务器端处理来完成,但对用户的好处将值得付出额外的努力。
例如,如果移动和桌面呈现显着不同,这可能会在每种设备类型上将文档对象模型 (DOM) 评估的数量减少 50%。