CSS3学习（一） css基础补充

1.属性（可能含值）选择器，如：

input[type=”text”] { width: 100%;}

也可以给标签自定义属性，然后使用，如：

<p title="x">含自定义属性的段落</p>

样式可写：

[title=x]{color:red;}

注意：IE6 以下不支持属性选择器

属性选择器还可以根据值 来模糊获取元素：

<p title="xx">第一个</p>
<p title="aa">第二个</p>
<p title="xx aa">第三个</p>
css: [title~="xx"]{...}
//最终的效果是，第一和第三个p标签会呈现该样式，title右边是一个波浪线

css3新添加的文本效果：
① text-shadow:添加阴影
② word-wrap：规定文本换行规则

2.外边距的自动合并：

如果一个盒子的右边距 margin-right是100px，

而正好它右边的盒子的左边距 margin-left是50px，

这时候两个盒子之间的距离不是150px，而是100px；

3.float是浮动属性，inherit值表示继承父级的浮动属性；

顾名思义浮动就是指对应的块不占用页面的位置，漂起来了

clear是去掉浮动，包含的值与float一致，如left，right，(both)，inherit

4.多类选择器：在html文件中写

<div class="class1 class2">...</div>

在样式中定义：.class1.class2{...}
这个时候，这个块就可以既有class1的样式 又 有class2的样式

5.后代选择器 与 子选择器的用法：

<p>父类<strong>子类<i>孙子</i></strong></p>

后代选择器：直接用空格隔开即可，而且选择可以跨代，如： p i{...}     //这样就直接修改“孙子”的样式了
子类选择器：用 > 号选择，只能取到直接的子元素，如： p>strong>i{...} //修改“孙子的样式”

了解：兄弟选择器，对于有相同父元素的同级元素，可以用 + 号连接选择获取

6.以前不了解的几个属性：

position：位置（值：absolute、relative（不占位置的相对定位）、fixed、static）

cursor 鼠标移动到相应元素时的形状

display 显示效果（值：inline可以用来设置 用
标签制作的导航栏；block块状显示）

visibility 可见与否

7.opacity属性：设置透明度，值从 0 - 1

8.一点体会：

使用float浮动之后的块，由于不占位置，会使该浮动块之后 的 元素或块 顶在 浮动块的下方，解决办法：

在浮动块之内加一个块：

<div style="clear:both"></div>