Css样式

来源：互联网发布：mac工商银行网银控件编辑：程序博客网时间：2024/06/05 15:40

一.Css

1.固定位置

#boxSet{            width: 400px;            height: 230px;            border: 30px solid #C8C8C8;            /*设置定位为固定值*/            position: fixed;            /*设置所处位置的边距*/            right: 100px;            top: 300px;            display: none;            text-align:center;            line-height: 30px;        }

2.DIV内居中

        #divSet{            border: solid 1px black;            height: 40px;            width: 80px;            background-color: red;            text-align:center;            /*设置行高与div高度的高度相同*/            line-height: 40px;        }

3.（修改）

4.更改光标

http://www.runoob.com/try/try.php?filename=trycss_cursor

eg:

<div>    <span style="cursor: auto">auto 默认文本</span><br>    <span style="cursor: crosshair">crosshair 十字光标</span><br>    <span style="cursor: default">default 箭头</span><br>    <span style="cursor: e-resize">e-resize 水平箭头</span><br>    <span style="cursor: help">help 箭头加问好光标</span><br>    <span style="cursor: move">move 十字箭头光标</span><br>    <span style="cursor: n-resize">n-resize 垂直箭头</span><br>    <span style="cursor: ne-resize">ne-resize 左下右上</span><br>    <span style="cursor: nw-resize">nw-resize 左上右下</span><br>    <span style="cursor: pointer">pointer 手指光标</span><br>    <span style="cursor: s-resize">s-resize 垂直箭头</span><br>    <span style="cursor: se-resize">se-resize 左上右下</span><br>    <span style="cursor: text">text 文本光标</span><br>    <span style="cursor: w-resize">w-resize 水平箭头</span><br>    <span style="cursor: wait">wait 加载</span><br></div>

5.定位

http://www.runoob.com/css/css-positioning.html

1) position属性：

A.static 默认值，没有定位，元素正常出现在文档流中

B.fixed 固定位置（设置所在位置，fixed定位是元素的位置与文档流无关，因此不占据空间。可与其他元素重叠）

eg：

Css

#fixedDiv{            border: 1px solid pink;            width: 100px;            height: 100px;            position: fixed;            left: 200px;            top: 200px;        }

HTML

<div id="fixedDiv">固定定位</div>

C.relative 相对定位（相对定位元素移动后，相对元素的原本空间不变，依旧占据空间ps:常用来做绝对定位的容器块）

eg：

Css

        #relativeDiv{            border: 1px solid blue;            width: 100px;            height: 100px;            position: relative;            left: 220px;        }        #div1{            border: 1px solid black;            width: 200px;            height: 200px;        }

HTML

<div id="relativeDiv">相对定位</div><div id="div1">测试div1</div>

D.absolute 绝对定位（absolute使元素的位置与文档流无关，因此不占据空间.ps:1.绝对定位元素会与其他元素重叠，2.绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，则它的位置相对于<html>）

eg：

Css

        #absoluteDiv{            border: 1px solid red;            width: 100px;            height: 100px;            position: absolute;            right: 100px;        }        #div2{            border: 1px solid black;            width: 200px;            height: 200px;        }

HTML

    <div id="absoluteDiv">        绝对定位    </div>    <div id="div2">        测试div2    </div>

2) 重叠的元素（设置属性z-index）

z-index属性指定一个元素的堆叠顺序，一个元素可以有正数或负数

eg：

Css

        #indexDiv1{            width: 100px;            height: 100px;            background-color: red;            position: absolute;            left: 15px;            top: 15px;            z-index: -1;         }        #indexDiv2{            width: 100px;            height: 100px;            background-color: yellow;            position: absolute;            left: 5px;            top: 5px;            z-index: 2;        }        #indexDiv3{            width: 100px;            height: 100px;            background-color: blue;            position: absolute;            left: 10px;            top: 10px;            z-index: 1;        }

HTML

    <div id="indexDiv1">    </div>    <div id="indexDiv2">    </div>    <div id="indexDiv3">    </div>

结果：顺序从上到下231

6.浮动

http://www.runoob.com/css/css-float.html

1) float浮动属性：left 左浮动，right 右浮动，none 不浮动，inherit 继承父元素浮动属性值

Css

        #floatDiv1{            background-color: yellow;        }        #floatDiv2{            background-color: red;        }        #floatDiv3{            background-color: black;        }        div{            float:left;            width: 100px;            height: 100px;            background-color: red;            margin-left: 10px;        }

HTML

    <div id="floatDiv1">    </div>    <div id="floatDiv2">    </div>    <div id="floatDiv3">    </div>

