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.今天没有掌握什么
今天全部掌握了
