--------CSS 属性取值(news)--------

来源：互联网发布：网络上骂王宝强的编辑：程序博客网时间：2024/06/05 16:04

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>

z-Index 属性设置元素的堆叠顺序

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

<html><head><style type="text/css">img{position:absolute;left:0px;top:0px;z-index:-1; //如果将-1修改成正数那么它会在文本的前面出现。即图片会覆盖住文字。}</style></head><body><h1>This is a heading</h1><img src="/i/eg_smile.gif" /><p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p></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表示透明度。而且这个属性不会被子元素继承下去，可以在定义颜色的属性使用

<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>

0 0