Day04

2018-07-12 本文已影响0人雪落殇晨

一.css中的背景样式

1.1背景大小

 width:600px;
 height: 200px;
 background: red   
             url("images/banner.jpg") 
             no-repeat 
             center 
             center；
background-size: 100% 100%;

背景大小
background-size:x y;
x---width
y---height
cover------会覆盖整个页面div
特点-------只能以大覆盖小
#######1.2.背景的重复和位置

width:200px;
height: 200px;
background-color: red;
background-image: url("images/icon1.png"）
background-repeat: no-repeat;

背景重复
background-repeat: no-repeat| repeat-x| repeat-y
--------不重复---------重复x轴方向-------重复y轴方向

 background-position-x:center;
 background-position-y:center;

背景位置
background-position-x:横坐标方向位置
background-position-y:纵坐标方向位置
背景简写 background-position:x y;

1.3.背景的简写

 div{
            width:200px;
            height: 200px;
            background: red 
                        url("images/icon1.png")
                        no-repeat 
                        center 
                        center；

背景简写
background:color image repeat position
颜色背景图片是否重复背景的位置

二.文本的样式

1.1文本的颜色

 p{
            color:red;
}    
</style>
</head>
<body>
    <p>hellow world</p>
</body>

eg：red等颜色为纯色
#ff2d51等为rgb（）即此颜色的不同深浅

1.2.文本字体样式

p{
            font-size: 12px;
            font-style: italic;
            font-weight: lighter;
        }

font-size 字体大小
font-style：normal italic
font-weight----字体的权重
font-weight:bold bolder lighter
但一般不能小于12px字体

1.3.样式继承

  .parent{
            width:200px;
            height: 200px;
            background: red;
        }
        .child{
            height: 100px;
            background: blue;

        }
---------
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>   
</body>

"样式继承"仅仅只发生在块元素之间
子元素不设置宽度，它会继承父元素的宽度

.parent{
            width: 200px;
            background: red;
        }
        .child{
            width:100px;
            height: 100px;
            background: blue;
        }

也可父元素不设置height ，它会获取子元素的height

三.表格

1.1结构

<body>
    <table>
        <thead>
            <tr> <th>商城</th> <td>手机</td> </tr>
        </thead>
        <tbody>
            <tr> <td>3d</td> <td>苹果</td></tr>
        </tbody>
    </table>

tr------------table row 行
th------在单元格中加粗显示-------表头
td-------在单元格中不加粗显示-------表单元格
<thead>-------行表头
<tbody>-------表格数据

1.2样式

 table,th,td{
            width:500px;
            border:1px solid #333;

        }
        table{
            border-collapse: collapse;
            line-height: 50px;
            text-align: center;
        }

“table,th,td”-------设置表格结构单元格的宽细，即横竖线
“table”设置表格的样式

四.其他样式

1.1.轮廓

div{
           width:100px;
           height: 100px;
           background: red;
           outline: 10px solid #44cef6;
       }
       input{
           margin-top: 50px;
           outline: none;
       }

可使“input”中边框点击不变色

1.2.链接

  a:link{
        
                    color:red;
        
                }
                a:visited{
                    color:yellow;
                }
                a:hover{
                    color:green;
                }
                a:active{
                    color:blue;
                }
            </style>
<body>
         <a href="http://www.jd.com/">京东</a>
</body>

link-----没有访问的链接
visited-----已经访问过的链接
hover-------鼠标移入到链接上的状态
active------鼠标点击的那一刻
同时使用链接的几种状态，顺序不能打乱