[css]《css揭秘》学习笔记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[css]《css揭秘》学习笔记相关的知识，希望对你有一定的参考价值。
一、background-clip属性
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>背景与边框1</title> 5 <style type="text/css"> 6 body{ 7 background: url(‘http://csssecrets.io/images/stone-art.jpg‘); 8 } 9 div{ 10 border: 10px solid hsla(0,0%,100%,.5); 11 background: white; 12 background-clip: padding-box; 13 /*如果不加上background-clip属性，则看不到边框*/ 14 15 max-width:20em; 16 padding:2em; 17 margin:2em auto 0; 18 font:100%/1.5 sans-serif; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 Can I has semi-transparent borders? Pretty please? 25 </div> 26 </body> 27 </html>
上述例子，如果不加入background-clip属性，则看不到边框；这是因为背景会侵入边框所在的范围，这里边框是半透明的，所以看不到边框；当加入了该属性后，背景不能侵入边框，因此能看到。
下面是对该代码中，其他知识点的学习：
1、rgba和hsla
css2中的颜色模式只有rgb(red, green, blue)和16进制（#RRGGBB，RR加起来就是RGB中red的值，GG和BB同）。CSS3中为了增加透明度，又增加了RGBA颜色模式（red, green, blue,alpha）。但是这些表示方式都不直观，最终的颜色是三原色的混合，并不直观，因此CSS3增加了HSL(hue-色调, saturation-饱和度, lightness-亮度)颜色模式和hsla；色调的范围是0~360；饱和度和亮度是用百分数来表示。
2、px，em和rem
px以像素为单位，是相对屏幕分辨率的大小。
em是相对当前对象内文本的大小，例如，当前字体是16px,那么1em就等与16px；
rem是相对当前文档根元素的字体大小，和em有一点区别。
3、sans-serif
css规定了5种通用的字体系列，基本上所有的普通字体都能落入这5个系列，它们是：
| serif | 有衬线字体族 |
| sans-serif | 无称线字体族 |
| cursive | 手写字体族 |
| fantasy | 梦幻字体族 |
| monospace | 等宽字体族 |
由于这五个系列包含了所有的字体，因此可在css中指定这5个系列的顺序，具体采用什么字体，则由用户电脑上安装的字体而定。
以上是关于[css]《css揭秘》学习笔记的主要内容，如果未能解决你的问题，请参考以下文章