css总结

Css一 css引人方式和书写规范  (1)内嵌把css代码嵌入html标签<div style="font-size: 10px; color: red">大家好</div>语法：使用style属性引人样式  属性写法 属性：属性值 多个属性用分号隔开  (2)内部在head标签中使用style标签<style type="text/css">                div{color:red;font-size: 100px;}</style>语法：使用style标签 属性type="text/css" 告诉浏览器用css解析器解析      属性写法 属性：属性值 多个属性用分号隔开  (3)外部     将css样式抽取成一个文件，谁用谁引用     <link rel="stylesheet" type="text/css" href="demo1.css"/>     Rel: 引人文件与html的关系 type:告诉浏览器用css解析器解析 href: 文件地址     语法：将属性写在css文件中，在head标签中使用link标签引人  属性写法 属      性：属性值 多个属性用分号隔开二 css选择器   1 基本选择器     选择器优先级 id>class>元素     (1)元素选择器        语法：Html标签名{属性}         <span>hello css!!!</span>         <style type="text/css">                span{color:red;font-size:100px; }          </style>     (2)id选择器        语法：#id{属性}         <div id="div1">hello css1!!!</div>         <div id="div2">hello css2!!!</div>         <style type="text/css">                #div1{background-color: red;}                #div2{background-color: pink;}         </style>      (3)class选择器        语法：.class{属性}         <div class="style1">div1</div>                <div class="style1">div2</div>                <div class="style2">div3</div>         <style type="text/css">                    .style1{background-color: red}                    .style2{background-color: pink}         </style>   2 属性选择器 语法：基本选择器[属性=’属性值’]{css属性}<form action="">        name:<input type="text" /><br/>        pass:<input type="password" /><br/></form><style type="text/css">        input[type='text']{background-color: yellow}        input[type='password']{background-color: pink}</style>   3 伪元素选择器     a标签伪元素选择器     语法:         静止状态    a:link{css 属性}         悬浮状态    a:hover{css 属性}         触发状态    a:active{css 属性}         完成状态    a:visited{css 属性}   4 层级选则器     语法: 父级选择器 子级选择器     <div id="d1">                <div class="dd1">                    <span>span1-1</span>                </div>                <div class="dd2">                    <span>span1-2</span>                </div>            </div>            <div id="d2">                <div class="dd1">                    <span>span1-1</span>                </div>                <div class="dd2">                    <span>span1-2</span>                </div>            </div>            <style type="text/css">                #d1 .dd2 span{color:red}            </style>三 css属性   1 文字属性     Font-size:大小     Font-family:字体类型   2 文本属性     Color:颜色     Text-decoration:下划线 属性：none  underline     Text-align:对齐方式 属性: left center right     <div>hello css!!!</div>     <a href="#">click me!!!</a>     <style type="text/css">            div{color:red;text-decoration: underline;text-align: right }           a{text-decoration: none;}     </style>   3 背景属性     Background-color：背静颜色     Background-image：背景图片  属性 url(“图片地址”)     Background-repeat：平铺方式 默认纵向 repeat:横向纵向平铺 no-repeat repeat-x/-y     body{            background-color: black;            background-image: url("images/dog.gif");            background-repeat: repeat-y;        }   4 列表属性     List-style-type:列表项前的小标志 属性值太多了     List-style-image:列表项前的小图片 属性值：url(“图片地址”)     <ul>                <li>黑马程序员</li>                <li>黑马程序员</li>                <li>黑马程序员</li>                <li>黑马程序员</li>     </ul>     <style type="text/css">                /* ul{list-style-type: decimal-leading-zero;} */                ul{list-style-image: url("images/forward.gif");}     </style>   5 尺寸属性      Width: 高度     Height: 宽度     <div id="d1">div1</div>     <div id="d2">div2</div>     <style type="text/css">                #d1{background-color: red;width: 200px;height: 200px;}                #d2{background-color: pink;width: 200px;height: 200px;}     </style>   6 显示属性     display:            属性值：none:隐藏                    block:块级显示                    inline：行级显示   7 浮动属性      float:            属性值：left  right      clear:清除浮动 left right both            缺点： (1)影响相邻元素不能正常显示                    (2)影响父元素不能正常显示四、css盒子模型    border:        border-width:边框的宽度        border-color:边框的颜色        border-style:边框的线型        border-top:上边框        border-bottom:下边框        border-left:左边框        border-right:右边框    padding:        代表边框内壁与内部元素之间的距离        padding:10px;代表上下左右都是10px        padding:1px 2px 3px 4px;上右下左        padding:1px 2px;上下/左右        padding:1px 2px 3px;        padding-top:单独设置    margin:        代表边框外壁与其他元素之间的距离        margin:10px;代表上下左右都是10px        margin:1px 2px 3px 4px;上右下左        margin:1px 2px;上下/左右        margin:1px 2px 3px;        margin-top:单独设置