--------CSS 属性取值(news)--------
style样式的三种引入方式
<html>
<head>
<title></title>
<link type="text/css" rel="Stylesheet" href="CSS.css" /> <!-- 第三种：链入外部样式表-->
<style type="text/css"> <!-- 第二种：内部样式表 -->
.divcss5{ color:Red}
</style>
</head>
<body style="background-color:Gray"> <!--第一种：内嵌样式-->
<div class="divcss5">中国</div>
</body>
</html>
border边框的设置
<html>
<head>
<title></title>
<style type="text/css">
/*要想看到边框的颜色，就必须设置边框的样式，否则看不到效果。
border也可以简写：border：1px solid Red 意思是设置边框border宽度为1px，样式为solid,颜色为Red*/
.d1{ border-width:1px; border-style:solid;border-color:Red; background-color:Gray; text-align:center; }
</style>
</head>
<body>
<div class="d1">div1测试</div>
<div>
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框
</div>
</body>
</html>
border-radius圆角
<html>
<head>
<title></title>
<style type="text/css">
.div1{ width:800px; border:1px solid red; background-color:Black; padding:10px}
.div2{float:left; border:1px solid White; width:200px; height:70px; padding:40px 1px;}
.div3{float:right; border:1px solid white; width:200px; height:70px; padding:40px 1px; margin:0px 0px 0px 90px}
.div4{float:right; border:1px solid white; width:200px; height:70px;padding:40px 1px}
.div2, .div3,.div4{ background-color:Red} /*--设置.div2, .div3,.div4的共同的样式--*/
.clear{ clear:both}/*清除浮动*/
/*--border-radius:5px 的意思是设置对象（div）盒子四个角的圆角效果。其中四个角均为5个像素的圆角效果--*/
.div2{ border-radius:5px}
/*--将对象(div)的左上角设为10px的圆角，将右上角设为20px的圆角，将右下角设为30px的圆角，将左下角设为40px的圆角--*/
.div4{ border-radius:10px 20px 30px 40px}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2 圆角border-radius:5px</div>
<div class="div3"> div3 正常的角</div>
<div class="div4"> <center>div4</center><br/>圆角border-radius:10px 20px 30px 40px</div>
<div class="clear"></div>
</div>
</body>
</html>
folat浮动的设置
绝对定位与float浮动不能同时使用
<html>
<head>
<title></title>
<style type="text/css">
.divcss5{ width:500px; height:100px; padding:30px; border:1px solid #F00; }
.divcss_left{ float:left; width:100px; height:50px ;border:1px solid #00f; margin:10px 10px 10px 0px} /*设置浮动靠左*/
.divcss_right{float:right;width:150px;height:50px ;border:1px solid #00f} /*设置浮动靠右*/
.clear{ clear:both} /*清除浮动css代码*/
</style>
</head>
<body>
<div class="divcss5">
<div class="divcss_left">靠左浮动1</div>
<div class="divcss_left">靠左浮动2</div>
<!--因为divcss_left样式的margin属性为margin:10px 10px 10px 0px。也就是右边的外边距为10px,而外左边距为0px 所以“靠左浮动1”的这个div的外右边距为10px,而“靠左浮动2”这个div的外左边距为0px。所以“靠左浮动1”与“靠左浮动2”的间隔是就是10px+0px=10px-->
<div class="divcss_right">靠右浮动1</div>
<div class="clear"></div> <!--清除浮动div代码-->
</div>
<div >清除浮动后的效果</div>
<div >清除浮动后的效果</div>
</body>
</html>
line-height行高 | text-indent文本缩进 | letter-spacing字间距
<html>
<head>
<title></title>
<style type="text/css">
/* line-height:50px 意思是定义行高为50px, letter-spacing:50px意思是定义字间距为50px; text-indent:50px的意思是文本缩进*/
.line{ line-height:50px;letter-spacing:50px; text-indent:50px; background-color:Gray; border:1px solid red; width:880px;}
</style>
</head>
<body>
<div class="line">
习近平过境罗德岛 <br />
习近平支持中企<br />
分析习李罕见一月内同访一国<br />
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
/*--当我们将一个div设置成一个类似于text文本框的样式的的时候，在他里面显示文本，而想要文本上下居中显示，那么此时我们就可以设置行高来做到这一点：因为我们已经将div的height属性设为30px了，此时只要将行高设为与height属性一致就可以：line-height:30px--*/
#div1{ width:160px; height:30px; border:1px solid red; text-align:center; line-height:30px}
</style>
</head>
<body>
<div id="div1">背景</div>
</body>
</html>
img图片
<html>
<head>
<title></title>
<style type="text/css">
.divcss5-max-width {
margin-top: 10px;
}
.divcss5-min-width img {
min-width: 500px; /*设置图片的最小宽度*/
}
.divcss5-max-width img {
max-width: 200px; /*设置图片的最大宽度*/
}
</style>
</head>
<body class="background-image">
<div>
原图片大小:宽度为375px 高度65px
<br />
<img src="http://www.divcss5.com/img201301/topad1.gif" alt="原图片" /><br /><br />
</div>
<div class="divcss5-min-width">
案例1:因为设置了img的最小宽度为500px,所以即便<br />原始图片的宽度没有达到500px也会在拉伸到500px<br />
<img src="http://www.divcss5.com/img201301/topad1.gif" alt="放大后的图片" /><br /><br />
</div>
<div class="divcss5-max-width">
案例2:因为设置了img的最大宽度为200px,所以即便<br />原始图片的宽度大于200px 也会在s缩小到200px<br />
<img src="http://www.divcss5.com/img201301/topad1.gif" alt="缩小后的图片" /><br /><br />
</div>
</body>
</html>
background背景的设置
background-image说明
<html>
<head>
<title></title>
<style type="text/css">
.background-image {
/*background:url("http://www.divcss5.com/img201301/topad1.gif" );*/
border: 1px solid Red;
background-image: url("/imgs/1.jpg"); /*也可以缩写成 background：url("/imgs/1.jpg") 注意写url后面括号里面的双引号*/
background: url("/imgs/1.jpg")0px 16px; /*其中0px是图片的横坐标，16px是图片的纵坐标 */
/*背景图片可以指定多个*/
/*写法1*/
background: url(images/1.jpg) no-repeat center,url(images/2.jpg)repeat-x bottom;
/*写法2*/
background: url(images/1.jpg),url(images/2.jpg);
background-repeat: no-repeat,repeat-x;
background-position: center,bottom;
/*调整背景大小*/
background-size: 200px 300px; /*指定背景图片的大小,值也可以用百分比*/
background-size: 100% 100%; /*指定背景图片的大小，如果水平和垂直都指定100%，那么地方多大，背景图片就占多大*/
background-size:auto;/*背景图片的真实大小*/
background-size:contain;/*背景图像等比例缩放到宽度和高度与容器的宽度和高度相等，背景图像始终被包裹在容器内*/
background-size:cover;/*背景图像等比例缩放到完全覆盖容器，背景图像有可能超出容器*/
/*设置背景图片的显示方式：background-repeat有四个值：*/
background-repeat: repeat; /*表示整个页面(全背景)重复平铺*/
background-repeat: no-repeat; /*表示背景图片平铺，不重复*/
background-repeat: repeat-x; /*表背景图片沿着水平方向重复平铺*/
background-repeat: repeat-y; /*表示背景图片沿着垂直方向重复平铺*/
/*设置背景图像的起始位置*/
/*设置 background-position就必须先指定background-image属性*/
/*background-position的默认值为：(0% 0%) 第一个值是水平位置，第二个值是垂直位置。 */
background-position: 800px 60px; /*表示图片作为对象背景时，显示距离左侧800px，距离上边60px区域的图片内容。*/
background-position: -800px -60px; /*表示图片作为对象背景时，显示距离右侧800px，距离下边60px区域的图片内容。*/
/*background-position的值的另外一种表示法：background-position后可跟2个值，2个值用空格间隔开，第一个值，固定代表水平方向左、中、右距离，第二个值，固定代表垂直上、下距离。 横坐标的值有left center right 纵坐标的值有 top bottom
所以他们的表示法一般可以分为 */
background-position: left top;
background-position: left bottom;
background-position: center top;
background-position: center bottom;
background-position: right top;
background-position: right bottom;
/*如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50% 例如：background-position:center*/
/*background-position的值的另外一种表示法:百分比,百分比就是指在未明确具体宽或高的前提下，你可以使用它来处理。比如你不知道div这个高度是多少。你可以使用百分之十来代表div的1/10 即将原有高度设成100%，放到10%处的意思*/
background-position: 50% 50%; /*这样设置的效果与background-position:center的效果是一样的 */
}
</style>
</head>
<body>
</body>
</html>
background示例
详情请参考：CSS中背景background-position负值定位深入理解
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
#abc {
width:16px; /*如果div没有内容，要用图片做背景就需要设置它的宽度和高度*/
height: 16px ;
background: url(/images/toobar.png) -195px -219px no-repeat;/*从图片X轴-195 Y轴-219区域开始取内容，最终会根据我们设定的div的宽和高取到高度16px，宽度16px这么多内容*/
}
</style>
</head>
<body>
<!--<img src="images/toobar.png" />用来测量我们要获取到图片的区域的x,y轴，测量完后就注释它，不需要了-->
<div id="abc"></div>
</body>
</html>
所以最终获取到的这红叉的图片
Margin 外边距 && Padding 内边距
<html>
<head>
<title></title>
<style type="text/css">
.basediv{ margin:0px}
.div1{ margin:20px 30px 40px 50px; background-color:Gray}/*上外边距为20px 右外边距为30px 下外边距为40px 左外边距为50px */
.div2{ margin:20px 40px;background-color:Gray}/*上下外边距为20px ,左右外边距为40px*/
.div3{ margin:20px;background-color:Gray} /*上下左右外边距都为20px*/
.div4{ padding:20px 30px 40px 50px; background-color:Gray}/*上内边距为20px 右内边距为30px 下内边距为40px 左内边距为50px */
.div5{ padding:20px 40px;background-color:Gray}/*上下内边距为20px ,左右内边距为40px*/
.div6{ padding:20px;background-color:Gray} /*上下左右内边距都为20px*/
</style>
</head>
<body style=" margin:0px" >
<div class="basediv">
<div class="div1">中国</div>
<div class="div2">美国</div>
<div class="div3">德国</div>
<div class="div4">中国</div>
<div class="div5">美国</div>
<div class="div6">德国</div>
</div>
</body>
</html>
font字体
<html>
<head>
<title></title>
<style type="text/css">
.div1{ font-size :50px}/*设置对象具体字体大小为12px*/
.div2{ font-size :xx-small} /*设置文字大小为最小*/
.div3{ font-size : x-small} /*设置文字大小为较小 */
.div4{ font-size :small} /*设置文字大小为小*/
.div5{ font-size :large} /*设置文字大小为大*/
.div6{ font-size :x-large} /*设置文字大小为较大*/
.div7{ font-size :xx-large} /*设置文字大小最大*/
.div8{ font-size :50%} /*相对于父容器中字体尺寸进行相应调整为50%大小*/ /*因为父容器body的font-size:100px 在这里调整为50%,也就是div8的font-size为50px*/
</style>
</head>
<body style=" font-size:100px">
<div class="div1">独家评论：世界杯结束是全世界敌对梅西开始font-size :50px</div>
<div class="div2">独家评论：世界杯结束是全世界敌对梅西开始font-size :xx-small 最小 </div>
<div class="div3">独家评论：世界杯结束是全世界敌对梅西开始font-size : x-small 较小</div>
<div class="div4">独家评论：世界杯结束是全世界敌对梅西开始 font-size :small 小</div>
<div class="div5">独家评论：世界杯结束是全世界敌对梅西开始 font-size :large 大</div>
<div class="div6">独家评论：世界杯结束是全世界敌对梅西开始font-size :x-large 较大</div>
<div class="div7">独家评论：世界杯结束是全世界敌对梅西开始font-size :xx-large 最大</div>
<div class="div8">独家评论：世界杯结束是全世界敌对梅西开始font-size :50%</div>
</body>
</html>
font-style设置字体风格
<head>
<title></title>
<style type="text/css">
.div1{ font-style:italic}/*浏览器会显示一个"斜体"的字体样式*/
.div2{ font-style:normal}/*默认值。浏览器显示一个标准的字体样式*/
.div3{ font-style:oblique}/*浏览器会显示一个"倾斜"的字体样式*/
.div4{ font-style:inherit}/*规定应该从父元素继承字体样式*/
</style>
</head>
<body>
<div class="div1">【浏览器会显示一个"斜体"的字体样式】</div>
<div class="div2">【默认值。浏览器显示一个标准的字体样式。】</div>
<div class="div3">【浏览器会显示一个"倾斜"的字体样式。】</div>
<div class="div4">【规定应该从父元素继承字体样式】</div>
<p style=" color:Red">italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
</p>
</body>
</html>
font-variant让小写的字母变成小型(缩小)的大写字母字体
<html>
<head>
<title></title>
<style type="text/css">
.div1{ font-variant:normal} /*正常的字体*/
.div2{ font-variant:small-caps} /*让小写的字母变成小型(缩小)的大写字母字体*/
</style>
</head>
<body>
<div class="div1">ABCefg</div>
<div class="div2"> ABCefg</div>
<p>
css设置font-variant:small-caps后，对象内所有无论是大写字母还是小写字母<br />
最终全显示为大写的字母,但是小写字母转换成大写后是以缩小的形式来显示的
</p>
</body>
</html>
font-weight 加粗字体（font-weight:bold）normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置bold : 粗体。相当于number为700。也相当于b对象的作用bolder : 特粗体lighter : 细体number : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900font-family 选择字体(font-family:黑体)我们推荐常用字体有：宋体、黑体、微软雅黑、Arial, Helvetica, sans-serif此4种字体。
position:absolute 绝对定位 | position:relative相对定位
当我们要使用绝对定位的时候，必须要有两个条件
1》必须给父元素加定位属性，一般建议使用 position:relative(即：给父元素设为相对定位);
2》给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）
绝对定位是以父元素为基准点，进行定位（如果他没有父元素，或者它的父元素没有设置position:relative属性）它就会以<body>为基准点进行定位。绝对定位会脱离文档流(即：他浮动起来了，不再占据原来的位置了)
绝对定位与float浮动不能同时使用
1 没加绝对定位和相对定位的时候的效果
<pre name="code" class="css"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
}
#a {
background-color: red;
}
#b {
background-color: green;
top:100px;
left:100px
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
2 给子元素添加绝对定位，不给父元素添加相对定位，那么子元素进行绝对定位就是以body为基准进行定位的
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
/*position:relative;*/ /*不给父元素设置相对定位，那么子元素就会以body为基准进行定位； 注意这段代码是注释了的*/
}
#a {
background-color: red;
}
#b {
background-color: green;
top: 100px;
left: 100px ;
position:absolute; /*给B设置绝对定位*/
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
3 最终效果图，给父元素添加相对定位，给子元素添加绝对定位，那么子元素进行绝对定位就是以父元素为基准进行定位的
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px;
}
div {
width: 100px;
height: 100px;
}
#main {
width:500px;
height:500px;
border:1px solid red;
margin:0px 250px;
position:relative; /*给父元素设置相对定位，那么子元素进行绝对定位的时候就会以父元素为基准进行定位*/
}
#a {
background-color: red;
}
#b {
background-color: green;
top: 100px;
left: 100px ;
position:absolute; /*给B设置绝对定位*/
}
#c {
background-color: blue;
height:150px;
width:150px;
}
</style>
</head>
<body>
<div id="main">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
</body>
</html>
Display 隐藏 ；强制不换行 ；换行
display:inline 强制不换行
<html>
<head>
<title></title>
<!--我们常常会用到display对应值有block(换行)、none(隐藏元素)、inline(强制不换行)这三个值-->
<!--display:block表示它是一个块状元素，它要独立占一行的，（高度，和宽度起作用）-->
<!--display:inline表示它是一个内联元素，它可以不占一行（高度和宽度不起作用）-->
<!-- Display:inline,我们常常在li中使用它。功能是让li排成一排（称：删除行）-->
<style type="text/css">
ul.divcss5 li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>我父级ul没有divcss5样式</li>
<li>我是独行</li>
<li>我是独行</li>
</ul>
<ul class="divcss5">
<li>我父级ul有divcss5样式</li>
<li>我站成一排</li>
<li>我在divcss5下li站成一排</li>
</ul>
</body>
</html>
display:none 隐藏
<html>
<head>
<title></title>
<!--我们常常会用到display对应值有block(换行)、none(隐藏元素)、inline(强制不换行)这三个值-->
<style type="text/css">
.div1{ border:1px solid red; width:100px; height:60px; display:none}
</style>
</head>
<body>
<div class="div1" >我是div1</div>
</body>
</html>
display:block 换行
<html>
<head>
<title></title>
<style type="text/css">
/* line-height:50px 意思是定义行高为50px, letter-spacing:50px意思是定义字间距为50px; text-indent:50px的意思是文本缩进*/
.line {
line-height: 50px;
letter-spacing: 50px;
text-indent: 50px;
background-color: Gray;
border: 1px solid red;
width: 880px;
}
</style>
</head>
<body>
<div class="line">
习近平过境罗德岛 <br />
习近平支持中企<br />
分析习李罕见一月内同访一国<br />
</div>
</body>
</html>
阴影效果
边框阴影:box-shadow
<html>
<head>
<title></title>
/* box-shadow:0px 0px 1px #000 inset
第1个值为0px时，代表【左右】边框阴影 为1px范围
第1个值为正整数 代表 【左】边框阴影
第1个值为负整数 代表 【右】边框阴影
同理
第2个值为0px时 代表【上下】边框阴影
第2个值为正整数 代表 【上】边框阴影
第2个值为负整数 代表 【下】边框阴影
第三个值越大，阴影就越明显，范围也更广。
如果第一个值为正数：第一个值越大，左边阴影的颜色就越深，
如果第二个值为正数：第二个值越大，上边阴影的颜色就越深，
如果第一个值为负数：第一个值越小，右边阴影的颜色就越深，
如果第二个值为负数：第二个值越小，下边阴影的颜色就越深，
如果第1个值和第2个值>0或<0 而第三个值设为0的话，阴影就不存在了，变成定义颜色的实线了，没有阴影效果。
这种情况下，第三个值越小，阴影的效果就越小，转而变成际定义的颜色的实线
第四个值是定义阴影的颜色
第五个值是设置DIV对象内阴影效果和图片外阴影效果。有inset 代表框内阴影 ，不带inset 代表框外阴影。
*/
<style type="text/css">
.wowo{ float:left; width:250px; height:120px; border:1px solid red; padding:60px; box-shadow:50px 0px 0px Grey inset;margin-right:50px }
.haha{ float:left; width:250px; height:120px; border:1px solid red; padding:60px; box-shadow:50px 0px 100px Grey inset ; margin-right:50px}
.hehe{ float:left; width:250px; height:120px; border:1px solid red; padding:60px; box-shadow:0px 0px 30px Grey inset }
</style>
</head>
<body>
<div class="wowo">当box-shadow:50px 0px 0px Grey insert时的效果，因为第三个值设为0px,阴影的效果已经消失掉了，转而变成了实线</div>
<div class="haha">当box-shadow:50px 0px 100px Grey insert时的效果，因为第三个值设为100px,阴影的效果已经很明显了。而第一个值为正数50px 所以左边框的阴影颜色最深</div>
<div class="hehe">当box-shadow:0px 0px 30px Grey时的效果，因为第三个值设为30px,阴影的效果不是很明显。而第一，第二个值都为0px，所以四个边缘的阴影效果都是一样的</div>
</body>
</html>
内边框阴影效果
外边框阴影效果
<html>
<head>
<title></title>
<style type="text/css">
.one {
margin:50px auto;
width:200px;
height:200px;
border:1px solid #000;
box-shadow:5px 5px 5px rgba(0,0,0,.6);/*设置外边框的阴影*/
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
文字阴影：text-shadow
效果详情请参考：3wschool (其实文字阴影与边框阴影用法是一样的，只是边框阴影多了一个设置“内外边框”的参数而已)
<html>
<head>
<title></title>
<style type="text/css">
.one {
/*第一个值：用来设置对象的阴影水平偏移值。可以为负值*/
/*第二个值：用来设置对象的阴影垂直偏移值。可以为负值*/
/*第三个值：用来设置对象的阴影模糊值。不可以为负值 （可选，值也大，越模糊）*/
/*第四个值：用来设置对象的阴影颜色（可选,如果不设，默认就是字体的颜色）*/
/*以下是几种常见的取值方式*/
text-shadow:1px 1px;
text-shadow:10px 10px 1px;
text-shadow:10px 10px 2px red;
text-shadow:10px 10px 2px rgb(255, 0, 0);/*rgb是颜色的另外一种表现形式*/
text-shadow:1px 1px 1px rgba(255, 0, 0,.3);/*注意：这个raba 我们发现rgb后面多了一个a，其实这个a就带表颜色的透明度 .3表示30%的透明度 最大值为1 表示100%的透明度,即：不透明，注意：值越大越不透明，别搞反了*/
}
.two {
/*阴影可以指定多个；比如在这里我就指定了两个阴影*/
text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);
}
</style>
</head>
<body>
<p class="one">妹子真漂亮</p>
<p class="two">斌哥更帅气</p>
</body>
</html>
text-decoration:none 下划线，上划线，贯穿线，隐藏下划线
<html>
<head>
<title></title>
<style type="text/css">
.p1{ text-decoration:underline}
.p2{ text-decoration:overline}
.p3{ text-decoration:line-through }
.p4{ text-decoration:none }
</style>
</head>
<body>
<div >
<p class="p1">p1 我被加了下划线</p>
<p class="p2">p2 我被加了上划线</p>
<p class="p3">p3 我被加了贯穿线</p>
<a href="#" class="p4">我是一个A标签，本身自带下划线，但是现在我被p4样式隐藏了下划线</a>
</div>
</body>
</html>
list-style 设置标记
list-style-position 设置在何处放置列表项标记
<html>
<head>
<title></title>
<style type="text/css">
.div1 ul li{ list-style-position:inside}
.div2 ul li{ list-style-position:outside}
</style>
</head>
<body>
<div class="div1">list-style-position:inside <br/>
/*|规定列表中列表项目,标记的位置比较靠后【列表项目标记放置在文本以内，且环绕文本根据标记对齐。】<br /><br />
所谓的标记就是文本前面的那个“小圆点”*/
<ul>
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ul>
</div>
<hr />
<div class="div2">list-style-position:outside <br/>
/* |规定列表中列表项目,标记的位置比较靠后前【默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。】*/
<ul>
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ul>
</div>
</body>
</html>
list-style-image 用自定义图片做标记
<html>
<head>
<title></title>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif');
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
透明特效
CSS2 使用滤镜实现透明
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px;
padding:0px
}
.div1 {
float: left;
background-color: Red;
position:relative;
width: 150px;
height: 150px;
margin:50px 50px;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
top:0px;
left:0px;
}
.div3 {
float: left;
background-color: Red;
position: relative;
width: 150px;
height: 150px;
margin: 50px 50px;
}
.div4 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0px;
left: 0px;
/*filter:alpha(Opacity=80)表示对该对象设置80%透明；值越小，透明度越高*/
filter: alpha(opacity=50); /*对IE5,IE6,IE7,IE8,IE9都有效，对IE10，IE11无效，对火狐，谷歌均无效*/
/*opacity: 0.5表示对该对象设置50%透明；opacity的值是0-1之间；值越小，透明度越高*/
opacity: 0.5; /*对IE5，IE6，IE7，IE8无效，对IE9，IE10，IE11，火狐，谷歌均有效*/
}
</style>
</head>
<body>
<div class="div1">
不使用透明的效果
<div class="div2"></div>
</div>
<div class="div3">
使用透明效果后
<div class="div4"></div>
</div>
</body>
</html>
CSS3使用RGBA，实现透明
元素透明是我们常用的样式，在css2中使用滤镜属性opacity实现透明效果;现在又了CSS3的rgba属性，就不用那么麻烦了(当然这也得浏览器支持才行,IE5,IE6,IE7,IE8都不支持，IE9，IE10，IE11，谷歌，火狐都支持)
通常，我们定义颜色都是用十六进制表示。如background:#000000,表示背景颜色为黑色。当然也可以用RGB三原色值表示，例如background:rgb(0,0,0)也表示背景颜色为黑色。rgba只是在rgb的基础上增加了一个a，这个a表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色的属性使用
通常，我们定义颜色都是用十六进制表示。如background:#000000,表示背景颜色为黑色。当然也可以用RGB三原色值表示，例如background:rgb(0,0,0)也表示背景颜色为黑色。rgba只是在rgb的基础上增加了一个a，这个a表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色的属性使用
<html>
<head>
<title></title>
<style type="text/css">
.div1 {
float: left;
background-color: Red;
position: relative;
width: 150px;
height: 150px;
margin: 50px 50px;
}
.div2 {
width: 100px;
height: 100px;
background-color: rgba(0, 38, 255,.5);/*使用rgba设置背景颜色及透明度；.5表示透明度为50%*/
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="div1">
使用透明效果后
<div class="div2"></div>
</div>
</body>
</html>
动画过渡属性Transition
<html>
<head>
<title></title>
<style type="text/css">
a {
/*Transition 检索或设置对象变换时的过度效果；它可以有四个值*/
/*第一个参数：检索或者设置对象中参与过度的属性（属性名；例如:pandding,color,background等等）*/
/*第二个参数：检索或设置对象过度的持续时间（单位：秒）*/
/*第三个参数：检索或设置对象中过度的动画类型(取值：linear:线性过度,ease:平滑过度,ease-in:由慢到快,ease-out:由快到慢,ease-in-out:由慢到快再到慢*/
/*第四个参数：检索或设置对象延迟过度的时间（单位：秒）*/
/*IE5，IE6，IE7，IE8，IE9不支持，IE10，IE11，火狐，谷歌都支持*/
/*延迟2秒钟后，在1秒钟内，按照由慢到快的动画类型执行完padding这个效果；*/
/*在1秒钟内执行完color这个效果*/
/*在2秒钟内执行完background-color这个效果*/
transition: padding 1s ease-in 2s,color 1s,background-color 2s;
}
a:hover {
/*当鼠标移到a标签的时候，按照上面设置的动画来执行这段代码效果*/
padding-left:50px;
color:red;
background-color:rgba(0, 255, 33,.5);
}
</style>
</head>
<body>
<!--//
//animation 检索或设置对象所应用的动画特效-->
<a href="">云课堂</a><br />
<a href="">云课堂</a><br />
<a href="">云课堂</a><br />
<a href="">云课堂</a><br />
</body>
</html>
CSS3动画animation
<html>
<head>
<title></title>
<style type="text/css">
div {
height: 100px; width: 300px; margin: 50px auto; background-color: #ccc; overflow: hidden;
}
.one {
opacity: 0;
display: block;
/*animation的参数可以有8个*/
/*第一个参数：规定需要绑定到选择器的 keyframe 名称。这个名称由自己随意取*/
/*第二个参数：规定完成动画所花费的时间。单位：秒*/
/*第三个参数：规定动画的速度曲线，即：动画类型（取值：linear:线性过度,ease:平滑过度,ease-in:由慢到快,ease-out:由快到慢,ease-in-out:由慢到快再到慢）*/
/*第四个参数：规定在动画开始之前的延迟时间。单位：秒*/
/*第五个参数：规定动画应该播放的次数（值为数字，例如1，2，3等;或者值为infinite:表示规定动画应该无限次播放。）*/
/*第六个参数：规定是否应该轮流反向播放动画（值：normal:动画应该正常播放(默认值)。alternate:动画应该轮流反向播放。）*/
/*第七个参数：规定动画是否正在运行或暂停。（值：paused:规定动画已暂停。running:规定动画正在播放。）*/
/*第八个参数：规定对象动画时间之外的状态。（值：none：不改变默认行为；forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both：向前和向后填充模式都被应用。）*/
animation: myName 5s ease-out 2s 3 forwards; /*在5秒钟内，由快到慢执行完这个名字叫myName的动画*/
}
@keyframes myName {
/*@keyframes的作用是将myName这个动画关联起来，在这里面设置名字为myName这个动画的具的体效果*/
from {
/*from 就是开始的意思；即：从什么地方开始*/
opacity: 0; /*将opacity这个属性的值从0开始*/
transform: translate(0px);/*将指定对象从0px开始平移*/
}
to {
/*to 就是结束的意思；即：到什么地方结束*/
opacity: 1; /*在5秒钟内将opacity这个属性的值从0调整到1*/
transform: translate(100px); /*在5秒钟内将2D变换（transform）的translate属性的值从0调整到100px，即往x方向平移100px*/
color: red; /*在5秒钟内将颜色变为红色*/
background-color: #00ff21; /*在5秒钟内将背景颜色设为#00ff21*/
font-size: 1cm; /*在5秒钟内将字体大小设为3cm*/
}
}
</style>
</head>
<body>
<div>
<span class="one">文字会动</span>
</div>
</body>
</html>
动画 变换transform
旋转(rotate),斜拉(skew)，缩放(scale),以及位移(translate)
旋转 rotate
<html>
<head>
<title></title>
<style type="text/css">
.one {
width: 300px;
height: 100px;
background-color: #808080;
margin: 150px auto;
transform: rotate(45deg); /*将指定对象顺时针45度旋转，如果是负数，则是按逆时针进行旋转，例如：transform: rotate(-45deg);*/
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
位移translate
<html>
<head>
<title></title>
<style type="text/css">
.one {
border: 1px solid red;
width: 300px;
height: 100px;
background-color: #808080;
margin: 150px auto;
animation: myName 5s ease-out 2s forwards;/*将平移这个示例放到动画中来演示*/
}
@keyframes myName {
to {
/*第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 */
transform: translate(100px,50px); /*水平向右100px，垂直向下移动50px（可以为负数）*/
}
}
</style>
</head>
<body>
<div class="one">水平向右移动100px，垂直向下移动50px<br/>transform: translate(100px,50px)</div>
</body>
</html>