A我学习到了什么？
1温习day02的知识点
块标签：特点是独占一行，设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
默认样式【display:block;】
内联标签：特点是并排显示，不能设置宽高
不能设置margin-top,margin-bottom
如：a,span,em,strong
默认样式【display:inline;】
内联块:特点是并排显示，可以设置宽高
button,img,input
默认样式【display:inline-block;】
让内联元素和内联块元素水平居中
display:block;//以改变默认样式进行
margin-left:auto;
margin-right:auto;//仅限块标签
给父级加text-align:center//仅限内联块标签
分组选择器：
p,h4，~{background:gray}//可以设置标签属性的样式
后代选择器：
div>span{} //选取div所有子元素为span的标签
div span{} //选取div之后的所有span元素
//可以设置标签属性的样式
兄弟选择器:
div+p{}选取紧邻div之后的第一个兄弟元素//仅限下个元素指定的元素
//div+h3+p可以跳过指定
div~p{}选取紧邻div之后的所有兄弟元素
//可以设置标签属性的样式
伪类选择器：
div:hover{}//光标移动到改变
input:focus{}//光标聚焦到改变
//可以设置标签属性的样式
伪元素：
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''//可以不写，但是必写语句
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''//可以不写，但是必写语句
}
//可以设置标签属性的样式
属性选择：
div[class='test']{}
//区分特定的标签以及文件
2css基本样式的讲解
1css背景
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
背景位置:background-position: x y
简写background: color image repeat position
background-size属性指定背景图片大小。
background-size: x y;
x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2css文本
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
text-align文本对齐方式
text-align: right|left|center//左|右|中心
text-decoration文本修饰
text-decoration: underline|overline|line-through
//下划线|上划线|删除线
text-indent文本缩进
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize
//大写|小写|首大写
3css字体
//font-family 属性应该设置几个字体名称作为一种"后备"机制，
如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size//大小
font-style:normal | italic//字体样式：正常|斜体
font-weight:normal | bold | lighter
//字体粗细：正常|粗体|轻淡
行高:line-height
4css链接
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5css列表样式(针对ul)
list-style:none;//无样式
list-style-type:circle|square
//目录样式类型：圆|平方
list-style-image:url("xxx")//图片
6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p{ border-top:1px solid #ccc;}
7表格(了解)
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
8轮廓属性（不怎么用）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
9透明：opacity：0~1
visibility:hidden|visible//可见|能见度：隐藏
3css样式的继承:子元素对父元素的继承
1.width和height
width如果子元素不设置宽度，默认情况下继承父元素的宽度
height如果父元素不设置高度，默认情况下父元素继承子元素的高度
2css可以继承的属性
文本相关属性:
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//光标样式，能见度
B我掌握到了什么
1css基本样式的讲解
1css背景
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
背景位置:background-position: x y
简写background: color image repeat position
background-size属性指定背景图片大小。
background-size: x y;
x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2css文本
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
text-align文本对齐方式
text-align: right|left|center//左|右|中心
text-decoration文本修饰
text-decoration: underline|overline|line-through
//下划线|上划线|删除线
text-indent文本缩进
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize
//大写|小写|首大写
3css字体
//font-family 属性应该设置几个字体名称作为一种"后备"机制，
如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
font-size//大小
font-style:normal | italic//字体样式：正常|斜体
font-weight:normal | bold | lighter
//字体粗细：正常|粗体|轻淡
行高:line-height
4css链接
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5css列表样式(针对ul)
list-style:none;//无样式
list-style-type:circle|square
//目录样式类型：圆|平方
list-style-image:url("xxx")//图片
6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p{ border-top:1px solid #ccc;}
7表格(了解)
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
8轮廓属性（不怎么用）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
9透明：opacity：0~1
visibility:hidden|visible//可见|能见度：隐藏
C我没有掌握
对于css可以继承的属性有点模糊
1.width和height
width如果子元素不设置宽度，默认情况下继承父元素的宽度
height如果父元素不设置高度，默认情况下父元素继承子元素的高度
2css可以继承的属性
文本相关属性:
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
1.jpg
2.png
4.png
5.png
3.png
