标签：访问 文档 range 定义 ffffff 大于等于 曲线 使用方法 元素
刚开始学习前段的我，还处于初级阶段，一些东西还是会有搞不明白的时候，还是要大家多多理解。今说就一些关于CSS的常用属性吧！
CSS选择器应该说是一个非常重要的工具吧，选择器用得好坏可以直接关系到你代码书写的麻烦程度，简单来说就是CSS选择器用得好，实现相同的功能时所用到的代码就会少，这样做出来的网页代码就没有那么繁杂。
1、选择器的书写样式：
选择器中可以写多对CSS属性，用{}包裹，每个属性名与属性值之间用冒号分隔，多对属性名之间必须用分号分隔。
写法： 选择器{
属性1：属性值；
属性2：属性值；
}
2、CSS常用选择器
（1）、通用选择器：可以选中页面中所有的HTML标签。在选择器中其优先级是最低的
写法： *{
属性1：属性值；
属性2：属性值；
}
（2）、标签选择器：可以选中页面中所有与选择器同名的HTML标签。
写法： html标签名{
属性1：属性值；
属性2：属性值；
}
（3）、类选择器（class选择器）：在需要修改样式的标签上使用class="class名"调用。优先级大于标签选择器
写法： class名{
属性1：属性值；
属性2：属性值；
}
（4）、id选择器：在需要修改样式的标签上，起一个id="id名"进行调用。优先级大于class选择器
写法： id名{
属性1：属性值；
属性2：属性值；
}
要注意的是：一个页面中不能出现同名id，还有在网页分块时，尽量只起一个id就好
（5）、并集选择器：多个选择器取并集，满足一种即可生效。
写法：选择器1，选择器2，选择器3，...，选择器n{
属性1：属性值；
属性2：属性值；
}
（6）、交集选择器：必须满足所有选择器的要求才能生效
写法：选择器1选择器2...选择器n{
属性1：属性值；
属性2：属性值；
}
（7）、后代选择器：后面的选择器被包裹在前一个选择器里面即可生效。
写法：选择器1 选择器2 ... 选择器n，之间用空格分隔{
属性1：属性值；
属性2：属性值；
}
（8）、子代选择器：后一个选择器直接在前一个选择器里面，即可生效（中间不能间隔其它标签）
写法：选择器1>选择器2>...>选择器n，用>分隔{
属性1：属性值；
属性2：属性值；
}
3、选择器的命名规范
（1）、只能有字母、数字、下划线、减号组成。
（2）、开头不能是数字，也不能是只有一个减号。
（3）、一般起名使用英文单词与数字的组合。
1、优先级的权重问题
（1）、CSS生效的第一原则是近者优先，即哪个选择器作用于最里层标签，则这个选择器生效；
（2）、当选择器作用于同一层时，可以根据优先级权重进行累加计算。
id选择器100>class选择器10>标签选择器1
注意：并集选择器相当于多个选择器拆开写，所以并集选择器的优先级不能累加。
（3）、当选择器作用于同一层且优先级权重相等时，则写在后面的选择器生效。
2、将CSS导入html的三种方式
（1）、行内样式表：直接在html标签中，直接使用style=“”的方式引用。
例如：<div style="color: orange;"></div>
优点：使用灵活，优先级权重最高；
缺点：不符合W3C关于内容与表现分离的要求，不利于样式的再次使用。
（2）、内部样式表：在head标签中使用style标签包裹CSS代码
例如： <head>
<style type="text/css">
</style>
</head>
特点：一定程度的实现了html与css的分离，但是分离不够彻底，没有办法多页面共用样式。
（3）、外部样式表：将CSS单独写入CSS文件中，并于html关联。
优点：彻底实现html与css的分离，符合W3C规范，能够多页面复用统一样式。
【导入CSS文件的两种方式】
1、在head标签中使用link链接
例如：<link rel="stylesheet" type="text/css" href="CSS/02-CSS.css" />
2、在style标签中使用@import导入。
例如：@import url("CSS/02-CSS");
【这两种导入方式的区别】
1、link属于标准的html标签，而@import不是标准标签
2、link可以兼容所有低版本浏览器，而@import只在CSS2之后能用
3、link是将两个文件连接起来，起桥梁作用，而@import是将css文件复制到html文件中
4、link会在html文件加载过程中链接css文件，而@import会在html文件全部加载完以后再导入css文件
注意：导入CSS文件时，我们始终使用第一种link的方式
1、CSS中的颜色表示方式
（1）、使用颜色英文名称表示：red/blue/green/yellow等
（2）、使用十六进制数表示：#ffffff（白色） #000000（黑色），六位数，两两分组分别表示红、绿、蓝
（3）、使用rgb（255，255，0），三个数值分别表示red、green、blue，范围是0-255；
（4）、rgba（255，255，0，0），第四位表示透明度，可选值0到1，0表示全透明，1表示不透明
2、CSS常用文本属性
（1）、font-weight：字体粗细。bold加粗、normal正常、lighter变细，也可以通过100-900数值设置，400=normal，700=bold
（2）、font-style：字体样式。italic倾斜、normal正常
（3）、font-size：字体大小。可以使用像素、百分号（表示的是浏览器默认大小的百分比，浏览器默认字体大小16px）
（4）、font-family：字体族，可以直接写字体名称，多个字体之间用逗号分割，表示的是从第一个字体开始显示，如果电脑不支持第一个字体依次顺延。字体的最后一个，一般是字体族。sans-serif（非衬线字体）、serif（衬线字体），当前字体都不被支持时推荐浏览器规定的字体族中选择一个字体显示。
【font的缩写形式】
缩写形式的顺序：font-style font-weight font-size/line-height font-family
例如：font：italic bold 18px/1.8 “黑体”，“微软雅黑”，“sans-serif”；
多个属性之间用空格分隔，字体大小与行高必须作为一组，用/分隔，font-family多个字体之间用逗号分割
（4）、color：字体颜色，可以是单词、十六进制、rgb等
（5）、opacity透明度可选值0-1
【opacity和rgba的区别】
a、rgba本身可以设置颜色，而opacity必须配合其它颜色属性使用
b、rgbd仅仅是让当前元素设置的颜色透明，而opacity，会让当前元素里面的文字、背景、子元素都透明。
（6）、line-height：行高，可以直接写px单位，可以直接写数字（表示默认行距的几倍），百分比（表示默认行距的百分比）。
行高的重要作用：让单行文字在div中垂直居中，设置行高等于div的高度即可
（7）、text-align：设置区域内的行级元素水平对齐方式，可选值有左、中、右
（8）、letter-spacing：字符间距，字与字之间的距离
（9）、text-decoration：文本修饰；underline下划线、overline上划线、linethrough删除线、none没有线
text-decoration： none；可以设置超链接标签a无下划线。
（10）、text-overflow：设置行末多余文字的显示方式，clip多余文字裁剪、ellipsis多余文字用省略号显示，需要配合white-space: nowrap;使用。
【设置行末显示省略号（这三行代码缺一不可。）】
overflow: hidden;（超出区域的隐藏）
white-space: nowrap;（行末不断行）
text-overflow: ellipsis;（设置省略号）
（11）、text-indent：首行缩进
（12）、-webkit-text-stroke：文字描边。。。-webkit-表示只有webkit内核的浏览器生效、常见的有谷歌浏览器
（13）、text-shadow：文字阴影，有四个属性值。
水平阴影距离：正数阴影往右移
垂直阴影距离：正数阴影下移
阴影模糊距离：0表示阴影一点不模糊
第四个表示阴影的颜色。
例如：text-shadow: 2px 2px 2px yellow;
1、background-color：背景色
2、background-image：背景图，使用url()选择背景图片，背景图和背景色同时存在时，背景图覆盖背景色。
3、background-repeat：背景图的重复方式，norepeat不平铺，repeat平铺，repeat-x水平方向平铺，repeat-y竖直方向平铺
4、background-size：背景图的大小
（1）、指定宽度高度的写法：宽度高度的指定可以写px，也可以写%
当写两个属性时，分别表时宽度、高度
当写一个属性时，表示宽度，高度进行等比缩放
（2）、直接使用其它属性值
contain：图片等比缩放，直到宽或高中较大的一边缩放到100%为止。图片不能覆盖区域。
cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。图片超出区域。
5、background-position：背景图的位置
（1）、指定位置：left/center/right top/center/bottom，当只写一个值时，另一个默认居中
（2）、指定坐标：两个属性（像素数值）分别表示水平位移和垂直位移
坐标的值可以是像素单位也可以是百分数
当写像素单位时：水平方向右为正，垂直方向下为正。（左负右正、上负下正）
当写百分数时：都是正数，表示的是去掉图片的宽高，剩余区域的的分布比例
例如：background-position: 30%;表示水平方向去掉图片宽度，剩余区域3：7分。
1、写法：伪类选择器，在选择器后面用冒号分隔，紧接伪类状态
例如：.a:link{}
2、超链接的伪类状态
：link未访问状态、：visited已访问状态、：hover：鼠标指上状态、：active激活选定状态（鼠标点下未松开）
注意：当超链接多种伪类状态同时存在时，必须按照link、visited、hover、active的顺序，否则会导致部分选择器不生效。
3、input的伪类状态
：hover、：focus获得焦点状态、：active
注意：input的多种状态同时存在时，必须按照上面的顺序
1、margin外边距
（1）、只写一个值，表示四周的外边距均为指定值
（2）、写两个值，表示第一个数上下外边距和第二个数是左右外边距
（3）、写三个数，表示上、右、下三个方向，左边默认等于右边
（4）、写四个数，表示上、右、下、左顺时针方向。
（5）、margin:0 auto;设置块级元素在父容器中水平居中（重点）
2、padding内边距设置方式与其完全相同，设置内边距将会导致div区域增大，使用时必须注意！！
3、边框
（1）、设置边需要三个属性：宽度、样式、颜色，原则上三个属性缺一不可，顺序可以随意修改
（2）、可以使用top、right、bottom、left分别设置四个边
4、当父盒子包裹子盒子，给子盒子添加margin-top时，两者的上边线不能分开，会导致两个盒子同时下来。【解决方法】
（1）、给父盒子添加一点padding-top（不推荐使用，会导致父盒子结构多出1pxpadding）
（2）、给父盒子添加1px的border-top，同样会导致1px的多余空间（不推荐使用）
（3）、给父盒子或者子盒子添加浮动；可能会由于浮动一定程度的影响页面的布局；
（4）、给父盒子添加overfloat属性，推荐使用方法
5、border-radius 圆角
（1）、border-radius可以接收8个属性值，分别表示：(X轴左上、右上、右下、左下)/（y轴坐上、右上、右下、左下）
（2）、缩写形式，只写x轴y轴将默认等于x轴，四个角写不全，默认对角相等只写一个值，默认8个数均等
（3）、当圆角弧度大于等于正方型，边长一半将会显示为圆形。
6、border-image 图片边框 一共可以放10个属性值
（1）、图片的路径：url()
（2）、图片的切片宽度：4个值，分别代表上、右、下、左四条边，通过四条切线切割后，将图片分割为九宫格，九宫格的四个角分别对应边框的四个角（不会进行拉伸），九宫格四个边分别对应四条边框（会根据设置进行拉伸/平铺/重复等）
注意：写得时候，不能带px单位。
（3）、边框的宽度：四个值分别代表上、右、下、左四条边框的宽度。
注意：写得时候，必需带px单位，与切片宽度用/分隔
（4）、边框的重复方式：stretch（拉伸）、round（铺满）、repeat（重复）
【round和repeat的区别】
round：会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次
repeat：会保持每条边的宽度长度比例不变，可能导致四角处无法显示一条完整的边。
（5）、属性值的写法：border-image：url() 切片宽度/边框宽度px 边框重复方式
（6）、border-image在webkit内核浏览器中必需带-webkit-
7、box-shadow 盒子阴影，接收六个属性值，用空格分隔
（1）、x轴阴影距离（必选）：可正可负，左负右正
（2）、y轴阴影距离（必选）：可正可负，上负下正
（3）、阴影的模糊距离（阴影模糊半径）（可选）：只能为正数，默认为零，数值越大阴影越模糊
（4）、阴影宽展半径（可选值）：可正可负，默认为零，数值增大，阴影扩大，反之减小
（5）、阴影颜色（可选值）：默认为黑色
（6）、内外阴影（可选值）：默认为外阴影，inset表示为内阴影
8、盒模型的分类
（1）、标准盒子（W3C盒子）：我们设置的高度、宽度，仅仅包含content部分，再添加padding或border，会导致盒子变大
（2）、IE盒子（怪异盒子）：我们设置的高度、宽度，包含content+padding+border，再添加padding或border，会压缩content区域。
1、标准流中的块级盒子宽度将会自动伸展为100%，而浮动的块级盒子宽度不会自动伸展，而是由内容自动撑开。
2、当一个盒子浮动，那标准流中未浮动的其他盒子将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子会覆盖在这个盒子的上面），但是为浮动盒子中的文字内容，将会受到浮动盒子宽度的影响，（未浮动盒子中的内容，不会被浮动盒子盖住）
3、由于第二条的原因，可以给受影响的盒子添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：left清除左浮动影响、right清除右浮动影响、both都清除
4、父盒子没有指定高度。如果子盒子没有浮动，则父盒子高度可以被子盒子撑开。
5、如果父盒子所有盒子都浮动，则父盒子高度将变为零。解决所有子盒子浮动，父盒子高度塌陷问题
（1）、给父盒子也添加浮动
（2）、给父盒子添加overflow属性。推荐使用
（3）、在父盒子最后，添加一个高度为零的空div，给这个div添加clear: both;清除掉浮动效果。
（4）、可以将第三条的div用伪对象选择器：：after实现
#div4::after{
display：block；
content:""
height: 0px;
clear: both;
}
【相对定位relative】
1、使用position: relative;设置元素未相对定位元素
2、使用top、left、right、bottom调整元素的位置，当左右同时存在是，左生效；上下同时存在时，上生效。
3、定位机制
（1）、相对定位是相对于自己原来的位置定位，当top等属性不指定时，元素位置不会发生改变。
（2）、相对定位不会释放元素原有文档流中的位置，不会影响其它文档流元素的位置
4、关于定位元素z轴重叠
（1）、定位元素的的z轴，高于普通文档流元素，定位元素盖住原有元素。
（2）、同为定位元素，后来者居上。也就是后面的盖住前面的
（3）、可以使用z-index手动调节定位元素的上下层z轴顺序。
（4）、z-index默认为零，而且只能作用于定位元素，非定位元素不能使用
【绝对定位】
1、使用position: absolute;为绝对定位
2、定位机制
（1）、相对于第一个非static（静态）定位的祖先元素进行定位（即相对于使用了relative、absolute、fixed定位的祖先元素进行定位）
（2）、如果所有的祖先元素，都未定位，则相对于浏览器左上角进行定位。
（3）、使用绝对定位的元素会从文档流中完全删除，原有空间会被释放。
【固定定位fixed】
1、使用position: fixed;设置固定定位，是一中特殊的绝对定位。
2、定位机制：永远相对于浏览器的左上角进行定位，而不随滚动条的滚动而滚动。
【z-index属性】
1、作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序
2、使用要求
（1）、z-index只能给定位元素调整层叠次序。absolute、relative、fixed
（2）、元素的z-index属性，要考虑父容器z-index的约束
①如果父容器设置了z-index属性，则子容器的所有元素将不能脱离父容器层次的约束，即再给子容器设置z-index只能调整子容器在父容器层次之内的层叠次序。（父容器设置了z-index属性，子容器只能以父容器的数值为准）
② 如果父容器没有设置z-index属性，或者设置为z-index: auto;则子容器调整z-index将不受父容器层次约束
3、z-index：auto；和z-index：0；的异同
（1）、z-index：auto；是默认值与z-index：0；处于同一平面
（2）、z-index：0；会约束子元素同父容器在同一平面，而z-index：auto；不会约束其子元素层次，可以超出父容器排次序。
【clip属性】
1、作用：用于裁切图片标签，显示图片的指定区域
2、使用要求：只能作用于absolute或fixed定位的图片标签上
3、clip中，有一个rect()函数，函数包含四个值，分别表示上、右、下、左四条切线位置
注意：与其他属性不同的是，rect中的四个值，上下两个值的距离都是从上边量取；左右两个值都是从左边量取
1、实现块级元素在父容器中水平垂直居中（重点）
（1）、设置子容器为定位元素
（2）、left: 50%; margin-left: -宽度的一半;
（3）、top: 50%; margin-top: -高度的一半;
2、使用负边距，增大元素的宽度（解决div中多个li间隙的问题）
（1）、子容器的宽度不指定，只指定高度或者由内容撑开高度
（2）、margin: 0px -50px;可以使左右两边均超出父容器50px
【CSS3新增的属性前缀】
1、-webkit-：谷歌或safari浏览器
2、-moz-：火狐浏览器
3、-ms-：ie浏览器
4、-o-：欧朋浏览器
【CSS长度单位】
1、px:表示像素，长度固定，表示占分辨率的几个像素点
2、%：表示相对于默认值的百分比
3、em：长度与元素的字号挂钩，表示几倍的字号
4、rem：与根元素的字号挂钩，即与html标签的字号挂钩，如果不设置字号，则默认字号为16px
em与rem的区别
（1）、em是与当前元素自身的字号挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号直到根字号
（2）、rem与当前元素字号关，直接与根元素字号挂钩
【CSS3背景属性】
1、background-clip：设置背景图或背景色的裁切显示区域，border-box：从边框外缘开始显示；padding-box：从边框内缘开始显示；content-box：从文字内容区域开始显示。如果不在显示区域的背景图或者背景色，会被裁切掉不显示。
2、background-origin：表示设置背景图从哪里开始定位。
border-box：背景图左上角从边框外边开始
padding-box：背景图左上角从边框内缘开始
content-box：背景图左上角从边框内容区开始
3、background-origin不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位
background-clip：只负责裁切出显示区域，并不关心背景图定位在哪。
4、background-attachment：背景图的附着方式
scroll：背景图跟随区域滚动。默认效果
fixed：背景图充满整个区域，并且背景图是固定的，不随滚动条滚动
5、backgroud缩写形式（重点）
backgroud：background-color background-image background-repeat background-attachment background-position
【transition：过渡属性，接收四个属性值】
1、设置哪个css属性参与过度，可以直接指定all或者none
2、过渡多少时间完成，通常.3s、.5s
3、过渡的样式效果，通常ease
4、过渡延时几秒后开始，通常不写。
5、transition属性可以同时定义多个过渡效果，用逗号隔开
例如：transition: width .3s ease,height 1.5s ease;
【transform定义变换属性】
1、常用的变换函数：
（1）、translate(10px，10px)平移，第二个不写默认为零
（2）、scale：(1.1)缩放，第二个不写，默认等于第一个
（3）、rotate：(90deg)，旋转，默认绕z轴转，可以使用rotatex、rotatey等
（4）、skew(20deg，20deg)扭曲，水平垂直方向扭曲多少度
2、transform可以实现多种变换，用空格分隔
例如：transform: skew(20deg，20deg) scale：(1.1)
3、transform-origin：定义变换起点，常用于旋转变换。可选值：left/right/center/right bottom/top，也可以指定x、y轴坐标点，第一个数为x轴
【CSS3动画的使用】
1、声明一个关键帧（动画）
@keyframes name{
from{}
to{}
}
每个阶段的写法：
（1）、可以直接写from-to的写法
（2）、可以设置0%-100%的写法，但开头和结尾必须是0%和100%
2、在css选择器中使用animation来调用声明好的动画
【animation的缩写形式】
Animation-name:动画名称，就是我们声明的关键帧名称。
Animation-duration：动画持续时间，多长时间完成这个动画
Animation-timing-function：动画速度曲线，常选ease
Animation-delay：动画开始的时间，延迟时间
Animation-iteration-count：动画播放次数，默认为1，无限次循环播放infinite
Animation-direction：动画在下一个是否逆向播放，默认为normal表示正常播放，逆向播放alternate
Animation-fill-mode：表示动画结束后停留在何种状态，要使用这个属性，动画的停留次数必须是有限次。forwards表示动画停留在结束状态；backwarks表示动画停留在初始状态（默认效果）。
注意：
1、Animation-name、Animation-duration必需要设置，其它的选填
2、Animation可以设置多个动画，多个动画之间用逗号分隔
例如：animation: myframes 1s，animation: myframes2 3s...
今天就说到这里，待我学到新的东西再来和大家分享。。。
标签：访问 文档 range 定义 ffffff 大于等于 曲线 使用方法 元素
原文地址：http://www.cnblogs.com/interesting-me/p/7353965.html
