今天学到了什么

CSS 样式

CSS 样式

1 命名规范

2 背景

2.1背景重复

backg round-repeat: no-repeat | repeat-x | repeat-y

 div{
            width: 200px;
            height: 200px;
            background-color: red;
            background-image: url("images/mi-logo.png");
            background-repeat: repeat;  
            background-position:center;
            }

背景重复.png

2.2 背景位置

background-position-x:横坐标方向的位置
background-position-y:纵坐标方向的位置
//传参 top，right，bottom，left，center

2.3 背景简写

background-position： x y;
/background-position-x: right;
background-position-y: bottom;

 div{
        width: 200px;
        height: 200px;
        /*
        背景简写
        background：color image repeat position
        */
        background: red url("images/icon1.png");
    }

2.4 背景吸附

background - attachment: scroll | fixed;

.banner{
        height: 468px;
        background: red url("images/banner.png") no-repeat center top;
        background-attachment:fixed;
    }
 .content{
        height: 800px;
        background:mediumturquoise;

    }

2.5 背景大写

背景大小
background-size：x y;

    x  -->width
    y  -->height
    cover  -->会覆盖整个div  `特点：只能以大覆小`

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

3 文本

3.1 文本颜色

p{
        color: blue;
    }

3.1 文本对齐

text-align:left|center|right

p{
        text-align: center;
    }

3.2 文本修饰

text-decocration:none|under|over-line|line-through

a{
        text-decoration: line-through;
    }

3.3 文本缩进

text-indent

3.4 文本转换

text-thransfomr

h4{
        text-indent: 20px;
        text-transform: capitalize;
    }

4 字体

4.1 字体大小

font-size
最小的字体-->不要小于12px

4.2 字体样式

font-style：nomeal|italic

4.3字体的权重

font-weight: bold|bolder|lighter

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

5 链接

link--> 没有访问的链接

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

a:link{
     color: red;
 }
 a:visited{
     color: rgba(196, 164, 223, 0.5);
 }
 a:hover{
     color: green;
 }
 a:active{
     color: blue;
 }

link.png

hover.png

active.png

visited.png

6 列表

6.1 列表样式

list-style:none;

6.2列表样式类型

list-style-type：disc| circle|square

6.列表样式图片

list-style-image

ul{  
        list-style-image: ("images/icon1.png")
    }

7 表格

table,th,td{
            width: 500px;
            border: 1px solid #333;
        }
        table{
            /*关键样式*/
            border-collapse: collapse;
            line-height: 50px;
            text-align: center;
        }

<table>
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr><td>JD</td><td>苹果</td></tr>
<tr><td>Tmall</td><td>小米</td></tr>
<tr><td>苏宁</td><td>华为</td></tr>
</tbody>
</table>

表格.png

7.1 跨越行row的表格

/* 技术要点：谁要跨越谁rowspan*/
        table,td{
            border: 1px solid rgb(221, 23, 23);
        }
        table{
            text-align: center;
            border-collapse: collapse;
            width: 500px;
            line-height: 50px;
        }

跨越行.png