CSS高效开发实战笔记 123

第一章 CSS 3 与现代Web标准

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

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

第一章 CSS 3 与现代Web标准

未来web发展趋势：

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

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可以在原位置基础上偏移。

绝对定位：

1. 块级元素的宽度未定义时不再是100%，而是根据内容自动调整
2. 不定义z-index时，absolute元素会覆盖 在其他元素之上
3. 会脱离正常的文档流，不再占据空间，类似于浮动后的效果

absolute是相对上一个不为static的父元素进行绝对定位。即，如果不指定父元素的position，absolute将相对于整个thml文档进行绝对定位。

如果想相对于外围container进行绝对定位，可以把外围container定义为position:relative。

fixed，相对于浏览器窗口进行定位。不管网页如何滚动。

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

伪类选择器

伪类，表示元素的状态：排序、鼠标是否悬停、是否已被访问过、光标是否指向等

css2中只有 :hover、:active、:visited、:link、：first-child、：lang等有限几种伪类，CSS3中增加了大量新的伪类选择器。

1. 结构化伪类：根据文档的结构来选取元素
   1. :nth-child(n)  
      1. 如li:nth-child(2): n可以是大于等于0的整数，n取2，就是某个父元素内第2个<li>元素
      2. 注意li本身作为子元素，不是li的子元素。
      3. 直接用n表示全选。不能用x、y等，只能是n。
      4. n可以计算，比如2n表示偶数，3n则是3、6、9等，2n+1表示所有的奇数，n+5表示第5个开始全选
   2. :nth-last-child(n)：规则同前面，从最后一个元素开始计算
   3. :nth-of-type(n)：如p:nth-of-type(n)，表示查询的是第3个p元素。 
   4. :last-child、:first-of-type、:last-of-type
   5. :only-child、:only-of-type
   6. :root  不兼容ie6-8
   7. :empty 没有任何内容的元素
2. 目标伪类：target
3. 状态伪类：(大量IE6-8不支持，如想实现相同效果，可用属性选择器)
   1. :enabled和:disabled  禁用和可用的元素
   2. :checked  用于checkbox和radio     input[checked'']{}相同效果
   3. :indeterminate和:default
4. 否定伪类
   1. :not(S)   不支持IE6-8。   div :not(.test){} div子元素中所有不是test的。