第0章 关于本书
1、检测属性
CSS编码技巧
尽量减少代码重复
在实践中,代码可维护性的最大要素是尽量减少改动时要编辑的地方。
如果将父级的字号加大,则不得不修改每一处使用绝对值作为字体尺寸的样式。
需要确定哪些效果是应该跟着变大变小,哪些效果是保持不变的
产生主色调的亮色和暗色变体,其实可以使用将半透明的黑色或白色叠加在主色调上。
【插播笔试题】
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个地方。那么以下这种方式可能更好。
例如,我们想让所有的水平分割线元素自动与文本颜色保持一致,只需要这样写。
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
视觉上的错觉在任何形式的视觉设计中都普遍存在。如果希望四边的内边距看起来基本一致,需要减少顶部和底部的内边距。
关于响应式网页设计
作者提出了一些建议,可能可以避免不必要的媒体查询
使用百分比长度来取代固定长度,如果做不到,尝试使用与视口相关的单位(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
解决方案:
2、多重边框
box-shadow:利用,实现多边框,只能设置实线
3、灵活的背景定位
css2.1只能定位图片在容器左上角的位置。
css3background-position指定背景图片距离任意角的偏移量,只要在偏移量前指定关键字
偏移量与容器内边距一致时,设置
4、边框内圆角
难题:容器内侧有圆角,边框或者描边的四个角在外部仍然保持直角。
通常两个元素可以实现,内外两个div
只用一个元素
5、条纹背景
水平条纹
不等宽度的条纹
易于dry的代码,根据css3规范:如果某个色标的位置值比整个列表中在它之前的色标的位置都要小,则该色标的位置值会被设置为他前面所有色标位置值的最大值。只需修改前面的值:
即后面的0会被修改为30%
三种颜色的水平条纹
垂直条纹
开头加一个参数,默认是to bottom,而且需要把background-size的两个值颠倒。
斜条纹
这样创建出来的条纹要细一些,因为勾股定理,如果想要15px,需要将background-size设置为43;
更好的斜向条纹
以下可以得到和上面斜条纹一样的形状,不需要考虑勾股定理了
灵活的同色系条纹
6、复杂的背景图案
网格
希望网格中格子大小可以调整,但是网格线条的粗细同时保持固定,使用长度而不是百分比作为色标:
两幅不同颜色,不同线宽打的网格图案叠加---蓝图网格。
不适用的波点
使用svg实现
css代码处理为多行:在行末打上反斜杠(“\”) 换行。
7、伪随机背景
8、连续的图像边框
简写为
老式信封
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;