CSS高效开发实战

CSS高效开发实战

@(StuRep)

通过条件注释加载不同的CSS

<!--[if !IE]><!-->除IE外都可识别<!--<![endif]-->
<!--[if IE]>所有的IE可识别<![endif]-->
<!--[if IE 6]>仅IE6可识别<![endif]-->
<!--[if lt IE 6]>IE6及以下版本可识别<![endif]!-->
<!--[if gte IE 6]>IE6以及IE6以上版本可识别<![endif]-->

_

条件注释的控制符

项目	范例	说明
!	[if !IE]	“非”运算符
lt	[if lt IE 5.5]	小于运算符
lte	[if lte IE 6]	小于等于运算符
gt	[if gt IE 6]	大于运算符
gte	[if gte IE 6]	大于等于运算符
()	[if (lte IE 6)]	用于子表达式，以配合布尔运算符
&	[if (lte IE 9)&(gt IE 6)]	AND运算符
\	[if (gt IE 6)](!IE)	OR运算符

_

常用的属性前缀

• -webkit:webkit核心浏览器，包括Chrome、Safari等。
• -moz:火狐(FIrefox)浏览器
• -ms:IE浏览器
• -o:Opera浏览器

在实际的开发过程中，对于大多数css3效果来说，考虑到兼容性，往往需要把所有的前缀属性都写上去，譬如这样：

.transform {
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);//把标准属性放在最后写
}

_

float

• 对于块级元素来说，在不设置宽度的情况下，默认的宽度是100%，一旦设置了浮动，它的宽度就会根据内容进行自动调整。
• 设置了浮动的元素会脱离正常的文档流，我们可以这样理解：设置浮动后，元素不仅在y轴上浮了起来，在z轴上，也浮了起来。譬如：在默认情况下，父元素的高度会根据子元素的内容进行调整，而如果我们将子元素设置为浮动，父元素的高度就会变为0。
• 虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。

_

清除浮动

清除浮动主要应用的是css中的clear属性，clear属性定义了元素的哪一侧不允许出现浮动元素。可选项有left、right、both。
_

CSS定位技术

CSS使用position选项来定义元素的定位属性，该选项有5个可选值：static、relative、absolute、fixed、inherit，默认值为static。

• static：如果使用默认值，在CSS中为元素定义top、left、right、bottom、z-index都不会生效。
• relative：relative的表现和static一样，只不过可以通过设置偏移量和z-index来控制相对于其正常位置进行的偏移。
• absolute：absolute是相对上一个不为static的父元素进行绝对定位。换句话说，如果不指定父元素的position，absolute将相对于整个html文档进行绝对定位。只有指定了container的position(非static)，子元素才能相对于父元素进行绝对定位。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。也就是说，不论网页如何滚动，该元素始终停留在屏幕的某个位置上。

绝对定位元素有以下几个特点：

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

absolute和fixed都属于绝对定位的范畴。

__

CSS选择器

• 子元素选择器：">"符号，">"左边是父元素，右边是子元素。如果两个元素不是严格的“父子关系”，则使用子元素选择器的定义不会生效。例如：

<li><a href="#">test</a></li><!--变为蓝色-->
<li><div><a href="#">test</a></div></li><!--不变蓝色-->
//css
li>a{
    color:blue;
}

• 后代元素选择器：一个空格。后代包括子辈、孙子辈等，不同于子代选择器。例如：

<li><a href="#">test</a></li><!--变为蓝色-->
<li><div><a href="#">test</a></div></li><!--变为蓝色-->
//css
li a{
    color:blue;
}

• 相邻元素选择器：“+”，用于选取和某个元素相邻的同级元素。相邻元素选择器的使用有两个条件：

  • 二者必须拥有同一个父元素
  • 二者相邻
• 属性选择器：属性选择器的语法是用一对中括号“[]”，例如[title]、a[href][title]
• 组选择器：如果要对多个元素定义同样的样式，则可以用组选择器来缩减重复代码。组选择器的语法关键字是一个“,”
• :nth-child(n)：选择器中的n表示一个简单的表达式，它可以是大于等于0的整数，比如在基础样例中应用：

li:nth-child(2){
    background-color:#333;
    color:white;
}
//n取2，就是取某个父元素内第二个li元素，即需要同时满足两个条件：1.是不是第2个
//2.是不是li元素

• :nth-last-child(n)：和nth-child(n)相反
• :nth-of-type(n)：这个选择器和:nth-child(n)类似，区别在于，如果使用p:nth-child(3)这样的条件时，一旦第3个元素不为<p>元素，这个选择器就不起作用，而p:nth-of-type(3)则查询的是第3个<p>元素。
• :nth-last-of-type：和上一个相反
• :last-child：选择的是元素的最后一个子元素
• :first-of-type和:last-of-type：:first-of-type相当于:nth-of-type(1)，:last-of-type相当于:nth-last-of-type(1)
• :only-child：如果一个父元素只有一个子元素，那么选取这个子元素。如果加了限定条件，例如p:only-child则取交集，即如果一个父元素只有一个子元素，且这个子元素为<p>，这个选择器才会生效。
• :only-of-type：基本同:only-child，区别在于如果不指定type而直接使用:only-of-type的话会造成body被选中，而:only-child不会出现这种情况。

_

媒介查询

Media Type的类型汇总

设备	指代
all	匹配所有设备
braille	匹配触觉反馈设备
embossed	凸点字符印刷设备
handheld	手持设备
print	打印机设备
projection	投影仪设备
screen	彩色计算机显示器设备
speech	语音合成器设备
tty	栅格设备
tv	电视设备

_

认识响应式网页设计

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定版本。
_

媒介查询的基本语法

可以将Media Query看成是添加了CSS属性判断的Media Type，其基本语法如下：

@media screen and(max-width:600px){
    .class{
        background:#ccc;
    }
}