2) 清楚浮动clear

属性：left，right，both 不允许有浮动对象，none，inheril

Css

        div{            clear: both;        }

7.对齐

http://www.runoob.com/css/css-align.html

第一种：元素居中对齐

Css

       #div1{           border: 1px solid black;           /*设置margin为auto*/           margin: auto;           width: 300px;        }

HTML

    <div id="div1">        div元素居中    </div>

第二种：文本居中对齐

Css

        #div2{            border: 1px solid black;            width: 300px;            /*设置text-align为center*/            text-align: center;        }

HTML

    <div id="div2">        文本居中    </div>

第三种：图片居中对齐

Css

       img{           /*将元素设置为块元素*/           display: block;           /*设置margin为auto*/           margin: auto;       }

HTML

    <img src="images/paris.jpg">

第四种：左右对齐，使用定位方法

Css

        #rightDiv{            border: 1px solid red;            /*设置绝对定位*/            position: absolute;            width: 300px;            /*right值为0*/            right: 0px;        }

HTML

    <div id="rightDiv">        左右对齐，使用定位方法    </div>

ps：当时用position来对齐元素时，要设置body的margin以及padding值，在不同浏览器下可能会有不同。

第五种：左右对齐，是用float方法

Css

        #rightDiv2{            border: 1px solid black;            width: 300px;            /*设置float值为right*/            float: right;        }

HTML

    <div id="rightDiv2">        左右对齐，使用float方法    </div>

第六种：垂直居中对齐，使用padding

Css

        #div3{            border: 1px solid black;            width: 300px;            /*设置上下边距为50px（相同），左右边距为0px*/            padding: 50px 0px;            /*设置字体对齐方式为居中*/            text-align: center;        }

HTML

    <div id="div3">        垂直居中对齐，使用padding    </div>

第七种：垂直居中，使用line-height

Css

        #div4{            border: 1px solid black;            width: 300px;            /*设置行高为50px*/            line-height: 100px;            /*设置字体对齐方式为居中*/            text-align: center;        }

HTML

    <div id="div4">        垂直居中对齐，使用line-height    </div>

还有其他的方法。。。。

8.组合选择器

http://www.runoob.com/css/css-combinators.html

A.后代选择器（以空格分隔）

B.子元素选择器（以大于号分隔）

C.相邻兄弟选择器（以加号分隔）

D.普通兄弟选择器（以破折号分隔）

9.伪类 /伪元素

http://www.runoob.com/css/css-pseudo-classes.html

语法：selector:pseudo-class {property:value;}

Css

        /*div下的匹配第一个p元素*/        div p:first-child{            color: red;        }

HTML

    <div>        <p>第一个p元素</p>        <p>第二个p元素</p>        <p>第三个p元素</p>    </div>

css类也可以使用伪类:selector.class:pesudo-class {property:value;}

Css

        /*用Css类使用伪类为class为two的p元素后添加“-scc类使用伪类”文字*/        div p.two:after{            content:"-scc类使用伪类";        }

HTML

    <div>        <p>第一个p元素</p>        <p class="two">第二个p元素</p>        <p>第三个p元素</p>    </div>

所有伪类于伪元素查阅：http://www.runoob.com/css/css-pseudo-classes.html

(后续详解伪类于伪元素)

10.文本格式

http://www.runoob.com/css/css-text.html

A.文本颜色

