CSS高效开发实战笔记 123

第一章 CSS 3 与现代Web标准
第二章 温故知新--HTML、CSS基础
第三章 使用CSS选择器让样式表更健壮

第一章 CSS 3 与现代Web标准

未来web发展趋势：

去adobe化：css3的背景渐变、按钮的圆角、简单动画等
基础功能集成：如对视频、音频的内嵌支持，邮件、日期选择表单的支持等
客户端执行更多逻辑和渲染
适应移动设备发展
CSS3特性：

圆角： border-radius属性
阴影：元素的边界和文字阴影。box-shadow和text-shadow
渐变：gradients  (纵向渐变linear-gradient；radial-gradient横向渐变；repeating-linear-gradient重复的纵向；重复的横向)
变换：transform (旋转rotate()  transform:rotate(-15deg)；缩放 scale(0.8)；扭曲skew(-5deg,-5deg)
动画：
媒介查询：

可使用Modernizr检测是否支持CSS3
<script type="text/javascript" src="modernizr-1.5.js"></script>
$(document).ready(function(){
    if(Modernizr.canvas){
        //添加canvas代码
    }
});

CSS3浏览器支持情况，一个表

第二章
温故知新--HTML、CSS基础

W3C流程：
1.
提交提案 --> 2. Notes。未拒绝则，进入note阶段 --> 3. 成立工作组。note被认可后
-->
4. 工作草案。草案会在站点上公布，接收公众意见，可能被废弃 --> 5.候选推荐(可选)
-->
6. Proposed Recommendation 可能继续修改，一般会马上成为w3c标准 --> 7. Recommendation

引用css的三种方式style属性、style标签、link

盒子模型：
一般四部分：内容、内边距（padding)、边框(border)、外边距(margin)
默认情况下：内外边距和边框都没有；外边距透明，不遮挡任何元素；背景应用于内容、内边距和边框
外边距的主要用途是用于布局，目的是控制元素之间的距离 

跨浏览器的CSS
如果想效果全一只，需要放弃一些属性，比如html5的canvas、css3的transform，需要多用图片。
解决兼容性问题的方法之一是：条件注释(conditional comment)，让不同的浏览器加载不同的css，如
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->

属性前缀：

-webkit: webkit核心浏览器，包括chrome/safari等
-moz: 火狐
-ms: ie
-o: opera

属性前缀的排序，对于老版本浏览器而言，W3C标准属性在某些情况下与带有前缀的属性具有不同的表现形式，可以把标准属性放在最后面。
.border_button{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}   放在后面，可以覆盖前面的属性定义，保证浏览器显示一致。

浮动布局：
浮动，可以理解为水里向上浮动，在y轴和z轴上都要进行浮动。浮动后，子元素会脱离父元素。
默认情况下，父元素会根据子元素计算高度，如果子元素都浮动了，父元素的height为0。
浮动有4个值可以选:none/left/right/inherit。
IE不支持inherit。
如果不设置float，一般默认是100%，设置了浮动之后，会根据内容进行调整。

不浮动时，上图；下图是div1左浮动，div2不浮动。
注意：虽然div2的框和div1的框重叠，但是文字并不会覆盖div1的文字。这是因为虽然浮动的元素脱离了文档流，但是其中的内容仍然会占据空间，会根据相对位置进行布局。

万能的浮动清除代码，可以在不同浏览器下兼容：在需要清除浮动的元素后面加<div class="clear"></div>
html body div.clear,
html body span.clear{
    background:none; 
    border:0;
    clear:both;
    display:block;
    float:none;
    font-size:0;
    margin:0;
    padding:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}

定位技术：
position有五个可选值：static、relative、absolute、fixed、inherit。默认为static。
使用top、left、right、bottom和z-index设置偏移量。
static和relative是相对定位，relative可以在原位置基础上偏移。

绝对定位：

块级元素的宽度未定义时不再是100%，而是根据内容自动调整
不定义z-index时，absolute元素会覆盖 在其他元素之上
会脱离正常的文档流，不再占据空间，类似于浮动后的效果
absolute是相对上一个不为static的父元素进行绝对定位。即，如果不指定父元素的position，absolute将相对于整个thml文档进行绝对定位。

如果想相对于外围container进行绝对定位，可以把外围container定义为position:relative。
fixed，相对于浏览器窗口进行定位。不管网页如何滚动。

第三章 使用CSS选择器让样式表更健壮

伪类选择器
伪类，表示元素的状态：排序、鼠标是否悬停、是否已被访问过、光标是否指向等
css2中只有 :hover、:active、:visited、:link、：first-child、：lang等有限几种伪类，CSS3中增加了大量新的伪类选择器。

结构化伪类：根据文档的结构来选取元素
:nth-child(n)  
如li:nth-child(2): n可以是大于等于0的整数，n取2，就是某个父元素内第2个<li>元素
注意li本身作为子元素，不是li的子元素。
直接用n表示全选。不能用x、y等，只能是n。
n可以计算，比如2n表示偶数，3n则是3、6、9等，2n+1表示所有的奇数，n+5表示第5个开始全选

:nth-last-child(n)：规则同前面，从最后一个元素开始计算
:nth-of-type(n)：如p:nth-of-type(n)，表示查询的是第3个p元素。 
:last-child、:first-of-type、:last-of-type
:only-child、:only-of-type
:root  不兼容ie6-8
:empty 没有任何内容的元素

目标伪类：target
状态伪类：(大量IE6-8不支持，如想实现相同效果，可用属性选择器)
:enabled和:disabled  禁用和可用的元素
:checked  用于checkbox和radio     input[checked'']{}相同效果
:indeterminate和:default

否定伪类
:not(S)   不支持IE6-8。   div :not(.test){} div子元素中所有不是test的。