1.开发的两种模式：
渐进增强(特点：1.实现一个兼容性较好的页面。2.根据需求往上添加新的功能，新的技术)
优雅降级（特点：1.使用最新的技术，最酷炫的效果实现页面，2.根据网站的用户浏览器版本进行针对性兼容性写法）
2.css兼容性问题：
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */ 火狐下需要加的前缀
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
-ms-transform:width 2s; /* IE */
3.属性选着器
<style>
/* 获取到 拥有 该属性的元素 */
li[type]{
border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"]{
background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"]{
font-size: 40px;
}
/* 获取以某个属性开头的语法 */
li[color^='green']{
background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
color: hotpink;
font-weight: 900;
}
/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea]{
font-size: 100px;
}
/* 如果属性的值 只有very 也能够获取 用来获取 多个属性 并且 使用-连接 */
li[price|='very']{
background-color: darkred;
}
</style>
这些属性选着器主要用于精灵图的使用。
演示代码：
<style type="text/css">
div[class^='icon-']{
background-image: url('images/sprites.png');
background-repeat: no-repeat;
background-color: gray;
}
.icon-car{
background-position: -185px -65px;
/* 指定宽高 */
width: 51px;
height: 38px;
}
.icon-people{
background-position: -253px -64px;
/* 指定宽高 */
width: 34px;
height: 39px;
}
.icon-house{
background-position: -66px -63px;
width: 47px;
height: 41px;
}
</style>
<body>
<div class='icon-car'>
</div>
<div class='icon-people'></div>
<div class='icon-house'></div>
</body>
4.伪类选着器
孩子伪类选着器
E:first-child 作用： 匹配父元素的第一个子元素E。
E:last-child 作用： 匹配父元素的最后一个子元素E
E:nth-child(n) 作用： 匹配父元素的第n个子元素E。
E:nth-last-child(n) 作用： 匹配父元素的倒数第n个子元素E。
种类选着器
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
区别：
E:last-child是先找到最后一个孩子，如果最后一个孩子不是E标签，则设置的样式无效。
E:last-of-type:是找到所有的E标签，对所有E标签最后设置样式。
代码演示：
<style type="text/css">
/* last-child 是找到 在父元素中 满足前面选择器条件的 最后一个,
如果最后一个 不是 h3标签 那么无法获取*/
.filmBox>h3:last-child{
color: red;
}
.filmBox>h3:last-of-type{
color: green;
}
</style>
<body>
<div class='filmBox'>
<h3>北京遇上西雅图</h3>
<h3>小鬼当家</h3>
<h3>夏洛特烦恼</h3>
<h3>神犬小七</h3>
<h3>湄公河行动</h3> //此标签为红色，有（h3:last-of-type）生效
<h2>建国大业</h2> //此标签没有颜色变化
</div>
</body>
在sublime和webstorm中 快速生成测试文本
使用快捷键: lorem+tab;
5.伪元素选择器(一)
E:first-letter/E::first-letter 设置对象内的第一个字符的样式。
E:first-line/E::first-line 设置对象内的第一行的样式。
E::placeholder 设置对象文字占位符的样式。但是兼容性 奇差无比。
E::selection 设置对象被选择时的颜色。
注意：
- 我们不建议使用 一个冒号的的伪元素选着器，最好使用两个冒号伪元素选。
- placeholder的兼容性极差，在谷歌浏览器上需要使用-webkit-input-placeholder，否者无效
- selection只能改变color ,background-color, text-shadow.其他的不能改变。
<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
5.伪元素选着器（二）
E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
代码演示：
/* 通过 伪元素选择器的方式 为其 添加新的 '元素''
能够在 不添加 其他标签的情况下 新增一个元素
*/
div::before{
/* 必须设置 content属性 只是需要拥有这个属性 即可 属性值 是什么 无所谓*/
content: '';
/* before伪元素 默认是行内元素 为了能够设置宽高 需要变成块 */
display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid black;position: absolute;
bottom: 0px;left: 0px;background-color: hotpink;
}
/* after 跟before 基本一样 除了 名字不同而已 */
div::after{
content: '';display: block;
/* width: 50px; */
width: 100%;height: 50px;border: 1px solid orange;position: absolute;
top: 0px;left: 0px;background-color: skyblue;
}
注意事项：
- 伪元素选择器 只能够设置一个元素 其内部 无法再添加 后代元素
- 伪元素选择器 只能够添加给 双标签元素
- before 跟 after 只是名字不同而已 用法一样
- 双标签元素 只支持 这两个伪元素
使用案例：
<style type="text/css">
.showBox{
width: 320px;
height: 320px;
background: url('images/robot.png') no-repeat center;
margin: 50px auto;
position: relative;
}
/* before after 只是语法不同而已 实际使用中 可以随意挑选 */
.showBox::after{
content: '';
position: absolute;
width: 100%;
height: 0%;
background-color: orange;
opacity: .5;
transition: all 1s;
}
/* 手指移动到 div上的时候 才出现遮挡 */
.showBox:hover::after{
height: 100%;
}
</style>
<body>
<div class='showBox'>
</div>
</body>
6.Color(颜色)
颜色的设置方法：
- 单词（red, green....）
- 十六进制（#fff 或#ffffff）
- rgb(red,green,blue)
- rgba(red,green,blue,alpha)
- hsl (色相，饱和度，明度) //hue,saturation,luminance
- hsla() //使用方法一样
注意：
opacity:透明度会被继承， 其他的rgba,hsla中的透明度不会被继承。
7.text-shadow(文字阴影)
属性：
/* 文字阴影
阴影的大小 默认是跟 文字一样大
方向
x的正方向是 右边
y的正方向是 下边
颜色的模糊
会直接放大影子
颜色
默认的颜色是黑色
x y 模糊 颜色
如果要设置多个 直接使用 逗号分隔 继续往后写即可
*/
text-shadow: 0px 0px 10px yellow,
0px 0px 20px red;
8.box-shadow(盒子阴影)
属性
/* 设置盒子阴影
影子默认跟元素的大小一样
(影子发散的方向 默认是 往外)
inset
影子的方向
影子的颜色
影子的模糊
直接放大影子
不是模糊的 视觉效果上 较差
(方向 x y 模糊 放大 color)
方向 的 x跟y 是必须设置的 不能省略 但是 模糊 跟 影子放大 可以省略
如果想要
只设置模糊 可以 0 0 10px orange
只设置放大 0 0 0 10px orange
*/
/* box-shadow: 1px 1px hotpink,
-1px -1px orange; */
/* box-shadow: 0px 0px 0px 10px yellow; */
/* box-shadow: inset 0px 0px 0px 0px yellow; */
box-shadow: 100px 100px 100px yellow;
9.box-sizing(盒模型)
属性:
- content-box : ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型
- border-box：( Element width = width ) 此属性表现为怪异模式下的盒模型。
注意：如果设置成border-box,那么padding也不会撑大盒子
10.background(背景)
background-size:contain,或者cover;(80px 60px;)
注意:
1.contain 图片两边等比例拉伸 知道 某一边 顶格 停止拉伸
2.cover 图片等比例拉伸 保证 两边 都顶格 可能会出去
可以进行多背景设置：
background-image:url('images/gyt.jpg'),url('images/robot.png'); //如果有重复部分，前面的背景会覆盖后面的背景
background-size: 300px 100px,400px 200px;
/* 设置多张图片的 位置
如果不想使用 字母的方式进行设置 想要精确修改
*/
/* background-position: top left,bottom right; */
background-position: top left,100px 200px;
background-origin:(背景图开始的位置)
属性：
- border-box,content-box,和padding-box.
background-clip:(背景图切割的位置)
属性：
- content-box,和padding-box.
演示代码：
<style>
div{
width: 300px;
height: 300px;
border: 5px dashed gray;
margin: 0 auto;
padding: 10px;
background: url('images/gyt.jpg') no-repeat top left /200px 200px;
/* 设置的是 背景图片 开始的位置
border-box: 从边框开始;
下面这两个属性 如果没有设置 padding 那么 看起来视觉效果一样
content-box: 从内容开始;
padding-box padding开始的位置
*/
background-origin: border-box;
/* 背景图 切割的位置
padding-box padding之外的区域切割
content-box 内容之外的区域切割
*/
background-clip: content-box;
}
</style>
11.渐变
1.线性渐变(linear-gradient())
2.径向渐变（radial-gradient()）
使用方法（linear-gradient）：
linear-gradient(angle,color ,color percentage)
例子：
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
注意:角度也可以用位置设置
to left： 设置渐变为从右到左。相当于: 270deg
to right： 设置渐变从左到右。相当于: 90deg
to top： 设置渐变从下到上。相当于: 0deg
to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
使用方法(radial-gradient())： 使用方法：
radial-gradient(shape at position,color percentage,color percentage)
示例代码：
background:radial-gradient(100px 100px at 20px 30px ,red, green 30%，yellow);
//解释： 100px 100px 表示 直径，分别表示横直径，和纵直径，两个值相同的话表示是圆，
如果不相同，则表示的是椭圆，这两个值也可以用单词代替。（circle，ellipse）
示例:
background:radial-gradient(circle或者ellipse at 20px 30px ,red, green 30%，yellow);
//解释： 20px 30px 表示径向渐变中心点的位置，也可以使用单词来代替
（left,center,right || top，center,bottom）
示例：
background:radial-gradient(circle或者ellipse at left top ,red, green 30%，yellow);
其他形参值不做介绍。
注意：
在使用单词（circle,ellipse）可以添加如下内容：
closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角 、
示例代码：
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
效果自行演示，就可以明白他们的区别了。
