DAY04

2018.07.12学习总结

1.背景

1.1背景颜色:background-color

1.2背景图片:backgorund-image

1.3背景重复:background-repeat

背景.PNG

1.4背景吸附:background-attachment:fixed | scroll

背景吸附.PNG

1.5背景位置:background-position: x y

//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离

背景位置.PNG

1.6背景大小 background-size属性指定背景图片大小。

1.6.1background-size: x y;//x表示宽度，y表示高度

1.6.2background-size:cover;//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。相当于background-size:100% 100%;

背景大小.PNG

1.6背景简写

background: color image repeat position

背景简写.PNG

2.css文本

2.1颜色 color:设置字体的颜色

2.1.1十六进制值 - 如: ＃FF0000

2.1.2一个RGB值 - 如: RGB(255,0,0)

2.1.3颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

颜色.PNG

2.2text-align文本对齐方式

    text-align: right|left|center;

2.3text-decoration文本修饰

   text-decoration: underline|overline|line-through;

2.4text-indent文本缩进

    text-align:20px;

[图片上传中...(文本相关.PNG-6304ba-1531394742629-0)]

2.5text-transform文本转换

 text-transform:uppercase|lowercase|capitalize;

文本相关.PNG

3.css链接

3.1a:link - 正常，未访问过的链接

3.2a:visited - 用户已访问过的链接

3.3a:hover - 当用户鼠标放在链接上时

3.4a:active - 链接被点击的那一刻

3.5若单独设置几个链接，必须遵守如下规则：a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面

链接.PNG

4.继承

4.1height继承

Height(特殊)如果父元素不设置高度，默认情况下父元素继承子元素的高度

height继承.PNG

4.2width继承

如果子元素不设置宽度，默认情况下继承父元素的宽度

width继承.PNG

4.3文本等继承

文本相关属性: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

文本继承.PNG

5.透明度

透明度.PNG

6.表格

border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行

跨行.PNG

跨列.PNG

7.轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{outline:1px solid pink;}

8.css字体

p{font-family:Helvetica,Microsoft YaHei;}

font-size:14px;
font-style:normal | italic;
font-weight:normal | bold | lighter;
line-height:60px;

字体.PNG

总结：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊今天真的好累 好饿