CSS3的基础用法

CSS3的现状：1、浏览器支持程度差，需要添加私有前缀　　2、移动端支持优于PC端　　3、不断改进中　　4、应用相对广泛

在CSS3中增加新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

一.属性选择器：

ele[attr] 元素包含该attr属性就可以捕获到 （[]前面的ele可以不写，如果不写的话按通配*[attr]）
ele[attr=value] 元素包含该attr属性，且该attr的value有且只有一个并且完全相等的时候可以捕获。
ele[attr~=value] 元素包含该attr属性，并且该attr的值可以以空格分隔，只要其中一个属性全等与value就可以捕获
ele[attr^=value] 元素包含该attr属性，并且该attr的值中以value开头就可以（开头如果有空格的话空格也会占位）
ele[attr$=value] 元素包含该attr属性，并且该attr的值中以value结尾就可以（结尾如果有空格的话空格也会占位）
ele[attr*=value] 元素包含该attr属性，并且该attr的值中包含value就可以（中间如果有空格的话空格也会占位）
ele[attr|=value] 元素包含该attr属性，并且该attr的值中以value开头或者以value-开头都可以捕获到

二.伪类选择器：

　　除了以前的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器

　　所有的伪类：前面的ele也可以不写，不写的话按照通配
　　ele:first-child 该ele元素的兄弟级元素中的第一个
　　ele:first-of-type 该ele元素的兄弟元素中同类型的第一个

　　ele:last-child 该ele元素的兄弟级元素中的最后一个
　　ele:last-of-type 该ele元素的兄弟元素中同类型的最后一个

　　ele:nth-child(xn+y) 该ele元素的兄弟级元素中的第xn+y个
　　n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
　　元素的索引是从1开始的 1 2 3 4 5 6 ...
　　x可以是负值
　　ele:nth-of-type(xn+y) 该ele元素的兄弟级元素中同类型的第xn+y个
　　n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
　　元素的索引是从1开始的 1 2 3 4 5 6 ...
　　x可以是负值

　　ele:nth-last-child(xn+y) 该ele元素的兄弟级元素中的倒数第xn+y个
　　ele:nth-last-of-type(xn+y) 该ele元素的兄弟级元素中同类型的倒数第xn+y个

　　ele:empty 该元素下没有任何元素（可以有注释，空格是站位的）
　　ele:checked 单选框和复选框在选中状态下会被捕获
　　ele:disabled 禁用状态下的按钮
　　ele:enabled 不禁用状态下的按钮

三.目标伪类：

　　ele:target 结合锚点进行使用，处于当前锚点的元素会被选中；

四.伪元素选择器：　　　　

　　　　ele::first-letter 文本的第一个单词或字
　　　　ele::first-line 文本第一行
　　　　ele::selection 被选中区块的样式(只能添加背景颜色，字体颜色，字体阴影)
　　　　ele::placeholder 占位符样式

　　　　重点:　　ele::before、ele::after　　是一个行内元素，需要转换成块元素 必须设置 content属性.

ele:after、ele:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下ele:after、ele:before会被自动识别为ele::after、

ele::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素.

五.颜色 ：　　

　　　　　新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

　　　　　rgba() r,g,b的取值范围在0-255  a表示透明度取值范围在0-1.

　　　　　hsla()  H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色　　h: 0-255　　s:0-100%　　l:0-100%;

　　　　   opacity 设置的透明度会被子级盒子继承.

　　　　   rgba 或者 hsla 设置的透明度不会被继承.

　　　　　transparent 不能进行调整，要不就全透明，要不就全不透明.

六.文字阴影:

　　　　　text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。阴影的大小默认跟文字一样大.

　　　　　如果要设置多个 直接使用 逗号分隔 继续往后写即可.

　　　　　1、水平偏移量  X轴 正值向右 负值向左；

　　　　　2、垂直偏移量 Y轴 正值向下 负值向上；

　　　　　3、模糊度是不能为负值；

　　　　　可设置四个参数：第一个参数 X方向的移动 正值是X轴正方向
　　　　　第二个参数 Y方向的移动 正值是Y轴正方向
　　　　　第三个参数 阴影模糊度 数值不能为负值 越大越模糊
　　　　　第四个参数 阴影的颜色
　　　　　四个参数为一套，一套可以出一个阴影，用“，”分割可以出多套阴影

七.边框圆角:

　　　　　border-radius. 以0px位例子. border-radius:0px 0px 0px 0px.可设置4个参数 分别表示左上、右上、左下、右下.

　　　　　　　　　　　　　　　　　　　border-radius:0px 0px 0px.可设置3个参数 分别表示左上、右上、左下右下

　　　　　　　　　　　　　　　　　　　border-radius:0px 0px.可设置2个参数 分别表示左上右上、左下右下.

　　　　　　　　　　　　　　　　　　　border-radius:0px 可设置1个参数 表示左上右上左下右下

八.盒子阴影 box-shadow:

　　　　　box-shadow 盒子阴影

　　　　　第零个参数 inset 向内扩散的意思（选填）

　　　　　第一个参数 X方向的移动 正值是X轴正方向
　　　　　第二个参数 Y方向的移动 正值是Y轴正方向
　　　　　第三个参数 阴影模糊度 数值不能为负值 越大越模糊
　　　　　第四个参数 阴影的扩散 数值不能为负值
　　　　　第五个参数 阴影的颜色
　　　　　一套可以出一个阴影，用“，”分割可以出多套阴影,可以设置多重边框阴影，实现更好的效果，增强立体感.                                                                                           所有的阴影都只是视觉上的效果，不会影响文档流的站位 不会改变盒子大小.

九.盒模型 box-sizing：

　　　　　兼容性比较好

　　　　　box-sizing 如果不设置 默认的值 就是                                                                                                                                                              　　　　  content-box: 优先保证内容的大小 对盒子进行缩放;

　　　　　border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;

　　　　　盒子的计算是 内容+padding+border
　　　　　box-sizing: content-box; width和height代表的是内容的宽高
　　　　　box-sizing: border-box; width和height代表的是盒子的宽高

　　　　　如果在实际开发中 需要保证 元素所占的 区域大小 优先级要高于 内容的大小 可以选用该属性

十.背景图片属性:

　　　　　1、background-size设置背景图片的尺寸：包含两个属性 cover contain. 也可以使用长度单位或者百分比设置

　　　　　cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

　　　　　contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

　　　　　可以设置多张背景图片:例 用","号隔开即可

background-image: url('images/xxx.jpg'),url('images/xxx.png')

　　　　　设置多张图片的位置用","号隔开即可 也可以用长度单位

background-position: top left,bottom right;

　　　　　复合属性中设置图片大小 注意需要用"/"号分隔

url('images/dog.gif') no-repeat 115px 70px / 200px 200px

　　　　

　　　　2、background-origin设置背景定位的原点 包含三个属性

　　　　　　border-box以边框做为参考原点；

　　　　　　padding-box以内边距做为参考原点；

　　　　　　content-box以内容区做为参考点；

　　　　3、background-clip设置背景区域裁切 包含三个属性

　　　　　　border-box裁切边框以内为背景区域；

　　　　　　padding-box裁切内边距以内为背景区域；

　　　　　　content-box裁切内容区做为背景区域；