Day12CSS选择器和属性

1.属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值；

2、E[attr="value"]：指定属性名，并指定了该属性的属性值；空格都不行

3、E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

4、E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

5、E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的

6、E[attr*="value"]：指定了属性名，并且有属性值，而且属性值中包含了value；

7、E[attr|="value"]：指定了属性名，并且属性值是value独立命名或者以“value-”开头的值（比如说zh-cn）;有关于这些属性选择器除了IE6不支持外，其他都是可以的

2.伪类选择器

1）动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类

最常见的锚点伪类：

.demo a:link {color:gray;}/*链接没有被访问时*/

.demo a:visited{color:yellow;}/*链接被访问过后*/

.demo a:hover{color:green;}/*鼠标悬浮在链接上时*/

.demo a:active{color:blue;}/*鼠标点中激活链接那一下*/

input:focus/*用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点时的状态*/

2）我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

3）css3结构伪类选择器

 X:first-child 择某个元素的第一个子元素；IE6不支持:first-child选择器

X:last-child择某个元素的最后一个子元素；

X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

X:only-child选择的元素是它的父元素的唯一 一个子元素；

X:nth-last-child(n)从最后一个开始算索引。

X:first-of-type匹配子集的第一个同类型元素

X:last-of-type匹配子级的最后一个同类型元素

X:nth-of-type(n)匹配同类型中的第n个元素

 X:only-of-type选择一个元素是它的父级元素的唯一一个相同类型的子元素

X:nth-last-of-type(n) 匹配同类型中的倒数第n个元素

:root所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是值包含着整个页面的html部分

X:empty匹配没有任何子元素（包括包含文本）的元素

4）否定伪类选择器

否定选择器 :not(否定条件)，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器。

5）：root选择文档的根元素

:root{ background:green;}将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是值包含着整个页面的html部分

6）：target可用于选择当前活动的目标元素

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

7）：lang伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q元素定义引号的类型：

3.层级选择器

1）后代选择器 E F

2）子元素选择器 E>F

子元素选择器只能选择某元素的子（儿子）元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。IE6不支持子元素选择器。

3）相邻兄弟选择器 E+F  ie6不支持

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

4）通用兄弟选择器 E~F

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中.

4.浏览器私有前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。以下是几种常用前缀-webkit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋-khtml-（现在基本都没有用了，被-webkit-取代）举例来说，一个CSS3圆角的代码是：-webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%;border-radius：50%；

5.css3新增属性

1）box-shadow:阴影

写法：box-shadow:length length length length color inset;

第一个参数表示阴影离开盒子的横向距离

第二个参数表示阴影离开盒子的纵向距离

第三个参数表示阴影的模糊半径

第四个参数表示阴影的延伸半径 （可省略）

第五个参数表示阴影的颜色

第六个参数表示是否使用内阴影 （可省略，默认是外阴影）

Box-shadow:inset 1px 1px 1px 1px #000, color inset的顺序不可以改变

2）text-shadow：5px 5px 5px #666 文字阴影

语法：text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。为正值，阴影在对象的右边，反之阴影在对象的左边。

v-shadow 必需。垂直阴影的位置。允许负值。如果为正值，阴影在对象的底部，反之阴影在对象的顶部

blur  可选。模糊的距离。 这个值只能是正值

color  可选。阴影的颜色。

注：Internet Explorer 9 以及更早版本的浏览器不支持

3)word-break  自己决定自动换行的处理方法

通过对其的指定，不仅仅可以让浏览器实现半角空格或连字符后面的换行，而且可以让浏览器实现任意位置的换行.

① normal:使用浏览器默认换行规则，根据语言自己的规则确定换行方式，中文到边界上的汉字换行，英文从整个单词换行

② keep-all:不允许英文字断开，中文句断开。

③ break-all:允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）可以强行截断英文单词，达到词内换行效果。

4)word-wrap   是否允许浏览器在单词内进行换句

这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。在实际应用中，有三种情况出现：全是中文、中英文混排、全是英文

① normal   只在允许的断字点换行（浏览器保持默认处理）。

② break-word：在长单词或 URL 地址内部进行换行。将内容在边界内换行（不截断英文单词换行）。

5）服务器字体

@font-face：字体语法 在网页上显示服务端字体

font-family： 规定字体的名称。

src:url 定义字体文件的 URL。

font-stretch: 不常用，没有兼容 定义如何拉伸字体

font-weight： 设置加粗注：在IE中使用时，只能使用微软自带的Embedded OpenType字体文件，扩展名为.eot，同时不需要使用format属性值，用法如下

@font-face{font-family:BorderWeb;

src:url(BORDERW0.eot);}在项目文件夹中的fonts文件内容分别包括粗体、斜体、粗斜体、小型大写字体。

6）background-clip  指定背景显示范围  border padding  content  前提背景图是平铺

概念：在HTML页面中，一个具有背景的元素通常由元素的内容，内部补白（padding），边框，外部补白（margin）构成

border-box  背景被裁剪到边框盒。

padding-box  背景被裁剪到内边距框。

content-box  背景被裁剪到内容框。

7）background-origin 制定绘制背景图像时的起点  background-position

规定 :background-position 属性相对于什么位置来定位。

padding-box背景图像相对于内边距框来定位。

border-box背景图像相对于边框盒来定位。

content-box背景图像相对于内容框来定位。

8）background-clip与background-origin的用法区别

background-origin属性是用来控制元素背景图片定位点（background-position）的起始位置。

background-clip属性是用来控制元素背景图片（background-image）的展示区域。

9）：background-size指定背景中图像的尺寸

参数

① length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

② percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

③ cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。但这种方法会致使背景图片失真。

④ contain   保持背景图像本身的宽高比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。

10）border-radius  设置圆角

语法：border-radius: none | <length> {1,4}[/<length>{1,4}] ?

border-radius是一种缩写方法。

如果反斜杠符号“/”存在，“/”前面的值是设置元素圆角的水平方向半径，“/”后面的值是设置元素圆角的垂直方向的半径；

如果没有“/”，则元素圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-rightbottom-right和bottom-left顺序来设置的

·border-top-left-radius：<length>/<length>；定义元素左上角圆角。

·border-top-right-radius：<length>/<length>；定义元素右上角圆角。

·border-bottom-right–radius：<length>/<length>；定义元素右下角圆角。

·border-bottom-left-radius：<length>/<length>；定义元素左下角圆角。

上面四个子属性取值和border-radius是一样的，只不过水平和垂直方向仅一个值，“/”前面的值为水平方向半径，后面的值为垂直方向半径。如果第二个值省略，元素水平和垂直方向半径，其实就是以“<length>”为半径的四分之一圆。如果任意一个值为“0”
，这个角就不是圆角。

11）border-image

border-image：url(img/xx.jpg) 25/30px(图片显示的范围) repeat；

border-image：url(img/xx.jpg) 100 fill round；

border-image 属性是一个简写属性，用于设置以下属性:

border-image-source            用在边框的图片的路径。

border-image-slice 图片边框向内偏移/切割图片(无单位正整数或百分比)及控制内容区域的fill关键字（将中心的背景填充进元素content）。

border-image-repeat     图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

border-image-outset  边框图像区域超出边框的量

12）颜色特性

CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值;

rgb():

rgb函数:r(red),g(green),b(blue)[计算机三原色];

值可以为0-255任意整数或百分比;

如超出范围,取最近的有效值:

rgba()与hsla()--了解:

这两位与上边两位的区别在于后边的a(alpha)

透明度;

透明度为0-1之间的数值,0为全透明,1为全不透明,利用透明度可以做出很多好看的效果