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