day4

今天学到了什么

1 背景的位置和重复和简写

   /*
            背景重复
             background-repeat:no-repeat|repeat-x|repeat-y
             */
             background-repeat: no-repeat;
            /* 
            背景位置
            
            background-position-x:横坐标方向的位置
            background-position-y:纵坐标方向的位置
            //传参 top,right,bottom,left,center
             */
            /* 
            背景位置简写
            background-position: x y;    */
           背景的简写
背景简写
            background:color image repeat position（颜色 图片 有无重复 位置）
             
            background: #ff2d51 url("images/icon1.png") no-repeat center center;
        }
 背景大小
            background-size:x y;
            x -->width
            y -->height
            cover -->会覆盖整个div  特点:只能以大覆小
             */
            background-size:100% 100%;（和cover一致）

// 2.png

2 背景的吸附

3.png

文本的问题

text-align文本对齐方式
text-align: right|left|center
text-decoration文本修饰
text-decoration: underline|overline|line-through（下 上 中）
text-decoration-color（none 隐藏）
text-indent文本缩进（有用）
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize（大 小 首大）

3 文本颜色

color:设置字体的颜色

颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgba(255,0,0,0.5);}(a表示透明程度)

• 小技巧

4字体

 最小的字体-->不要小于12px 
        font-size字体大小
        字体样式
        font-style:normal|italic
        字体的权重
        font-weight:bold|bolder|lighter
        100-900
         */
        p{
            font-size: 12px;
            font-style:italic;
            font-weight:lighter;
        }
字体的应用（     font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
        }(//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体)）

5链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

//*若单独设置几个链接，必须遵守如下规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

6表格

border-collapse 
//设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行（列比较好用 跨行的话 要第一行就把列数据都打出 跨列可以偷懒椅子啊）

7轮廓 透明

//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
visibility:hidden|visible和display:none的区别（0.5 在设置颜色后有变浅的情况）

8重要 样式的继承（仅仅发生在块级元素之间）

- width
如果子元素不设置宽度，默认情况下继承父元素的宽度
- Height(特殊)
如果父元素不设置高度，默认情况下父元素继承子元素的高度
 可以继承的属性（文本和字体相关属性都是可以继承的////文本相关属性
color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
//字体相关属性
font-family,font-style,font-size,font-weight,line-height
//列表相关属性
list-style
//表格相关属性
border-collapse
//其他属性
cursor,visibility）