1.今天学了什么
1.css基本样式的讲解
1.1 css背景
1.2 css文本
1.3 css字体
1.4 css链接
1.5 css列表样式
1.6 边框
1.7表格
1.1css背景
背景颜色：background-color
背景图片：background-image
背景重复：background-repeat
背景吸附：background-attachment：fixed 固定| scroll 滚动
背景位置:background-position: x y
background: color image repeat attachment position(颜色 图片 重复 吸附 位置)
background-size: x y;
background-size:cover;相当于background-size:100% 100%;
1.2css文本
color:设置字体的颜色
十六进制值 h1 {color:#00ff00;}
一个RGB值 h2 {color:rgb(255,0,0);}
颜色的名称 body {color:red;}
text-align文本对齐方式
text-align: right右|left左|center居中
text-decoration文本修饰
text-decoration: underline下划线|overline上划线|line-through中划线 none|默认 blink闪烁
text-indent文本缩进
text-transform文本转换(了解)
text-transform:uppercase字母大写|lowercase字母小写|capitalize首字母大写
1.3css字体
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
字体大小font-size
字体样式font-style:normal | italic
字体粗细font-weight:normal 标准| bold 粗体 | lighter 细体
行高
line-height
1.4css链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
顺序a:link=a:visited>a:hover>a:active
1.5css列表样式 针对ul
list-style:none;
list-style-type:circle|square
list-style-image:url("xxx")
1.6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p{border-top:1px solid #ccc;}
1.7表格
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性,th里的字比td粗
<table>
<tbody>
<tr>
<th>我是th<th>
<td>我是td<td>
<tr>
<tbody>
<table>
colspan:value //跨越的列
rowspan:value //跨越的行
1.8轮廓属性
轮廓(outline) 绘制元素周围的一条线,位于边框边缘外,起突出元素的作用
1.9透明
opacity:0~1
visibility:hidden|visible
background:rgba(255,0,0,0~1)背景颜色透明
2.css样式的继承
继承:是子元素对父元素的继承
2.1width和height
width
如果子元素不设置宽度,默认情况继承父元素宽度(块元素)
height
如果父元素不设置高度,默认父元素继承子元素高度
2.2css可以继承的属性
文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:currsor鼠标光标样式,visibility透明
2.我掌握了的
1.1 css背景
1.2 css文本
1.3 css字体
1.4 css链接
1.5 css列表样式
1.6 边框
1.7表格
1.1css背景
背景颜色：background-color
背景图片：background-image
背景重复：background-repeat
背景吸附：background-attachment：fixed 固定| scroll 滚动
背景位置:background-position: x y
background: color image repeat attachment position(颜色 图片 重复 吸附 位置)
background-size: x y;
background-size:cover;相当于background-size:100% 100%;
1.2css文本
color:设置字体的颜色
十六进制值 h1 {color:#00ff00;}
一个RGB值 h2 {color:rgb(255,0,0);}
颜色的名称 body {color:red;}
text-align文本对齐方式
text-align: right|left|center
1.3css字体
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
字体大小font-size
字体样式font-style:normal | italic
字体粗细font-weight:normal | bold | lighter
行高
line-height
1.6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
border： width style color
p{border:1px solid #333}
*边框-单独设置各边
p{border-top:1px solid #ccc;}
1.7表格
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
1.8轮廓属性
轮廓(outline) 绘制元素周围的一条线,位于边框边缘外,起突出元素的作用
1.9透明
opacity:0~1
visibility:hidden|visible
background:rgba(255,0,0,0~1)背景颜色透明
2.css样式的继承
继承:是子元素对父元素的继承
3.我掌握不好的
1.2css文本
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize
text-decoration文本修饰
text-decoration: underline|overline|line-through
text-indent文本缩进
1.4css链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
顺序a:link=a:visited>a:hover>a:active
1.5css列表样式 针对ul
list-style:none;
list-style-type:circle|square
list-style-image:url("xxx")
1.7表格
border-collapse 属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
<table>
<tbody>
<tr>
<th>我是th<th>
<td>我是td<td>
<tr>
<tbody>
<table>
colspan:value //跨越的列
rowspan:value //跨越的行
2.css样式的继承
继承:是子元素对父元素的继承
2.1width和height
width
如果子元素不设置宽度,默认情况继承父元素宽度(块元素)
height
如果父元素不设置高度,默认父元素继承子元素高度
2.2css可以继承的属性
文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
列表相关属性:list-style
表格相关属性:border-collapse
其他属性:currsor鼠标光标样式,visibility透明
