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;
    }
}