Day04

2018-07-12 本文已影响0人 yt1997

今天学到了什么？

一、列表样式

1.列表样式

list-style:none;

2.列表样式类型

list-style-type:disc|circle|square

3.列表样式图片

list-style-image

二、字体

1.最小的字体-->不要小于12px
font-size字体大小
2.字体样式
font-style:normal|italic
3.字体的权重
font-weight:bold|bolder|lighter

三、链接

链接的样式类型

link// 没有访问的链接
visited//已经访问过的链接
hover// 鼠标移入到链接上的状态
active// 鼠标点击的那一刻

tip：同时使用链接的这几种状态,顺序不打乱

四、文本

1.文本对齐

text-align:left|center|right 
  p{
     text-align: center;
    }

2.文本修饰

text-decoration:none|underline|overline|line-through
 a{
     text-decoration:line-through;
   }

3.文本缩进

text-indent

4.文本转换

text-transfomr:uppercase|lowercase|capitalize
   h4{
   text-indent: 20px;
   text-transform: capitalize;
  }
<!-- lorem+tab 快速写出一段废话 -->

5.文本颜色

颜色
  red -->纯色
  #ff2d51
  rgb()

五、背景

1.背景重复

background-repeat:no-repeat|repeat-x|repeat-y
                   background-repeat: no-repeat;

2.背景位置

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

3.背景简写

 background-position: x y

            1.background-position: center center
2.background:color image repeat position

4.背景大小

background-size:x y;
            x -->width
            y -->height
           // cover -->会覆盖整个div  特点:只能以大覆小

5.背景吸附

background-attachment:scroll|fixed;

六、表格

1.表格标签

<table>
<tr><td></td></tr>
</table>

2.表格样式

border-collapse: collapse;
line-height: 50px;
text-align: center;
1.跨行：rowspan//谁要跨越给谁rowspan；
2.跨列：colspan//谁跨越列给谁colspan；

七、继承关系

1.继承:子级对父级的关系

<style>
.parent{
            width:200px;
            background:red;
        }
        .child{
            width:100px;
            height:100px;
            background:blue;
        }
   </style>
</head>
<body>
        <div class="parent">
        <div class="child"></div>
    </div>
</body>
//父元素不设置height,它会获取子元素的height

2.width的继承

<style>
.parent{
            width:200px;
            height:200px;
            background:red;
        }
        .child{
            height:100px;
            background:blue;
        }
   </style>
</head>
<body>
        <div class="parent">
        <div class="child"></div>
    </div>
</body>
//Tips:仅仅发生在块级元素之间
 子元素不设置宽度,它会继承父元素的宽度---(块)

八、轮廓和设置透明度

1.轮廓outline

<style>
div{
            width:100px;
            height:100px;
            background:#ff2d51;
            outline: 10px solid #44cef6;
        }
        input{
            margin-top: 50px;
            outline: none;
        }
<div>
    </style>
</head>
<body>

    </div>
    <input type="text">
</body>

2.设置透明度

width: 100px;
            height: 100px;
            background: red;
            opacity: 0.5;
//opacity设置元素的透明度

今天的内容还需花时间学习（不熟练）