《css揭秘》学习笔记(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014744118/article/details/73730024
第0章 关于本书
1、检测属性
function testproperty(property){
  var root = document.documentElement;
  if(property in root.style){
    root.classList.add(property.toLowerCase());
    return true;
  }
  root.class classList.add('no' + property.toLowerCase());
  return false;
}
2、检测值
function testValue(id, value, property){
  var dummy = document.createElement('p');
  dummy.style[property] = value;
  if(dummy.style[property]){
    root.ClassList.add(id);
    return true;
  }
  root.ClassList.add('no' + id);
  return false;
}
第一章 引言
CSS编码技巧
尽量减少代码重复
在实践中,代码可维护性的最大要素是尽量减少改动时要编辑的地方。

举例说明

padding:6px 12px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow:0 -1px 1px #335166;
font-size:20px;
line-height:30px;

以上的代码有什么问题呢?

如果需要改变字号,那么同时需要调整行高。【当某些值相互依赖时,应该把它们的相互关系用代码表达出来】
如果将父级的字号加大,则不得不修改每一处使用绝对值作为字体尺寸的样式。
需要确定哪些效果是应该跟着变大变小,哪些效果是保持不变的
产生主色调的亮色和暗色变体,其实可以使用将半透明的黑色或白色叠加在主色调上。
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
//作者建议使用HSLA而不是RGBA来产生半透明的白色。因为它的字符长度更短,重复率更低。

经过修改后的代码如下:

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height:1.5;
关于使用rem还是em还是百分比,需要根据具体情况来决定。
【插播笔试题】
Q:line-height:1.5 与line-height:150%的差别?

line-height:1.5 是根据自身元素的font-size进行计算。
line-height:150% 是根据父元素继承而来的font-size进行计算。
Q:rem,em,px的差别

rem css3新增单位。rem为元素设定字体大小时,相对的只是HTML根元素。【IE8以下不支持】
em 相对于父元素的字体大小。
px 像素px是相对于显示器屏幕分辨率而言的
继续回到css编码技巧。

有时候,代码易维护和代码量少不可兼得。

例如,为元素添加一个10px宽的边框,但左侧不加边框
border-width: 10px 10px 10px 0;
但若以后需要改动边框的宽度,需要同时改3个地方。那么以下这种方式可能更好。
border-width: 10px;
border-left: 0;
currentColor【IE9+支持】

例如,我们想让所有的水平分割线元素自动与文本颜色保持一致,只需要这样写。
hr { background: currentColor;}
border和box-shadow默认的颜色就是当前的文字颜色,也就是类似currentColor。currentColor本身就是很多颜色属性的初始值,例如border-color、outline-color、text-shadow和box-shadow的颜色。【iOS Safari浏览器下(iOS8)下,currentColor有一些bug,例如伪元素hover时候,background:currentColor的背景色不会跟着变化。关于currentColor其他信息可查看张鑫旭博客,currentColor-CSS3超级好用CSS关键字。
继承 inherit

例如,在创建提示框时,可能希望小箭头能自动继承背景和边框的样式。就可以这样做。 .

callout:before {
   //其他代码
   background: inherit;
   border: inherit;
}
相信你的眼睛,而不是数字
视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致,需要减少顶部和底部的内边距。
关于响应式网页设计
作者提出了一些建议,可能可以避免不必要的媒体查询
使用百分比长度来取代固定长度,如果做不到,尝试使用与视口相关的单位(vw,vh,vmin,vmax),它们的值解析为视口宽度与高度的百分比。
当需要在较大分辨率得到固定宽度时,使用max-width
不要忘记为替换元素(例如img,object,video,iframe等)设置一个max-width,值为100%
假设背景图片需要完整的铺满一个容器,可以使用background-size:cover。【在移动网页中通过css把一张大图缩小显示往往不太明智】
当图片或其他元素以行列式进行布局,让视口的宽度来决定列的数量。可以使用弹性盒布局(Flexbox)或者display:inline-box加上文本折行行为。
在使用多列文本时,指定column-width而不是column-count,这样可以在较小的屏幕上自动显示为单列布局。【尽量实现弹性可伸缩的布局,并在媒体查询的各个断点区间内制定相应尺寸】
合理使用缩写
如果要明确地去覆盖某个具体展开式属性并保留其他相关样式,则需要用展开式属性。

第二章背景与边框
1、半透明边框
opacity
RGBA/HSLA
解决方案:
background-clip:padding-box/*默认值是border-box(背景会被元素的边框的外沿框裁切掉),内边距的外延把背景裁切掉*/

2、多重边框
box-shadow:利用,实现多边框,只能设置实线
background:yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rbga(0,0,0,.6);
outline:两层边框,边框不一定会贴合border-radius产生的圆角
background:yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

3、灵活的背景定位
css2.1只能定位图片在容器左上角的位置。
css3background-position指定背景图片距离任意角的偏移量,只要在偏移量前指定关键字
background:url(code-priate.svg) no-repeat #58a;
background-position:right 20px bottom 10px;
background:url(code-priate.svg)no-repeat bottom right #58a;/*回退方案*/
background-position:right 20px bottom 10px;

偏移量与容器内边距一致时,设置
padding:10px;
background:url(code-priate.svg)no-repeat #58a 
           bottom right ;
background-origin:content-box;/*默认是以padding-box为准,在这里改成content-box*/
calc()方案
background:url(code-priate.svg) no-repeat;
background-position:calc(100% - 20px) calc(100% - 10px);

4、边框内圆角
难题:容器内侧有圆角,边框或者描边的四个角在外部仍然保持直角。
通常两个元素可以实现,内外两个div
只用一个元素
background:tan; /*一个元素实现外边框直角,内边框圆角,描边不会跟着容器走*/
border-radius:.8rem;
padding:1rem;
box-shadow:0 0 0 .6rem #655;
outline:.6rem solid #655

5、条纹背景
水平条纹
background:linear-gradient(#fb3 50%,#58a 50%);
background-size:100% 30px;

不等宽度的条纹
background:linear-gradient(#fb3 30%,#58a 30%);
background-size:100% 30px;

易于dry的代码,根据css3规范:如果某个色标的位置值比整个列表中在它之前的色标的位置都要小,则该色标的位置值会被设置为他前面所有色标位置值的最大值。只需修改前面的值:
background:linear-gradient(#fb3 30%,#58a 0);
background-size:100% 30px;

即后面的0会被修改为30%
三种颜色的水平条纹
background:linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);
background-size:100% 45px;

垂直条纹
开头加一个参数,默认是to bottom,而且需要把background-size的两个值颠倒。
background:linear-gradient(to right,/*或者90deg*/
           #fb3 50%,#58a 0);
background-size:30px 100%;

斜条纹
background:linear-gradient(45deg,
           #fb3 25%, #58a 0,#58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size:30px 30px;

这样创建出来的条纹要细一些,因为勾股定理,如果想要15px,需要将background-size设置为43;
更好的斜向条纹
background:repeating-linear-gradient(45deg,#fb3 #58a 30px);

以下可以得到和上面斜条纹一样的形状,不需要考虑勾股定理了
background:repeating-linear-gradient(45deg,
           #fb3, #fb3 15px, #58a 0, #58a 30px);

灵活的同色系条纹
background : #58a;
background-image: repeating-linear-gradient(30deg,
                  hsla(0,0%,100%,.1),
                  hsla(0,0%,100%,.1), 15px;
                  transparent 0, transparent 30px);

6、复杂的背景图案
网格
background:white;
background-image:linear-gradient(90deg,
                  rgba(200,0,0,.5) 50% transparent 0),
                 linear-gradient(
                  rgba(200,0,0,.5) 50% transparent 0),
background-size: 30px 30px;

希望网格中格子大小可以调整,但是网格线条的粗细同时保持固定,使用长度而不是百分比作为色标:
background:58a;
background-image:linear-gradient(white 1px, transparent 0),
                 linear-gradient(90deg, white 1px, transparent 0),
background-size: 30px 30px;

两幅不同颜色,不同线宽打的网格图案叠加---蓝图网格。
background:58a;
background-image:linear-gradient(white 2px, transparent 0),
                 linear-gradient(90deg, white 2px, transparent 0),
                 linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                 linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0),
background-size: 75px 75px 75px 75px,
                 15px 15px 15px 15px;
波点
不适用的波点
background:#655;
background-image:radial-gradient(tan 30%, transparent 0);
background-szie:30px 30px;
真正的波点:
background:#655;
background-image:radial-gradient(tan 30%, transparent 0)
                  radial-gradient(tan 30%, transparent 0);
background-szie:30px 30px;
background-position:0 0 15px 15px;
棋盘
background:#eee;
background-image:radial-gradient(45deg, #bbb 25%, transparent 0),
                  radial-gradient(45deg, transparent 75%, #bbb 0),
                  radial-gradient(45deg, #bbb 25%, transparent 0),
                  radial-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0 15px 15px,
                    15px 15px,30px 30px;
background-szie:30px 30px;

使用svg实现
<svg xmlns="http://www.w3.org/2000/svg"
  width="100" height="100" fill-opacity=".25">
  <rect x="50" width="50" height="50"/>
  <rect y="50" width="50" height="50"/>
</svg>

css代码处理为多行:在行末打上反斜杠(“\”) 换行。
7、伪随机背景
background:hsl(20%, 40%, 90%);
background-image:
      linear-gradient(90deg, #fb3 11px, transparent 0),
      linear-gradient(90deg, #ab4 23px, transparent 0),
      linear-gradient(90deg, #655 41px, transparent 0),
background-szie:41px 100%, 61px 100%, 83px 100%;

8、连续的图像边框
padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white),
            url(store-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

简写为
padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white) padding-box,
            url(store-art.jpg) border-box 0 /cover;

老式信封
padding: 1rem;
border: 1rem solid transparent;
background: liner-gradient(white, white) padding-box,
            repeating-linear-gradient(45deg, red 0, red 12.5%,
            transparent 0 , transparent 25%,
            #58a 0, #58a 37.5%,
            transparent 0, transparent 50%)
            0 / 5rem 5rem;


展开阅读全文

没有更多推荐了,返回首页