CSS3新增选择器与背景图片的设置

CSS3新增选择器与背景图片的设置

1.选择器

1.1基本选择器

 

 

1.2（层次）关系选择器

 

 

1.3动态伪类选择器

 

1.4目标伪类选择器

 

例：

#html:target h3{color:#f00;}

//点击a时，#html下的h3字体颜色改变

<a href="#html">点击a标签时，修改#html的样式</a>

<div id="html">

<h3>html是什么</h3>

<p>html是xxx</p>

</div>

 

1.5 UI元素状态伪类选择器

 

1.6 结构选择器

 

1.7 否定选择器

 

1.8 属性选择器

Input[value]{background:red;}

Input[value=”abc”]{background:green;} 匹配属性值一样的元素

Input[value^=”abc”]{background:#ff0;} 匹配起始位置

Input[value$=”abc”]{background:#00f;} 匹配结束位置

Input[value*=”abc”]{background:#00f;} 无论任何位置都可以匹配到

 

<input type=”text”>

<input type=”text” value=”abc”>

<input type=”text” value=”def”>

<input type=”text” value=”abc_123”>

<input type=”text” value=”def_abc”>

1.9伪元素选择器

：after 指定元素之后

：before 指定元素之前

：first-letter 对第一个字符的操作

P : first-letter{color:#f00}

：first-line  对第一行的操作

P : first-line{color:#ff0}

p：：selection 选中元素的一个操作（火狐不支持需要加前缀-moz-）

p：：selection{color:#f00}

2.新增属性

2.1文本的阴影text-shadow

Eg：text-shadow:5px 5px 5px #f66，.....;//多个用逗号隔开

Eg：（参数形式为：X坐标 Y坐标 阴影模糊度 颜色）

 

2.2文本溢出text-overflow

值：clip 无省略号   ellipsis省略号

配合width和overflow:hidden和white-space:nowrap一块使用

 

2.3文本换行word-wrap（默认一行显示）

在长单词或URL地址内部进行换行

 

2.4 字体图标

@font-face{//字体导入

font-family: name;//

src:url(设置路径);

}

P{

font-family: name;

font-size: 100px;

}

 

2.5 背景属性设置

2.5.1背景尺寸

Background-size:数值(水平)数值(垂直）;等比缩放（水平垂直）；

Background-size: cover ; 等比缩放到背景完全覆盖（背景图显示不完全）；

例：配合/*background-position:center;*/使用；重要内容居中显示

Background-size: contain ; 背景图被包裹，可能会有区域留白；

2.5.2 背景图片定位区域

Background-origin:border-box，padding-box，center-box;

（默认是以padding-box区域开始摆放）

2.5.3 背景最终显示区域

Background-clip:border-box，padding-box，center-box;

(默认是以padding-box区域显示)

2.5.4 多张背景图设置

注意：多张背景图是以逗号隔开

例：

background:url(路径)  no-repeat，

url(路径)  no-repeat，

url(路径)  no-repeat，

........;

2.6 边框圆角 border-radius

例：

border-radius: 10px; 

一个值表示上下左右

border-radius: 10px 20px; 

第一个值表示左上角、右下角；第二个值表示右上角、左下角

border-radius: 10px 20px 30px; 

第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。

border-radius:10px 20px 30px 40px;

左上角  右上角  右下角  左下角

2.7 边框图片border-image

2.7.1 图片导入 border-image

border-image:url("url") A B C D/border-width；border-image中必须至少指定5个参数，

第一个参数作为边框使用图像的路径，

后4个参数表示图像进行分隔时的上边距，右边距，下边距，左边距

border-width:表示边框的宽度

border-image: url(borderimage.png) 25 25 25 25/5px   ；连写

2.7.2 图片路径border-image-source:url();使用绝对或相对地址指定图像。

2.7.3 图片剪裁border-image-slice:位置,其有1~4个参数.

2.7.4边框图片的平铺 border-image-repeat: 

repeat（重复）/round（平铺）/stretch（拉伸）;重复性border-image-outset:边框扩展

2.7.5 向外延伸 border-image-outset:数值；

 

 

2.8 边框阴影 box-shadow

水平 垂直 模糊 延伸 颜色 [inset盒子内部](默认为外部)

例：

Box-shadow:0px 0px 0px 0px red [inset];//红字可以为负值

2.9 渐进增强和优雅降级

2.9.1 渐进增强

针对低版本浏览器进行构建页面，保证最基本的功能

2.9.2 优雅降级

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

2.9.3 区别

*优雅降级是从复杂的现状开始

*渐进增强则是从一个非常基础的，最低版本开始，不断扩充，以适应未来环境的需要。

 

例：

.transition {   /*渐进增强写法*/

  -webkit-transition: all .5s;

     -moz-transition: all .5s;

       -o-transition: all .5s;

          transition: all .5s;  

}

.transition {   /*优雅降级写法*/

          transition: all .5s;

       -o-transition: all .5s;

     -moz-transition: all .5s;

  -webkit-transition: all .5s;

}