3-6CSS揭秘阅读笔记第一章：引言

写CSS的要求？--保证DRY(don't repeat yourself ），可维护、灵活性、轻量级
不同浏览器表现有细微差异，需要加浏览器前缀，把标准语法排在最后。可以在书写css时，提供回退机制回退样式。最常见的前缀Firefox的-moz-、IE的-ms-、opera的-o-，以及safari和chrome的-webkit-.
CSS编写技巧--

尽量减少代码重复：

我来写这个框的思路：

 .button{width:200px;height:100px;padding:15px 10px;color:#fff;font-size: 20px;line-height: 30px;border: 1px solid yellow;box-shadow: 0 5px 10px grey;text-align: center;text-shadow: 0 -1px 1px #355166;background: yellow;}

书上的写法：

body{font-size: 16px;}.button{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 .5em .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;}

对比分析：

1.没有width和height ，可以利用width:auto的自适应效果自动填充

2.不要写绝对长度，用比值改用em单位，修改某一处时容易维护，不需要每一处都修改

浏览器里默认字体大小是16px;字号和其他尺寸与父级字号相关联，用em；如果要和<html>的字号相关联可以使用rem单位。

3.颜色值用rgba或者hsla值方便实现相对的调整变化根据本身的颜色自适应

hsla的用法：语法：取值：<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

<percentage> ：

Saturation(饱和度)。取值为0%到100%之间的值；

<percentage> ：

Lightness(亮度)。取值为0%到100%之间的值；

<opacity> ：

alpha(透明度)。取值在0到1之间；

1.代码易维护和代码量少不可兼得

{border-width:10px;

border-left-width:0; }

比 { border-width:10px 10px 10px 0;}

可读性以及可修改性更好

2.currentColor

从SVG借鉴的，但是没有绑定固定颜色，一直被解读为color，成为了CSS中的变量。

用法：例子让所有水平分割线（<hr>元素）自动与文本颜色保持一致，

hr{

height: 0.5em;

background: currentColor;

}

如果没有给边框指定颜色，它自动继承body中文本颜色

3.inherit可以用在任何css属性中总是绑定到父元素的计算值（伪元素：取其宿主元素）

这个样式是黄色部分小箭头的样式

 .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);}

人的视觉有局限性，在完美居中的情况下，实际上并不居中，要把中心点往上挪一点，才能达到居中的视觉效果，如果要四面的边距看起来基本上一致需要减少padding-top/bottom的内边距

关于响应式网页设计：

使用媒体查询会增加使用成本，媒体查询的断点应该有设计自身来决定，不由具体设备决定，以下建议避免不必要的媒体查询

1.使用百分比长度取代固定长度或者尽量尝试使用与视口相关单位（vw、vh、vmin和vmax），它们的值解析为视口宽度或高度的百分比；

2.在加大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小分辨率，无需媒体查询

3.要为替代元素设置一个max-width:100%;

4.如果背景图片要完整铺满整个容器要设置background-size:cover;

5.当图片或其他元素以行列式进行布局，让视口的宽度决定列的数量。用弹性盒布局或者display:inline-block加上常规的文本折行行为都可以实现

6.在使用多列文本时，指定列宽column-width而不是指定列数column-count，这样就可在较小屏幕上自动显示为单列布局

实现思路是尽可以努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应尺寸。

合理使用简写

background:red;

background-color:red;

这两条声明并不等价，background:#abc; 前一种可以确保得到红色背景，

后一条可能会和背景图片一起相互作用；

要明确的覆盖某个具体的展开式属性并保留其他相关样式需要用展开式属性。

改写成为

在background简写属性中指定background-size，需要同时提供一个background-position值，用/分隔；这是为了消除歧义，随时查阅语法

css预处理相关 ---书p14-16 用到时再查阅

3-6CSS揭秘阅读笔记第一章：引言相关推荐

深入理解 C 指针阅读笔记 -- 第一章
上周末,我在图书馆看到了这本很薄的书 -- <深入理解 C 指针> 这本书中写的内容,个人感觉适合一个初学者,内容不是很难.我也读了下,对每一章都做了笔记,笔记都是用代码的形式 ...
《视觉计算理论》阅读笔记——第一章
注:<视觉计算理论>翻译自Marr的<Vision> Vison: A computational investigation into the human represent ...
《西瓜书》阅读笔记——第一章
第一章 1.1 基本术语 (色泽=青绿:根蒂=蜷缩:敲声=浊响), (色泽=乌黑:根蒂=稍蜷:敲声=沉闷), (色泽=浅白:根蒂=硬挺:敲声=清脆),... 数据集(data set):上述记录的集合 ...
大崩溃-正在降临的危机与金融风暴史（The Great Crash)阅读笔记第一章大崩溃：货币战争的真相
图书信息李晓鹏著北京邮电大学出版社修改记录记录第一章 2012年2月21日6:10 - 2012年2月21日7:30 记录第二章 2012年2月22日6:04:58 -2012年2月22日7: ...
[云炬ThinkPython阅读笔记]第一章程序之道
本书的目标是教你像计算机科学家一样思考.这一思考方式集成了数学.工程以及自然科学的一些最好的特点.像数学家一样,计算机科学家使用形式语言表示思想(具体来说是计算).像工程师一样,计算机科学家设计东西, ...
《现代雷达系统分析与设计》阅读笔记——第一章
一.分辨率分辨率是指对两个相邻目标的分辨能力.雷达通常包括距离和方位两维,甚至还包括仰角维和速度维.在这四维中只要有一维能区分目标就认为目标是可以分辨的. 距离分辨率:两个目标在同一角度但在不同距离 ...
CSS学习 | 《CSS揭秘》读书笔记——第一章
第一章引言 web标准标准的制定过程:CSS规范通常是由CSS工作组的成员来编写的. 人员结构如:88%来自W3C会员公司的成员(比如浏览器厂商.主流网站.研究机构.常规技术公司等):7%特邀专家 ...
数据库系统概论笔记（第一章引言）—— 持续更新，争取每周更新一章
第一章引言数据库管理系统(DataBase-Management System, DBMS)*是由一个相互关联的数据的集合和一组用以访问这些数据的程序构成.这个数据集合通常称为数据库(DataBa ...
《Go语言圣经》学习笔记第一章 Go语言入门
Go语言圣经学习笔记第一章 Go语言入门目录 Hello, World 命令行参数查找重复的行 GIF动画获取URL 并发获取多个URL Web服务本章要点注:学习<Go语言圣经&g ...

3-6CSS揭秘阅读笔记第一章：引言

对比分析：

3-6CSS揭秘阅读笔记第一章：引言相关推荐

最新文章

热门文章