css学习系列-精通css

常用选择器

(1)类型选择器：比如html标签(a,div,span等等)

(2)ID选择器：通过dom上id来选择(#id)

(3)类型选择器：通过dom上class来选择(.class)

后代选择器与子选择器的区别

(1)后代选择器(ul li)：元素的所有后代

(2)子选择器(ul>li)：元素的直接后代

(3)相邻同胞选择器(h2+p)：元素相邻的之后元素

a标签的伪类

(1)链接伪类(只能用于锚元素)：:link(未访问的链接) :visited(已访问的链接)

(2)动态伪类(可以用于所有元素)：:hover(鼠标移动到元素上) :active(选定的链接) :focus(得到焦点的元素)

备注：:hover必须在:link和:visited之后才能生效；:active需要在:hover之后才能生效

background属性

(1)background-color：元素的背景颜色

(2)background-position：背景图像的起始位置，如果图像复制的话也会从此位置开始。

可能的值(以下三种不能交错使用

 (1)x方向：left center right ；y方向：top center bottom的组合

 (2)x%(水平方向)  y%(垂直方向)

 (3)x-px(水平方向) y-px(垂直方向) 

(3)background-size：背景图像的尺寸

(1)length：使用px来设置背景图像的高度和宽度，如果只设置一个值，第二个值为auto

(2)percentage：用父元素尺寸的百分比来设置背景图像的高度和宽度，如果只设置一个值，第二个值为auto

(3)cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

(4)contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

(4)background-repeat：背景图像的平铺模式

(1)repeat：默认值，在水平与垂直方向都重复

(2)repeat-x：只在水平方向重复

(3)repeat-y：只在垂直方向重复

(4)no-repeat：在水平与垂直方向都不重复

(5)background-origin：规定background-position相对于什么位置来定位(若background-attachment 属性为 "fixed"，则该属性没有效果)

(1)padding-box：默认值，相对于内边距框进行定位(content，padding，不包含边框的宽度)

(2)border-box：相对于边框盒来定位(content，padding，包含边框的宽度)

(3)content-box：相对于内容框来定位(不包含padding和边框的宽度)

(6)background-clip：规定背景的绘制区域

(1)border-box：默认值，背景被裁剪到边框盒(content，padding，包含边框的宽度)

(2)padding-box：背景被裁剪到内边距框(content，padding，不包含边框的宽度)

(3)content-box：背景被裁剪到内容框(不包含padding和边框的宽度)

备注：(1)当背景图片为渐变色的图片时，但是用户的浏览器高度不固定可以将背景设置为渐变色的最终颜色，可以实现图像与背景色的无缝连接

css3新属性

border-radius：为元素添加圆角边框，四个值为border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius；

值可以为像素或百分比

border-image：使用图像作为边框

box-shadow：

不透明度

1.css不透明度

.class{background-color:red;opacity:0.8;filter:alpha(opacity=80);/*兼容IE浏览器*/}

此种方法的主要问题是，除了对背景生效外，用于它的元素的内容也会继承它，如果元素里面有文本的话当不透明度不高的话，会导致文本也会看不清楚。

2.rgba

.class{back-ground-color:rgba(255,0,0,0.5)}

同时设置颜色和不透明度的机制，使用此方法会避免css不透明度里面产生的问题

3.css视差效果

使用多个透明的背景图像进行覆盖，背景图像的position-x使用百分比，当缩小或放大浏览器窗口时，就会看到在移动了，具体使用例子见，

http://www.silverbackapp.com/

4.图像替换

在网页中要实现有些效果的字体，但是字体库有限；所以有些标题啥的还是需要使用图像来完成，但是只使用图像的话会影响搜索引擎的搜索，所以可以使用下面的方法

来同时满足2中需求。

比如一个h1的标签，里面是文字title但是需要用一个比较炫的图片来代替。

<h1>title</h1>

h1{

text-indent: 100%;/*规定文本块中首行文本的缩进 100%缩进应该是首行全部缩掉*/
white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
overflow: hidden;
background: url("title.gif") no-repeat;

}

css精灵

网站上的很多小图标可以放在一个图像文件上，在使用时通过background-position来决定使用哪个图标。 

表格边框

border-collapse：设置表格里的边框是合并的还是分开的

separate：默认值，边框会被分开，不会忽略border-spacing

collapse：如果可能，边框会合并为一个单一的边框，忽略border-spacing

border-spacing：设置相邻单元格的边框间的距离，只对border-collapse：separate生效

表单标签

增加了表单对于使用辅助设备的用户易用性。

<lable for="nameid">Name：</label> <input id="nameid" name="name" type="text" />

去除浮动的方法

(1)多加一个用于去除浮动的div

<div class="main"><span style="white-space:pre"></span><div style="float:left"></div><div style="float:left"></div><div style="clear:both"></div></div>

(2)在主div里面设置overflow:hidden

<div class="main" style="overflow:hidden;"><div style="float:left"></div><div style="float:left"></div></div>

(3)设置主div的:after伪类

.main:after{content:"";display:block;clear:both;}

<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="css">.main:after{content:".";clear:both;height:0;line-height:0;font-size:0px;visibility:hidden;display:block;}

<pre name="code" class="html"><div class="main"><div style="float:left"></div><div style="float:left"></div></div>

CSS3列布局

主要使用float属性，通过div嵌套的方式实现

<style type="text/css">.wrapper{width:920px;margin:0 auto;}.content .primary{width:650px;float:right;display:inline;border:1px solid black;}.content .primary .primary{width:400px;float:right;display:inline;border:1px solid black;}.content .primary .secondary{width:230px;float:left;display:inline;border:1px solid black;}.content .secondary{width:230px;float:left;display:inline;border:1px solid black;}.content:after,.content .primary:after{content:"";display:block;clear:both;}.head,.content,.footer{border:1px solid black;margin-top:10px;}  </style>

<div class="wrapper"><div class="head">head</div><div class="content"><div class="primary"><div class="primary">primary primary</div><div class="secondary">primary secondary</div></div><div class="secondary">secondary</div></div><div class="footer">footer</div></div>

CSS常见问题

1.特殊性和分类次序的问题

发现了展现出来的css效果与自己预期不一样，考虑是否有css覆盖了，可以通过浏览器f12调试查看。

2.外边距叠加

在某些情况下，2个嵌套的dom都只设置外边距的话，会导致想要的效果不是2个外边距相加，而是会覆盖。解决方法dom里面加一点内边距即可。