01--css编码技巧--css揭秘
2018-06-24 00:53:55来源:未知 阅读 ()
一 尽量减少代码重复
1.按钮
#btn { padding: .3em .8em; border: 1px solid #446d88; background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent); border-radius: .2em; box-shadow: 0 .05em .25em gray; color: white; text-shadow: 0 -.05em .05em #335166; font-size: 125%; line-height: 1.5; }
2.代码易维护vs. 代码量少
3.currentColor 自动从文本那获取颜色值
hr { height: .5em; background: currentColor; }
3.继承 inherit
inherit 可以用在任何CSS 属性中,而且它总是绑定到父元素的计
算值(对伪元素来说,则会取生成该伪元素的宿主元素)
这个inherit 关键字对于背景色同样非常有用。举个例子,在创建提
示框的时候,你可能希望它的小箭头能够自动继承背景和边框的样式(
.callout { position: relative; } .callout::before { content: ""; position: absolute; top: -.4em; left: 1em; padding: .35em; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); }
二 相信你的眼睛,而不是数字
人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精
准,而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例
子吧,我们的眼睛在看到一个完美垂直居中的物体时,会感觉它并不居中。
实际上,我们应该把这个物体从几何学的中心点再稍微向上挪一点,才能取
得理想的视觉效果
三 关于响应式网页设计
你添加的媒体查询越多,你的CSS代码就会变得越来越经不起折腾。
媒体查询的断点不应该由具体的设备来决定,而应该根据设计自身来决定
1.媒体查询的注意和建议:
1> 使用百分比长度来取代固定长度。如果实在做不到这一点,也应该
尝试使用与视口相关的单位(vw、vh、vmin 和vmax),它们的值解
析为视口宽度或高度的百分比。
2> 当你需要在较大分辨率下得到固定宽度时,使用 max-width 而不是
width,因为它可以适应较小的分辨率,而无需使用媒体查询。
3> 不要忘记为替换元素(比如 img、object、video、iframe 等)设
置一个max-width,值为100%。
5> 假如背景图片需要完整地铺满一个容器,不管容器的尺寸如何变化,
background-size: cover 这个属性都可以做到。但是,我们也要时
刻牢记——带宽并不是无限的,因此在移动网页中通过CSS 把一张
大图缩小显示往往是不太明智的。
6> 当图片(或其他元素)以行列式进行布局时,让视口的宽度来决定
列的数量。弹性盒布局(即Flexbox)或者display: inline-block
加上常规的文本折行行为,都可以实现这一点。
7> 在使用多列文本时,指定 column-width(列宽)而不是指定
column-count(列数),这样它就可以在较小的屏幕上自动显示为单
列布局。
总的来说,我们的思路是尽最大努力实现弹性可伸缩的布局,并在媒体
查询的各个断点区间内指定相应的尺寸。
四 合理使用简写
合理使用简写
是一种良好的防卫性编码方式,可以抵御未来的风险。当然,如果我们要明
确地去覆盖某个具体的展开式属性并保留其他相关样式,那就需要用展开式
属性
#box { background: url(tr.png) no-repeat top right / 2em 2em, url(br.png) no-repeat bottom right / 2em 2em, url(bl.png) no-repeat bottom left / 2em 2em; }
#box { background: url(tr.png) top right, url(br.png) bottom right, url(bl.png) bottom left; background-size: 2em 2em; background-repeat: no-repeat; }
现在,我们只需要在一处修改,就可以改变所有的background-size
和background-repeat 了。你会发现这个技巧在本书中的使用非常普遍。
五 我应该使用预处理器吗
如果使用得当,它们在大型项目中可以让代码更加灵活
1> CSS 的文件体积和复杂度可能会失控
2> 调试难度会增加
小花絮 :
怪异的简写语法
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:写一个简单的CSS表
下一篇:纯CSS的三角符号
- HTTP 冷知识 | HTTP 请求中,空格应该被编码为 %20 还是 + 2020-06-02
- 【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧 2020-05-14
- CSS背景图片的6个有趣的技巧 2020-05-12
- 网页注册表单的设计技巧 2020-03-04
- 小结常见布局技巧 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash