day03

A.今天学了什么

1.css背景

背景颜色:background-color

背景图片:background-image:url("")

背景重复：background-repeat

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

背景位置:background-size 属性指定背景图片大小

background-size:x y;(x表示宽,y表示高)

background-size:cover;

background-size:100% 100%;

可以简写成:background:color image repeat attachment position

2.css文本

text-align 文本对齐方式

text-align:center; 居中对齐

text-align:left; 靠左对齐

text-align:right; 靠右对齐

text-decoration 文本修饰

text-transform 文本转换

text-indent文本缩进

3.css字体

font-size 字体大小

font-family 字体

font-weight 字体粗细

font-style 字体样式

line-height 行高

4.css链接

a:link 正常没访问

a:visited 访问过

a:hover 鼠标接触

a:active 链接被点击

规则:a:link与a:visited两者对立,a:hover必须跟在a:link或者a:visited后面
a:active必须跟在a:hover后面

5.css列表样式

list-style:none;//清楚列表样式

list-style-type:circle  列表标签形状

list-style-image:url("") 自定义列表形状

6.边框

border-width: 边框宽度

border-height: 边框高度

border-color 边框颜色

可以简写成:border:1px solid red;

border-top-style:dotted; 上边框形状

border-right-style:solid; 右边框形状设置

7.表格

border-collpse 折叠边框

colspan:value; //跨越的列

rowspan:value; //跨越的行

8.轮廓属性

outline 轮廓
p{ outline:1px solid black}

透明:opacity:0.5;  半透明
可见性visibility:hidden|visible

9.css样式继承

width
如果子元素不设置宽度,默认子元素继承继承父元素宽度

height
如果父元素不设置高度,默认父元素继承子元素的高度

10.css可以继承的属性

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

11.box-sizing:border-box

box-sizing:border-box; 设置padding和border,它的宽度还是会保持不变

box-sizing:content-box; 默认, 设置padding和border,宽度会发生改变

12.float浮动

目的：为了让元素并排显示

13.如何清除浮动

1:给兄弟元素加 clear:both;
2:给父级加overflow:hidden;
3:用伪元素,给父级内容生成
.row:after{
display:table;
content:"";
clear:both;
}

14.定位position

relative 相对的

absolute绝对的

B.今天掌握了什么

1.css样式继承

width
如果子元素不设置宽度,默认子元素继承继承父元素宽度

height
如果父元素不设置高度,默认父元素继承子元素的高度

2.css可以继承的属性

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

3.表格

border-collpse 折叠边框

colspan:value; //跨越的列

rowspan:value; //跨越的行

4.轮廓属性

outline 轮廓
p{ outline:1px solid black}

透明:opacity:0.5;  半透明
可见性visibility:hidden|visible

5.css列表样式

list-style:none;//清楚列表样式

list-style-type:circle  列表标签形状

list-style-image:url("") 自定义列表形状

6.边框

border-width: 边框宽度

border-height: 边框高度

border-color 边框颜色

可以简写成:border:1px solid red;

border-top-style:dotted; 上边框形状

border-right-style:solid; 右边框形状设置

7.css字体

font-size 字体大小

font-family 字体

font-weight 字体粗细

font-style 字体样式

line-height 行高

8.css链接

a:link 正常没访问

a:visited 访问过

a:hover 鼠标接触

a:active 链接被点击

规则:a:link与a:visited两者对立,a:hover必须跟在a:link或者a:visited后面
a:active必须跟在a:hover后面

9.css背景

背景颜色:background-color

背景图片:background-image:url("")

背景重复：background-repeat

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

背景位置:background-size 属性指定背景图片大小

background-size:x y;(x表示宽,y表示高)

background-size:cover;

background-size:100% 100%;

可以简写成:background:color image repeat attachment position

10.css文本

text-align 文本对齐方式

text-align:center; 居中对齐

text-align:left; 靠左对齐

text-align:right; 靠右对齐

text-decoration 文本修饰

text-transform 文本转换

text-indent文本缩进

11.box-sizing:border-box

box-sizing:border-box; 设置padding和border,它的宽度还是会保持不变

box-sizing:content-box; 默认, 设置padding和border,宽度会发生改变

12.float浮动

目的：为了让元素并排显示

13.如何清除浮动

1:给兄弟元素加 clear:both;
2:给父级加overflow:hidden;
3:用伪元素,给父级内容生成
.row:after{
display:table;
content:"";
clear:both;
}

14.定位position

relative 相对的

absolute绝对的

C.今天没有掌握什么

今天全部掌握了