今天学到了什么

1.背景

1.1 背景重复

background-repeat: repeat   //重复
background-repeat: no-repeat //不重复
background-repeat: repead-x //x轴方向重复 
background-repeat: repeat-y //y轴方向重复

1.2 背景位置

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

1.3 背景简写

background-position: x y;  // 背景位置坐标
background:color image repeat position  /（背景颜色  图片 是否重复 位置）

1.4 背景吸附

background-attachment: scroll;  //背景可以滑动
background-attachment: fixed;  //背景固定

1.5 背景大小

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

2. 文北

2.1 文本颜色

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
rgba(255,255,255,0.2) 其中0.2为透明度

2.2 文本对齐

文本对齐 默认的是left
text-align:left|center|right

2.3 文本修饰

text-decoration:none          去掉下划线
text-decoration:underline     加下划线
text-decoration:overline      加上划线
text-decoration:line-through  加中划线

2.4 文本缩进

text-indent  //文本缩进，形成段落
针对英文：
text-transform: uppercase   全部大爷
text-transform: lowercase   全部小写
text-transform: capitalize  首字母大写

3.字体

3.1 字体大小

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

3.2 字体样式

font-style:normal  常规
font-style:italic      斜体

3.3 字体的权重

font-weight:bold      较粗
font-weight:bolder   较粗
font-weight:ligher    较淡

4. 链接

a:link()        link -->没有访问的链接
a:visited()     visited -->已经访问过的链接
a:hover()       hover -->鼠标移入到链接上时的颜色
a:active()      active -->鼠标点击链接时的颜色
提示：如果都要使用，顺序不能改变。

5.列表

list-style:none                去掉列表项前的小圆点
list-style-type:disc         改为实心圆点
list-style-type:circle      改为空心圆点
list-style-type:square   改为实心小正方形
list-style-image:url()    改为图片

6.表格

6.1 关键样式

border-collapse: collapse;    使表格折叠

6.2 跨越行row的表格

<tr><td rowspan="3">商城</td><td>鞋子</td><td>衣服</td></tr>
<tr><td>手机</td><td>钱包</td></tr>
<tr><td>拖鞋</td><td>Tshit</td></tr>

rowspan.png

6.3 跨越列col的表格

<tr><td colspan="3">苹果</td></tr>
<tr><td>手机</td><td>ipad</td><td>电脑</td></tr>

colspan.png

7.轮廓

outline: 10px solid #44cef6
outline:none

8.透明度opacity

opacity:0.5      元素透明度为0.5

9.样式继承

Tips:继承仅仅只发生在块元素之间

9.1 子元素不设置宽度，它会继承父元素的宽度

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

子继承父.png

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

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

父继承子.png

今天有什么不会

无