Css

    <style>        /*三种常见方法*/        .redClass{            color: red;        }        .yellowClass{            color: #ffff00;        }        .blueClass{            color: rgb(0,0,255 );        }    </style>

HTML

    <p class="redClass">字体为红色</p>    <p class="yellowClass">字体为黄色</p>    <p class="blueClass">字体为蓝色</p>

B.文本对齐方式：left，right，center，justify实现两端对齐文本效果，inherit从父元素继承text-align属性的值

Css

        .redClass{            color: red;            /*设置居中*/            text-align: center;        }        .yellowClass{            color: #ffff00;            /*设置右对齐*/            text-align: right;        }

C.文本修饰：none，underline文本下的一条线，overline文本上的一条线，line-through穿过文本的一条线，blink闪烁的文本，inherit从父元素继承decoration属性的值

11.导航栏

http://www.runoob.com/css/css-navbar.html

导航栏基本上是链接列表，所以使用<ul><li>更有意义

a.垂直导航栏

Css

        ul{            list-style-type: none;  /*去掉ul的样式*/            margin: 0;            padding: 0;            width: 15%;            height: 100%;   /*设置全屏*/            position: fixed;   /*设置浮动样式为固定*/            background-color: #f1f1f1;            overflow: auto;  /*如果选项多允许滚动*/        }        li a{            height: 50px;            line-height: 50px;  /*设置行高与高度相同，使文字垂直居中*/            display: block;   /*设置a为块元素*/            padding-left: 15px;            text-decoration: none;   /*去掉a中的下划线*/        }        li a.active{            background-color: #4CAF50;            color: white;        }        li a:hover:not(.active){   /*设置鼠标悬停效果（除选中的一行）*/            background-color: #555;            color: white;        }

HTML

    <ul>        <li><a href="#" class="active">主页</a></li>        <li><a href="#">新闻</a></li>        <li><a href="#">联系</a></li>        <li><a href="#">关于</a></li>    </ul>    <div style="margin-left:15%;padding:1px 16px;height:1000px;">      <h2>Fixed Full-height Side Nav</h2>      <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>      <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>      <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>      <p>Some text..</p>      <p>Some text..</p>      <p>Some text..</p>      <p>Some text..</p>      <p>Some text..</p>      <p>Some text..</p>      <p>Some text..</p>    </div>

b.水平导航栏

        ul{            list-style-type: none;            margin: 0px;            padding: 0px;            position: fixed;            overflow: hidden;  /*不允许滚动*/            background-color: #333;            width: 100%;        }        li{            float: left;  /*li左浮动，使导航栏水平*/            border-right: solid 1px white;  /*为导航栏添加右边框*/        }        li a{            height: 50px;            line-height: 50px;  /*垂直居中*/            width: 80px;            text-align: center;  /*水平居中*/            color: white;            text-decoration: none;            display: block;  /*块元素很重要*/        }        li a.active{            background-color: #4CAF50;        }        li a:hover:not(.active){            background-color: white;            color: black;        }

HTML 同上

12.提示工具

http://www.runoob.com/css/css-tooltip.html

带箭头的提示工具

Css

        .tooltip{            position: relative;   /*父容器做相对定位，才能使子容器壹自己为父容器做绝对定位*/            border-bottom: 1px solid black;            display: inline-block;  /*使父容器既具有块元素性质，可添加元素，又具有内联元素的性质，使下一元素显示在下一行*/        }        .tooltiptext{            visibility: hidden;  /*首先隐藏显示的内容*/            width: 150px;            border-radius: 10px;  /*设置边框圆角*/            background-color: black;            color: white;            padding: 5px;            position: absolute;  /*绝对定位，空出位置*/            z-index：1;  /*使提示内容处于最上层*/            /* 显示在文本的左边  当top值为零时与“提示工具显示”在同一行上*/            /* top: -5px;            right: 105%;  */            /* 显示文本在右边 */            /* top: -5px;            left: 105%;   */            /* 显示在文本上边   当bottom值为零时与“提示工具显示”在同一行上*/            /* bottom: 100%;            margin-left: -75px; */            /* 显示在文本下边 */            top: 100%;            margin-left: -75px;        }        /* 利用伪类为提示框添加箭头  在tooltiptext中的文字后面添加内容*/        .tooltip .tooltiptext::after{                content: "";    /*不显示文字*/                position: absolute;                border-width: 5px;                border-style: solid;                border-color: transparent transparent black transparent;  /*顺序：上左右下  */                margin-left: -25%;                top: -10px;        }        .tooltip:hover .tooltiptext{            visibility: visible;        }

HTML

    <div >题1    </div>    <div >题2    </div>    <div class="tooltip">提示工具显示        <span class="tooltiptext">提示内容</span>    </div>

13.图片廊

http://www.runoob.com/css/css-image-gallery.html

响应式图片廊

Css

        *{            box-sizing: border-box;   /*宽高的设置包含内外边距以及border的宽度*/        }        div .imgBox{            border: 1px solid #ccc;        }        div .imgBox:hover{            border: 1px solid black;        }        .boxDiv img{            width: 100%;  /*图片的宽度100%*/            height: auto;  /*宽度自适应*/        }        .contentDiv{            text-align: center;            height: 100px;            overflow: auto;  /*滚动条自适应*/        }        .boxDiv{            float: left;   /*注意多嵌套一个div,更好的设置图片见得距离。且不影响平均宽度的设置*/            width: 19.99999%;    /*不要为盒子设置固定高度*/            padding: 0 6px;        }        @media only  screen and (max-width: 1280px) {  /*学习@media规则进行理解*/            .boxDiv{                width: 24.99999%;                margin: 6px 0px;            }        }        @media only  screen and (max-width: 960px) {            .boxDiv{                width: 49.99999%;                margin: 6px 0px;            }        }        @media only  screen and (max-width: 640px){            .boxDiv{                width: 100%;            }        }

HTML

    <div class="boxDiv">        <div class="imgBox">            <img src="images/demo1.jpg" alt="Trolltunga Norway">            <div class="contentDiv">图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述图片文本描述</div>        </div>    </div>    <div class="boxDiv">        <div class="imgBox">            <img src="images/demo2.jpg" alt="Trolltunga Norway">            <div class="contentDiv">图片文本描述</div>        </div>    </div>    <div class="boxDiv">        <div class="imgBox">            <img src="images/demo3.jpg" alt="Trolltunga Norway">            <div class="contentDiv">图片文本描述</div>        </div>    </div>     <div class="boxDiv">        <div class="imgBox">            <img src="images/demo4.jpg" alt="Trolltunga Norway">            <div class="contentDiv">图片文本描述</div>        </div>    </div>    <div class="boxDiv">        <div class="imgBox">            <img src="images/demo3.jpg" alt="Trolltunga Norway">            <div class="contentDiv">图片文本描述</div>        </div>    </div>

14.透明度（含有兼容性解决方案）

http://www.runoob.com/css/css-image-transparency.html

Css

        .opacitydiv img{            width: 300px;            height: auto;            float: left;            padding: 5px;            opacity: 0.4;   /*透明度0-1*/            filter:alpha(opacity: 40);  /* IE8及跟早版本兼容*/        }        .opacitydiv img:hover{            opacity: 1;        }

HTML

    <div class="opacitydiv">        <img src="images/demo1.jpg" alt="不兼容">        <img src="images/demo2.jpg" alt="不兼容">        <img src="images/demo3.jpg" alt="不兼容">        <img src="images/demo4.jpg" alt="不兼容">    </div>

15.图像拼合技术

http://www.runoob.com/css/css-image-sprites.html

Css

        ul{            list-style-type: none;            position: relative;   /*ul做为定位的父容器*/        }        ul,li{ height: 44px;}        li{float: left; position: absolute;}   /*做浮动使其在一排，  利用绝对定位方便设置图片位置*/        #home{            left: 0px;            width: 45px;            background: url('images/img_navsprites_hover.gif') 0 0;  /* 他的位置  左 顶部 */        }        #home:hover{background: url('images/img_navsprites_hover.gif') 0 -45px;}        #prev{            left: 50px;            width: 43px;            background: url('images/img_navsprites_hover.gif') -47px 0;        }        #prev:hover{background: url('images/img_navsprites_hover.gif') -47px -45px;}        #next{            left: 100px;            width: 42px;            background: url('images/img_navsprites_hover.gif') -92px 0;        }        #next:hover{background: url('images/img_navsprites_hover.gif') -92px -45px;}

HTML

    <ul>        <li id="home"></li>        <li id="prev"></li>        <li id="next"></li>    </ul>

16.媒体类型（@media规则）

http://www.runoob.com/css/css-mediatypes.html

17.属性选择器

http://www.runoob.com/css/css-attribute-selectors.html

18.菜鸟教程上的Css的实例

http://www.runoob.com/css/css-examples.html

19Viewport（网页可视区域）

http://www.runoob.com/css/css-rwd-viewport.html

20.图片（自适应）

http://www.runoob.com/css/css-rwd-images.html

二.Css3

1.边框

http://www.runoob.com/css3/css3-borders.html

border-image

Css

        div{            border: 20px solid black ;   /*border-image会覆盖边款颜色*/            width: 300px;        }        #roundDiv{            -webkit-border-image:url("images/border.png") 27 27 round;            -o-border-image:url("images/border.png") 27 27 round;            border-image:url("images/border.png") 27 27 round;        }        #stretchDiv{            -webkit-border-image:url("images/border.png") 27 27 stretch;            -o-border-image:url("images/border.png") 27 27 stretch;            border-image:url("images/border.png") 27 27 stretch;        }

HTML

    <div id="roundDiv">填充</div>    <div id="stretchDiv">拉伸</div>    <div>素材<img src="images/border.png" alt=""></div>

2.圆角

http://www.runoob.com/css3/css3-border-radius.html

border-radius

Css

        div{            background-color: red;            height: 200px;            width: 200px;            margin: 10px;            display: inline-block;        }        #div1{ border-radius: 5px 20px 40px 60px; } /*左上、右上、右下、左下*/        #div2{ border-radius: 5px 40px 60px; } /*左上、右上和对角左下、右下*/        #div3{ border-radius: 5px 60px; } /*左上和对角右下、右上和对角左下*/        #div4{ border-radius: 30px; } /*四角*/

HTML

    <div id="div1"></div>    <div id="div2"></div>    <div id="div3"></div>    <div id="div4"></div>

eg:椭圆

Css

        #div5{ border-radius: 15px/50px ;}        #div6{ border-radius: 50px/15px ;}  /* 水平/垂直 */

3.背景

http://www.runoob.com/css3/css3-backgrounds.html

A:：background-origin 指定背景图片的位置区域

B： background-clip 背景剪裁属性指定位置开始绘画

Css

        /* 第一种方法 */   #backgroundImage{        width: 1000px ;        height: 500px ;        padding: 30px;        background-image: url(images/img_navsprites.gif), url(images/border.png); /* 第一个背景在第二个背景上面*/        background-position: right bottom, left top;  /*背景从何处开始*/        background-repeat: no-repeat, repeat;  /*是否平铺*/    } */        /* 第二方法 */    #backgroundImage{        width: 1000px ;        height: 500px ;        background: url(images/img_navsprites.gif) right bottom no-repeat, url(images/border.png) left top repeat ;    }    #backgroungClip1,#backgroungClip2,#backgroungClip3{        height: 200px;        width: 500px;        padding: 20px;        border: 5px dotted black;        display: inline-block;        margin: 5px;        background-color: yellow;        /* background: url(images/border.png) no-repeat;  背景不能与背景颜色同时使用 */    }    #backgroungClip1{        background-clip: content-box;  /* 背景从content位置开始绘画   */        /* background-origin: content-box;  选择背景图片在文本处显示 */    }    #backgroungClip2{        background-clip: padding-box;  /* 背景从padding位置开始绘画   */        /* background-origin: padding-box;   选择背景图片在padding值处显示 */    }    #backgroungClip3{        background-clip: border-box;   /* 背景从border位置开始绘画   也是默认值  */        /* background-origin: border-box;   选择背景图片在border值处显示  */    }

HTML

    <div id="backgroundImage"></div>    <div id="backgroungClip1">        <p>    上课了如果说可劲儿那个脚上课了如果说可劲儿那个脚上课了如果</p>    </div>    <div id="backgroungClip2">        <p>    上课了如果说可劲儿那个脚上课了如果说可劲儿那个脚上课了如果</p>    </div>    <div id="backgroungClip3">        <p>    上课了如果说可劲儿那个脚上课了如果说可劲儿那个脚上课了如果</p>    </div>

4.渐变

http://www.runoob.com/css3/css3-gradients.html

线性渐变（linear-gradient）

Css

    div{ margin: 5px; }    #div1{        height: 100px;        width: 500px;        background: linear-gradient(red, yellow);  /*默认从上到下*/    }    #div2{        height: 100px;        width: 500px;        background: linear-gradient(to right,red, yellow);  /*标准格式，从左到右*/    }    #div3{        height: 100px;        width: 500px;        background: linear-gradient(to bottom right, red, yellow);  /*标准格式，从左上到右下*/    }    #div4{        height: 100px;        width: 500px;        background: linear-gradient(0deg, blue, green);  /*0度相当于从下向上渐变*/    }    #div5{        height: 100px;        width: 500px;        background: linear-gradient(90deg, blue, green);  /*90度相当于从左向右渐变*/    }    #div6{        height: 100px;        width: 500px;        background: linear-gradient(180deg, blue, green);  /*180度相当于从上向下渐变*/    }    #div7{        height: 100px;        width: 500px;        background: linear-gradient(-90deg, blue, green);  /*-90度相当于从右向左渐变*/    }

HTML

    <div id="div1"></div>    <div id="div2"></div>    <div id="div3"></div>    <div id="div4"></div>    <div id="div5"></div>    <div id="div6"></div>    <div id="div7"></div>

5.文本样式

http://www.runoob.com/css3/css3-text-effects.html

6.字体（@font-face规则）

http://www.runoob.com/css3/css3-fonts.html

7.2D转换

http://www.runoob.com/css3/css3-2dtransforms.html

8.3D转换

http://www.runoob.com/css3/css3-3dtransforms.html

9.过渡

http://www.runoob.com/css3/css3-transitions.html

10.动画（@keyframes规则）

http://www.runoob.com/css3/css3-animations.html

11.多列

http://www.runoob.com/css3/css3-multiple-columns.html

12.图片

http://www.runoob.com/css3/css3-images.html

13.按钮

http://www.runoob.com/css3/css3-buttons.html

14.分页实例

http://www.runoob.com/css3/css3-pagination.html

15.框大小

http://www.runoob.com/css3/css3-box-sizing.html

阅读全文

0 0