《CSS那些事儿》读书笔记
2015-05-28 19:47
525 查看
注:
此书出版于2009年,所以有些知识...你懂得。有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧。
暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多多指教。
代码演示我统一放到了jsfiddle上,国内访问速度稍慢些,大家耐心点。或是大家知道国内有类似的在线调试网站,麻烦和我分享下,在此先谢了。
该笔记中只给出了部分代码演示链接,如果想看该书的完整示例代码,可到百度云:http://pan.baidu.com/s/1o64sPR0 下载,我已经共享好了。
该笔记较长,大家耐心点哦。
[align=left]耐心地学习CSS,掌握好CSS的本质原理后,你将会发现原来CSS真的很好玩。[/align]
[align=left]学习CSS最好的方法就是不断地做,不断地想,不断地实践。[/align]
[align=left]CSS特点:[/align]
修饰页面文本、图片等页面元素,避免使用不必要的HTML元素。
更有效地控制页面结构、页面布局。
提高开发和维护效率。
[align=left]CSS的简写:[/align]
颜色的缩写:#RRGGBB –– 缩写成 #RGB。
单位值的省略:当数值为0时,可省略单位。
内外边距的简写:根据上右下左的顺时针方向,有4种简写方式。
边框的简写:border: -width || -style || -color。
背景的简写:background: -color || -image || -repeat || -attachment || -position
字体的简写:font: -style || -variant || -weight || -size || /line-height || -family
列表的简写:list-style: -image || -position || -type
[align=left]CSS选择符:[/align]
标签选择符:E(html标签)
ID选择符:#className
类选择符:.className
通配符选择符:*
包含选择符:又称派生或后代选择符,作用于元素的后代元素。
子选择符:又称子对象选择符,作用于元素的子元素,用“>”连接选择符(IE7+)。
相邻选择符:作用于元素的相邻的下一个元素(线性结构中的直接后驱),用”+“连接选择符(IE7+)。
属性选择符:E[attr]、E[attr=“value”]、E[attr~=“value”]、E[attr|=“value”]、E[attr^=“value”]
选择符的组合关系:针对性使用类选择符或ID选择符、选择符群组、选择符组合。
[align=left]伪类:[/align]
[align=left]用来指定一个或者多个与其相关的选择符的状态(IE6/7支持部分)。其形式为:选择符:伪类 {属性:属性值;}。[/align]
[align=left]如:a:link{}、a:visited{}、a:hover{}、a:active{}。[/align]
[align=left]伪类可使页面增加更多交互效果,而不必去使用过多的javascript来辅助实现。[/align]
[align=left]伪对象:[/align]
[align=left]指在html的文档指定的信息之外,创建文档的额外信息(IE6/7支持部分)。其形式:选择符:伪对象 {属性:属性值;}。[/align]
[align=left]如:p:before {content: “4月1日”}。[/align]
[align=left]CSS层叠样式表的特色在于“层叠”,所谓层叠即表示CSS样式表会根据选择符的使用而将样式相互叠加或者覆盖。[/align]
[align=left]网页定义的4种样式:[/align]
html:表示在html中是使用的样式。
作者:表示CSS文件的编写者。
用户:指浏览器网页的用户所设置的样式。
浏览器:指浏览器默认样式。
[align=left]CSS样式采用的优先顺序:[/align]
标有!important关键字声明的属性。
html中的CSS样式属性。
作者编辑的CSS文件样式属性。
用户设置的样式。
浏览器默认的样式。
[align=left]选择符优先级积分:[/align]
标签选择符、伪类及伪对象:优先级积分为1。
类选择符、属性选择符:优先级积分为10。
ID选择符:优先级积分为100。
style属性:优先级积分为1000。
其他选择符,如通配符选择符等:优先级积分为0。
[align=left]对于!important关键字的使用一定要谨慎,切勿随便使用,避免产生不必要的问题。[/align]
[align=left]内嵌样式表,一般应用在访问量比较大的页面减少对服务器的http请求数而减少对服务器的负担。[/align]
[align=left]缺点是如果需要修改,那就只能对页面进行修改,且无法利用浏览器缓存特性。[/align]
[align=left]由于浏览器最后解析@import,这样很容易导致IE6的闪屏或者在打开页面的过程中无样式,直到页面加载完毕后才会加载样式的现象出现,因此不建议使用@import。[/align]
[align=left]<div id=“container”>[/align]
[align=left] <div class=“mainBox”>主要内容区域</div>[/align]
[align=left] <div class=“sideBox”>侧边栏</div>[/align]
[align=left]</div>[/align]
[align=left]因为浏览器在解析html代码时是由上而下的方式逐句分析的,因此将mainBox放在sideBox之前的主要作用是将内容区域提前展现在浏览器中。[/align]
[align=left]在使用CSS样式布局页面结构时,不使用浮动那么就只能采用定位的方式进行页面布局。[/align]
[align=left]两列页面布局:[/align]
两列定宽结构:
要点:float、width指定、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/tWvph/
前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象。
两列自适应结构:
要点:float、width百分比、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/MyfXs/
单列定宽-单列自适应结构:
要点:相对定位、负边距效果:http://jsfiddle.net/XianfaLang/U3J3X/
问题:当sideBox的内容很多时,使用绝对定位导致无法撑开父元素的高度,而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决,个人觉得应该有CSS方案来解决这个问题,而不是用javascript来解决。这不,第5章就给出了一种解决方案:http://jsfiddle.net/XianfaLang/5w8MD/
两列等高:
4.1. 背景模拟:利用背景图片的平铺,在视觉效果上产生等高的感觉。
4.2. 负边距实现(推荐):
原理:利用左右两个方向的外边距弥补在页面中布局出现错位的现象。
要点:两容器设置margin-bottom:-9999px; padding-bottom:9999px,父元素设置overflow:hidden;
效果:http://jsfiddle.net/XianfaLang/Q5nph/
问题:如果页面使用<a>做页面跳转,将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部,将看不到背景图片。
4.3. 边框模拟:
要点:border-right:280px solid #AAAAAA; 绝对定位
效果:http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS方式:
要点:使用javascript设置两列高度相同。
效果:http://jsfiddle.net/XianfaLang/C9XcZ/
[align=left]三列或多列布局:[/align]
了解width:auto与float的关系:http://jsfiddle.net/XianfaLang/nMyh4/
两列定宽中间自适应结构:
要点:浮动、负边距、mainBox的width为100%。
效果:http://jsfiddle.net/XianfaLang/dsfKU/
左侧定宽-右侧和中间自适应结构:
要点:浮动、margin百分比、负边距。
效果:http://jsfiddle.net/XianfaLang/nB57t/
三列宽度自适应结构:同左侧定宽-右侧和中间自适应结构类似,把宽度改为百分比即可。
三列等高:
原理同两列等高类似,也有4种实现方式。这里只列举两种:
负边距实现:http://jsfiddle.net/XianfaLang/hRq2q/
边框模拟:http://jsfiddle.net/XianfaLang/EBww5/
[align=left]文本相关[/align]
text-indent属性可将文字往旁边“推”,如:p { text-indent: 2em; } /* 设置段落缩进2em */ 联想到负边距有“吸”功效。
隐藏文字方法:
a. 使用text-indent/line-height 将文字“推”到容器之外。
b. visibility: hidden; 设置元素不可见,但占空间位置。
c. display: none; 设置元素不可见,不占空间位置。
[align=left]图片相关[/align]
[align=left]PNG优点:[/align]
是目前保证最不失真的格式,它汲取了GIF和JPG二者的优点,存储形式丰富。
即能把图像文件压缩到极限以利于网络传输,又能保留所有与图像品质有关的信息。
显示速度快。
支持透明图像的制作。
[align=left]PNG缺点:不支持动画效果。[/align]
[align=left]PNG-8比GIF要小一点,GIF可制作动画而PNG-8无法实现动画效果。[/align]
[align=left]PNG-24是色彩最丰富的图片,且支持alpha通道的透明,不像PNG-8和GIF只能支持全透明的图片。[/align]
[align=left]支持alpha通道的透明,可以让图片产生半透明的效果,使页面更漂亮。[/align]
[align=left]采用哪种格式的图片作为背景图的参考点:[/align]
图片是否严重失真。
哪种格式的图片是最小的。
图片是否有透明效果,如果有,那是否有alpha透明效果。
[align=left]background-position注意点:[/align]
任何背景图片都是先设置水平方向的定位,再设置垂直方向的定位。
只有一个数值时,该数值将作用于水平方向的定位,而垂直方向的定位将以默认的50%为基准。
属性值为百分比时,将以图片的中心点为基准计算其相对位置,而使用px像素值时将以图片的左上角为基准。
可以使用负值。
[align=left]CSS Sprite常用来合并频繁使用的图形元素。[/align]
[align=left]CSS Sprite注意点:[/align]
固定容器的宽度和高度。
超出容器的宽度和高度部分的背景图片需要隐藏。
背景图片在合并时,需要考虑每张图片的用途。
[align=left]图文混排:给<img>设置float: left;[/align]
[align=left]三种列表:[/align]
无序列表:<ul><li>...</li></ul>
有序列表:<ol><li>...</li><ol>
自定义列表:<dl> <dt>标题</dt> <dd>内容</dd> </dl>
[align=left]行内元素不具备宽高属性,只有将其转化为块级元素后才具备宽高属性。[/align]
[align=left]CSS样式中能将块元素以横向排列方式排列的只有定位(position)和浮动(float)两种方式。[/align]
[align=left]CSS实现表现效果,javascript实现行为效果。[/align]
[align=left]CSS样式需要大家不断去摸索,不断尝试新的内容才会使每个人自身对CSS样式的理解及处理问题的能力得到提升。[/align]
[align=left]列表示例:[/align]
二级菜单导航(横排):
要点:整体宽度、一级列表宽高和浮动、二级列表绝对定位。
效果:http://jsfiddle.net/XianfaLang/4CPdG/
图文列表信息:
要点:整体宽度、浮动。
效果:http://jsfiddle.net/XianfaLang/KM7Ua/
[align=left]理解、分析、总结是必须要进行的几个步骤:[/align]
理解每个例子中所讲解的步骤及实现的方法。
分析每个方法的可用性及是否有其他更好的实现方法。
总结在每次实践中所得到的经验。
[align=left]在IE浏览器中,按钮与文字之间的垂直对齐关系 如同 复选框与文字之间的对齐关系,需要利用vertical-align对其进行调整。[/align]
[align=left]表格相关[/align]
[align=left]border-collapse:检索或设置表格的行和单元格的边是否合并到一起。默认值:separate。合并:collapse。[/align]
[align=left]可使用相邻选择符实现隔行换色。个人觉得此知识点,主要是了解相邻选择符的应用,实际应用性不大。[/align]
[align=left]日历表的制作:http://jsfiddle.net/XianfaLang/Z4wVQ/2/[/align]
[align=left]将table标签用于显示数据结构,而不是用于页面布局。[/align]
[align=left]float是将页面中的元素在水平方向上并排显示的,而position却是将页面的元素以叠加的方式显示的。[/align]
[align=left]使用CSS滤镜之前,需要思考的几个问题:[/align]
页面中使用CSS滤镜的次数会不会过多。
使用CSS滤镜是不是会占用较多的CPU。
能否使用图片直接代替由CSS滤镜产生的效果。
使用CSS滤镜后,会不会影响到页面中的内容操作。
[align=left]使用iframe实现的“选项卡”逐渐演变为将页面内容集于一体,通过JS切换显示内容。[/align]
[align=left]实现tab选项卡要把握html结构与css样式之间的微妙关系。[/align]
[align=left]负边距与层叠效果的应用:怪异的导航菜单。[/align]
[align=left]IE浏览器会在每个列表li之间产生几个像素的空间,可用float:left;使多余的几个像素“消失”。[/align]
[align=left]分析实例最好的方法就是将其简单化,从根本上去了解问题、分析问题。[/align]
[align=left]清除浮动作用:[/align]
解决页面错位现象。
解决子元素浮动导致父元素无法自适应子元素高度的问题。
[align=left]清除浮动的常用方法:[/align]
[align=left] 1. clear属性--常用clear: both;[/align]
[align=left] 2. 添加额外标签: <div style="clear:both;"></div>[/align]
[align=left] 3. 使用 br标签和其自身的 html属性: <br clear="all">[/align]
[align=left] 4. 父元素设置: overflow: hidden; *zoom:1; (在IE6中还需要触发 hasLayout ,例如 zoom:1)[/align]
[align=left] 5. 父元素设置: display: table;[/align]
[align=left] 6. 父元素设置 :after 伪类 (推荐):[/align]
.clearFix:after { clear: both; /* 清除伪类层以上的浮动 */ display: block; /* 使生成的元素以块级元素显示,占满剩余空间; */ visibility: hidden; /* 设置伪类层内容为块级元素且不可见 */ height: 0; line-height: 0; /* 设置伪类层中的高度和行高为0 */ content: " "; /* 将伪类层中的内容清空 */ } .clearFix { zoom: 1; /* 针对IE浏览器产生hasLayout效果清除浮动 */ } /* 更简洁的写法 */ .clearFix:before, .clearFix:after { content: ""; display: table; } .clearFix:after { clear: both; } .clearFix{ zoom:1; }
[align=left] [/align]
[align=left]结构分析是页面制作的第一步。[/align]
[align=left]用户习惯于滚动条上下移动,而不是左右移动。[/align]
[align=left]如果图片很大,可将其切成两张图片。[/align]
[align=left]使用语义的XHTML标签优点:[/align]
当样式无法正常加载时,依然会显示条理清晰的文档结构。
增加SEO(搜索引擎优化)性能。
加强与程序开发之间的配合。
提高页面后期维护的工作效率。
[align=left]分享自己的作品,对批评你作品的人表示感谢,因为他在告诉你如何才能做的更好。[/align]
[align=left]怎么提高自身编写代码的能力:[/align]
多看CSS手册。
XHTML代码中每个标签的含义。
善于分析CSS布局网站的处理方式。
多做CSS布局网站的练写。
学会使用网络搜索引擎。
善于利用辅助工具解决布局问题(Firebug, Chrome devtool)。
善于总结经验、整理笔记(这里推荐大家使用有道云笔记,PC/Mobile/Web都有,而且在微信中复制链接可直接同步云笔记,这样便于大家利用碎片时间阅读笔记)。
收藏和使用代码片段。
转载自:
阿郎博客
http://www.cnblogs.com/langjt/p/4281477.html相关文章推荐
- 关于css里的@font-face 和font-family属性
- 用css3实现各种图标效果(2)
- 用css3实现各种图标效果(2)
- 关于写CSS时类似div.ex中间有空格的问题
- 动态为页面添加CSS样式文件引用
- css3伸缩布局实现三列固定
- css3 border-radius
- css预处理器
- CSS 盒子模型(转)
- 纯CSS3实现垂直居中的九种方法
- css ul li 水平布局问题
- div内部div居中,对内部div设置宽度,再设css样式margin:0 auto(先上下边距,后左右边距)
- django-xhtml2pdf的使用(加入图片,指定字体,设置样式)
- 51 css 图片文字同时垂直居中 z-index无效 父级元素塌陷 图片宽度自适应
- js重复改变css样式
- 一些CSS3特效组件速查表
- 10个不可忽视的CSS代码片段
- LESS&nbsp;CSS&nbsp;框架简介
- css字体中px和em的区别
- CSS元素隐藏“失效”