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:单独设置